|
JavaScript - Trying To Suppress Multiple Divs With Getelementbyid
I have a PHP script that automatically increases a div id number by one. An example would be:
Code: <div id="globalEventX"> where X is a number from 1 to 1000. I created a couple of javascript functions to show/hide these divs and it looks like this: Code: function hideGlobalEvents()
{
var i;
var gEvent = 'globalEvent';
for(i=1; i<=1000; i++)
{
var globalEvent = gEvent + i;
document.getElementById(globalEvent).style.display='none';
}
}
function showGlobalEvents()
{
var i;
var gEvent = 'globalEvent';
for(i=1; i<=1000; i++)
{
var globalEvent = gEvent + i;
document.getElementById(globalEvent).style.display='block';
}
}
I then created a pair of radio buttons to call the show or hide functions. The code looks like this: Code: <input type="radio" name="GlobalLocal" onClick="javascript:hideGlobalEvents();">Personal</input> <input type="radio" name="GlobalLocal" checked onClick="javascript:showGlobalEvents();">Global</input> But, when I try to use the buttons, they do not suppress the DIVs. Can anyone give me an idea what I'm doing wrong? Thanks in advance! Similar TutorialsHaving so much trouble with this entire slideshow... but this is the most recent development. For some reason the opacity change and border styles are not being added to the current thumbnail div that is selected, controlled by this code: Code: var current = 0;
function swapimg( show ){
var piece = new Array();
piece[0] = '../assets/images/windycity/windycity01.gif';
title[0] = '[ Winners Paint the Town Red. Loosers Supply the Blood. ]';
piece[1] = '../assets/images/windycity/windycity02.gif';
title[1] = '[ One way or another they’re leaving on wheels. ]';
document.getElementById( 'featured' ).src = piece[show];
document.getElementById( 'featured' ).alt = title[show];
for( i = 0; i < meta.length; i++ ){
document.getElementById( 'item' + i ).style.opacity = '.5';
document.getElementById( 'item' + i ).style.border = 'solid 2px #2b2b2d';
}
document.getElementById( 'item' + ( show ) ).style.opacity = '.99';
document.getElementById( 'item' + ( show ) ).style.border = 'solid 2px #0597af';
current = ( show );
And this is the html that it should be controlling: Code: <div class="thumbs">
<div class="listimg"><span onclick="swapimg(0);" ><img id="item0" src="../assets/images/windycity/windycity01_thumb.jpg" alt="" style="opacity: .99; border:solid 2px #0597af"/></span></div>
<div class="listimg"><span onclick="swapimg(1);" > <img id="item1" src="../assets/images/windycity/windycity02_thumb.jpg" alt="" /></span></div>
<div class="listimg"><a href="javascript:swapimg(2);" ><img id="item2" src="../assets/images/windycity/windycity03_thumb.jpg" alt="" /></a></div>
</div>
Any help would be great- I've been staring at this so long all the code has jumbled together in my head, and as soon as I tackle one problem I find another! Thanks! I'm working on code for my forums that will allow users to post text which can be moused over to display an image that will follow the cursor (provided the cursor is hovering above the specific text). The code works, but it obviously can't be used for more than one picture per page because getElementById finds the first div and always displays it onmouseover of any attempted mouseover text. The Javascript in <head> is Code: <script type="text/javascript">
// Pop up code begin
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set popup to visible
hp.style.visibility = "Visible";
}
function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
// Follow mouse script begin
var divName = 'hoverpopup'; // div that is to follow the mouse
// (must be position:absolute)
var offX = 5; // X offset from mouse position
var offY = 5; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style;
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;
</script>
So the display code is Code: <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">text here</a> <div id="hoverpopup" style="visibility:hidden; position:absolute;"><img src="url here"></div> I just want to be able to have more than one instance on each page and still be able to declare the image url in the body and not within the javascript. Hi everyone. New programmer here trying to get fix this one specific issue I am having and I could use some help. Using Javascript, ASP.net with C# code behind. I am validating a textbox using the onblur event. It is being validated in that it must have an alphanumeric entry before the user tabs off of it to the next box. The validation part works, the part that doesn't work is that I get the validation alert textbox if I close the window. I have a workaround in that I am assigning that textbox a character using windo.onberforeunload but I know that isn't right. Here is what I have so far... Code behind on Page_Load... Code: txtCLBRTNWC.Attributes.Add("onblur", "return reqVLD(this)");
here is my textbox field... Code: <asp:TextBox ID="txtCLBRTNWC" runat="server" Width="75" MaxLength="4"
ontextchanged="txtCLBRTNWC_TextChanged" TabIndex="1"
onkeyup="clbwclngCHK(this);" ></asp:TextBox>
And here are the 2 functions being used... Code: function reqVLD(alphanumericChar)
{
var chk = /^[a-zA-Z0-9]+$/;
// var boxid = document.getElementById("<%=txtCLBRTNWC.ClientID%>").value;
// var matchArray = boxid.match(chk);
if(document.getElementById("<%=txtCLBRTNWC.ClientID%>").value.match(chk))
{
return true;
}
else
{
document.getElementById("<%=txtCLBRTNWC.ClientID%>").focus();
document.getElementById("<%=txtCLBRTNWC.ClientID%>").value = "";
alert("Please enter a Work Center.");
return false;
}
}
function clbwclngCHK(obj_in)//When txtCLBRTNWC entry hits the max of 4 auto focuses to next box.
{
if (obj_in.value.length == 4) document.getElementById("<%=txtSTRTDT.ClientID%>").focus();
}
Here is my work around... Code: window.onbeforeunload = function ()
{
document.getElementById("<%=txtCLBRTNWC.ClientID%>").value = "1";
}
Summary. User has to enter something in box before they can move on. This is checked and validating using an onblur event. Problem is, the onblur event fires if closing\exiting the window. I know there has to be a better way of doing this. Any advise or help would be greatly appreciated. Thanks Will Hi Experts, I have a fixed size area.called a container tag.And based on selection of no of divs the area should divide into those many no of equal divs.And is there any other techinic to divide area by multiple divs or parts. Thanks in advance Eswaraiah M Hello there !! I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript...... I want to show multiple divs on select of a <option> box. So lets say there are 3 options Code: <select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>
And a javascript function to show the div`s Code: function showDivs(prefix,chooser) {
for(var i=0;i<chooser.options.length;i++) {
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedvalue = chooser.options[chooser.selectedIndex].value;
if(selectedvalue == "a")
{
displayDivs(prefix,"a");
displayDivs(prefix,"c");
displayDivs(prefix,"d");
}
if(selectedvalue == "b")
{
displayDivs(prefix,"b");
displayDivs(prefix,"c");
}
if(selectedvalue == "c")
{
displayDivs(prefix,"d");
}
}
function displayDivs(prefix,suffix) {
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
And some divs to show Code: <div id="diva" style="display:none;">blabla</div> <div id="divb" style="display:none;">blabla</div> <div id="divc" style="display:none;">blabla</div> <div id="divd" style="display:none;">blabla</div> All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good.. Then I choose option 'c' I get only one div. Thats good.. But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'.. Does anybody understand why?? Thanx allot !!! Hi I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose. Anyone know how that can be done? thanks Hi guys ,, I am new here could you please help me in this: I have multiple divs something like this PHP Code: <div id="div1"> <div id="div2"> <div id="div3"> .... </div> </div> I want JavaScript code to print div1 with all nested divs as well I tried using the following code but it only print div1 content PHP Code: var printContent = document.getElementById('div1'); var windowUrl = 'about:blank'; var uniqueName = new Date(); var windowName = 'Print' + uniqueName.getTime(); var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=200,height=200'); printWindow.document.write(printContent.innerHTML); printWindow.document.close(); printWindow.focus(); printWindow.print(); printWindow.close(); so please tell me how to do such operation ?? Hi, I am new to javascript so any help would be much appreciated. I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James Hello Guys, Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java. What i need to be able to do is.. When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs. #contentwindow #three I already have jquery running on the page and all css is embeded for now if that is helpful. http://www.bushcottages.co.uk/new.htm Thanks your help is supremely appreciated Peter The very basic onclick code I threw together: Code: function descw()
{
document.getElementById("desc").style.display="block";
}
function descc()
{
document.getElementById("desc").style.display="none";
}
The div that needs a description... Code: <div class="select"><img src="image.jpg" onclick="descw()"></div> ..and the actual description div. Code: <div id="desc"> <img src="close.jpg" onclick="descc"> <p>Description</p> </div> This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error. I'm writing a GUI css/html editor in JavaScript which is a litte ambitious considering I just started with js like a month ago. Here's my first hurdle: Users can add divs simply by clicking on the div or element in which they want the new div to reside. The creation of a new div is in the onclick event. However, when I click on a div, I'm getting an onclick events from it and all the divs positions below it, so it's creating multiple new divs and all I want is one! Is there any way to make the onclick even fire for just the top layer div? Maybe using the z-index or something? Please help if you can - I couldn't find anything related to this at all. Thanks I am using the following code to show / hide form elements within a div based upon the drop down choice. Does anyone know how this code can be amended to use multiple drop downs within one form? Code: <html>
<head>
<title>Show and Hide</title>
<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var selectMenu = document.getElementById("selectMenu");
for (var i=0; i<=selectMenu.options.length -1; i++)
{
hideDiv(selectMenu.options[i].value);
}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
</script>
</head>
<body onload="hideAllDivs();">
<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>
</select>
<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>
<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>
<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>
<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>
</body>
</html>
Thanks in advance! So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10. My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link. This is my js for the div swap functionality: Code: <script type="text/javascript">
<!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
}
else {
document.getElementById(tid).style.display = "none";
}
}
function RemoveContent(tid) {
if(document.getElementById(tid).style.display == "") {
document.getElementById(tid).style.display = "none";
}
else {
document.getElementById(tid).style.display = "";
}
}
//-->
</script>
These are the html links: Code: <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0); " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4'); InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div>
And these are the divs that are being removed and added: Code: <div id="view1" style="display: " > <a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> </div> <div id="view2" style="display:none" > <a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a> </div> <div id="view3" style="display:none" > <a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a> </div> <div id="view4" style="display:none" > <a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> </div> Any help would be greatly appreciated. Thank you in advance! Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help! Here's the html: Code: <li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a>
<div id="slidedisplay_2" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img4.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img5.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img6.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
<span></span>
</p>
</div>
</div></li>
<li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a>
<div id="slidedisplay_3" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img2.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img3.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
</p>
</div>
</div>
The javascript: Code: $(document).ready(function () {
$('a.slidecontrol').click(function(){
var $this = $(this);
var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_");
var $div = $('#'+divID);
if ($div.is(':visible')) {
$div.slideUp(500);
} else {
$div.slideDown(500);
}
return false;
});
});
The CSS: Code: #thumbs7{
position:relative;
width:200px;
clear:both;
height:41px;
overflow:hidden;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
position:absolute;
top:0;
width:100%;
height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
display:block;
width:60px;
height:41px;
margin:0;
float:left;
cursor:pointer;
}
#thumbs7 .thumbs div img{
width:54px;
float:right;
}
#thumbs_handles7 span{
background:url(../images2/thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
width:1200px;
background:url(../images2/thumbs_mask.gif) no-repeat center top;
}
hi quick question, i have 640 hidden html inputs like this but with different names. <input type="hidden" name="b1r1c1" value"some value"> now i want to use document.getElementById('b1r1c1).value = "whatever"; will that work eventhough there is no id on my hidden value. it will be in a hta by the way. thanks Hello smart people... perhaps someone can figure this one out. I hope it's not a PHP question. I have a form and need to populate FIELD2 with the result of FIELD1. Field one is a dynamic list from a database, where the value is an ID#, but the list shows the name. I want to populat FIELD2 with the name that is chosen, not the id (I can't get anything to work) Here is the code from the 2 fields: FIELD 1: Code: <select name = "" realname = "{#role#}" required="1" exclude = "-1" id = "roleselect">
<option value="-1" selected="selected">Choose</option>
<option value = "{$roles[role].ID}" id="role{$roles[role].ID}">{$roles[role].name}</option>
FIELD 2: Code: <input type="hidden" name="rolename" id="rolename" required="0" realname="rolename" /> Here is the javascript I tried to populate field 2 with the selected option of field 2: Code: function updaterole(){
document.getElementById("rolename").value =document.getElementById("role").value;
I tried using name instead of value for field 1, but that didn't work either. The db just shows empty. thanks for any help! hi, In my code below, I cannot get the setting_id value as it falls outside of the loop. I have just tried to put in the getElementById function but it's not working?! I get the error: missing ) after formal parameters JavaScript from this: Code: function confirmqualification(ID) {
to this: Code: function confirmqualification(document.getElementById('setting_id')) {
HTML from this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification('<?php echo $row1['setting_id']?>')" />
to this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification()" /> |
|||||||