Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Drop down/ Overlapping Content script

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    469
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default Drop down/ Overlapping Content script

    1) Script Title: Drop down/ Overlapping Content script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.htm

    3) Describe problem:
    how to make the dropdown content width 100%?
    now it look like the screenshot below:
    Click image for larger version. 

Name:	1.jpg 
Views:	176 
Size:	15.5 KB 
ID:	5033
    Click image for larger version. 

Name:	2.jpg 
Views:	161 
Size:	14.2 KB 
ID:	5034

    And the layout i try to find out how is like this:
    Click image for larger version. 

Name:	3.jpg 
Views:	159 
Size:	26.9 KB 
ID:	5035


    This is the online version

    Or is there any suggestion to make menu with submenu like that, don't be hesitate to tell me.
    Thank you so much.
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    davelf (04-13-2013)

  4. #3
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    469
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    Wow, what kind of sorcery is this.
    You are the best Vic, thank you so much.

    I'll implement this and give the update if have another problem.
    _____________________

    David Demetrius // davejob
    _____________________

  5. #4
    Join Date
    Dec 2015
    Location
    Abuja Nigeria
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Similar problem here

    Pease am have similar problem as the below and would like to pls assist me. Thanks

    Quote Originally Posted by davelf View Post
    1) Script Title: Drop down/ Overlapping Content script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.htm

    3) Describe problem:
    how to make the dropdown content width 100%?
    now it look like the screenshot below:
    Click image for larger version. 

Name:	1.jpg 
Views:	176 
Size:	15.5 KB 
ID:	5033
    Click image for larger version. 

Name:	2.jpg 
Views:	161 
Size:	14.2 KB 
ID:	5034

    And the layout i try to find out how is like this:
    Click image for larger version. 

Name:	3.jpg 
Views:	159 
Size:	26.9 KB 
ID:	5035


    This is the online version

    Or is there any suggestion to make menu with submenu like that, don't be hesitate to tell me.
    Thank you so much.

  6. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,953
    Thanks
    25
    Thanked 575 Times in 555 Posts
    Blog Entries
    33

    Default

    Ok, post a link to *your test page*, clearly showing us what you've already tried, and somebody can take a look.

    We only need the pertinent code - just the menu scripts, markup and CSS. The smaller and leaner the test page, the easier it will be on anyone offering to help troubleshoot (nobody like to wade through lots of extra code).
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #6
    Join Date
    Dec 2015
    Location
    Abuja Nigeria
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    it works fine when i view with my computer but not responsive with phones. I looks like these two images below.
    Click image for larger version. 

Name:	dd1.jpg 
Views:	19 
Size:	15.5 KB 
ID:	5771Click image for larger version. 

Name:	dd2.jpg 
Views:	19 
Size:	26.9 KB 
ID:	5772
    Click image for larger version. 

