JavaScript - How To Hide Div So His Content Won't Be Loaded Until He Is Visible?

The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe.

PHP Code:
<script type="text/javascript">

document.getElementById('video').setAttribute('src',address2);

function closeVideo() {
   document.getElementById('video').style.height='0px'; return false;
   document.getElementById('video').setAttribute('src', address2);
   }
function openVideo() {
        document.getElementById('video').style.height='391px'; return false;
        document.getElementById('video').setAttribute('src', address);
}  
</script> 


So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src.

I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari.

Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking

Hello,

As the title states, I have a problem with a function that hides content contained in DIV tags.

Here is the function:

Code:

<script language="JavaScript">
	function toggle(id) {
		var state = document.getElementById(id).style.display;
		
			if (state == 'block') {
				document.getElementById(id).style.display = 'none';
				
			} else {
				document.getElementById(id).style.display = 'block';
			}
		}
</script>

Now, the function itself works perfectly. The problem that I have is that it doesn't work the way I need it to.

I have 4 links that need to show the content of a corresponding DIV section. When a link is clicked I need it to check the state of the other 3 DIVs and hide any that are open, then display the content for the link that was clicked.

I can tell from the function I am using that it already checks the state of any 1 given DIV then acts accordingly (shows if hidden, hides if shown). While this works, I am having a hard time figuring out how to modify it to suit my needs.

I am completely new to JavaScript but I do know some VB so I am not a stranger to programming in general. What I would like is some direction on how to modify the above function to handle the logic I need. I would prefer instruction on how I should go about it so I can get some experience, but any help is appreciated.

Thanks!

PS, I am setting the display property of all 4 DIVs to NONE by default via embedded CSS.

Can anyone tell me how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in?

Here's the code I need to change.

<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});

function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>

drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one.

If I need to post more info to get some help with this please let me know.

Thanks in advance.

Hello,

I have been everywhere still trying to find a solution of this,

I have the following code which loads a new html page into the bottom of my document when the user reaches the bottom of the page.

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
			$("#loading").slideDown();
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
				$("#loading").slideUp();
            });
        }
    }
});

#Loading is a div which contains a loading jpeg which is fixed to the bottom of the screen. This div appears when the user hits the bottom of the screen, and then disappears once the content has fully loaded.

The problem I have is that once the user has loaded all the content that is available. Say I have 'page2.html, page3.html, page4.html' to load one at a time as the user hits the bottom of the screen. I need the loading bar to stay hidden when it tries to load the 'page5' which does not yet exist...

Is this easy to do to alter my javascript code?

I am at a loss with this. Any help would be appreciated. I asked a similar question before but have adapted the code now for the loading bar, just need this little glitch to be fixed.

Thank you!

Website at:

www.jb-design.me/marchupdate2/

so you can see that I mean. (note that the graphics on the website are made by me but are not my work, just for placement)

Hi ya all,
how can I show / hide the content of sub divs based on whether the input is != or =

and be able to repeat this.

I tried to hide the sub divs using , onclick if bla bla = '' ;
Code:

document.getElementById('hideme').innerHTML = '';

which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input

thx

Hello,

I am having the problem that a javascript code runs from the start (Since I open the page). My page works by divs and not web pages so they change by the div visibility.

This is the code for the divs:

Code:

    function toggleVisibility(selectedTab) {

         // Get a list of your content divs
         var content = document.getElementsByClassName('content');

         // Loop through, hiding non-selected divs, and showing selected div
         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'block';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }

So each DIV has a function to make it visible by posting: "toggleVisibility(div);" I am trying to run a javascript code inside this function so that when a certain div becomes available the javascript code autoruns but whenever I post the javascript code inside the function it ignoresthat and runs since the web page loads.

My example code would be:

Code:

function div(){

	toggleVisibility('div2');
	"RUN JAVASCRIPT CODE HERE"
  }

Please help





Reply With Quote




01-22-2015, 09:42 AM #2
felgall View Profile View Forum Posts Visit Homepage

Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts

