View Full Version : Drop down/ Overlapping Content script

04-12-2013, 02:13 PM
1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.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 (http://www.davejob.com/dynamic/)

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

04-13-2013, 11:07 AM


04-13-2013, 01:12 PM
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.

12-31-2015, 03:13 PM
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/dynamicindex5/overlapcontent.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 (http://www.davejob.com/dynamic/)

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

12-31-2015, 03:44 PM
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).

12-31-2015, 05:45 PM
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 {
border-top: 45px solid transparent;
max-width: 940px;

position:absolute; visibility: hidden; z-index:1000;
#subcontentpic {


#subcontentletter {

#subcontentfooter {
height: 50px;
margin-top: 5px;
margin-bottom: 5px;

Script: http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

12-31-2015, 07:14 PM
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).

01-01-2016, 12:25 PM
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;
$fullWidth = 0;

// Add JavaScript Frameworks
$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";
$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; ?>">
<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">
font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName')); ?>', sans-serif;
<?php endif; ?>
<?php // Template color ?>
<?php if ($this->params->get('templateColor')) : ?>
<style type="text/css">
border-top: 3px solid <?php echo $this->params->get('templateColor'); ?>;
background-color: <?php echo $this->params->get('templateBackgroundColor'); ?>
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,
background: <?php echo $this->params->get('templateColor'); ?>;
-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);
<?php endif; ?>
<!--[if lt IE 9]>
<script src="<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script>


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


<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 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'));}
$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;}});
this.showhidedescpanel('hide', 0);
$desc.find('div').css({width: $desc.width() - 8});
togglerid: ""



<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; ?>
<div class="header-search pull-right">
<jdoc:include type="modules" name="position-0" style="none" />
<?php if ($this->countModules('position-1')) : ?>

<div id="bannerhead">

<div class="p2bg"></div>

<jdoc:include type="modules" name="position-1" style="none" />

<?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" />

<!-- 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 -->

<?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 -->
<?php endif; ?>
<!-- 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'); ?>

<jdoc:include type="modules" name="debug" style="none" />

01-01-2016, 12:27 PM
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...


function fadeSlideShow(settingarg){
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()
if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
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
if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
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'})
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
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.$descinner.click(function(e){ //asign click behavior to "close" icon
if (e.target.className=="close"){
setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
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',

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

} // end setting.$wrapperdiv.swipe check

if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
else{ //initialize slideshow when first image has fully loaded
$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 = [
if (slideshowdimensions[0] == setting.dimensions[0] && slideshowdimensions[1] == setting.dimensions[1]){ // if no change in image dimensions, just exit

setting.dimensions = slideshowdimensions // refresh image dimensions data
if (setting.$descpanel && setting.$descpanel.length == 1){ // if description panel enabled for slideshow

01-01-2016, 12:31 PM
Pls let me know if there is any other information am required to give. thanks

01-01-2016, 01:11 PM
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 changesWait, so this is again diverging from the original thread. You've changed requirements by adding responsiveness and now you're changing requirements again by bringing in another script (FadeSlideShow)? You've moved the goal posts yet again and are making things more difficult to get a bearing on at each turn.

I don't think you appreciate what I've been saying from the start. In order to get help, you need to make it easy for others to help you. People will not want to waste time working through all the extra code in your code dump. There is PHP and template stuff in there too that we don't need and that we can't even use even if we were to copy+paste it to create a page on your behalf. It would be an onerous task for anyone to clean up your code, and setup a page for you, and realistically, it's extremely unlikely to happen.

Sadly, I can't say it any clearer; if you want help, please *post a link to a reduced test page*. We only need the pertinent HTML, CSS and JS, so you will probably need to setup a standalone page for this purpose. We also need to see *your code*, i.e. Your attempted CSS changes that make this script work in mobile resolutions (with media queries and % units). With the information provided in this requested and streamlined format, somebody will be more likely to help you because it will be easier to make suggestions to fix *your code*, and troubleshoot that code live in the browser using the Developer Toolbar..

Unfortunately, the likelihood that anybody will want to take the time to help you at this time, due to all the extra work involved, is very slim.

There is however an alternative option - you could hire somebody to work through your issues and customise the script(s) for you http://www.dynamicdrive.com/forums/forumdisplay.php?29-DD-scripts-Paid-Help