JavaScript - Hidden Div Movin' Around

I would like to think I understand the fundamentals of JavaScript, but I am beating my head with this and it seems so simple. I am trying to set the current div as visible, then set the old div as not visible, then set the new div id as a variable so that it can be used next. all it is doing is setting the new div to visible, and not setting the variable to be used. here is my code.

this is the function
[code]
var Gp;
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
document.getElementById(Gp).style.display = 'none';
Gp = id;
}
[code]

this is the html
[code]
<div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6389/thumb2.jpg" onclick="setVisibility('img_name1', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"><img src="http://pinklightdesign.com/gallery/content/6389/thumb1.jpg" width=68 height=90 /></a></div>
<div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6396/thumb2.jpg" onclick="setVisibility('img_name2', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"><img src="http://pinklightdesign.com/gallery/content/6396/thumb1.jpg" width=68 height=90 /></a></div>
<div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6403/thumb2.jpg" onclick="setVisibility('img_name3', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click">


<div id='img_name1' style='display:none'>new 1 image</div>
<div id='img_name2' style='display:none'>new image 2</div>
<div id='img_name3' style='display:none'>new 1 image 3</div>
[code]

Any help would be greatly appreciated. Cheers - James

Hey Guys,

I have the following hidden field within a form:

Code:

<input type="hidden" name="test12" value="test12" />

I also have the following function which does something if that field exists:

Code:

if(document.formName.test12.value == "thisdata")
	{
		//do something
	}

The problem I'm having is that if the hidden field doesn't display (which based on conditional logic, sometimes happens), a JS error is thrown on the page. What is the best way to carry out this check effectively without throwing an error if the field does not exist?

Thanks in advance.

Good morning,

On my website I want a centered popup where you can fill in a webform. Ofcourse I want to use a table for it so it can have a nice layout.

However when I use a "div" which I can show or hide via a Javascript (showhide) and I put a table in that div, then the webform in that table is already show on the upper left side of my website. If I click the link to show the div, only a blank div will appear in the center of my screen.

This is the code I used:

<script type="text/javascript">
function showhide(id) {
if (document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display='none';
}
else
{
document.getElementById(id).style.display='block';
}
}
</script>

<div id="test" style="display:none; position: absolute; width: 600px; height: 300px; display: none; background: url('tableupperleft.bmp') repeat-x; border: 1px solid #000; left: 50%; margin-left: -300px; top: 50%; margin-top: -150px;">

<table>
<tr>
<td align="center">TEST</td>
</tr>
</table>
</div>

<a href="javascript:showhide('test')"><img src="iconadd.bmp"></a>

In this case the word "TEST" will appear in the upperleft of my screen while the div is hidden. If I click the link, a blank div will appear in the center of the screen.

If I don't use a table, bu only the word "TEST", then all works fine like it supposed to be.

So I guess the issue is the <table>-function?

What am I doing wrong?

hello, i have a form in my header that is hidden and i have it show when you click a link, the problem is, when the form appears, it pushes everything down below it, any ideas on how to get around this?

Hi guys,

I have a javascript drop-down navigation bar on my website. While I am creating the website, the drop-down have no problem overlaying the javascript (embed with flash) photo gallery in Firefox. But when I tested it in IE, it did not overlay the javascript script and the drop-down was covered by the photo gallery instead.

I tried methods like Z-index, using Div etc but it still doesn't work on Internet Explorer. I tested on Safari, Opera and Firefox doesn't seem to have any problem. Here is my links to my CSS use for my website. Really need help, have no idea what I did wrong. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!!

Working Website:
http://17thstop.sg/demo

CSS Files:
http://17thstop.sg/demo/styles.css
http://17thstop.sg/demo/css/default.advanced.css
http://17thstop.sg/demo/css/default.css
http://17thstop.sg/demo/css/dropdown.css

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

<!-- #BeginTemplate "index.dwt" -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" ></link>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" ></link>
<title>Four Musketters Studio</title>

<script type="text/javascript" src="gallery/swfobject.js"></script>

<!-- Menu CSS and JS -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- End of Menu and JS -->

</head>

<body>
	<div id="content">
		<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1></div>

<!-- Start of Menu -->	
<div id="contentmenu"><ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="index.htm">Home</a></li>
	<li class="dir">About Us
		<ul>
			<li><a href="about_us.htm">The Four Musketters</a></li>			
			<li class="dir">The Team
				<ul>
					<li><a href="darren.htm">Darren</a></li>
					<li><a href="jon.htm">Jonathan</a></li>
					<li><a href="hweek.htm">Hwee Key</a></li>
					<li><a href="gavin.htm">Gavin</a></li>
				</ul>
			</li>
			<li><a href="./">Clients</a></li>
			<li><a href="./">Testimonials</a></li>
			<li><a href="./">Press</a></li>
			<li><a href="./">FAQs</a></li>
		</ul>
	</li>
	<li class="dir">Services
		<ul>
			<li><a href="cne.htm">Event & Commercial Photography</a></li>
			<li><a href="portrait.htm">Portrait Photography</a></li>
			<li><a href="wedding.htm">Wedding Photography</a></li>
			<li><a href="studio.htm">Rental of Studio</a></li>
			<li><a href="./">Training &amp; Consulting</a></li>
		</ul>
	</li>
	<li><a href="gallery3/gllery.htm">Gallery</a></li>
	<li><a href="./">Events</a></li>
	<li><a href="./">Careers</a></li>
	<li><a href="./" class="dir">Contact Us</a>
		<ul>
			<li><a href="contact.htm">Enquiry Form</a></li>
			<li><a href="locationc.htm">Contact Us & Location</a></li>		
			</ul>
	</li>
</ul>
</div>
<!-- End of Menu -->

<div id="content1">

	<!-- #BeginEditable "BodyContent" -->

	<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>	
	<!-- #EndEditable -->
	<script type="text/javascript">
		var fo = new SWFObject("gallery/autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
			fo.addVariable("xmlURL", "gallery/gallery.xml");		
				
		//Optional Configuration
		//fo.addVariable("langOpenImage", "Open Image in New Window");
		//fo.addVariable("langAbout", "About");	
		//fo.addVariable("xmlURL", "gallery/gallery.xml");					
		
		fo.write("flashcontent");	
		
	</script></div>


			<div id="footer">
				<p id="links">
				Copyright &copy; 2010 &minus; Four Musketters Studio &middot; Your Number 1 Choice.
				</p>
				<p>
					<a href="#">Home</a>
					<a href="#">Practice</a>
					<a href="#">Attorneys</a>
					<a href="#">Accidents</a>
					<a href="#">News</a>
					<a href="#">About Us</a>
					<a href="#">Contact Us</a>
				</p>
			</div>

</body>

<!-- #EndTemplate -->

</html>

I have a simple script connect to a radio button. Based on which option, the matching div appears with a text box - and one with a radio button. If they change their mind and click another radio button, it'll switch to the new div, but keep the content in the old. How do I clear that out?

I looked for a snippet, but they're all for clearing default text in a field when you click it. I want something a little different.

Here's what I'm using:

Code:

<script>
$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='hear']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#" + test).show();
    });
});


