Popup Text Window

minfinger · #1 05-28-2010, 06:12 AM

I want to build a pop up text window for the Product Details page that explains all of the options.

I want to call it Options FAQ.

My thought is that like those java image viewers that have the next and previous, like http://www.lokeshdhakar.com/projects/lightbox2/ I hope to be able to build it into a scrollable window and not to have to open a new browser window or redirect.

photo · #2 05-28-2010, 06:20 AM

I use this css script from Dynamic Drive for pop-ups and it works very well.

minfinger · #3 05-28-2010, 07:00 AM

Photo,

This will do text with scroll?

minfinger · #4 05-28-2010, 07:07 AM

Actually I think this will get me what I need.
http://www.dynamicdrive.com/dynamicindex11/abox2.htm

I'll just have to mess with it for a while.

minfinger · #5 05-30-2010, 05:54 AM

OK so I'm trying to do this Script, but I want to have a text link to the run the javascript.

I know it should be like below, but for some reason it's not working.

Code:

<a href="javascript:showbox('faq')">link</a>

photo · #6 05-30-2010, 06:47 AM

Quote:

Originally Posted by minfinger

OK so I'm trying to do this Script, but I want to have a text link to the run the javascript.

I know it should be like below, but for some reason it's not working.

Code:

<a href="javascript:showbox('faq')">link</a>

Where did you put the script? Make sure you have the paths to the script correct.

minfinger · #7 05-30-2010, 08:47 AM

Acutally I'm just testing it at the moment on my local C Drive. Everything is in the same directory.

Here's the HTML file

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript" src="popup.js"></script>
</head>

