...

View Full Version : Can't get my pop up to work!



murrayprice
11-08-2009, 03:58 PM
Can somebody give me a bit of help with the below code. The problem is that it works fine for the first pop up box but not for the other(s). I think it has something to do with the script using the getelementbyid. Can anybody help?


<script type="text/javascript">
var appearance = "notShown"
function show()
{
if (appearance == "notShown")
{
document.getElementById('P1').style.display = "inline";
appearance = "shown";
}
}

function remove()
{
document.getElementById('P1').style.display = "none";
appearance = "notShown";
}
</script>


<style type="text/css">
p#P1 { width: 319px; height: 169px; display:none; background-color: grey; position:absolute;z-index:2; }

p#P1 b { padding: 10px; float: left; }

p#P1 span { width: 300px; float: left; padding: 10px;}

button.close {float:right; margin: 5px; }
</style>


<a href="#" onclick="show()">box 1</a>

<p id="P1"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove()">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>


<br /><br /><br /><br /><br /><br />


<a href="#" onclick="show()">box 2</a>

<p id="P1"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove()">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

abduraooft
11-08-2009, 04:18 PM
I think it has something to do with the script using the getelementbyid. Can anybody help? The id is like an identity and thus you can't have the same value for the id attribute for multiple elements in a document. ( Or in other words, your markup is invalid, so validate it (http://validator.w3.org/#validate_by_input) first and fix the errors in it. :))

murrayprice
11-08-2009, 04:33 PM
Ok thanks,

So how do I set the javascript to not look for specific id's, does that make sense? I used a code I found on another forum but don't now how to make it not target specific id's but work all the pop up links I use.

abduraooft
11-08-2009, 04:38 PM
You may simply pass the required id via the function call and receive that value from the function definition, like

onclick="show('myid')"

function show(id)
{
if (appearance == "notShown")
{
document.getElementById(id).style.display = "inline";
appearance = "shown";
}
} and similarly for the other one too.

murrayprice
11-08-2009, 04:46 PM
I know this is a big ask but please could you add it into the code for me, I really have no javascript knowledge. I just tried adding it and I can't seem to get it to work.

abduraooft
11-08-2009, 04:53 PM
I really have no javascript knowledge. I just tried adding it and I can't seem to get it to work.
In the above posts, myid is the the id attribute value of a <p> tag

<a href="#" onclick="show('myid')">box 1</a>

<p id="myid"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove('myid')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>

You may duplicate this by changing the id part.

murrayprice
11-08-2009, 05:08 PM
sorry its still not working for me, i tried adding what I think you mean to the coed below...


<head>
<script type="text/javascript">
var appearance = "notShown"
function show(id)
{
if (appearance == "notShown")
{
document.getElementById(id).style.display = "inline";
appearance = "shown";
}
}

function remove(id)
{
document.getElementById(id).style.display = "none";
appearance = "notShown";
}
</script>


<style type="text/css">

p#myid { width: 319px; height: 169px; display:none; background-color: grey; position:absolute;z-index:2; }

p#myid b { padding: 10px; float: left; }

p#myid span { width: 300px; float: left; padding: 10px;}

button.close {float:right; margin: 5px; }
</style>

</head>

<a href="#" onclick="show('myid')">box 1</a>

<p id="myid"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove('myid')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>

<br /><br /><br /><br /><br /><br />

<a href="#" onclick="show('myid')">box 2</a>

<p id="myid"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove('myid')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>

abduraooft
11-08-2009, 05:11 PM
Um.. looks like you haven't read/followed my first comment

<head>
<script type="text/javascript">
var appearance = "notShown"
function show(id)
{
if (appearance == "notShown")
{
document.getElementById(id).style.display = "inline";
appearance = "shown";
}
}

function remove(id)
{
document.getElementById(id).style.display = "none";
appearance = "notShown";
}
</script>


<style type="text/css">

p#myid { width: 319px; height: 169px; display:none; background-color: grey; position:absolute;z-index:2; }

p#myid b { padding: 10px; float: left; }

p#myid span { width: 300px; float: left; padding: 10px;}

button.close {float:right; margin: 5px; }
</style>

</head>

<a href="#" onclick="show('myid')">box 1</a>

<p id="myid"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove('myid')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>

<br /><br /><br /><br /><br /><br />

<a href="#" onclick="show('myid1')">box 2</a>

<p id="myid1"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove('myid1')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>
(untested!)

murrayprice
11-08-2009, 05:22 PM
Sorry, still doesn't seem to work, first box is ok, second doesn't.

abduraooft
11-08-2009, 05:35 PM
I'd do something like

<!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" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function toggle(id,option)
{
if (option == "show")
document.getElementById(id).className='shown';
else
document.getElementById(id).className='hide';
}


window.onload=function (){
var elms=document.getElementById('wrapper').getElementsByTagName('p');
for(var i=0;i<elms.length;i++)
elms[i].className='hide'
}
</script>


<style type="text/css">
p.show{display:block;}
p.hide{display:none;}
#wrapper p { width: 319px; height: 169px; background-color: grey; position:absolute;z-index:2; }

#wrapperp b { padding: 10px; float: left; }

#wrapper p span { width: 300px; float: left; padding: 10px;}

button.close {float:right; margin: 5px; }
</style>

</head>
<div id="wrapper">
<a href="#" onclick="toggle('myid','show')">box 1</a>

<p id="myid" class="popup"><b>Lorem Ipsum</b><button type="button"
class="close" onclick="toggle('myid','hide')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>

<br /><br /><br /><br /><br /><br />

<a href="#" onclick="toggle('myid1','show')">box 2</a>

<p id="myid1" class="popup"><b>Lorem Ipsum</b><button type="button" class="close"
onclick="toggle('myid1','hide')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>
</div>
</body>
</html>

godofreality
11-08-2009, 05:37 PM
part of the problem is your css i suggest not styling the elements u want to have pop up using thier id and give them a class so sumthing like this



.hidden { width: 319px; height: 169px; display:none; background-color: grey; position:absolute;z-index:2; }

.hidden b { padding: 10px; float: left; }

.hidden span { width: 300px; float: left; padding: 10px;}

this will let u use that block of css on all your pop ups without having to write a bunch of css for individual IDs


<p class="hidden" id="myid"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove('myid')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>

<br /><br /><br /><br /><br /><br />

<a href="#" onclick="show('myid1')">box 2</a>

<p class="hidden" id="myid1"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove('myid1')">X</button>

<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>

</p>

this should get it working

murrayprice
11-08-2009, 05:56 PM
Thanks so much it work fine, your a star!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum