JavaScript - Iframe Hiding Submenu

Hello! Please take a look at my site:

Test Flyout Lists

As I hover over Item 15, I want it to be like, "Okay, this list I'm about to display is going to be too long, so let's disregard the 'top: 10px' line in the CSS and instead have the submenu sit with its last item right at the bottom aligned with the bottom of the gradient." That way, we know for sure that the submenu will not reach past the height of the body, and the last item will be visible. The bottom of the last item's cell should "hug" the bottom of the page/gradient. Can I do this in JavaScript?

I need some help with a drop down menu. I am working on a site with a left menu that slides out, and I've converted it to the top to drop down. So far, it is working ok, but the submenu items need to be below the parent, preferably left aligned. I have played with it a bit and so far can't seem to achieve what I want. See below where I'm clicking Resources and the menu is way too high and over to the right. Thanks in advance for any help. : )



Code:

//** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/bl...height-script/

var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["sidebar-a", "content"]

ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}

ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")



 /************************************************************************************************************
 (C) www.dhtmlgoodies.com, November 2005
 
 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. 
 
 Terms of use:
 You are free to use this script as long as the copyright message is kept intact. However, you may not
 redistribute, sell or repost it without our permission.
 
 Thank you!
 
 www.dhtmlgoodies.com
 Alf Magne Kalleland
 
 ************************************************************************************************************/

 var timeBeforeAutoHide = 700; // Microseconds to wait before auto hiding menu(1000 = 1 second)
 var slideSpeed_out = 10; // Steps to move sub menu at a time ( higher = faster)
 var slideSpeed_in = 10;
  
 
 var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster)
 var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster)
 
 var showSubOnMouseOver = true; // false = show sub menu on click, true = show sub menu on mouse over
 var fixedSubMenuWidth = false; // Width of sub menu items - A number(width in pixels) or false when width should be dynamic
 
 var xOffsetSubMenu = 0;  // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
 
 var slideDirection = 'right'; // Slide to left or right ?
 
 /* Don't change anything below here */
 
 var activeSubMenuId = false;
 var activeMainMenuItem = false;
 var currentZIndex = 1000;  
 var autoHideTimer = 0;
 var submenuObjArray = new Array();
 var okToSlideInSub = new Array();
 var subPositioned = new Array();
 

 function stopAutoHide()
 {
  autoHideTimer = -1;
 }
 
 function initAutoHide()
 {
  autoHideTimer = 0;
  if(autoHideTimer>=0)autoHide();
 }
 
 function autoHide()
 {
  
  if(autoHideTimer>timeBeforeAutoHide)
  {
   
   if(activeMainMenuItem){
    activeMainMenuItem.className='';
    activeMainMenuItem = false;
   }
   
   if(activeSubMenuId){
    var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
    showSub();
   }
  }else{
   if(autoHideTimer>=0){
    autoHideTimer+=50;
    setTimeout('autoHide()',50);
   }
  }
 } 
 
 function getTopPos(inputObj)
 {  
   var returnValue = inputObj.offsetTop;
   while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
   return returnValue;
 }
 
 function getLeftPos(inputObj)
 {
   var returnValue = inputObj.offsetLeft;
   while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
   return returnValue;
 }
 
 function showSub()
 {
  var subObj = false;
  if(this && this.tagName){
   var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
   okToSlideInSub[numericId] = false;
   var subObj = document.getElementById('subMenuDiv' + numericId);
   if(activeMainMenuItem)activeMainMenuItem.className='';
   if(subObj){
    if(!subPositioned[numericId]){
     if(slideDirection=='right'){
      subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
     }else{
      subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
      
     }
     submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
     subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
     subPositioned[numericId] = true;
    }    
    subObj.style.visibility = 'visible';
    subObj.style.zIndex = currentZIndex;
    currentZIndex++; 
    this.className='activeMainMenuItem';
    activeMainMenuItem = this;
   }
  }else{
   var numericId = activeSubMenuId;
  }
  if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
  if(numericId!=activeSubMenuId && this && subObj){
   subObj.style.width = '0px'; 
   slideMenu(numericId,slideSpeed_out);
   activeSubMenuId = numericId;
  }else{
   if(numericId!=activeSubMenuId)activeSubMenuId = false;
  }
  if(showSubOnMouseOver)stopAutoHide();
 }
 
 function slideMenu(menuIndex,speed){
  var obj = submenuObjArray[menuIndex]['divObj'];
  var obj2 = submenuObjArray[menuIndex]['ulObj'];
  var width = obj.offsetWidth + speed;
  if(speed<0){
   if(width<0)width = 0;
   obj.style.width = width + 'px';
   if(slideDirection=='left'){
    obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
    obj2.style.left = '0px';
   }else{
    obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' 
   }
   if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
    obj.style.visibility = 'hidden';
    obj.style.width = '0px';
    if(activeSubMenuId==menuIndex)activeSubMenuId=false;
   }
   
  }else{
   if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
   if(slideDirection=='left'){
    obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
    obj2.style.left = '0px';
   }else{
    obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' 
   }  
   
   obj.style.width = width + 'px';
   if(width<submenuObjArray[menuIndex]['width']){
    setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
   }else{
    okToSlideInSub[menuIndex] = true;
   }
  }
 }
 function resetPosition()
 {
  subPositioned.length = 0;
 }
   
 function initLeftMenu()
 {
  var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
  var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1'));
  if(!browserVersion)browserVersion=1;
  
  var menuObj = document.getElementById('dhtmlgoodies_menu'); 
  var mainMenuItemArray = new Array();
  
  var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
  while(mainMenuItem){
   if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
    mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
    var aTag = mainMenuItem.getElementsByTagName('A')[0];
    if(showSubOnMouseOver)
     aTag.onmouseover = showSub; 
    else
     aTag.onclick = showSub; 
   }
   mainMenuItem = mainMenuItem.nextSibling;
  }  
  
  var lis = menuObj.getElementsByTagName('A');
  for(var no=0;no<lis.length;no++){
   if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
   lis[no].onmouseout = initAutoHide;
   lis[no].onmousemove = stopAutoHide;
  }
    
  for(var no=0;no<mainMenuItemArray.length;no++){
   var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0];
   if(sub){
    mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
    var div = document.createElement('DIV');
    div.className='dhtmlgoodies_subMenu';
    document.body.appendChild(div);
    div.appendChild(sub);
    if(slideDirection=='right'){
     div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
    }else{
     div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
    }
    div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
    div.id = 'subMenuDiv' + (no+1);
    sub.id = 'submenuUl' + (no+1);
    sub.style.position = 'relative'; 

    if(navigator.userAgent.indexOf('Opera')>=0){
     submenuObjArray[no+1] = new Array();
     submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
     submenuObjArray[no+1]['divObj'] = div;
     submenuObjArray[no+1]['ulObj'] = sub;
     submenuObjArray[no+1]['width'] = sub.offsetWidth;
     submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
    }
    sub.style.left = 1 - sub.offsetWidth + 'px'; 
    
    
    
    if(browserVersion<7 && isMSIE)div.style.width = '1px'; 
     
    if(navigator.userAgent.indexOf('Opera')<0){
     submenuObjArray[no+1] = new Array();
     submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
     submenuObjArray[no+1]['divObj'] = div;
     submenuObjArray[no+1]['ulObj'] = sub;
     submenuObjArray[no+1]['width'] = sub.offsetWidth;
     
     
     
     submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
     if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
    } 

    if(!document.all)div.style.width = '1px';   
     
   }   
  }
  
  menuObj.style.visibility = 'visible';  
  window.onresize = resetPosition;
 }
 
 
 window.onload = initLeftMenu;

