Drop down/ Overlapping Content script

[davelf]

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:



And the layout i try to find out how is like this:



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.

[vwphillips]

try

http://www.vicsjavascripts.org.uk/AA...Up/130408D.htm

[davelf]

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.

[gabbropee]

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

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:



And the layout i try to find out how is like this:



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.

[Beverleyh]

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).

[gabbropee]

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



This is css code i use for my dropdown

#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

[Beverleyh]

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).

[gabbropee]

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




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

This is my html 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>

[gabbropee]

And here are lines of fadeslideshow.js

/* 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

[gabbropee]

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