|
JavaScript - Need Help With Toggling Divs
Hi, I have a good toggle script that does what I want for the most part.
I have a set of links. When you click one the content in that div replaces the previous content. When you load the page, the content of link one shows. However, I would like to have different content show, not related to any of the links, when the page first loads. Once you click on any of the links that copy will get replaced with the corresponding copy. I am attaching the code and a link to the page. Code: <!-- Hide/Show -->
<script type="text/javascript">
window.onload=function() {
var aObj=document.getElementsByTagName('a');
var i=aObj.length;
while(i--) {
aObj[i].count = i;
aObj[i].onclick=function() {return showHide(this);};
showHide(aObj[i]);
}
};
function showHide(obj) {
var aDiv=document.getElementById('wrapper').getElementsByTagName('div');
if (typeof showHide.counter == 'undefined' ) {
showHide.counter = 0;
}
aDiv[showHide.counter].style.display = 'none';
aDiv[obj.count].style.display = 'block';
showHide.counter = obj.count;
return false;
}
</script>
http://www.michelleswann.com/test/index.html Thanks so much for any help! Similar TutorialsHi, I have two excellent pieces of code (thanks Old Pedant and jmrker) that I am trying to get to talk to each other. Basically I want to achieve the same button effect as here but with a group of buttons that get produced from xml via innerhtml. here's the code I'm using to create the buttons: Code: sidebar_html += '<div id="category"><input type="checkbox" id="'+category+'" onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');"></div><div id="label">' + label + '</div><div id="bus"><button onclick="startCar(this,' + poly_num + ')" style="height:24px; width:30px"> <img id=this,"pauseBtn" src="play2.png" ></button></div><br>'; and here's the code that attempts to toggle them between the play and pause symbol: Code: function startCar(btn,pnum,poly_num){
if (this.wasRun)
{
btnAction();
} else {
if( !this.wasRun )
toggleRun(btn, pnum);
btnAction();
this.wasRun = true;
}
}
function toggleRun(btn, pnum){
var inps = document.getElementsByTagName("input");
for ( var i = 0; i < inps.length; ++i ) {
var inp = inps[i];
if ( inp.value = "play2.png" ) inp.value = "pause2.png";
}
startAnimation(pnum);
}
function btnAction() {
var currentBtn = document.getElementById('pauseBtn').src;
var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);
if (paused == true){
paused=false;
if (currentInfo == "play2.png") { currentInfo = 'pause2.png'; }
document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
if (currentInfo == "pause2.png") { currentInfo = 'play2.png'; }
document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
}
}
The page I'm working on is here Everything works as it should except for the toggling between images. I have a table with red and green cells...what I want to do is collapse rows with ALL green cells and show every other... My code right now runs into a problem when there are both red and green cells in a row...It shifts the red cells to the left... Code: <html>
<head>
<style type="text/css">
.green{ background:green;display:none;}
.red{ background:red;}
</style>
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<table id='theTable' border=2>
<tr>
<th>col0</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
</tr>
<tr>
<td><a href="#" id="showgreen">Uncollapse</a></td>
<td class="green">1</td>
<td class="green">9</td>
<td class="green">20</td>
<td class="red">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr id="toggleMe">
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="green">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
</table>
<a href="#" id="showred">Toggle Errors</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$("#showgreen").click(function(){
$('.green').toggle();
});
$("#showred").click(function(){
$('.red').toggle();
});
</script>
<p><button onclick="toggleVisibility()">toggle</button></p>
</body>
</html>
How can i preserve the cell position as well? Hi, I have this button: Code: <input type="image" src="pause.png" onmouseover="src='pauseon.png'" onmouseout="src='pause.png'" onclick="togglePause()" id="pauseBtn"/> which changes from the play image to the pause image when clicked, using this function: Code: function togglePause(){
if (paused){
paused=false;
document.getElementById('pauseBtn').src="pause.png";
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
document.getElementById('pauseBtn').src="play.png";
}
}
but it doesn't really work how I want it to - first off, I can't get the same mouseover and mouseout effect working for when the button is on the "play" image secondly, the button reverts to the pause image regardless of if it is in play or pause state. I'm kind of lost - can someone throw me a line? the page I'm working on is here if you want to have a look Putting some javascript into a pdf file and can't get this to work out right. Basic setup: Field X = checkbox; Field Y = numeric input field; Here's what should happen (increment is toggled): Y has a value. When X is checked, Y is increased by 5. When X is unchecked, Y goes back to its original, unmodified value. Here's what really happens (increment is subtracted): Y has a value. When X is checked, Y is reduced by 5. When X is unchecked, Y is reduced by 5 again. Anytime X is clicked on, Y is reduced by 5 yet again. Here's the code: Code: function check_box(X, Y){
if(X.checked == true){
Y.value += 5;
} else {
Y.value -= 5;
}
Any help or advice is greatly appreciated. Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() {
$( this ).toggleClass( "closed" );
});
$( "li.closed" ).click(function() {
$( this ).toggleClass( "open" );
});
The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave I just got this problem when I try to add the expandable divs in my webpage. However when I click the divs on the page, I can't see the rest of my content. This is my page, does anybody know what happened with my code??!! http://www.calibredesign.com/clients..._news_new.html the divs are on the button of the page. 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 Here is the code I'm using: Code: <style type="text/css" rel="stylesheet" href="">
li#button {
cursor:pointer;
}
</style>
<script type="text/javascript">
var num = 6; // this is # of divs you have
function swap(what)
{
for(var i = 0; i < num; i++)
{
document.getElementById('swap'+i).style.display = 'none';
}
document.getElementById('swap'+what).style.display = 'block';
}
var createStyle = document.createElement('style');
var createStyleProp = document.createTextNode('.hidden { display:none; }');
createStyle.appendChild(createStyleProp);
document.getElementsByTagName('head')[0].appendChild(createStyle);
</script>
<body>
<div id="content">
<ul id="a-menu">
<li id="button" onClick="swap(0)"><b>button1</b></li>
<li id="button" onClick="swap(1)"><b>button2</b></li>
<li id="button" onClick="swap(2)"><b>button3</b></li>
</ul>
<div id="swap0" class="block">content 1</div>
<div id="swap1" class="hidden">
<ul id="submenu">
<li id="button" onClick="swap(3)">button1</li>
<li id="button" onClick="swap(4)">button2</li>
<li id="button" onClick="swap(5)">button3</li>
<li id="button" onClick="swap(6)">button4</li>
</ul>
<div id="swap3" class="block">content 2</div>
<div id="swap4" class="hidden">content 3</div>
<div id="swap5" class="hidden">content 4</div>
<div id="swap6" class="hidden">content 5</div>
</div>
<div id="swap2" class="hidden">content 6</div>
</div>
</body>
</html>
Is working fine for the first three buttons but the subdivs from swap1(div) are not working. Can anyone help me with this?? So I have a few divs that I'm hiding and showing whenever a you click on a link. So I'm a newbie at JavaScript and this is the best way I know how to do this. var divElement = ''; function show(divElement) { if(divElement == 'add') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='block'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'edit') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='block'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('deletedTutorial').style.display='none'; } else if (divElement == 'images') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='block'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'pending') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='block'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'upload') { document.getElementById('uploadImages').style.display='block'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'delete') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('deletedTutorial').style.display='block'; } } That is a awful lot of code to do just a few simple things. But don't get me wrong it works... I just wondered if there is a cleaner way of doing this. Thanks, Jon W Hey there. I want to move a div around a page, and I do this by getting the original top and left values of a div, and then change them. But the problem is getting the original values; I checked online and thought that this would work: Code: var chart = document.getElementById(charDiv).style.top;
var charl = document.getElementById(charDiv).style.left;
alert('char_t:' + chart + ' char_l:' + charl + 'charDiv:' + charDiv);
charDiv is passed into the function (its the id of the div I want to move). I know that charDiv has a value by looking at the values of the alert() statement, but the values of chart and charl are empty. The alert simply outputs char_t: char_l: charDiv: charOne any help would be appreciated I have five DIV tags that contain a photo and brief bio for partners of an accounting firm. I need to randomize these DIV tags (id="d1" - "d5") to display only one of the tags on each page load. Normally, I would do this with ColdFusion but the client isn't willing to purchase the language support for their hosting system. A sample of one of the DIVs is below. Code: <div id='d1'>
<div class="subhead1">Shareholder Spotlight</div>
<img style="float:left;margin:12px 10px 0px 0px" src="images/leonard_summer_photo.jpg">
<div class="subhead2">Leonard M. Sommer, CPA</div>
<div class="subhead3">Managing Shareholder</div>
<div class="body">Leonard has more than 30 years experience in providing tax, business and succession planning advice for family-owned and closely-held businesses. <a href="leonardsommer.html" style="color:#3d3d3d; text-decoration:underline">Learn more</a>.</div>
</div>
If someone could let me know how to do this in javascript I would appreciate it. You'll have to be very clear in your instructions as I don't know javascript very well. Thank you in advance for your response! I was wondering how I could redirect from one div to another div after " x " seconds on the same page.. Is this possible? So like basically: Index page: > Shows div1, after x seconds shows div2 etc.. 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? Hi all, im trying to select certain elements from on screen and set the style of a div to over lap it. Code: $("body *").each(function(){
if($(this).attr("rel")!="nbta"){
alert("#div" + z + " style: " + "display:block; width:" + $(this).width() + "px; height:" + $(this).height() + "px; position:absolute; top:" + $(this).position().top + "px; left:" + $(this).position().left + "px; border: 1px solid red; z-index:" + $(this).parentNumber() + ";");
$("#div" + z).attr("style", "display:block; width:" + $(this).width() + "; height:" + $(this).height() + "; position:absolute; top:" + $(this).position().top + "; left:" + $(this).position().left + "; border: 1px solid red; z-index:" + $(this).parentNumber() + ";");
z++;
}
});
Code: <p id="fooBar">dfgdsfdsfdsf1111</p> <p id="fooBar2">dfgdsfdssdsdfdsf222</p> <p id="fooBar3">dfgdsfdsfdsf333</p> <p id="fooBar4">dfgdsfdsfdsf444</p> <div id="div1" style="display:none" rel="nbta"> </div> <div id="div2" style="display:none" rel="nbta"> </div> <div id="div3" style="display:none" rel="nbta"> </div> <div id="div4" style="display:none" rel="nbta"> </div> seems easy enough and the results are showing corrent i just cant seem to get it to display! 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 Hey friends, I cannot seem to figure this out. I am attempting to utilize one horizontal scroll bar at the bottom of the second div that will control the scrolling of both the first and second div. The second div also already has another scroll bar on the left. If this can be done without a scroll bar even appearing on the first, it would be great. This is the CSS of the two divs I am working with: Code: #con3 {
width: 740pt;
height: 100pt;
margin: 0;
}
#con4 {
position: absolute;
width: 740pt;
height: 120pt;
margin: 0;
}
#con3 is located directly above #con4 within another div. I love quick replyers. Joshie 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. I have the following functions: Code: <script>
var timerlen = 5;
var slideAniLen = 500;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
function slidedown(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display != "none")
return; // cannot slide down something that is already visible
moving[objname] = true;
dir[objname] = "down";
startslide(objname);
}
function slideup(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == "none")
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = "up";
startslide(objname);
}
function startslide(objname){
obj[objname] = document.getElementById(objname);
endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == "down"){
obj[objname].style.height = "1px";
}
obj[objname].style.display = "block";
timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}
function slidetick(objname){
var elapsed = (new Date()).getTime() - startTime[objname];
if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == "up")
d = endHeight[objname] - d;
obj[objname].style.height = d + "px";
}
return;
}
function endSlide(objname){
clearInterval(timerID[objname]);
if(dir[objname] == "up")
obj[objname].style.display = "none";
obj[objname].style.height = endHeight[objname] + "px";
delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);
return;
}
</script>
I have the following div tag: Code: <div id='mydiv' style='display:none'>some content</div> ....and then I have an ahref tag like so: Code: <a href="javascript:;" onclick="slidedown('mydiv');">Slide Down</a>
<a href="javascript:;" onclick="slideup('mydiv');">Slide Up</a>
What happens is that it just unhides real quick, and then will not work after that...it does shoot an error, which is 'Invalid argument'...and nothing else. It is craping out on the following line: obj[objname].style.height = d + "px"; not sure why...so if anyone has any insight on what I am doing wrong...please let me know. so my site ... www.brianapurserphotography.com/kitchen1/ (click portfolio to see the div im referring too) loads fine in firefox and safari on my mac but.... refuses to scroll in IE so to find out tonight. The scroll bar comes up just fine but the actual scroll bar itself that one uses to drag does not. All that shows is an inactive scroll bar with inactive arrows. Why? |
|||||||