</script>

<input type="radio" name="hear" value="dcranch"> DC Ranch Community <br />
<input type="radio" name="hear" value="friend"> From a friend <br />


<div style="display: none;" id="dcranch" class="desc"> <input type="checkbox" value="Yes" name="resident" /> If so, are you a DC Ranch resident? )</div><br />	
<div style="display: none;" id="friend" class="desc"> Name? <input type="text" name="how1" /></div><br />

My website contains a ton of hidden divs. I thought this would make everything easier for the user because now they can stay on one page and view tons of content but it is making my page load very slowly. Is there a way to not load the pages hidden content until the user clicks the link and makes it visible? I see various tutorials online but I am having trouble learning how to translate that to my site. So again this content is hidden, and an onclick makes it visible, but I would like the onclick to make it visible and load for the first time. Thank you for reading, link to site and code below.

Source: By clicking the info or photo tabs you will see the toggle for hidden divs

Code for my tabs:
PHP Code:
<?php if( $page <= 1 and !$public ) { ?>
<div id="mngl-profile-tab-control">
<ul>
  <li id="mngl-board-tab-button" class="dark"><a href="javascript:mngl_set_active_tab('board');"><span><?php _e('Board', 'mingle'); ?></span></a></li>
  <li id="mngl-info-tab-button"><a href="javascript:mngl_set_active_tab('info');"><span><?php _e('Info', 'mingle'); ?></span></a></li>
  <li id="mngl-log-tab-button"><a href="javascript:mngl_set_active_tab('log');"><span><?php _e('Log', 'mingle'); ?></span></a></li>
<li id="mngl-fav-tab-button"><a href="javascript:mngl_set_active_tab('fav');"><span><?php _e('Favorites', 'mingle'); ?></span></a></li>
<li id="mngl-display-photo-tab-button"><a href="javascript:mngl_set_active_tab('display-photo');"><span><?php _e('Photos', 'mingle'); ?></span></a></li>
<li id="mngl-video-tab-button"><a href="javascript:mngl_set_active_tab('video');"><span><?php _e('Videos', 'mingle'); ?></span></a></li>

</ul>
</div>
<?php } ?>