<body>
<script>
window.onload=function(){
new popUp(200, 100, 500, 400, "faq", "<ul>
  <li><strong>Home Again Micro Chip</strong>
    <ul>
      <li>Its a reality: pets get lost.  Without proper identification, 90% never   return home.  The HomeAgain pet 

identification system includes a   national network of over 20,000 veterinarians and animal shelters,   200,000 

volunteer PetRescuers, and pet safety and wellness services   designed to prevent your pet from becoming an 

unfortunate statistic.    Give your pet the protection it needs for only $39.99, Give it a   HomeAgain microchip!!! 

 Each puppy that recieves a microchip will come   with an I.D. tag with your puppies unique 10 digit number. </li>
    </ul>
  </li>
  <li><strong>Deposit</strong>
    <ul>
      <li>A $100 deposit will hold the puppy of your choice for 7 days. Deposits   are non-refundable. Please call 

us and write in the special instructions   box the name of the puppy to let us know which puppy you would like to   

reserve. 740-497-2333 </li>
    </ul>
  </li>
  <li><strong>Shipping Options</strong>
    <ul>
      <li><strong>Standard Shipping to Nearest Airport
        </strong>
        <ul>
          <li>Includes the following: 1. Airfare  2. Vet Health Certificate  3. Travel Kennel  4. Puppy Toy</li>
        </ul>
      </li>
      <li><strong>Overnight Shipping
        </strong>
        <ul>
          <li>Unknown</li>
        </ul>
      </li>
      <li><strong>Local Pickup in Mount Vernon, OH
        </strong>
        <ul>
          <li>16149 Wooster Rd. Mt. Vernon OH 43050</li>
          <li><a href="http://maps.google.com/maps?q=16149+Wooster+Rd.+Mt.+Vernon+OH+43050&amp;oe=utf-

8&amp;client=firefox-a&amp;ie=UTF8&amp;hq=&amp;hnear=16149+Wooster+Rd,+Mt+Vernon,+Knox,+Ohio

+43050&amp;gl=us&amp;ei=iooATJ2SFsL88Aba6oWlDQ&amp;ved=0CBkQ8gEwAA&amp;z=16" target="_blank">Google Map 

Link</a></li>
        </ul>
      </li>
      <li><strong>Door to Door Delivery
        </strong>
        <ul>
          <li>Little Puppies Online will hand deliver your puppy to your door</li>
          <li>Please call 740-497-2333 before you choose this option.</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><strong>Unconditional Replacement Guarantee
    </strong>
    <ul>
      <li>1 (one) year Unconditional Replacement Guarantee</li>
      <li>2 (two) year Unconditional Replacement Guarantee</li>
      <li>3 (three) year Unconditional Replacement Guarantee</li>
      <li>If you purchase an unconditional replacement guarantee, you have the   assurance that if your pet is in 

an unfortunate accident, we will give   you a new puppy.  Nothing will replace your pet, but having a new puppy   

will help ease the pain.  Also, with this guarantee, you will not have   to worry about the financial aspect of 

buying a new puppy.  If your   puppy dies for any reason at all within one year of purchase, we will   replace it 

with any puppy of your choice of equal or lesser value plus   shipping (if needed).  All we need is a death 

certificate from your   local veterinarian.</li>
    </ul>
  </li>
</ul>", "white", "black", "bold 10pt sans-serif", "Title Bar", "navy", "white", "#dddddd", "gray", "black", true, true, true, true, false);

}
</script>
<a href="javascript:showbox('faq')">link</a>

</body>
</html>

minfinger · #8 05-30-2010, 09:58 AM

Ok, and OMG. I think I figure out why it wasn't working. 1. It didn't like my Google Maps Link I had. 2. Look at the way I had to make the HTML Code one continous line. 3. It doesn't like Bullet points as the first level of the bulleted list, only numbers, then bullets.

Here's a link to the test code HTML file. I haven't put it in the X-Cart yet. I also turned off the auto popup as I don't need that function. I may just put the Google Map Link in the X-cart product_details.tpl

Click the "PopUp"
http://littlepuppiesonline.msidesigns.com/skin1/popup/Test.html

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript" src="popup.js"></script>
</head>

<body>
<script>
window.onload=function(){    
new popUp(350, 125, 600, 380, "Div", "<ol><li><strong>Home Again Micro Chip</strong><ul><li>Its a reality: pets get lost.  Without proper identification, 90% never return home.  The HomeAgain pet identification system includes a national network of over 20,000 veterinarians and animal shelters, 200,000 volunteer PetRescuers, and pet safety and wellness services designed to prevent your pet from becoming an unfortunate statistic.  Give your pet the protection it needs for only $39.99, Give it a HomeAgain microchip!!!  Each puppy that recieves a microchip will come with an I.D. tag with your puppies unique 10 digit number.</li></ul></li><li><strong>Deposit</strong><ul><li>A $100 deposit will hold the puppy of your choice for 7 days. Deposits   are non-refundable. Please call us and write in the special instructions   box the name of the puppy to let us know which puppy you would like to reserve. 740-497-2333</li></ul></li><li><strong>Shipping Options</strong><ul><li><strong>Standard Shipping to Nearest Airport</strong><ul><li>Includes the following: 1. Airfare  2. Vet Health Certificate  3. Travel Kennel  4. Puppy Toy</li></ul></li><li><strong>Overnight Shipping</strong><ul><li>Unknown</li></ul></li><li><strong>Local Pickup in Mount Vernon, OH</strong><ul><li>16149 Wooster Rd. Mt. Vernon OH 43050</li></ul></li><li><strong>Door to Door Delivery</strong><ul><li>Little Puppies Online will hand deliver your puppy to your door</li><li>Please call 740-497-2333 before you choose this option.</li></ul></li></ul></li></ol>", "white", "black", "9pt sans-serif", "Options FAQ", "navy", "white", "#dddddd", "gray", "black", false, true, true, true, false);
}
</script>
<a href="javascript:showbox('Div')">link</a>

</body>
</html>

photo · #9 05-30-2010, 10:05 AM

Glad you got it to work. Most of this stuff just requires a bit of plain around with.

minfinger · #10 05-30-2010, 01:06 PM

Am I just missing it our is there not a real easy way to integrate a Map Link into the X-Cart system?