Name:	dd1.jpg 
Views:	19 
Size:	15.5 KB 
ID:	5771

    This is css code i use for my dropdown
    Code:
    #subcontent {
        background-color:transparent;
      border-top: 45px solid transparent;
           text-align:center;
        max-width: 940px;
      
      position:absolute; visibility: hidden; z-index:1000;
    }
    #subcontentpic {
        
        background-color:CornflowerBlue;
       width:300px;
        height:340px;     
        float:left;
    }
        
    #subcontentletter {
        width:640px;
       height:340px;
        float:left;
        background-color:CadetBlue;
        	 	 
    }
    #subcontentfooter {
        background-color:DarkGray;
          width:940px;
        height: 50px;
       float:left;
        text-align:center;
       margin-top: 5px;
      margin-bottom: 5px;
    }
    Script: http://www.dynamicdrive.com/dynamici...lapcontent.htm
    Last edited by Beverleyh; 12-31-2015 at 05:38 PM. Reason: Formatting

  8. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,953
    Thanks
    25
    Thanked 575 Times in 555 Posts
    Blog Entries
    33

    Default

    So this is now a question to do with responsiveness.

    Unfortunately the images aren't helping much, for a few reasons;
    - the images illustrate the problem of the original poster
    - the images illustrate a problem on desktop and not on mobile
    - we can't see the markup of an image
    - we can't check that the viewport meta tag is correctly applied
    - we can't manipulate an image to check responsive behaviour

    In short, we can't troubleshoot an image.

    The CSS provided helps a little, but is pretty useless without the markup that it applies to. I do not see anything in there relating to mobile view either. Where is your CSS showing what you've tried to fix the problem in a small screen environment? I would expect to see widths that are not fixed pixels and media queries.

    The script is not primarily a responsive script (it was created a few years before mobile browsing became commonplace), but that's not to say that it cannot be made to work in a responsive setup. The demo page doesn't really help because there is too much extra code to filter out on the live page and there will not be any adaptations for mobile that I mentioned earlier. I can make the following suggestions but we cannot provide any specific help without a link to *your test page* (just the pertinent code stripped back to the menu, that illustrates the problem) and *your code* (your attempt to make this script suitable for a responsive environment);

    - use media queries to define different mobile and desktop styles
    - use fluid values such as % and vw rather than fixed values such as px an em (hint: full width would be 100%)
    - make sure the viewport meta tag in in place in the <head>

    We can offer suggestions based on *your code* but it's unlikely that somebody will write the code for you - we are volunteers with full time jobs and family lives and the few of us who do help have a very limited amount of time. Providing the information to facilitate our helping you will increase your chances of getting help, but we expect you to do the leg work first, and show your attempt at fixing your own problems (we have our own to fix).
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  9. #8
    Join Date
    Dec 2015
    Location
    Abuja Nigeria
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Please assist me.
    I have my website running in localhost at the moment

    I have fadeslideshow on it and it is working except that it forces a gap between my banner and the slide as shown in these pictures below
    Click image for larger version. 

Name:	Screen Shot 01-01-16 at 11.00 AM.jpg 
Views:	20 
Size:	20.2 KB 
ID:	5773
    Click image for larger version. 

Name:	Screen Shot 01-01-16 at 11.01 AM.jpg 
Views:	19 
Size:	20.1 KB 
ID:	5774
    Click image for larger version. 

Name:	Screen Shot 01-01-16 at 11.02 AM.jpg 
Views:	23 
Size:	19.5 KB 
ID:	5775

    I notice that it creates that white colour between banner and the slide as resolution changes

    This is my html code:
    Code:
    defined('_JEXEC') or die;
    
    $app             = JFactory::getApplication();
    $doc             = JFactory::getDocument();
    $user            = JFactory::getUser();
    $this->language  = $doc->language;
    $this->direction = $doc->direction;
    
    // Getting params from template
    $params = $app->getTemplate(true)->params;
    
    // Detecting Active Variables
    $option   = $app->input->getCmd('option', '');
    $view     = $app->input->getCmd('view', '');
    $layout   = $app->input->getCmd('layout', '');
    $task     = $app->input->getCmd('task', '');
    $itemid   = $app->input->getCmd('Itemid', '');
    
    
    if($task == "edit" || $layout == "form" )
    {
    	$fullWidth = 1;
    }
    else
    {
    	$fullWidth = 0;
    }
    
    // Add JavaScript Frameworks
    JHtml::_('bootstrap.framework');
    $doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/template.js');
    $doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/jquery.touchSwipe.min.js');
    $doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/dropdowncontentresp.js');
    $doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/fadeslideshow.js');
    
    
    // Add Stylesheets
    $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
    
    // Load optional RTL Bootstrap CSS
    JHtml::_('bootstrap.loadCss', false, $this->direction);
    
    // Adjusting content width
    if ($this->countModules('position-7') && $this->countModules('position-8'))
    {
    	$span = "span6";
    }
    elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
    {
    	$span = "span9";
    }
    elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
    {
    	$span = "span9";
    }
    else
    {
    	$span = "span12";
    }
    
    // Logo file or site title param
    
    ?>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
    <head>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<jdoc:include type="head" />
    	<?php // Use of Google Font ?>
    	<?php if ($this->params->get('googleFont')) : ?>
    		<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>' rel='stylesheet' type='text/css' />
    		<style type="text/css">
    			h1,h2,h3,h4,h5,h6,.site-title{
    				font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName')); ?>', sans-serif;
    			}
    		</style>
    	<?php endif; ?>
    	<?php // Template color ?>
    	<?php if ($this->params->get('templateColor')) : ?>
    	<style type="text/css">
    		body.site
    		{
    			border-top: 3px solid <?php echo $this->params->get('templateColor'); ?>;
    			background-color: <?php echo $this->params->get('templateBackgroundColor'); ?>
    		}
    		a
    		{
    			color: <?php echo $this->params->get('templateColor'); ?>;
    		}
    		.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
    		.btn-primary
    		{
    			background: <?php echo $this->params->get('templateColor'); ?>;
    		}
    		.navbar-inner
    		{
    			-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
    			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
    			box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
    		}
    	</style>
    	<?php endif; ?>
    	<!--[if lt IE 9]>
    		<script src="<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script>
    	<![endif]-->
      
      
    <style>
    
    #fadeshow4 .gallerylayer img{ /* make all images inside fadeshow4 scale to 100% of slideshow width */
    
    height: auto !important;
    	width: auto !important;
    	
    	vertical-align: bottom;
      margin-top: 0 !important; /* ensure a slide image is always at the top of the #banner container */
    }
    
    </style>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Please keep this notice intact
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
        dimensions: ["100%", 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
    
      imagearray: [
    		["http://localhost/myjoomla/images/banners/latestlogo4.png","", "", "Information about banner image A goes here"],
    		["http://localhost/myjoomla/images/banners/1.png","", "", "Information about banner image A goes here"],
    		["http://localhost/myjoomla/images/banners/2.jpg","", "", "Information about banner image A goes here"],
    		["http://localhost/myjoomla/images/banners/3.jpg"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	//this code targets a hotspot on mouseover for pop-up descriptions and resizes the show based upon width of the parent div
    	oninit: function(){
    		var descvis, g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, h, mm;
    		$wrap.css({height: (h = $wrap.width() * 330 / 940)});
    		if((mm = $wrap.data('mm'))){$wrap.unbind('mousemove', mm).unbind('mouseleave', $wrap.data('ml'));}
    		else{jQuery(window).resize(function(){s.oninit.apply(g);});}
    		$wrap.data({mm: function(e){
    			var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,
    			evt = x < left && y > top? 'mouseenter' : y <= top && descvis || !descvis? 'mouseleave' : null;
    			evt && $wrap.trigger(evt);
    			descvis = evt !== 'mouseleave';
    			s.ismouseover = true;
    		}, ml: function(){descvis = false;}});
    		$wrap.trigger('mouseleave').mousemove($wrap.data('mm')).mouseleave($wrap.data('ml'));
    		this.showhidedescpanel('hide', 0);
    		$desc.find('div').css({width: $desc.width() - 8});
    	},	
    	togglerid: ""
    })
    
    </script>
       
    </head>
    
    <body class="site <?php echo $option
    	. ' view-' . $view
    	. ($layout ? ' layout-' . $layout : ' no-layout')
    	. ($task ? ' task-' . $task : ' no-task')
    	. ($itemid ? ' itemid-' . $itemid : '')
    	. ($params->get('fluidContainer') ? ' fluid' : '');
    	echo ($this->direction == 'rtl' ? ' rtl' : '');
    ?>">
    
    	<!-- Body -->
    	<div class="body">
    		<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
    			<!-- Header -->
    			<header class="header" role="banner">
    				<div class="header-inner clearfix">
    					<a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
    						
    						<?php if ($this->params->get('sitedescription')) : ?>
    							<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
    						<?php endif; ?>
    					</a>
    					<div class="header-search pull-right">
    						<jdoc:include type="modules" name="position-0" style="none" />
    					</div>
    				</div>
    			</header>
    			<?php if ($this->countModules('position-1')) : ?>
    					
    					<div id="bannerhead">
                          
              
                          
                          <div class="p2bg"></div>
                          
                      
    				
    						<jdoc:include type="modules" name="position-1" style="none" />
                          
    					</div>
    							<?php endif; ?>
    			<jdoc:include type="modules" name="banner" style="xhtml" />
    			<div class="row-fluid">
    				<?php if ($this->countModules('position-8')) : ?>
    					<!-- Begin Sidebar -->
    					<div id="sidebar" class="span3">
    						<div class="sidebar-nav">
    							<jdoc:include type="modules" name="position-8" style="xhtml" />
                              
    
    						</div>
    					</div>
    					<!-- End Sidebar -->
    				<?php endif; ?>
    				<main id="content" role="main" class="<?php echo $span; ?>">
    					<!-- Begin Content -->
    					<jdoc:include type="modules" name="position-3" style="xhtml" />
    					<jdoc:include type="message" />
    					<jdoc:include type="component" />
    					<jdoc:include type="modules" name="position-2" style="none" />
    					<!-- End Content -->
     
    				</main>
    				<?php if ($this->countModules('position-7')) : ?>
    					<div id="aside" class="span3">
    						<!-- Begin Right Sidebar -->
    						<jdoc:include type="modules" name="position-7" style="well" />
    						<!-- End Right Sidebar -->
    					</div>
    				<?php endif; ?>
    			</div>
    		</div>
    	</div>
    	<!-- Footer -->
    	<footer class="footer" role="contentinfo">
    		<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
    			<hr />
    			<jdoc:include type="modules" name="footer" style="none" />
    			<p class="pull-right">
    				<a href="#top" id="back-top">
    					<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
    				</a>
    			</p>
    			
    		</div>
    	</footer>
    	<jdoc:include type="modules" name="debug" style="none" />
    </body>
    </html>
    Last edited by Beverleyh; 01-01-2016 at 11:47 AM. Reason: Formatting

  10. #9
    Join Date
    Dec 2015
    Location
    Abuja Nigeria
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    And here are lines of fadeslideshow.js
    Code:
    /* Ultimate Fade-in slideshow (v2.6)
    * Last updated: May 24th, 2010. This notice must stay intact for usage 
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    //Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
    //May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
    //June 22nd, 14' (v2.6): 1) Slideshow now responsive, supporting percentage values in the dimensions[w, h] option. 2) Swipe to navigate added on both desktop and mobile devices. 
    //June 22nd, 14' (v2.6.1): Enabled vertical swiping inside slideshow to scroll page 
    
    var fadeSlideShow_descpanel={
    	controls: [['x.png', 8, 8], ['restore.png', 14, 15.5], ['loading.gif', 54, 55]], //full URL and dimensions of close, restore, and loading images
    	fontStyle: 'normal 11px Verdana', //font style for text descriptions
    	slidespeed: 200 //speed of description panel animation (in millisec)
    }
    
    //No need to edit beyond here...
    
    jQuery.noConflict()
    
    function fadeSlideShow(settingarg){
    	this.setting=settingarg
    	settingarg=null
    	var setting=this.setting
    	setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
    	setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
    	setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
    	setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
    	setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
    	setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
    	setting.isflexible = /\%/.test(setting.dimensions[0]) || /\%/.test(setting.dimensions[1]) // test if one of slideshow dimension sides is a percentage value
    	setting.oninit=setting.oninit || function(){}
    	setting.onslide=setting.onslide || function(){}
    	if (setting.displaymode.randomize) //randomly shuffle order of images?
    		setting.imagearray.sort(function() {return 0.5 - Math.random()})
    	var preloadimages=[] //preload images
    	setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
    	for (var i=0; i<setting.imagearray.length; i++){ //preload images
    		preloadimages[i]=new Image()
    		preloadimages[i].src=setting.imagearray[i][0]
    		if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
    			setting.longestdesc=setting.imagearray[i][3]
    	}
    	var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
    	setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
    	var slideshow=this
    	jQuery(document).ready(function($){ //fire on DOM ready
    		var setting=slideshow.setting
    		var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
    		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
    		setting.dimensions = [ // get dimensions of slideshow in pixels
    			setting.$wrapperdiv.outerWidth(),
    			setting.$wrapperdiv.outerHeight()
    		]
    		if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
    			alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
    			return
    		}
    		setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 
    			.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'DarkOliveGreen'})
    			.appendTo(setting.$wrapperdiv)
    		var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
    			.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
    			.appendTo(setting.$wrapperdiv)
    		var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
    		if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled
    			fadeSlideShow.routines.adddescpanel($, setting)
    			if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
    				setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
    				setting.$descinner.click(function(e){ //asign click behavior to "close" icon
    					if (e.target.className=="close"){
    						slideshow.showhidedescpanel('hide')
    					}
    				})
    				setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
    					slideshow.showhidedescpanel('show')
    					$(this).css({visibility:'hidden'})
    				})
    			}
    			else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
    				setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
    				setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
    			}
    		}
    		setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
    		setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
    
    		if (setting.$wrapperdiv.swipe){ // if swipe enabled (swipe function exists)
    			var swipeOptions={ // swipe object variables
    				triggerOnTouchEnd : true,
    				triggerOnTouchLeave : true,
    				threshold: 75,
    				allowPageScroll: 'vertical',
    				excludedElements:[]
    			}
    
    			swipeOptions.swipeStatus = function(event, phase, direction, distance){
    				var evtparent = event.target.parentNode // check parent element of target image
    				if (phase == 'start' && evtparent.tagName == 'A'){ // cancel A action when finger makes contact with element
    					evtparent.onclick = function(){
    						return false
    					}
    				}
    				if (phase == 'cancel' && evtparent.tagName == 'A'){ // if swipe action canceled (so no proper swipe), enable A action
    					evtparent.onclick = function(){
    						return true
    					}
    				}
    				if (phase == 'end'){
    					var navkeyword = /(right)/i.test(direction)? 'prev' : 'next'
    					if ( /(left)|(right)/i.test(direction) )
    					slideshow.navigate(navkeyword)
    				}
    			}
    
    			setting.$wrapperdiv.swipe(swipeOptions)
    		} // end setting.$wrapperdiv.swipe check
    
    		if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
    			$loadingimg.hide()
    			slideshow.paginateinit($)
    			slideshow.showslide(setting.curimage)
    		}
    		else{ //initialize slideshow when first image has fully loaded
    			$loadingimg.hide()
    			slideshow.paginateinit($)
    			$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
    		}
    		setting.oninit.call(slideshow) //trigger oninit() event
    
    		$(window).bind('resize', function(){ // when window is resized, reposition description panel and images
    			var slideshowdimensions = [
    				setting.$wrapperdiv.outerWidth(),
    				setting.$wrapperdiv.outerHeight()
    			]
    			if (slideshowdimensions[0] == setting.dimensions[0] && slideshowdimensions[1] == setting.dimensions[1]){ // if no change in image dimensions, just exit
    				return
    			}
    
    			setting.dimensions = slideshowdimensions // refresh image dimensions data
    			if (setting.$descpanel && setting.$descpanel.length == 1){ // if description panel enabled for slideshow
    Last edited by Beverleyh; 01-01-2016 at 02:34 PM. Reason: Formatting

  11. #10
    Join Date
    Dec 2015
    Location
    Abuja Nigeria
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Pls let me know if there is any other information am required to give. thanks

Similar Threads

  1. Drop down/ Overlapping Content script
    By MickeyNotD in forum JavaScript
    Replies: 0
    Last Post: 01-26-2012, 06:22 PM
  2. Drop down with Overlapping Content script
    By DDmUSA in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 09-13-2011, 05:31 AM
  3. Drop down/ Overlapping Content script
    By luxury in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-23-2009, 01:15 AM
  4. Drop down/ Overlapping Content script
    By DavidDowle in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-25-2009, 03:09 PM
  5. Drop down/ Overlapping Content script (Mod)
    By Master-T in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 05-25-2007, 01:38 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •