JavaScript - Randomizing Divs

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

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

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 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">&nbsp;</div>
<div id="div2" style="display:none" rel="nbta">&nbsp;</div>
<div id="div3" style="display:none" rel="nbta">&nbsp;</div>
<div id="div4" style="display:none" rel="nbta">&nbsp;</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?

Hello
I'm rather new to javascript and I'm trying to accomplish something that's a bit over my head, to say the least. Basic idea of page is to have three divs loaded with content. I want to be able to change the content of those three divs with one link. Below is the code I've managed to piece together so far. It works with one instance of the function, but when I try to duplicate it to multiple functions, it breaks.

I'm sure there's a way to simplify it.

JS:
Code:

<script type="text/javascript">
function show(diva) {
var a, i = 1;
while(a = document.getElementById('diva'+(i++))) {
a.style.display="none";
}
var al = document.getElementById(diva);
al.style.display ="block";
al.onclick = function() {this.style.display="none"}
}

function show(divb) {
var b, j = 1;
while(b = document.getElementById('divb'+(j++))) {
b.style.display="none";
}    
        
var bl = document.getElementById(divb);
bl.style.display ="block";
bl.onclick = function() {this.style.display="none"}
}

function show(divc) {
var c, k = 1;
while(c = document.getElementById('divc'+(k++))) {
c.style.display="none";
}    
        
var cl = document.getElementById(divc);
cl.style.display ="block";
cl.onclick = function() {this.style.display="none"}
}
</script>

html:
Code:

<style type="text/css">
.myclass {display:none;position:absolute;background:#fff;}
.header {position:absolute;height:100px width:600px;}
.overview {position:absolute;height:100px width:600px;top:100px;}
.professor {position:absolute;height:100px width:600px;top:200px;}
</style>

<a href="javascript:show('diva1'),show('divb1'),show('divc1')"> link 1 </a> |

<a href="javascript:show('diva2'),show('divb2'),show('divc2')"> link 2 </a> |

<a href="javascript:show('diva3'),show('divb3'),show('divc3')"> link 3 </a><br><br>


<div class="header">
    <div class="myclass" id="diva1" style="display:block;">header1</div>
    <div class="myclass" id="diva2" >header2</div>
    <div class="myclass" id="diva3" >header3</div>
</div>
<div class="overview">
    <div class="myclass" id="divb1" style="display:block;" >overview1</div>
    <div class="myclass" id="divb2" >overview2</div>
    <div class="myclass" id="divb3" >overview3</div>
</div>
<div class="professor">
    <div class="myclass" id="divc1" style="display:block;" >professor1</div>
    <div class="myclass" id="divc2" >professor2</div>
    <div class="myclass" id="divc3" >professor3</div>
</div>

Any help would be greatly appreciated.

Anyone know of a better CLI base than the one I'm using? It's based off of http://sacrifizezone.blogspot.com/
------------------------------
So, the way the CLI works is whenever it sees the input which has the matching ID of a DIV, it displays it.

Example @ http://ijappy.webs.com/green

You can download an early version of the soarce w/ the command "dl src"...

It works great, for now, but as I add more & more commands I'm sure the INDEX file will surely begin to... be populated..

So I was wondering if anyone knew a way (using Javascript/Ajax/PHP I really don't care) to "PRINT" a files contents instead of showing a div.

So when I typed in 'help'

it looked up help.html and printed it's content...

Is there such thing? Is this a bad concept? Please, help haha ;D

hey all,

Registered for this forum because I found this thread about hiding and unhiding divs. http://www.codingforums.com/archive/.../t-161166.html

I have tried to implement this on a site that I am building and have come up with a weird result. My javascript is very poor so debugging this has become a real headache. Hopefully someone can help out.

The issue is that when I click the button to unhide the hidden div, it hides everything and reveals the hidden div on its own without everything else. Hopefully that makes sense.

Current code looks as follows-
Code:

<script type="text/javascript">
function unhide(divID) {
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
divs[i].className='hidden';

var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>

<style type="text/css">
.hidden {
display: none;
}

.unhidden {
display: block;
}
</style>

</head>

<body>

<div class="container" id="wrap">
	
    <!-- MODULE START -->
    <div id="web" class="panelContainer">
    
    	<div id="panelBtnContainer">
        	<li><a href="#" onclick="unhide('test1'); return false;" class="web"><span>Button Text</span></a></li>
        </div>
    
        <div class="leftContainer">
            <div class="panelShadow"></div>
            <div class="panelThumb">
                <img src="images/works/t-test.jpg" height="233" width="300" alt="Test Thumbnail" title="Test Thumbnail" />
            </div>
        </div>
        
        <div class="rightContainer">
        	<h2>Neque porro quisquam est qui dolorem adipisci velit</h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. 
        </div>
        
    </div>
    
    <div id="test1" class="hidden">
    	<p>Testing :)</p>
    </div>
    <!-- MODULE END -->
            
    <!-- MODULE START -->
    <div id="web" class="panelContainer">
    
    	<div id="panelBtnContainer">
        	<li><a href="#" onclick="unhide('test2'); return false;" class="web"><span>Button Text</span></a></li>
        </div>
    
        <div class="leftContainer">
            <div class="panelShadow"></div>
            <div class="panelThumb">
                <img src="images/works/t-test02.jpg" height="233" width="300" alt="Test Thumbnail" title="Test Thumbnail" />
            </div>
        </div>
        
        <div class="rightContainer">
        	<h2>Neque porro quisquam est qui dolorem adipisci velit</h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. 
        </div>
    </div>
    
    <div id="test2" class="hidden">
    	<p>Testing :)</p>
    </div>
    <!-- MODULE END -->
    
</div>

Any help would be greatly appreciated.

Thanks in advanced