Code for one of the tabs content. The class mngl-hidden is just a display:none
PHP Code:
<div id="mngl-fav-tab" class="mngl-profile-tab mngl-hidden">
<div style="color:#171717; font-weight:bold;"><?php echo  $user->first_name . "'s Favorites >> For Motivational Posts You Enjoy"?></div>

<?php
    //require_once(MNGL_MODELS_PATH . "/MnglUser.php");
    foreach ($fav_posts as $fav_post)
    {
      $author = MnglUser::get_stored_profile_by_id($fav_post->author_id);
      $owner  = MnglUser::get_stored_profile_by_id($fav_post->owner_id);
      
      if($author and $owner)
        $this->display_board_post($fav_post,$public);
    }
    /*$this->display_board_post('5705',$public);*/
    //echo count($fav_posts).'--'.$page_size;
  ?>
  <?php if( count($fav_posts) >= $page_size ) { ?>
   <!-- <div id="mngl-older-posts"><a href="javascript:mngl_show_older_posts( <?php echo ($page + 1) . ",'" . (($public)?'activity':'boards') . "','" . (($public)?$mngl_user->screenname:$owner->screenname) . "'"; ?> )"><?php _e('Show Older Posts', 'mingle'); ?></a></div>-->
  <?php } ?>

</div>

Javascript that Sets Active Tab
Code:

function mngl_set_active_tab( tab )
{
  jQuery('#mngl-profile-tab-control li').removeClass('mngl-active-profile-tab');
  jQuery('#mngl-' + tab + '-tab-button').addClass('mngl-active-profile-tab');
  jQuery('.mngl-profile-tab').hide();
  if((tab != 'board') && (tab != 'fav')){
  	jQuery('.mngl-board-post').hide();
  } else {
  	jQuery('.mngl-board-post').show();
  }
  jQuery('#mngl-' + tab + '-tab').show();
}

I have a form that has a checkbox that I want to base a hidden value on. If the checkbox is checked I want the hidden value to be 25. If not checked, I want the value to be 0. I am working with code someone else has written and I am fairly new to javascript and cannot get it to work.
Here is the code on the form:
<code>
<td><input type="checkbox" name="binderdiscount" value="Yes" <?php /*?><?php if ($pgdata['binderdiscount']=='Yes') echo 'checked'; ?><?php */?> />I do not need a book;</td>

<input type="hidden" name="binder_discount" value="0">
</code>

and then in a separate page is all the javascript to process the form. I have this, but it is not working.
<code>
if(getControlValue(form.binderdiscount)==="Yes") {form.binder_discount.value=25;}
</code>

As I said, i am really new to javascript and I am working with someone else's code. All the research I have done has just confused me more about why it is not working. Any help would be greatly appreciated.

What did I do wrong? I would like to have an anchor link with hidden text. When I click on the anchor link, I want to see a text drop below showing the Keep trying information. It keeps giving me "object expected" error message.

What object I need to put in there. Thanks.

Here is the code:

Code:

 
<body>
<a href="#" onclick="showDiv('divFundamentals');return false;">Javascript Fundamentals</a>
<div id="divFundamentals" style="display:none;">

Basic - Javascript
Keep trying:

Keep trying 
- Try hard 1
- Try hard 2
- Try hard 3
- Try hard 4
- Try hard 5

</div>


<script>
function showDiv(id) 
{
$('#' + id).show();
}
</script>

</body>

Hi everyone, was wondering if someone would be able to help me out, and correct this, or suggest an alternative.

I have hidden divs, and I have achieved easily and simply this with the following, but on click I want the other divs to hide so that they all can't be displayed at once, at the moment they just stack up on top of each other. I'm trying to keep it as simple as possible as i'm much the novice

Code:

<script> 
function showhide(id){ 
if (document.getElementById){ 
obj = document.getElementById(id); 
if (obj.style.display == "none"){ 
obj.style.display = ""; 
} else { 
obj.style.display = "none"; 
} 
} 
} 
}
</script>


and then 

<a href="#" onclick="showhide('divname'); return(false);">

Thanks in advance

I have a hidden field whose value is a text string, "xyz". I want to write the value to the page so that the user can see it but not edit it. Can't I just use document.write(form.field.value)? Why isn't it working?

I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter.

Is there something I can add to the script to force it on top of every other object on the page?

Say I have a form so long that i want to group sections by category and have them expandable, using css to display:none or display:block these groups. If a user selects an option or two in one of these divs, then fills in some fields, then hides the div... is it going to cause problems when they submit the form if the div is hidden?

Thanks!

edit: let me ask another question too--what if we add validation into the mix. What happens if a field in a hidden div does not pass validation?

Hi,

I was tasked with creating a JavaScript quiz...
I succeeded in doing so but part of the requirement was to use hidden fields for the answers.

Would this be possible using the code I currently have:

Thanks

Code:

<html>
<head>
<script type="text/javascript">
	function valid() 
	{
		cor = "0"
		incor = "0"
		test0 = document.myform.elements[0].value;
		test1 = document.myform.elements[1].value;
		test2 = document.myform.elements[2].value;
		test3 = document.myform.elements[3].value;
		test4 = document.myform.elements[4].value;
		test5 = document.myform.elements[5].value;
		test6 = document.myform.elements[6].value;
		test7 = document.myform.elements[7].value;
		test8 = document.myform.elements[8].value;
		test9 = document.myform.elements[9].value;
		
			if (test0 == "64") 
			{
				alert("Congratulations you got question one correct!");
                    ++cor
			}
				else alert("Sorry, you got question one incorrect!");

	
			if (test1 == "56") 
			{
				alert("Congratulations you got question two correct!");
                    ++cor
			}
				else alert("Sorry, you got question two incorrect!");
			
			if (test2 == "7") 
			{
				alert("Congratulations you got question three correct!");
                    ++cor
			}
				else alert("Sorry, you got question three incorrect!");
				
			if (test3 == "8") 
			{
				alert("Congratulations you got question four correct!");
                    ++cor
			}
				else alert("Sorry, you got question four incorrect!");
				
			if (test4 == "100") 
			{
				alert("Congratulations you got question five correct!");
                    ++cor
			}
				else alert("Sorry, you got question five incorrect!");
				
			if (test5 == "1947") 
			{
				alert("Congratulations you got question six correct!");
                    ++cor
			}
				else alert("Sorry, you got question six incorrect!");
				
			if (test6 == "1") 
			{
				alert("Congratulations you got question seven correct!");
                    ++cor
			}
				else alert("Sorry, you got question seven incorrect!");
				
			if (test7 == "7") 
			{
				alert("Congratulations you got question eight correct!");
                    ++cor
			}
				else alert("Sorry, you got question eight incorrect!");
				
			if (test8 == "132") 
			{
				alert("Congratulations you got question nine correct!");
                    ++cor
			}
				else alert("Sorry, you got question nine incorrect!");
							
			if (test9 == "5280") 
			{
				alert("Congratulations you got question ten correct!");
                    ++cor
			}
				else alert("Sorry, you got question ten incorrect!");
				
				
					
			//else ++incor
				alert("you got " + cor + " right\n You got " + cor/10 * 100 + "% correct!");
	}
</script>
</head>
<body>
<form name="myform">
<table border="1" cellpadding="10">
<tr><td>1. 64 added to what number gives a sum of 128?</td><td><input type="text" name="q1"></td></tr>
<tr><td>2. The product of 8 and 7 is?</td><td><input type="text" name="q2"></td></tr>
<tr><td>3. 35 divided by 5 is:</td><td><input type="text" name="q3"></td></tr>
<tr><td>4. 40 divided by 5 is:</td><td><input type="text" name="q4"></td></tr>
<tr><td>5. What is the area of rectangle that measure 5 by 20?</td><td><input type="text" name="q5"></td></tr>
<tr><td>6. What is 3054 subtracted from 5001?</td><td><input type="text" name="q6"></td></tr>
<tr><td>7. What is the result of 5 x 8-39?</td><td><input type="text" name="q7"></td></tr>
<tr><td>8. What is the binary number 111 in decimal?</td><td><input type="text" name="q8"></td></tr>
<tr><td>9. The sum of 33 and 44 and 55 is:</td><td><input type="text" name="q9"></td></tr>
<tr><td>10. How many feet in a mile?</td><td><input type="text" name="q10"></td></tr>
<tr><td><input type="button" onClick="valid()" value="score"></td><td><input type="reset"></td></tr>
</form>
</table>

</body>
</html>

Hello,

If you will open: joketube.tv (please use admin as username and admin as password) and have a look on the top menu you will find UPLOAD link. Please click on it and you will see 'popup window'. Everything is ok with except that all parts of the window is dragable...

I was expecting following. After placing some container DIV element (none transparent) with higher z-index over dragable background DIV. This region (with higher z-index) would become NONE dragable!

BUT what I got is that even if DIV is hidden behinde other DIV elements, onmousedown is still working for that hidden DIV. Why this happened and how can I solve this problem?

Thank you in advance for any suggestion