Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get my pop up to work!

    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?

    Code:
    <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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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 first and fix the errors in it. )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You may simply pass the required id via the function call and receive that value from the function definition, like
    Code:
    onclick="show('myid')"
    Code:
    function show(id)
    {
    if (appearance == "notShown")
    {
    document.getElementById(id).style.display = "inline";
    appearance = "shown";
    }
    }
    and similarly for the other one too.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    Code:
    <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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry its still not working for me, i tried adding what I think you mean to the coed below...

    Code:
    <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>

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Um.. looks like you haven't read/followed my first comment
    Code:
    <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!)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, still doesn't seem to work, first box is ok, second doesn't.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd do something like
    Code:
    <!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>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    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

    Code:
    .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
    Code:
    <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
    woot found the avatar options...i swear they didn't exist b4

  • #12
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much it work fine, your a star!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •