New DIV Pop

[charIie]

I was wondering how I would go about doing this. I would like to have an image that when clicked on makes a new <div> appear in a different location. Then when the same image is click again it will go to the original <div>. Is this possible, or are there better ways to do such a thing?

Thanks
Brian

 

[tiamat2012]

I haven't used this before but from looking around on the forums I would look into the CSS visibility attribute.

You can use javascript to change it from visible to not, so div will be there, when you click on the button that one is visible, when you click again its not.

here's a link that may help:

http://www.w3schools.com/css/pr_class_visibility.asp

and you could get it by doing something like document.getElementById["YourDivId"].style.visibility="hidden" or
document.getElementById["YourDivId"].style.visibility="visible"

-Kerry

 

[BillyRayPreachersSon]

Brian,

Your post has so much information missing from it, it would be hard to give an accurate answer.

Then when the same image is click again it will go to the original <div>

What is "it"? How does "it" "go" to a div? What happens to the new div that has appeared? Does that new div dissapear, or do all the new divs stack up?

If you could perhaps explain a bit better about what it is you are trying to achieve, I'm sure someone will be able to help you out.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[charIie]

Lets say the image clicked is named Bob. The original <div> is named Tom. The changed <div> is named Mat. So when you click on Bob (first click) Tom changes to Mat. When you click on Bob again (second click) Mat changes to Tom. Now this could be done by hiding or layering. But most likely I will be using the hiding option because it seems like it would work the best. Hope that helped to clear things up.

Thanks for your help.

 

[BillyRayPreachersSon]

I'm really not tying to be obtuse here... but that's a worse description than the original, and half patronising to boot - we're not at primary school here.

What do you mean by "changes to"? Does the "Mat" div move to be inside the "Tom" div? Move to where it is? Have its ID change? What?

You really do need to give a full and proper explanation if you are to get any proper help.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[charIie]

It would move to where it is, or overlap it. I am using css positioning.

 

[caoamo]

Brian,

Are both div's of equal size? Since you are using absolute positioning, if they are of same size, just place both divs on the page with the same coordinates. Then, in the onclick event of the <a href> tag containing your image, call a function to hide the upper one. See below

function changeDiv() {
	if (whichDiv =="div1") {
		document.getElementById("div1").style.visibility = "hidden";
		whichDiv = "div2";
	}
	else {
		document.getElementById("div1").style.visibility = "visible";
		whichDiv = "div1";
	}
}

then for the image:

<a href="" onclick="changeDiv();return false;"><img src="yourImageSRCHere" />

 

[BillyRayPreachersSon]

Brian,

Did you solve this in the end?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[charIie]

Yes, thank you for all your help. I got it working with caoamo 's description.

 

[EidolonNight]

I don't mean to intrude but I am using something almost exactly like this.

My problem is the Div that is hidden then visible will not keep the correct position in all browsers. I have posted my concerns here

http://www.tek-tips.com/viewthread.cfm?qid=1212888&page=4

Please check it out!

Thank you
James