Stick the code to run when a div becomes visible in a separate function. If the code is different for different divs then create separate functions.

Let's assume that the function containing the code to run when div2 is visible is called func2. Let's also add func1 for when div1 is visible so you can see how it works for different functions for different divs. We'll also assume div3 can use the same function as div1 so you can see how functions can be shared

We then amend the toggle function slightly as follows:

Code:

function toggleVisibility(selectedTab, func) {

         // Get a list of your content divs
         var content = document.getElementsByClassName('content');

         // Loop through, hiding non-selected divs, and showing selected div
         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'block';
                    func(selectedTab);
              } else {
                    content[i].style.display = 'none';
              }
         }

    }

Your code to call the toggle now gets changed to:

Code:

function func1(selectedTab) {
"RUN JAVASCRIPT CODE FOR WHEN selectedTab IS MADE VISIBLE HERE"
}

function func2() {
"RUN JAVASCRIPT CODE FOR WHEN div2 IS MADE VISIBLE HERE"
}

function div(){

	toggleVisibility('div2', func2);


toggleVisibility('div1', func1);

toggleVisibility('div3', func1);
	
  }

Say I have a gallery of 16 images and I have a menu for the gallery to sort the images by Most Viewed, Most Recent, Highest Rating, A-Z, Z-A..

if I were to click 1 of the menu links it will change the order of the images but is it possible to actually show the images MOVING into their new places?

Looking for a jquery solution if possible.. if not still open to anythin that would work

I have seveal flash quizzes set up for my history class.
On the main page right now is just a link to quiz #1. After finishing quiz #1, I want a cookie set that is proof of a finished test. I will then redirect back to the main page that will now show a link to quiz #2. And so on after each quiz.... Any help would be greatly, greatly appreciated.


I want 10 divs that have their visibility set to none. Then based on a cookie I would like to have 1 at at time become visible.

Hi - I hope someone can help me out, I've pored over this problem for hours.

The site is http://www.spacemodel.com. A doctype is set.

The CSS for the navmenu is:

Code:

#menu

{

	background:#262626 url(images/menu_bg.gif) repeat-x top;

	border-bottom:1px solid #230808;

	margin:0 20px;

	height: 49px;

	overflow: hidden;

}

#menu .mleft{background: url(images/menu_side.gif) no-repeat left; width: 100%; height: 100%;}

#menu .mright{background: url(images/menu_side.gif) no-repeat right; width: 100%; height: 100%;}

#menu ul

{

	

	width:960px;

	height:100%;

	overflow:hidden;

}



#menu ul li

{

	list-style:none;

	font-family:Arial, sans-serif;

	font-weight: 700;

	line-height: 49px;

	color:#E6E6E6;

	font-size:11px;

	text-transform:uppercase;

	text-align:center;

	background:url(images/menu_side.gif) no-repeat right 0;

	

	margin:0 0 0 25px;

	padding: 0 25px 0 0;

}



#menu a:link,#menu a:visited,#menu a:active,#menu a:hover

{

	color:#E6E6E6;

	text-decoration:none;

}

Works fine in all other browsers and versions. Affects about 5% of visitors, but one is my client

All help and insight appreciated!

Laurie

Hi,

After much searching and head-scratching (JS is not my forte!), I adapted some code to do what I want - well, almost! So here I am back again. I need to have three divs on a page, with each separate div changing onClick. Below is the code so far.
Two problems:
1) when I open it in a browser window both divs show, then the one disappears when I click on the second div leaving only the numbers. How can I change it so that both divs remain open?

2) Instead of the numbers [1], [2], etc. to change the divs, I'd like to have to just click on one single 'click here for more' to display the next div then return to the first after the last one. Can this be integrated or is it too late?

Thank you!


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>

	<head>
		<title>Switching Divs</title>
		
		<style>
		
#one {width: 500px; height: 100 px; border: 1px solid red; }
#two {width: 500px; height: 100px; border: 1px solid blue; }
#three {width: 500px; height: 100px; border: 1px solid purple; }
#four {width: 500px; height: 100px; border: 1px solid green; }

#five {width: 500px; height: 100 px; border: 1px solid red; }
#six {width: 500px; height: 100px; border: 1px solid blue; }
#seven {width: 500px; height: 100px; border: 1px solid purple; }
#eight {width: 500px; height: 100px; border: 1px solid green; }

#propertyfrance {float: left; color: #666666; font-family: tahoma arial, verdana, sans-serif; font-size: 11px; }

.propertytext {float: left; clear: right; width: 300px; height: 100px; border: 1px solid #000; }

.propertyphoto {float: left; width 200px; height: 100px; border: 1px solid #cceeff; text-align: center; }

#image-switch #one {
padding:0px;
}
#image-switch #two, #image-switch #three, #image-switch #four {
display:none;
}

#image-switch #five {
padding: 0px; }
#image-switch #six, #image-switch #seven, #image-switch #eight {
display:none;
}

</style>

<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four', 'five', 'six', 'seven', 'eight'];
for(var i=0; i<option.length; i++) 
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}

</script>

	</head>
	
	
	<body>

<h4>Switching divs (javascript)</h4>

<div id="image-switch">

<br>OnClick
<br>

<div id="one">
<div class="propertytext">We'll get some text in here for property 1</div>
<div class="propertyphoto"><img src="property1.jpg" height="100" width="180" alt="Property 1"></div>
</div>

<div id="two">
<div class="propertytext">We'll get some text in here for property 2</div>
<div class="propertyphoto"><img src="property2.jpg" height="100" width="180" alt="Property 2"></div>
</div>

<div id="three">
<div class="propertytext">We'll get some text in here for property 3</div>
<div class="propertyphoto"><img src="property3.jpg" height="100" width="180" alt="Property 3"></div>
</div>


<div id="four">
<div class="propertytext">We'll get some text in here for property 4</div>
<div class="propertyphoto"><img src="property4.jpg" height="100" width="180" alt="Property 4"></div>
</div>

<br>
<a onClick="switch1('one');"> [1]</a> 
<a onClick="switch1('two');"> [2]</a>
<a onClick="switch1('three');"> [3]</a>
<a onClick="switch1('four');">  [4]</a>
<br><br>

<div id="five">
<div class="propertytext">We'll get some text in here for property 5</div>
<div class="propertyphoto"><img src="property5.jpg" height="100" width="180" alt="Property 5"></div>
</div>

<div id="six">
<div class="propertytext">We'll get some text in here for property 6</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 6"></div>
</div>

<div id="seven">
<div class="propertytext">We'll get some text in here for property 7</div>
<div class="propertyphoto"><img src="property7.jpg" height="100" width="180" alt="Property 7"></div>
</div>

<div id="eight">
<div class="propertytext">We'll get some text in here for property 8</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 8"></div>
</div>

<br>
<a onClick="switch1('five');"> [5] </a>
<a onClick="switch1('six');"> [6] </a>
<a onClick="switch1('seven');"> [7] </a>
<a onClick="switch1('eight');"> [8] </a>

</div>

	</body>
</html>

Hello everyone, I have tried about 8 different variations of code to try to get this to work properly and cannot accomplish it. Please help if you can figure it out. I have 2 div's that are hidden. each div contains a FLV video, autostart=false. when button 1 is clicked, DIV 1 becomes visible and you may click on video to start playing it. When button 2 is clicked, DIV 1 goes to hidden and DIV 2 becomes visible with video 2. -- Ok so problem is this, the video that was playing in DIV 1 remains playing or at least the audio remains playing. If video 2 is started then you have 1 video source and 2 audio sources playing.

I am trying to get the video in DIV 1 or DIV 2 to STOP or PAUSE when the DIV's state becomes hidden. here is the last code I tried below before frustration over come me. any suggestions would be great.

Robert

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 13px;
	top: 47px;
	visibility: hidden;
}
#Layer2 {
	position:absolute;
	width:600px;
	height:645px;
	z-index:2;
	left: 14px;
	top: 47px;
	visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v;}
}

function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
//-->
</script>
</head>
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/phone.jpg" alt="Button to Display DIV 1" width="27" height="22" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide')" />

<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/spacer.gif" width="60" height="1" /> 

<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/phone.jpg" alt="Button to Display Div 2" width="27" height="22" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show')"/>
 
 <div id="Layer1">VIDEO 1
 <object id="player1" type="application/x-shockwave-flash" width="600" height="600" wmode="transparent" data="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false">
<param name="movie" value="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>
</div>

<div id="Layer2">VIDEO 2
<object id="player2" type="application/x-shockwave-flash" width="600" height="600" wmode="transparent" data="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false">
<param name="movie" value="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>
</div>
</body>
</html>

Hi,

have table with 5 rows. First 2 rows visible. Last 3 rows hidden -

Code:

<tr id="row1" style="display: none">
<tr id="row2" style="display: none">
<tr id="row3" style="display: none">

With onclick would like to make those rows visible to user - how can I do that?

thank - john

Hi

I'm trying to create a questionnaire style series of radio buttons which are hidden and then a different set of radio buttons displayed depending on the previous answer. eg

Q1 Is it a man? (if select yes then display)
Q2 Is he called John? (if no then display)
Q3 Is he called Gary? and so on...


I've been testing using the code below but wondered if anyone had any ideas on how this could be done easily?

Be grateful for any advice, Matt.

Code:

Is it a Man?
<input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggle(this)" /> No

<br />

<p id="continue">
<input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggle(this)" /> No
</p>



<script>
  var continue_button = document.getElementById('continue');
  continue_button.style.visibility = 'hidden';                

  function toggle(switchElement) {
        if (switchElement.value == 'y')
                continue_button.style.visibility = 'visible';
        else
                continue_button.style.visibility = 'hidden';                
  }
</script>

Hello guys,

The following excerpt is part of a very huge project(in terms of code involved). Pardon me if it lacks a bit of context. But I assume I have posted adequate information for understanding the problem.

Code:

var sztitlebar_specific= "<table cellpadding='0px' cellspacing='0px' width='100%'><tr>" +"<td class='tiletitle'>" 
"<img src='../images/alert.gif' onclick='toggleAlerts(\"#ID#\")' alt='Toggle Alerts' title='Toggle Alerts' style='cursor: hand'>" + 
"<input type='checkbox' name='pricesonlycb' onclick='parent.applyFilterPricesOnly(\"#ID#\",pricesonlycb.checked,mypricesonlycb.checked,\"#NAME#\")'>" + 
"<input type='checkbox' name='mypricesonlycb' onclick='parent.applyFilterPricesOnly(\"#ID#\",pricesonlycb.checked,mypricesonlycb.checked,\"#NAME#\")'>" +
"<td class='tiletitle' style='text-align: center'>#NAME#</td>" + 
 </tr></table>";

The onclick event fires without any trouble, and the following function is called.
Code:

function applyFilterPricesOnly(filterid, pricesonly, mypricesonly,filtername){
alert("applyFilterPricesOnly called: filterid =" + filterid + "filtername =" + filtername + "mypricesonly =" + mypricesonly + " pricesonly=" + pricesonly);
}

But when I alert the status of the checkboxes they show up as "undefined". As you can see, the first piece of code defines a titlebar with a button and a couple of checkboxes and the name of the titlebar. And it is these checkboxes that remain undefined even though I can see them and check and uncheck them. But the name of the titlebar gets passed to the function correctly when the onclick event fires and it gets alerted. Where am I going wrong?

i have an iframe on my webpage and i am loading appropriate page in it by clicking
appropriate button but when user logs out and at that time some page is opened in iframe corresponding to the login pages(like "edit profile") of user then at that moment i want to know that what page is loaded in iframe so that i close it(if it corresponds to pages of login like "edit profile") as user logs out and if it does not correspond to login pages then it remains as it is.For doing that i must know that what page is loaded in iframe and compare it in " if(condition){statement} in logout function" with the logion pages so that i know that if any of them is loaded in iframe and if loaded then close it.Can you help me with that by giving exact code example.