Ok, first let me explain what I try to do.

I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.

When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.

So, here is the code I have so far:
Code:

<div id="topnav">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="#">Over Meves</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Historie</a></li>
                    <li><a href="#" class="suba">Onze mensen</a></li>
                    <li><a href="#" class="suba">Werkzijze</a></li>
                </ul>
            </li>
            <li>
                <a href="vervolg3.html">Disciplines</a>
                <ul class="submenu">
                    <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
                    <li><a href="#" class="suba">Elektrotechniek</a></li>
                    <li><a href="#" class="suba">Sanitaire techniek</a></li>
                    <li><a href="#" class="suba">Energiebesparingstechniek</a></li>
                    <li><a href="#" class="suba">Bouwfysica en geluid</a></li>
                    <li><a href="#" class="suba">Diensten energiebesparing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Expertise</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> 
                    <li><a href="#" class="suba">Zorg & Welzijn</a></li> 
                    <li><a href="#" class="suba">Milieu & Energie</a></li> 
                    <li><a href="#" class="suba">Beheer & Onderhoud</a></li> 
                    <li><a href="#" class="suba">EPA & EPC</a></li> 
                    <li><a href="#" class="suba">Legionella beheersing</a></li>
                </ul>          	
            </li>
            <li>
                <a href="#">Contact</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Adres & route</a></li> 
                    <li><a href="#" class="suba">Werken bij</a></li>
                </ul>
            </li>
        </ul>
    </div>

The javascript:
Code:

