Results 1 to 12 of 12
  1. #1
    Join Date
    Feb 2004
    Location
    North Carolina
    Posts
    43

    Advice needed for this situation!!!

    On my website www.taylorssports.com I have lots of products that I sell. What I want to do is create some type of pop-up window that would show the ingredients of the product without having to create a whole new web page, because I have a lot of products there now and more coming. Is there anyway to do this? It would be just a small window with information.

    Also, if anyone wants to give me any suggestions or pointers about the site please feel free to do so. I know that the site is sort of bland, but I donít have a lot of experience other than HTML.
    Last edited by coppilot; 07-22-2005 at 08:59 AM.

  2. #2
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Maybe this will get you started in the right direction

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    	<script type="text/javascript">
    	function toggle(pop) {
    		if (document.getElementById(pop).style.visibility == "visible") {
    			document.getElementById(pop).style.visibility = "hidden"
    		}
    		else {
    		document.getElementById(pop).style.visibility = "visible"
    		}
    	}
    	</script>
    	<style type="text/css">
    	#ad1, #ad2, #ad3 { background:#FAA ; border:2px solid #000 ; color:#000 ; font-family:sans-serif ; padding:100px 5px ; position:absolute ; top:20px ; left:20px ; width:300px ; visibility:hidden ; z-index:1 }
    	</style>
    	
    </head>
    
    <body>
    
    <div id="ad1"><p align="center"><strong>#1</strong> Hello. I am a popup.<br>I want to be your friend.<br><br><a href="#" onclick="toggle('ad1')">Close Me</a></p></div>
    <div id="ad2"><p align="center"><strong>#2</strong> Hello. I am a popup.<br>I want to be famous.<br><br><a href="#" onclick="toggle('ad2')">Close Me</a></p></div>
    <div id="ad3"><p align="center"><strong>#3</strong> Hello. I am a popup.<br>I want to be left alone.<br><br><a href="#"  onclick="toggle('ad3')">Close Me</a></p></div>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra. <a href="#" onclick="toggle('ad1')">More info</a></p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra.  <a href="#" onclick="toggle('ad2')">More info</a></p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra.  <a href="#" onclick="toggle('ad3')">More info</a></p>
    
    </body>
    </html>
    Save that code as an .html document, and you'll see how it works. HTH!
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    Join Date
    Feb 2004
    Location
    North Carolina
    Posts
    43
    That's pretty cool. Thanks!

  4. #4
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    You're welcome

    Slightly OT, this same type of script is the foundation for very efficient DHTML menu coding too. Feel free to find interesting ways to convert it
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  5. #5
    Join Date
    Feb 2004
    Location
    North Carolina
    Posts
    43
    the_pm, can you check this out? go to my site www.taylorssports.com and click on my More Info link under the golf gloves. Is there any reason why it scrolls the page back up to the top rather than staying where it is? Thanks

  6. #6
    Join Date
    May 2005
    Posts
    50
    Its because you have this:

    top:20px ; left:20px ;

    It is going to place the window 20px from the top and 20px from the left

  7. #7
    Join Date
    Feb 2004
    Location
    North Carolina
    Posts
    43
    thank you!!

  8. #8
    Join Date
    May 2005
    Posts
    50
    No problem. I am trying to find a script that I know I have in my resources here. It will just pop out on the location of the pointer. I am pulling a blank at the moment, but will let you know if I find it. Last time I did something like this was so long ago...

  9. #9
    Join Date
    Feb 2004
    Location
    North Carolina
    Posts
    43
    is there anyway to make it popup with scrolling the page?

  10. #10
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    You can pop it up using relative positioning, making it relative to the link being clicked. I've not tried this myself, but I don't see how it would be too difficult to do.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  11. #11
    Join Date
    Mar 2002
    Posts
    272
    Here are a couple of alternatives as well...


    Click for the following examples and code...


    traditional Centered pop:

    this will open a sized centered window, you will be required to make a target page for each link:


    Centered pop with iframe:

    this will open a sized centered window with a inline frame, you will be required to make a target page for each link.

    Useful for large documents
    that may not fit in target.



    Change image pop:

    Allows you to load a differnet image into the the same target window.

    Great for product close ups or
    galleries.
    Why, Iím afraid I canít explain myself, sir, because Iím not myself, you know... - Lewis Carroll

  12. #12
    Join Date
    Feb 2004
    Location
    North Carolina
    Posts
    43
    Thanks to everyone.

Posting Permissions

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