<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{  jsddm_close();
   ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{  
	if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{  
   $('#topnav > ul > li').bind('click', jsddm_open)
   $('#topnav ul li a.suba').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a.suba').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $("ul.submenu > li > a").each(function () {
         var currentURL = document.location.href;
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
	   $('a').each(function () {
		var currentURL = document.location.href;
		var thisURL = $(this).attr('href');
		if (currentURL = thisURL) {
			$(this).parents('ul.submenu').css('display', 'block');	
		}
	//	else {
		//	$(this).parents('ul.submenu').css('display', 'none');	
	//	}
	   }); 
});
</script>

And the css:
Code:

#topnav ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}
#topnav ul li 
{
	float: left;
	margin: 0;
	padding: 0;
}
#topnav ul li a
{
	padding: 5px 15px;
	color: #00537F;
	text-decoration: none;
	display: block;
	font-weight: bold;
}
#topnav ul li a:link
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:visited
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:hover
{
	color: #FFF;
	text-decoration: underline;
}
#topnav ul li a.active
{
	text-decoration: underline;
	color: #FFF;
}
/*#topnav ul li:hover .submenu
{
	display:block;
}*/
#topnav ul li ul.submenu
{
	float: left;
	padding: 4px 0;
	position: absolute;
	left: 0;
	top: 24px;
	display: none;
	background: #e0e0e0;
	color: #00537F;
}
#topnav ul li ul.submenu a
{
	display: inline;
	color: #00537F;
	padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
	border-right-width: 1px; 
	border-right-style: solid;
	border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
	border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
	color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
	color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu li.active
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu a.active
{
	text-decoration: underline;
	color: #00537F;
}

Hope I explained it clear.

Thanks for any help.

I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu.
Now the active page is hightlighted, but the parent isn't (if the active page is a submenu).
So what I want is that when a subitem is active, also it's parent should be active, for example:

main_item_1
main_item_2
--sub_item_1
--sub_item_2

In this case when sub_item_2 is active, also main_item_2 should be.

I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it.

So here is the code I use:
Code:

$('#topnav ul li ul.submenu li a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = decodeURIComponent(document.location.href);
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
       $('#topnav > ul > li > a').each(function(){
      var currURL = decodeURIComponent(document.location.href);
	  var myHref= $(this).attr('href');
      if (currURL.match(myHref)) {
			$(this).addClass('active');
                        //$('a', $('.active').parents("li:last")).addClass('active');		                   
             	        $(this).parent().find("ul.submenu").css('display', 'block');
	  }
	});

The middle group code is for the subitem, so the code to make the parent also active should be there I think.

When I add the following line to the middle group (after the $(this).parents part):
Code:

$(this).parents("#topnav ul li").addClass('parent');

I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent.

Please help.

Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.

Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.
We have a central area which can be longer or shorter depending on the forum.

Hi all,

I hope you can help

I have some code which:

1) Opens a URL (e.g. google.com) in a hidden iframe, then
2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded...

This works exactly as I need.

What I'd like to do is the following:

1) Open a URL (e.g. google.com) in a hidden iframe, then
2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe
3) The address bar of the full-screen iframe should be my domain (obviously!)

Here's what I have so far...

Hidden iframe -> New URL Code:

Code:

<html>
<body>
	<script type="text/javascript">

		var page_body = document.getElementsByTagName('body');
		var myframe = document.createElement('iframe');
		var id = Math.random();
		myframe.setAttribute('id', 'myFrame'+id);
		myframe.src = 'http://google.com';  //First open Google in hidden iframe 
		myframe.setAttribute('frameborder', '0')
		myframe.setAttribute('width', '0');
		myframe.setAttribute('height', '0');
		if (myframe.attachEvent)
			{
				myframe.attachEvent('onload', function()
					{
						top.location = 'http://yahoo.com';  //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html 
					});
					}
		else if (myframe.addEventListener)
			{
				myframe.addEventListener('load', function()
					{
						top.location = ('http://yahoo.com');
					}, false);
					}
		page_body[0].appendChild(myframe);

	</script>
</body>
</html>

I have an example of some code which displays the full screen iframe, but my problem is...

...I can't figure out how to redirect to this after the hidden iframe has loaded

Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded:

Code:

<html>
<head>
	<script type="text/javascript">
 		function sendParams() {
 			document.body.style.overflow = "hidden";
 		}
	</script>
</head>
<body>
	 <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> 
	<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>

I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas.

If you can help, you'll have some serious gratitude and good karma thrown your way!

Best wishes, and thanks in advance,
Paul

Hi there everybody,
I've got this problem which I can't solve myself...

I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe.

Unfortunally I can't get this to work... Will somebody please help me?

I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html
it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page:
http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html
which is not very clean at all, this is the javascript that i found that at least works:

Child iframe script:

Code:

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

Parent iframe Script:

Code:

<script type="text/javascript">
(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}
	var f = getQval('frame'), s = getQval('src');
	if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
		frames[f].location.href = s;
	}
})();
</script>

Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance.

Hello All,

I am new to this forum and to web development,
I am trying to hide div based on conditions..

This is the scenario:
the div should never appear again for that user, until i write another server side message.

lets say i write a message today saying " we are really sorry, but the website will be don for one hour today"

and you login today, the message will be displayed, when you click close its closed, it wont appear again for you, until i post another message,

but each message would have an expiration date, if i post a message which would be displayed to every user, i should decide how long i want it displayed, maybe 24 hrs, so in 24 hrs the message should no longer display.


Please help me out on this...I need a solution fast...

Thanks

Hi, I wondering if anyone can help:

I've got rows of divs in this manner

<div class="row">This is row 1 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 1</p></div>
<div class="row">This is row 2 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 2</p></div>
<div class="row">This is row 3 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 3</p></div>
<div class="row">This is row 4 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 4</p></div>

I wish to have some javascript to toggle the hidden row for its corresponding link.

Please can someone help point me to an example if available. Any help will be greatly appreciated

Hi all,

I have some javascript that when a link is clicked hides the div and when it is clicked again shows the div... what I want to do is reverse that, so it is intially hidden. I have tried changing the display none to different parts but it always shows on load:
Code:

function toggleDiv (divid) {
	if (document.getElementById (divid).style.display == 'none') {
		document.getElementById (divid).style.display = 'block';
	} else {
		document.getElementById (divid).style.display = 'none';
	}
}

Code:

<a href="javascript:;" class="showmorelink" onmousedown="toggleDiv('checks');">Safeguarding</a>

Can anyone advise?

Many thanks,

Greens85

Hi,

If I want to hide a title / heading if a field below is not filled in, what would be the js for that?

I have an "Attachments" h2 heading and three following fields for the client to add up to three attachments. But if none are filled in I want the h2 heading to not display.

This is what I have so far:

var attachment1 ='{tag_attachment 1}'
var attachment2 ='{tag_attachment 2}'
var attachment3 ='{tag_attachment 3}'

===
if(attachment1 == '') {
document.getElementById('attachment1').style.display = 'none';
}

if(attachment2 == '') {
document.getElementById('attachment2').style.display = 'none';
}

if(attachment3 == '') {
document.getElementById('attachment3').style.display = 'none';
}

===
<div id="attachments">
<h2>Attachments</h2>
<p>{tag_attachment 1}<br />
{tag_attachment 2}<br />
{tag_attachment 3}</p>
</div>


This should take care of the three fields, but how do I tie in the heading too?

Thank you!

I have this simple checkbox menu
http://myresearchfinder.com/dev/checktest.html

If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top. Any ideas?

OK, I've been working on this for quite some time now, and have it working, almost. lol. Hopefully someone here can lend a fresh pair of eyes to what I'm doing wrong (bare in mind, I don't know javascript very well at all). I'm creating a simple faq page for my site, but there's a lot of questions, so instead of lumping it all in at once, I'm using divs to store answers in that hide and reappear as my guests click on a question they want to see an answer too. ok, heres the basics of the code I'm using so far:

Code:

<script type="text/javascript">
function showit(boxName) 
	{
	theBox = document.getElementById(boxName);
	theBox.className = "boxVisible";
	}
</script>
<script type="text/javascript">
function hideit(boxName) 
	{
	theBox = document.getElementById(boxName);
	theBox.className = "boxHidden";
	}
</script>

That, is in the head section of my page. Then for the links and such I have:

Code:

<div><a href="link.html" onclick="showit('s11'); hideit('s12'); hideit('s13'); hideit('s14'); hideit('s15'); hideit('s16'); return false;">Do you shoot in color, or black and white?</a></div>
	<div id="s11">
		&nbsp;&nbsp;&nbsp;&nbsp; We shoot in color.&nbsp; 
		Color prints can be printed in black and white and come out perfectly 
		just as though they were shot in black and white.&nbsp; However if you 
		shoot in black and white, you can't print it in color.&nbsp; For this 
		reason we shoot all of our images in full color.
	</div>

obviously there are more questions that that, but I don't want to fill this screen with all of them either.

Ok, heres what its doing, when you click on the first question, no problem, the answer opens right up, appears where it should be, everythings great, except, that its also following the link and leaving the page. I get to a 404 error telling me that link.html does not exist on my server. So, apparently the

Code:

return false

isnt working.... what do I need to do here, I'm now lost...

OH, I should include the CSS I'm using for these DIV's so you can see what the javascript is calling on for them:

Code:

.boxVisible 
	{
	display: block;
	position:relative;
	left:25px;
	width:755px;
	overflow:auto;
	}
.boxHidden 
	{
	display: none;
	}

Thanks to ANYONE that can help out!

I don't mean for this to be an advertisement, and if its not allowed by all means I'll remove it from this post, but if you want to see my exact code that I'm using, you'll find the page I'm working on at http://www.smmahoney.com/index.php?page=faq