473,511 Members | 16,660 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

in page popup css and javascript code does not work outside of original test page

MusoFreak200
96 New Member
hello fellow programmers and lifeforms!

i have been working with a in page css and javascript popup message box which will display correctly when used in the original test page but when i have attempted to add it into the source code of every other form of page, it will not display correctly.

it is supposed to look similar to what this site does when you click expand on the code.

i was wondering if anyone could help me?

okay i will post the code of the original test files but i would like all programmers who would like to replicate it to request if you could use it.

"test_index.html" file
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title></title>
  6.  
  7.     <script type="text/javascript" src="csspopup.js"></script>
  8.  
  9.  
  10.     <style type="text/css">
  11.  
  12.     #blanket {
  13. background-color:#111;
  14. opacity: 0.65;
  15. filter:alpha(opacity=65);
  16. position:absolute;
  17. z-index: 9001;
  18. top:0px;
  19. left:0px;
  20. width:100%;
  21. }
  22. #popUpDiv {
  23. position:absolute;
  24. background-color:#eeeeee;
  25. width:300px;
  26. height:300px;
  27. z-index: 9002;}
  28.  
  29.     </style>
  30.  
  31. </head>
  32. <body>
  33.  
  34. <div id="blanket" style="display:none;"></div>
  35. <div id="popUpDiv" style="display:none;">
  36. <a href="#" onclick="popup('popUpDiv')">Click Me To Close</a>
  37. </div>
  38. <h1><a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a></h1> 
  39.  
  40. </body>
  41. </html>
  42.  
  43.  

and now for the test javascript file:
"csspopup.js"

Expand|Select|Wrap|Line Numbers
  1. function toggle(div_id) {
  2.     var el = document.getElementById(div_id);
  3.     if (el.style.display == 'none') { el.style.display = 'block'; }
  4.     else { el.style.display = 'none'; }
  5. }
  6. function blanket_size(popUpDivVar) {
  7.     if (typeof window.innerWidth != 'undefined') {
  8.         viewportheight = window.innerHeight;
  9.     } else {
  10.         viewportheight = document.documentElement.clientHeight;
  11.     }
  12.     if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
  13.         blanket_height = viewportheight;
  14.     } else {
  15.         if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
  16.             blanket_height = document.body.parentNode.clientHeight;
  17.         } else {
  18.             blanket_height = document.body.parentNode.scrollHeight;
  19.         }
  20.     }
  21.     var blanket = document.getElementById('blanket');
  22.     blanket.style.height = blanket_height + 'px';
  23.     var popUpDiv = document.getElementById(popUpDivVar);
  24.     popUpDiv_height = blanket_height / 2 - 150; //150 is half popup's height
  25.     popUpDiv.style.top = popUpDiv_height + 'px';
  26. }
  27. function window_pos(popUpDivVar) {
  28.     if (typeof window.innerWidth != 'undefined') {
  29.         viewportwidth = window.innerHeight;
  30.     } else {
  31.         viewportwidth = document.documentElement.clientHeight;
  32.     }
  33.     if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
  34.         window_width = viewportwidth;
  35.     } else {
  36.         if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
  37.             window_width = document.body.parentNode.clientWidth;
  38.         } else {
  39.             window_width = document.body.parentNode.scrollWidth;
  40.         }
  41.     }
  42.     var popUpDiv = document.getElementById(popUpDivVar);
  43.     window_width = window_width / 2 - 150; //150 is half popup's width
  44.     popUpDiv.style.left = window_width + 'px';
  45. }
  46. function popup(windowname) {
  47.     blanket_size(windowname);
  48.     window_pos(windowname);
  49.     toggle('blanket');
  50.     toggle(windowname);
  51. }
  52.  
now the correct display was supposed to open up the popup inpage and inwindow so that it:
a) would not have to be re loaded
b) would not be blocked by popup blockers because it was not actually a popup but a little window
c) put a "blanket" or opacity change over all of the not message box part of the page
d) end up center screen
e) be used for notifications, warnings, image enlargements, etc

but when i try to incoperate it into any other page or website it will just set the page back to the top (without reloading) just like an anchoured link.
but i had not created it as or used an anchour link.

i will also post the page in which i want to add it so that it makes it easier for you to see where i am using it.

the following info is for my home work so i expect that no one and for no reason will use it and i expect that you must ask me first before the use of any of this code.

and by the way i really do appreaciate you reading this far and that you are genuinly trying to help me

this is the problem page:
"product9320600031626.html"

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Home | Bulk Cleaning and Pool Supplies</title>
  6.  
  7.  
  8. <link rel="stylesheet" type="text/css" href="../../../img_layout/bulk_cleaning_and_pool_supplies_style_sheet.css" />
  9.  
  10. <script type="text/javascript" src="../../../product_pages/product_scripts/csspopup.js"></script>
  11.  
  12. <script type="text/javascript" src="../../../product_pages/product_scripts/product_price_variables.js"></script>
  13. <link rel="stylesheet" type="text/css" href="../../../product_pages/product_scripts/product_style_sheet.css" />
  14.  
  15. <link rel="stylesheet" type="text/css" href="../../../img_layout/buttons_and_search_forms/reset.css" />
  16. <link rel="stylesheet" type="text/css" href="../../../img_layout/buttons_and_search_forms/demo.css" />
  17. <script type="text/javascript" src="../../../img_layout/buttons_and_search_forms/css_browser_selector.js"></script>
  18.  
  19. <script type="text/javascript" src="../../../top_navigation_bar/jQuery JavaScript Library v1_5_2.js"></script>
  20. <script type="text/javascript" src="../../../top_navigation_bar/gooeymenu.js"></script>
  21. <link rel="stylesheet" type="text/css" href="../../../top_navigation_bar/gooeymenu.css" />
  22.  
  23. <script type="text/javascript" src="../../../side_navigation_bar/expanding_side_navi_bar_javascript_action.js"></script>
  24. <script type="text/javascript" src="../../../side_navigation_bar/ddaccordion.js"></script>
  25. <script type="text/javascript" src="../../../side_navigation_bar/visual_action_script.js"></script>
  26. <link rel="Stylesheet" href="../../../side_navigation_bar/side_navigation_bar_style_sheet.css" />
  27.  
  28.  
  29.  
  30.  
  31.  
  32. </head>
  33.  
  34. <body>
  35.  
  36.  
  37. <center>
  38. <table width="1250" border="0" cellpadding="0" cellspacing="0">
  39. <tr>
  40. <td id="topleftcorner">
  41.  
  42. </td>
  43. <td id="topcenterborder">
  44.  
  45. </td>
  46. <td id="toprightcorner">
  47.  
  48. </td>
  49. </tr>
  50. <tr>
  51. <td id="leftsidebar">
  52.  
  53. </td>
  54. <td>
  55. <center>
  56. <table width="1150" id="topheadersection">
  57. <tr>
  58.     <td bgcolor="#00CCCC">
  59.         <img id="topleftcornerheaderlogo" alt="Bulk Cleaning And Pool Supplies Logo" src="http://bytes.com/img_layout/header_03.jpg" width="588" height="265" align="left" />
  60.     </td>
  61. <td id="toprightcornersun" align="right"><br />
  62.  
  63. <table id="searchbarbackground" align="right">
  64.  
  65.   <tr> 
  66.     <td id="searchbarplacement" align="left">
  67.         <form action="http://www.brainyquote.com/search_results.html" class="search-wrapper">
  68.  
  69.             <!-- <input type="hidden" name="cx" value="partner-pub-9038795104372754:y9fbr1-e56h" />
  70.             <input type="hidden" name="cof" value="FORID:10" />
  71.             <input type="hidden" name="ie" value="ISO-8859-1" /> -->
  72.  
  73.             <input type="text" class="search-field tangerine-glow" /> 
  74.             <input type="submit" class="search-button tangerine" value="search" /> 
  75.         </form>
  76.                     <!-- original css3 designed search field
  77.                     <form class="search-wrapper"> 
  78.                         <input type="text" class="search-field tangerine-glow" /> 
  79.                         <input type="submit" class="search-button tangerine" value="search" /> 
  80.                     </form>
  81.                     -->
  82.  
  83. <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
  84. </td>
  85.   </tr>
  86. </table>
  87.     </td>
  88.  
  89. </tr>
  90. </table>
  91. </center>
  92. <center>
  93. <table width="1150" border="0" cellspacing="0" cellpadding="0">
  94.  
  95.  
  96.  
  97. <tr>
  98. <td bgcolor="#00CCCC">
  99. <div id="gelbuttoncontainer">
  100. <div id="gelbuttonmenubackground" align="center">
  101. <ul id="gooeymenu1" class="gelbuttonmenu">
  102. <li><a href="http://bytes.com/main_pages/index.html">Home</a></li>
  103. <li><a href="http://bytes.com/main_pages/about_us.html">About Us</a></li>
  104. <li><a href="http://bytes.com/main_pages/our_location.html">Our Location</a></li>
  105. <li><a href="http://bytes.com/main_pages/specials.html">Specials</a></li>
  106. <li><a href="http://bytes.com/main_pages/contact_us.html" class="selected">Contact Us</a></li>
  107. <li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
  108. </ul>
  109.  
  110. <script type="text/javascript">
  111. gooeymenu.setup({id: 'gooeymenu1', selectitem:1})
  112. </script>
  113. </div>
  114. </div>
  115.  
  116. </td>
  117. </tr>
  118.  
  119.  
  120.  
  121. </table>
  122. </center>
  123.  
  124.  
  125.  
  126.  
  127.  
  128. <center>
  129. <table width="1150" border="0" cellspacing="0" cellpadding="0">
  130. <tr>
  131. <td bgcolor="#00CCCC" align="center" valign="top" width="225">
  132.  
  133. <h2>Blank Header Left</h2>
  134.  
  135. <div class="arrowlistmenu">
  136.  
  137. <h3 class="menuheader expandable">Pool And Spa Chemicals</h3>
  138. <ul class="categoryitems">
  139. <li><a href="#">Category Sample 01</a></li>
  140. <li><a href="#">Category Sample 02</a></li>
  141. <li><a href="#">Category Sample 03</a></li>
  142. <li><a href="#">Category Sample 04</a></li>
  143. <li><a href="#">Category Sample 05</a></li>
  144. <li><a href="#">Category Sample 06</a></li>
  145. <li><a href="#">Category Sample 07</a></li>
  146. <li><a href="#">Category Sample 08</a></li>
  147. </ul>
  148.  
  149. <h3 class="menuheader expandable">Pool Equipment And Test Kits</h3>
  150. <ul class="categoryitems">
  151. <li><a href="#">Category Sample 01</a></li>
  152. <li><a href="#" class="subexpandable">Category Sample 02</a>
  153.     <ul class="subcategoryitems" style="margin-left: 15px">
  154.     <li><a href="#">Sub Category Sample 01</a></li>
  155.     <li><a href="#">Sub Category Sample 02</a></li>
  156.     <li><a href="#">Sub Category Sample 03</a></li>
  157.     <li><a href="#">Sub Category Sample 04</a></li>
  158.     <li><a href="#">Sub Category Sample 05</a></li>
  159.     </ul>
  160. </li>
  161. <li><a href="#">Category Sample 03</a></li>
  162. <li><a href="#">Category Sample 04</a></li>
  163. <li><a href="#">Category Sample 05</a></li>
  164. <li><a href="#">Category Sample 06</a></li>
  165. </ul>
  166.  
  167. <h3 class="menuheader expandable">Pool Chlorinators</h3>
  168. <ul class="categoryitems">
  169. <li><a href="#">Category Sample 01</a></li>
  170. <li><a href="#">Category Sample 02</a></li>
  171. <li><a href="#">Category Sample 03</a></li>
  172. <li><a href="#">Category Sample 04</a></li>
  173. <li><a href="#">Category Sample 05</a></li>
  174. </ul>
  175.  
  176. <h3 class="menuheader expandable">Pool Cleaners</h3>
  177. <ul class="categoryitems">
  178. <li><a href="#">Category Sample 01</a></li>
  179. <li><a href="#">Category Sample 02</a></li>
  180. <li><a href="#">Category Sample 03</a></li>
  181. <li><a href="#">Category Sample 04</a></li>
  182. <li><a href="#">Category Sample 05</a></li>
  183. </ul>
  184.  
  185. <h3 class="menuheader expandable">Pool Pumps</h3>
  186. <ul class="categoryitems">
  187. <li><a href="#">Category Sample 01</a></li>
  188. <li><a href="#" class="subexpandable">Category Sample 02</a>
  189.     <ul class="subcategoryitems" style="margin-left: 15px">
  190.     <li><a href="#">Sub Category Sample 01</a></li>
  191.     <li><a href="#">Sub Category Sample 02</a></li>
  192.     <li><a href="#">Sub Category Sample 03</a></li>
  193.     <li><a href="#">Sub Category Sample 04</a></li>
  194.     <li><a href="#">Sub Category Sample 05</a></li>
  195.     </ul>
  196. </li>
  197. <li><a href="#">Category Sample 03</a></li>
  198. <li><a href="#">Category Sample 04</a></li>
  199. <li><a href="#">Category Sample 05</a></li>
  200. <li><a href="#">Category Sample 06</a></li>
  201. </ul>
  202.  
  203. <h3 class="menuheader expandable">Pool Filters</h3>
  204. <ul class="categoryitems">
  205. <li><a href="#">Category Sample 01</a></li>
  206. <li><a href="#">Category Sample 02</a></li>
  207. <li><a href="#">Category Sample 03</a></li>
  208. <li><a href="#">Category Sample 04</a></li>
  209. <li><a href="#">Category Sample 05</a></li>
  210. <li><a href="#">Category Sample 06</a></li>
  211. <li><a href="#">Category Sample 07</a></li>
  212. <li><a href="#">Category Sample 08</a></li>
  213. </ul>
  214.  
  215. <h3 class="menuheader expandable">Pool Lights</h3>
  216. <ul class="categoryitems">
  217. <li><a href="#">Category Sample 01</a></li>
  218. <li><a href="#">Category Sample 02</a></li>
  219. <li><a href="#">Category Sample 03</a></li>
  220. <li><a href="#">Category Sample 04</a></li>
  221. <li><a href="#">Category Sample 05</a></li>
  222. <li><a href="#">Category Sample 06</a></li>
  223. <li><a href="#">Category Sample 07</a></li>
  224. <li><a href="#">Category Sample 08</a></li>
  225. </ul>
  226.  
  227. <h3 class="menuheader expandable">Pool Hose</h3>
  228. <ul class="categoryitems">
  229. <li><a href="#">Category Sample 01</a></li>
  230. <li><a href="#" class="subexpandable">Category Sample 02</a>
  231.     <ul class="subcategoryitems" style="margin-left: 15px">
  232.     <li><a href="#">Sub Category Sample 01</a></li>
  233.     <li><a href="#">Sub Category Sample 02</a></li>
  234.     <li><a href="#">Sub Category Sample 03</a></li>
  235.     <li><a href="#">Sub Category Sample 04</a></li>
  236.     <li><a href="#">Sub Category Sample 05</a></li>
  237.     </ul>
  238. </li>
  239. <li><a href="#">Category Sample 03</a></li>
  240. <li><a href="#">Category Sample 04</a></li>
  241. <li><a href="#">Category Sample 05</a></li>
  242. <li><a href="#">Category Sample 06</a></li>
  243. </ul>
  244.  
  245. <h3 class="menuheader expandable">Spare Parts</h3>
  246. <ul class="categoryitems">
  247. <li><a href="#">Category Sample 01</a></li>
  248. <li><a href="#">Category Sample 02</a></li>
  249. <li><a href="#">Category Sample 03</a></li>
  250. <li><a href="#">Category Sample 04</a></li>
  251. <li><a href="#">Category Sample 05</a></li>
  252. </ul>
  253.  
  254. <h3 class="menuheader expandable">Pool Cartridges</h3>
  255. <ul class="categoryitems">
  256. <li><a href="#">Category Sample 01</a></li>
  257. <li><a href="#">Category Sample 02</a></li>
  258. <li><a href="#">Category Sample 03</a></li>
  259. <li><a href="#">Category Sample 04</a></li>
  260. <li><a href="#">Category Sample 05</a></li>
  261. </ul>
  262.  
  263. <h3 class="menuheader expandable">Pool Blankets</h3>
  264. <ul class="categoryitems">
  265. <li><a href="#">Category Sample 01</a></li>
  266. <li><a href="#" class="subexpandable">Category Sample 02</a>
  267.     <ul class="subcategoryitems" style="margin-left: 15px">
  268.     <li><a href="#">Sub Category Sample 01</a></li>
  269.     <li><a href="#">Sub Category Sample 02</a></li>
  270.     <li><a href="#">Sub Category Sample 03</a></li>
  271.     <li><a href="#">Sub Category Sample 04</a></li>
  272.     <li><a href="#">Sub Category Sample 05</a></li>
  273.     </ul>
  274. </li>
  275. <li><a href="#">Category Sample 03</a></li>
  276. <li><a href="#">Category Sample 04</a></li>
  277. <li><a href="#">Category Sample 05</a></li>
  278. <li><a href="#">Category Sample 06</a></li>
  279. </ul>
  280.  
  281. <h3 class="menuheader expandable">Commercial Pool Equipment</h3>
  282. <ul class="categoryitems">
  283. <li><a href="#">Category Sample 01</a></li>
  284. <li><a href="#">Category Sample 02</a></li>
  285. <li><a href="#">Category Sample 03</a></li>
  286. <li><a href="#">Category Sample 04</a></li>
  287. <li><a href="#">Category Sample 05</a></li>
  288. <li><a href="#">Category Sample 06</a></li>
  289. <li><a href="#">Category Sample 07</a></li>
  290. <li><a href="#">Category Sample 08</a></li>
  291. </ul>
  292.  
  293. <h3 class="menuheader expandable">Pool Controllers</h3>
  294. <ul class="categoryitems">
  295. <li><a href="#">Category Sample 01</a></li>
  296. <li><a href="#">Category Sample 02</a></li>
  297. <li><a href="#">Category Sample 03</a></li>
  298. <li><a href="#">Category Sample 04</a></li>
  299. <li><a href="#">Category Sample 05</a></li>
  300. <li><a href="#">Category Sample 06</a></li>
  301. <li><a href="#">Category Sample 07</a></li>
  302. <li><a href="#">Category Sample 08</a></li>
  303. </ul>
  304.  
  305. <h3 class="menuheader expandable">Pool Heaters</h3>
  306. <ul class="categoryitems">
  307. <li><a href="#">Category Sample 01</a></li>
  308. <li><a href="#" class="subexpandable">Category Sample 02</a>
  309.     <ul class="subcategoryitems" style="margin-left: 15px">
  310.     <li><a href="#">Sub Category Sample 01</a></li>
  311.     <li><a href="#">Sub Category Sample 02</a></li>
  312.     <li><a href="#">Sub Category Sample 03</a></li>
  313.     <li><a href="#">Sub Category Sample 04</a></li>
  314.     <li><a href="#">Sub Category Sample 05</a></li>
  315.     </ul>
  316. </li>
  317. <li><a href="#">Category Sample 03</a></li>
  318. <li><a href="#">Category Sample 04</a></li>
  319. <li><a href="#">Category Sample 05</a></li>
  320. <li><a href="#">Category Sample 06</a></li>
  321. </ul>
  322.  
  323. <h3 class="menuheader expandable">Pool Connections, Pipes And Valves</h3>
  324. <ul class="categoryitems">
  325. <li><a href="#">Category Sample 01</a></li>
  326. <li><a href="#">Category Sample 02</a></li>
  327. <li><a href="#">Category Sample 03</a></li>
  328. <li><a href="#">Category Sample 04</a></li>
  329. <li><a href="#">Category Sample 05</a></li>
  330. </ul>
  331.  
  332. <h3 class="menuheader expandable">Ask Ann What Last One Is</h3>
  333. <ul class="categoryitems">
  334. <li><a href="#">Category Sample 01</a></li>
  335. <li><a href="#">Category Sample 02</a></li>
  336. <li><a href="#">Category Sample 03</a></li>
  337. <li><a href="#">Category Sample 04</a></li>
  338. <li><a href="#">Category Sample 05</a></li>
  339. </ul>
  340.  
  341.   <br /><br />
  342. </div>
  343.  
  344. </td>
  345. <td bgcolor="#00CCCC" align="left" valign="top">
  346.      <p align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 22px"><strong>Ambience Floating Candles</strong></p>
  347.  
  348.  
  349.     <div id="ProductBG">
  350.         <div id="MainContentContainer">
  351.  
  352.             <div id="ProductTitle">
  353.                 <script type="text/javascript">
  354.                     document.write("Ambience Floating Candles");
  355.                 </script>
  356.             </div>
  357.  
  358.             <table id="ImgAndDescriptionContainer">
  359.             <tr>
  360.             <td>            
  361.                 <div id="Img">
  362.                     <img alt="Ambience Floating Candles" src="http://bytes.com/topic/javascript/Pictures/picture_product9320600031626.png" width="100%" height="100%" />
  363.                 </div>
  364.             </td>
  365.             <td id="RightContainer">
  366.  
  367.                     <table>
  368.                     <tr>
  369.                     <td id="DescriptionInfoContainer">
  370.  
  371.  
  372.  
  373.                     <script type="text/javascript">
  374.  
  375.                     document.write("Price: $" + product9320600031626);
  376.                     </script>
  377.  
  378.                     <br />
  379.                     <br />
  380.  
  381.  
  382.                     <p id="DescriptionInfoText"><strong>Description:</strong><br />Attractive floating candles create an enchanting visual display for any pool. Ideal for pool parties and backyard BBQs. Scented candle included.</p>
  383.  
  384.  
  385.                     <br />
  386.                     <br />
  387.  
  388.  
  389.                     <script type="text/javascript">
  390.                         var boldquantity = "Quantity: "
  391.  
  392.                         document.write(boldquantity.bold());
  393.                     </script>
  394.  
  395.                     <input type="text" size="3" maxlength="3" value="1" name="quantity" />
  396.  
  397.                     <select>
  398.                         <option value="Blue">Blue</option>
  399.                         <option value="Lavender">Lavender</option>
  400.                         <option value="Pink">Pink</option>
  401.                         <option value="White">White</option>
  402.                     </select>
  403.  
  404.  
  405.                     <div id="blanket" style="display:none;"></div>
  406.                     <div id="popupDiv" style="display:none;">
  407.                     <a href="#" onclick="popup('popUpDiv')">Click Me To Close</a>
  408.                     </div>
  409.                     <a href="product9320600031626.html" onclick="popup('popUpDiv')" class="button tangerine">Add To Cart!</a>
  410.  
  411.                     </td>
  412.                     </tr>
  413.                     </table>
  414.             </td>
  415.             </tr>
  416.             </table>
  417.  
  418.  
  419.  
  420.         </div>
  421.     </div>
  422.  
  423.  
  424.  
  425.      <p style="font-family: Arial, Helvetica, sans-serif; font-size: 18px">Bulk Cleaning and Pool Supplies is an Australian Family Company locally owned and operated with a head office and retail shop located at Woodstock Street Mayfield West.<br /><br />We have been satisfying customers with high quality products and great service since 2007.<br /><br />Our experienced team has a continued commitment to provide you with extensive product knowledge of the pool, cleaning and chemical industry.<br /><br />Customer satisfaction is our priority.</p>
  426.  
  427.  
  428. <br />
  429. <br />
  430. <br />
  431. <br />
  432. <br />
  433. <br />
  434. <br />
  435. <br />
  436. <br />
  437. <br />
  438.  
  439.  
  440. </td>
  441. <td bgcolor="#00CCCC" align="center" valign="top" width="225">
  442.  
  443. <h2>Blank Header Right</h2>
  444.  
  445. <div class="arrowlistmenu">
  446.  
  447. <h3 class="menuheader expandable">Cleaning Chemicals</h3>
  448. <ul class="categoryitems">
  449. <li><a href="#">Category Sample 01</a></li>
  450. <li><a href="#">Category Sample 02</a></li>
  451. <li><a href="#">Category Sample 03</a></li>
  452. <li><a href="#">Category Sample 04</a></li>
  453. <li><a href="#">Category Sample 05</a></li>
  454. <li><a href="#">Category Sample 06</a></li>
  455. <li><a href="#">Category Sample 07</a></li>
  456. <li><a href="#">Category Sample 08</a></li>
  457. </ul>
  458.  
  459. <h3 class="menuheader expandable">Cleaning Dispensers</h3>
  460. <ul class="categoryitems">
  461. <li><a href="#">Category Sample 01</a></li>
  462. <li><a href="#" class="subexpandable">Category Sample 02</a>
  463.     <ul class="subcategoryitems" style="margin-left: 15px">
  464.     <li><a href="#">Sub Category Sample 01</a></li>
  465.     <li><a href="#">Sub Category Sample 02</a></li>
  466.     <li><a href="#">Sub Category Sample 03</a></li>
  467.     <li><a href="#">Sub Category Sample 04</a></li>
  468.     <li><a href="#">Sub Category Sample 05</a></li>
  469.     </ul>
  470. </li>
  471. <li><a href="#">Category Sample 03</a></li>
  472. <li><a href="#">Category Sample 04</a></li>
  473. <li><a href="#">Category Sample 05</a></li>
  474. <li><a href="#">Category Sample 06</a></li>
  475. </ul>
  476.  
  477. <h3 class="menuheader expandable">Bins, Buckets and Trolleys</h3>
  478. <ul class="categoryitems">
  479. <li><a href="#">Category Sample 01</a></li>
  480. <li><a href="#">Category Sample 02</a></li>
  481. <li><a href="#">Category Sample 03</a></li>
  482. <li><a href="#">Category Sample 04</a></li>
  483. <li><a href="#">Category Sample 05</a></li>
  484. </ul>
  485.  
  486. <h3 class="menuheader expandable">Ask Ann</h3>
  487. <ul class="categoryitems">
  488. <li><a href="#">Category Sample 01</a></li>
  489. <li><a href="#">Category Sample 02</a></li>
  490. <li><a href="#">Category Sample 03</a></li>
  491. <li><a href="#">Category Sample 04</a></li>
  492. <li><a href="#">Category Sample 05</a></li>
  493. </ul>
  494.  
  495. <h3 class="menuheader expandable">Dusters And Dustbin Sets</h3>
  496. <ul class="categoryitems">
  497. <li><a href="#">Category Sample 01</a></li>
  498. <li><a href="#" class="subexpandable">Category Sample 02</a>
  499.     <ul class="subcategoryitems" style="margin-left: 15px">
  500.     <li><a href="#">Sub Category Sample 01</a></li>
  501.     <li><a href="#">Sub Category Sample 02</a></li>
  502.     <li><a href="#">Sub Category Sample 03</a></li>
  503.     <li><a href="#">Sub Category Sample 04</a></li>
  504.     <li><a href="#">Sub Category Sample 05</a></li>
  505.     </ul>
  506. </li>
  507. <li><a href="#">Category Sample 03</a></li>
  508. <li><a href="#">Category Sample 04</a></li>
  509. <li><a href="#">Category Sample 05</a></li>
  510. <li><a href="#">Category Sample 06</a></li>
  511. </ul>
  512.  
  513. <h3 class="menuheader expandable">Gloves And Safety Produts (PPE)</h3>
  514. <ul class="categoryitems">
  515. <li><a href="#">Category Sample 01</a></li>
  516. <li><a href="#">Category Sample 02</a></li>
  517. <li><a href="#">Category Sample 03</a></li>
  518. <li><a href="#">Category Sample 04</a></li>
  519. <li><a href="#">Category Sample 05</a></li>
  520. <li><a href="#">Category Sample 06</a></li>
  521. <li><a href="#">Category Sample 07</a></li>
  522. <li><a href="#">Category Sample 08</a></li>
  523. </ul>
  524.  
  525. <h3 class="menuheader expandable">Machines And Vaccumes</h3>
  526. <ul class="categoryitems">
  527. <li><a href="#">Category Sample 01</a></li>
  528. <li><a href="#">Category Sample 02</a></li>
  529. <li><a href="#">Category Sample 03</a></li>
  530. <li><a href="#">Category Sample 04</a></li>
  531. <li><a href="#">Category Sample 05</a></li>
  532. <li><a href="#">Category Sample 06</a></li>
  533. <li><a href="#">Category Sample 07</a></li>
  534. <li><a href="#">Category Sample 08</a></li>
  535. </ul>
  536.  
  537. <h3 class="menuheader expandable">Matting</h3>
  538. <ul class="categoryitems">
  539. <li><a href="#">Category Sample 01</a></li>
  540. <li><a href="#" class="subexpandable">Category Sample 02</a>
  541.     <ul class="subcategoryitems" style="margin-left: 15px">
  542.     <li><a href="#">Sub Category Sample 01</a></li>
  543.     <li><a href="#">Sub Category Sample 02</a></li>
  544.     <li><a href="#">Sub Category Sample 03</a></li>
  545.     <li><a href="#">Sub Category Sample 04</a></li>
  546.     <li><a href="#">Sub Category Sample 05</a></li>
  547.     </ul>
  548. </li>
  549. <li><a href="#">Category Sample 03</a></li>
  550. <li><a href="#">Category Sample 04</a></li>
  551. <li><a href="#">Category Sample 05</a></li>
  552. <li><a href="#">Category Sample 06</a></li>
  553. </ul>
  554.  
  555. <h3 class="menuheader expandable">Microfibre Products</h3>
  556. <ul class="categoryitems">
  557. <li><a href="#">Category Sample 01</a></li>
  558. <li><a href="#">Category Sample 02</a></li>
  559. <li><a href="#">Category Sample 03</a></li>
  560. <li><a href="#">Category Sample 04</a></li>
  561. <li><a href="#">Category Sample 05</a></li>
  562. </ul>
  563.  
  564. <h3 class="menuheader expandable">Mops And Handles</h3>
  565. <ul class="categoryitems">
  566. <li><a href="#">Category Sample 01</a></li>
  567. <li><a href="#">Category Sample 02</a></li>
  568. <li><a href="#">Category Sample 03</a></li>
  569. <li><a href="#">Category Sample 04</a></li>
  570. <li><a href="#">Category Sample 05</a></li>
  571. </ul>
  572.  
  573. <h3 class="menuheader expandable">Ask Ann</h3>
  574. <ul class="categoryitems">
  575. <li><a href="#">Category Sample 01</a></li>
  576. <li><a href="#" class="subexpandable">Category Sample 02</a>
  577.     <ul class="subcategoryitems" style="margin-left: 15px">
  578.     <li><a href="#">Sub Category Sample 01</a></li>
  579.     <li><a href="#">Sub Category Sample 02</a></li>
  580.     <li><a href="#">Sub Category Sample 03</a></li>
  581.     <li><a href="#">Sub Category Sample 04</a></li>
  582.     <li><a href="#">Sub Category Sample 05</a></li>
  583.     </ul>
  584. </li>
  585. <li><a href="#">Category Sample 03</a></li>
  586. <li><a href="#">Category Sample 04</a></li>
  587. <li><a href="#">Category Sample 05</a></li>
  588. <li><a href="#">Category Sample 06</a></li>
  589. </ul>
  590.  
  591. <h3 class="menuheader expandable">Paper Products</h3>
  592. <ul class="categoryitems">
  593. <li><a href="#">Category Sample 01</a></li>
  594. <li><a href="#">Category Sample 02</a></li>
  595. <li><a href="#">Category Sample 03</a></li>
  596. <li><a href="#">Category Sample 04</a></li>
  597. <li><a href="#">Category Sample 05</a></li>
  598. <li><a href="#">Category Sample 06</a></li>
  599. <li><a href="#">Category Sample 07</a></li>
  600. <li><a href="#">Category Sample 08</a></li>
  601. </ul>
  602.  
  603. <h3 class="menuheader expandable">Plastic Bags</h3>
  604. <ul class="categoryitems">
  605. <li><a href="#">Category Sample 01</a></li>
  606. <li><a href="#">Category Sample 02</a></li>
  607. <li><a href="#">Category Sample 03</a></li>
  608. <li><a href="#">Category Sample 04</a></li>
  609. <li><a href="#">Category Sample 05</a></li>
  610. <li><a href="#">Category Sample 06</a></li>
  611. <li><a href="#">Category Sample 07</a></li>
  612. <li><a href="#">Category Sample 08</a></li>
  613. </ul>
  614.  
  615. <h3 class="menuheader expandable">Spray Bottle Triggers</h3>
  616. <ul class="categoryitems">
  617. <li><a href="#">Category Sample 01</a></li>
  618. <li><a href="#" class="subexpandable">Category Sample 02</a>
  619.     <ul class="subcategoryitems" style="margin-left: 15px">
  620.     <li><a href="#">Sub Category Sample 01</a></li>
  621.     <li><a href="#">Sub Category Sample 02</a></li>
  622.     <li><a href="#">Sub Category Sample 03</a></li>
  623.     <li><a href="#">Sub Category Sample 04</a></li>
  624.     <li><a href="#">Sub Category Sample 05</a></li>
  625.     </ul>
  626. </li>
  627. <li><a href="#">Category Sample 03</a></li>
  628. <li><a href="#">Category Sample 04</a></li>
  629. <li><a href="#">Category Sample 05</a></li>
  630. <li><a href="#">Category Sample 06</a></li>
  631. </ul>
  632.  
  633. <h3 class="menuheader expandable">Pump Sprayers</h3>
  634. <ul class="categoryitems">
  635. <li><a href="#">Category Sample 01</a></li>
  636. <li><a href="#">Category Sample 02</a></li>
  637. <li><a href="#">Category Sample 03</a></li>
  638. <li><a href="#">Category Sample 04</a></li>
  639. <li><a href="#">Category Sample 05</a></li>
  640. </ul>
  641.  
  642. <h3 class="menuheader expandable">Window Cleaning</h3>
  643. <ul class="categoryitems">
  644. <li><a href="#">Squeegees</a></li>
  645. <li><a href="#">Wipes</a></li>
  646. <li><a href="#">Category Sample 03</a></li>
  647. <li><a href="#">Category Sample 04</a></li>
  648. <li><a href="#">Category Sample 05</a></li>
  649. </ul>
  650.  
  651.   <br /><br />
  652. </div>
  653.  
  654. </td>
  655. </tr>
  656. </table>
  657. <table bgcolor="#00CCCC" width="1150">
  658. <tr>
  659. <td id="footerdisplay">
  660.  
  661. <p><font size="4"><br /><br /><br />Web Development By Jock Engelman<br />Developed in 2011</font></p>
  662.  
  663. </td>
  664. </tr>
  665. </table>
  666. </center>
  667. <td id="rightsidebar">
  668.  
  669. </td>
  670. <tr>
  671. <td id="bottomleftcorner">
  672.  
  673. </td>
  674. <td id="bottomcenterborder">
  675.  
  676. </td>
  677. <td id="bottomrightcorner">
  678.  
  679. </td>
  680. </tr>
  681. </td>
  682.  
  683. </tr>
  684. </table>
  685.  
  686. </center>
  687.  
  688.  
  689. </body>
  690. </html>
  691.  
  692.  




also this is the code that i am using for the style sheet for the layout and the popup css:
"bulk_cleaning_and_pool_supplies_style_sheet.c ss"


Expand|Select|Wrap|Line Numbers
  1. @charset "utf-8";
  2. /* STYLESHEET FOR THE BULK CLEANING AND POOL SUPPLIES WEBSITE */
  3.  
  4.  
  5. /*
  6. #sidebarheader 
  7. {
  8.     font:newtimesroman;
  9.     color:Red;}
  10. */
  11.  
  12. /* BEGINING OF THE STYLE CODE FOR THE PAGE LAYOUT */
  13.  
  14. #topleftcorner 
  15. {
  16.     height:50px;
  17.     background-image:url('top_left_corner_02.jpg');}
  18. #topcenterborder 
  19. {
  20.     height:50px;
  21.     background-image:url('top_center_02.jpg');}
  22. #toprightcorner 
  23. {
  24.     height:50px;
  25.     background-image:url('top_right_corner_02.jpg');}
  26. #leftsidebar 
  27. {
  28.     width:50px;
  29.     background-image:url('left_sidebar_02.jpg');}
  30. #topheadersection 
  31. {
  32.     background-color:#00cccc;
  33.     height:265px;}
  34. #topleftcornerheaderlogo 
  35. {
  36.     width:588px;
  37.     height:265px;
  38.     vertical-align:top;}
  39. #toprightcornersun 
  40. {
  41.     width:400px;
  42.     height:265px;
  43.     vertical-align:bottom;
  44.     padding-bottom:50px;
  45.     background-image:url('header_top_right_corner_sun_13.jpg');}
  46. #searchbarbackground 
  47. {
  48.     width:400px;
  49.     height:10px;}
  50. #searchbarplacement
  51. {
  52.     width:400px;
  53.     height:10px;
  54.     vertical-align:bottom;}
  55. #gelbuttoncontainer
  56. {
  57.     padding-left:200px;
  58.     padding-right:200px;}
  59. #gelbuttonmenubackground 
  60. {
  61.     border:2px solid #a1a1a1;
  62.     border-radius:25px;
  63.     -moz-border-radius:25px;    /* Firefox 3.6 and earlier */
  64.     background:#66ff00;}
  65. #footerdisplay 
  66. {
  67.     padding-left:75px;
  68.     padding-right:75px;
  69.     width:1000px;
  70.     height:300px;
  71.     vertical-align:top;
  72.     text-align:center;
  73.     background-position:center;
  74.     background-repeat:no-repeat;
  75.     background-image:url('footer_waves_04.jpg');}
  76. #rightsidebar 
  77. {
  78.     width:50px;
  79.     height:150px;
  80.     background-image:url('right_sidebar_02.jpg');}
  81. #bottomleftcorner 
  82. {
  83.     height:50px;
  84.     background-image:url('bottom_left_corner_02.jpg');}
  85. #bottomcenterborder 
  86. {
  87.     height:50px;
  88.     background-image:url('bottom_center_02.jpg');}
  89. #bottomrightcorner 
  90. {
  91.     height:50px;
  92.     background-image:url('bottom_right_corner_02.jpg');}
  93.  
  94.  
  95.  
  96. /* END OF THE STYLE CODE FOR THE PAGE LAYOUT */
  97.  
  98.  
  99.  
  100.  
  101. /* BEGINING OF THE CSS CODE FOR THE IN PAGE POPUP */
  102.  
  103.  
  104.     #blanket {
  105.         background-color:#111;
  106.         opacity: 0.65;
  107.         filter:alpha(opacity=65);
  108.         position:absolute;
  109.         z-index: 9001;
  110.         top:100px;
  111.         left:100px;
  112.         width:100%;}
  113.     #popUpDiv {
  114.         position:absolute;
  115.         background-color:#eeeeee;
  116.         width:300px;
  117.         height:300px;
  118.         z-index: 9002;}
  119.  
  120.  
  121. /* END OF THE CSS CODE FOR THE IN PAGE POPUP */
  122.  
  123.  
  124.  
  125. /* css button code */
  126.  
  127. .button-wrapper {
  128.     width: 165px;
  129.     background: #E0E0E0;
  130.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  131.     background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7)); 
  132.     background: -moz-linear-gradient(top,  #E9E9E9,  #D7D7D7); 
  133.     padding: 8px;
  134.     -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  135.     -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  136.     -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  137.     -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  138.     box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  139.     -webkit-border-radius: 50px; 
  140.     -moz-border-radius: 50px; 
  141.     -o-border-radius: 50px; 
  142.     -khtml-border-radius: 50px;
  143.     border-radius: 50px;
  144. }
  145.  
  146. a.button {
  147.     display: block;
  148.     width: 165px;
  149.     height: 35px;
  150.     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  151.     font-size: 14px;
  152.     text-align: center;
  153.     line-height: 34px;
  154.     text-decoration: none;
  155.     -webkit-border-radius: 50px; 
  156.     -moz-border-radius: 50px; 
  157.     -o-border-radius: 50px; 
  158.     -khtml-border-radius: 50px;
  159.     border-radius: 50px;
  160.     font-weight: bold;
  161. }
  162.  
  163. a.button:hover, a.button:active {
  164.     border: none;
  165. }
  166.  
  167.  
  168.  
  169.  
  170. /* Search Fields */
  171.  
  172. .search-wrapper {
  173.     width: 264.285714285715px;
  174.     height: 25px;
  175.     background: #E0E0E0;
  176.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  177.     background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7)); 
  178.     background: -moz-linear-gradient(top,  #E9E9E9,  #D7D7D7); 
  179.     padding: 8px;
  180.     -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  181.     -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  182.     -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  183.     -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  184.     box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  185.     -webkit-border-radius: 50px; 
  186.     -moz-border-radius: 50px; 
  187.     -o-border-radius: 50px; 
  188.     -khtml-border-radius: 50px;
  189.     border-radius: 50px;
  190.     margin-bottom: 20px;
  191. }
  192.  
  193. input.search-field {
  194.     display: block;
  195.     width: 166.862745098039px;
  196.     height: 25px;
  197.     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  198.     font-size: 14px;
  199.     color: #ACACAC;
  200.     text-align: left;
  201.     line-height: 34px;
  202.     text-decoration: none;
  203.     -webkit-border-radius: 50px; 
  204.     -moz-border-radius: 50px; 
  205.     -o-border-radius: 50px; 
  206.     -khtml-border-radius: 50px;
  207.     border-radius: 50px;
  208.     border: none;
  209.     font-weight: normal;
  210.     float: left;
  211.     padding: 0 10px;
  212.     background: #F5F5F5;
  213.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3F3F3', endColorstr='#FFFFFF');
  214.     background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#FFFFFF)); 
  215.     background: -moz-linear-gradient(top,  #F3F3F3,  #FFFFFF); 
  216.     -webkit-box-shadow: inset 0px 1px 1px #9A9A9A;
  217.     -moz-box-shadow: inset 0px 1px 1px #9A9A9A;
  218.     -o-box-shadow: inset 0px 1px 1px #9A9A9A;
  219.     -khtml-box-shadow: inset 0px 1px 1px #9A9A9A;
  220.     box-shadow: inset 0px 1px 1px #9A9A9A;
  221. }
  222.  
  223. input.search-field:focus {
  224.     color: #666;
  225.     outline: none;
  226.     -webkit-box-shadow: inset 0px 1px 1px #4A97BA, inset 0px -1px 1px #4A97BA, 0 0 8px #4A97BA;
  227.     -moz-box-shadow: inset 0px 1px 1px #4A97BA, inset 0px -1px 1px #4A97BA, 0 0 8px #4A97BA;
  228.     -o-box-shadow: inset 0px 1px 1px #4A97BA, inset 0px -1px 1px #4A97BA, 0 0 8px #4A97BA;
  229.     -khtml-box-shadow: inset 0px 1px 1px #4A97BA, inset 0px -1px 1px #4A97BA, 0 0 8px #4A97BA;
  230.     box-shadow: inset 0px 1px 1px #4A97BA, inset 0px -1px 1px #4A97BA, 0 0 8px #4A97BA;
  231. }
  232.  
  233. input.search-button {
  234.     display: block;
  235.     width: 70.7142857142858px;
  236.     height: 25px;
  237.     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  238.     font-size: 12px;
  239.     text-align: center;
  240.     line-height: 34px;
  241.     text-decoration: none;
  242.     -webkit-border-radius: 50px; 
  243.     -moz-border-radius: 50px; 
  244.     -o-border-radius: 50px; 
  245.     -khtml-border-radius: 50px;
  246.     border-radius: 50px;
  247.     font-weight: bold;
  248.     border: none;
  249.     padding: 0;
  250.     float: right;
  251.     cursor: pointer;
  252. }
  253.  
  254.  
  255.  
  256. /* Tangerine */
  257.  
  258. a.tangerine, input.tangerine, ul.tangerine li a, th.tangerine {
  259.     background: #F48E10;
  260.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E7A50F', endColorstr='#EC6D0B');
  261.     background: -webkit-gradient(linear, left top, left bottom, from(#E7A50F), to(#EC6D0B)); 
  262.     background: -moz-linear-gradient(top,  #E7A50F,  #EC6D0B); 
  263.     color: #904108;
  264.     text-shadow: 0px 1px 0px #E9C14D;
  265.     -webkit-box-shadow: inset 0px 1px 0 #CB5D0B;
  266.     -moz-box-shadow: inset 0px 1px 0 #CB5D0B;
  267.     -o-box-shadow: inset 0px 1px 0 #CB5D0B;
  268.     -khtml-box-shadow: inset 0px 1px 0 #CB5D0B;
  269.     box-shadow: inset 0px 1px 0 #CB5D0B;
  270. }
  271.  
  272. a.tangerine:hover, input.tangerine:hover, ul.tangerine li a:hover {
  273.     background: #871A4D;
  274.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4AA11', endColorstr='#EC6D0B');
  275.     background: -webkit-gradient(linear, left top, left bottom, from(#F4AA11), to(#EC6D0B)); 
  276.     background: -moz-linear-gradient(top,  #F4AA11,  #EC6D0B); 
  277.     color: #904108;
  278. }
  279.  
  280. a.tangerine:active, input.tangerine:active, ul.tangerine li a:active {
  281.     color: #904108;
  282.     background: #F48910;
  283.     -webkit-box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  284.     -moz-box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  285.     -o-box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  286.     -khtml-box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  287.     box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  288. }
  289.  
  290. ul.tabs li.tangerine a { border-right: 1px solid #CB5D0B;}
  291.  
  292. input.login-tangerine, input.login-tangerine:hover, input.login-tangerine:active  {
  293.     background: url('images/btn-login-tangerine.png') no-repeat center;
  294.     text-indent: -5000px;
  295. }
  296.  
  297. input.login-tangerine:hover, input.tangerine-glow:focus  {
  298.     -webkit-box-shadow: inset 0px 1px 1px #CB5D0B, inset 0px -1px 1px #CB5D0B, 0 0 8px #CB5D0B;
  299.     -moz-box-shadow: inset 0px 1px 1px #CB5D0B, inset 0px -1px 1px #CB5D0B, 0 0 8px #CB5D0B;
  300.     -o-box-shadow: inset 0px 1px 1px #CB5D0B, inset 0px -1px 1px #CB5D0B, 0 0 8px #CB5D0B;
  301.     -khtml-box-shadow: inset 0px 1px 1px #CB5D0B, inset 0px -1px 1px #CB5D0B, 0 0 8px #CB5D0B;
  302.     box-shadow: inset 0px 1px 1px #CB5D0B, inset 0px -1px 1px #CB5D0B, 0 0 8px #CB5D0B;
  303. }
  304.  
  305. input.login-tangerine:active{
  306.     -webkit-box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  307.     -moz-box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  308.     -o-box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  309.     -khtml-box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  310.     box-shadow: inset 0px 2px 3px #432304, inset 0px 1px 0 #CB5D0B;
  311. }
  312.  
  313. th.tangerine {
  314.     border-left: 1px solid #CB5D0B;
  315. }
  316.  
  317. th.tangerine:first-child {
  318.     border: none;
  319. }
  320.  
  321.  



now i will re post the javascript code that i am using for my popup because it is in a different directory and i want to make sure that the problem isnt in the replica.

here is the actual javascript file which i am using in the website:
"csspopup.js"

Expand|Select|Wrap|Line Numbers
  1. function toggle(div_id) {
  2.     var el = document.getElementById(div_id);
  3.     if (el.style.display == 'none') { el.style.display = 'block'; }
  4.     else { el.style.display = 'none'; }
  5. }
  6. function blanket_size(popUpDivVar) {
  7.     if (typeof window.innerWidth != 'undefined') {
  8.         viewportheight = window.innerHeight;
  9.     } else {
  10.         viewportheight = document.documentElement.clientHeight;
  11.     }
  12.     if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
  13.         blanket_height = viewportheight;
  14.     } else {
  15.         if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
  16.             blanket_height = document.body.parentNode.clientHeight;
  17.         } else {
  18.             blanket_height = document.body.parentNode.scrollHeight;
  19.         }
  20.     }
  21.     var blanket = document.getElementById('blanket');
  22.     blanket.style.height = blanket_height + 'px';
  23.     var popUpDiv = document.getElementById(popUpDivVar);
  24.     popUpDiv_height = blanket_height / 2 - 150; //150 is half popup's height
  25.     popUpDiv.style.top = popUpDiv_height + 'px';
  26. }
  27. function window_pos(popUpDivVar) {
  28.     if (typeof window.innerWidth != 'undefined') {
  29.         viewportwidth = window.innerHeight;
  30.     } else {
  31.         viewportwidth = document.documentElement.clientHeight;
  32.     }
  33.     if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
  34.         window_width = viewportwidth;
  35.     } else {
  36.         if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
  37.             window_width = document.body.parentNode.clientWidth;
  38.         } else {
  39.             window_width = document.body.parentNode.scrollWidth;
  40.         }
  41.     }
  42.     var popUpDiv = document.getElementById(popUpDivVar);
  43.     window_width = window_width / 2 - 150; //150 is half popup's width
  44.     popUpDiv.style.left = window_width + 'px';
  45. }
  46. function popup(windowname) {
  47.     blanket_size(windowname);
  48.     window_pos(windowname);
  49.     toggle('blanket');
  50.     toggle(windowname);
  51. }
  52.  


i appologise for having so much information to read but i hope that someone has reached this sentence of the question description and has decided to help me.
Jun 26 '11 #1
0 1518

Sign in to post your reply or Sign up for a free account.

Similar topics
2
3643
Javascript that does not work in NN/Mozilla
by: rnd | last post by:
Hi all! could you kindly help me to solve a compatibility problem that involves Internet Explorer and NN/Mozilla. I created a html page that contains a form (its name is "Modulo") and some...
Javascript
9
6841
popup blocker code
by: Bill M. | last post by:
How do pop-up blocker programs work? Do they intercept http transactions and strip-out window.open() commands? Is there a single methodology? Thanks
Javascript
53
5656
Some unknown browsers fail to calculate my JavaScript code.
by: Cardman | last post by:
Greetings, I am trying to solve a problem that has been inflicting my self created Order Forms for a long time, where the problem is that as I cannot reproduce this error myself, then it is...
Javascript
3
1995
how to replace text on a page using Javascript code
by: Tony Strazzeri | last post by:
Hi, I recently posted "problem with Javascript code from Include" Thanks to response I have now fixed the problem. This is to ask how to solve my next problem/step. I am using javascript to...
Javascript
2
1684
Help! asp pg wont work with my javascript code
by: ms_mmswan | last post by:
I am trying to have multiple layers on a page that toggle on and off, it works on a htm file but when I use it as an asp file it doesnt show anything. This is the javascript code that is...
ASP / Active Server Pages
4
1791
How to add javascript code dynmically?
by: cotton_gear | last post by:
Hello, I need to add some javascript code block dynamically to a web page. I looked into the various postings at various groups but none seems to be solving my problem. Among the approaches...
Javascript
4
1752
Use aspx.vb Code to Javascript Code
by: laxmilal Menaria via DotNetMonster.com | last post by:
Hello Every one, Can anybody please tell me how can I use values coming in my somepage.aspx.vb into somepage.aspx's Java Script's Code? What I need is that I am doing some page progress...
ASP.NET
3
1185
A Question Regarding WebService Test Page
by: batista | last post by:
Hello all, I just want to ask one question about the web service test page. The functions which are shown on this test page are not shown in the order in which they are implemented in code....
.NET Framework
4
5207
javascript setTimeout does not work
by: E | last post by:
I am having trouble with setTimeout working on a second call to the setTimeout function from a second page which is an html page. Here is the scenario. I have a web page and onload it calls a...
ASP.NET
4
1393
Javascript code for pop ups
by: johnny15 | last post by:
I have copied from a site a javascript code for my web site to create a pop up. This works fine on older versions of browser but not the most recent. Whilst I have been searching for some new code...
Javascript
0
7242
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
7138
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
7423
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
1
7081
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
7510
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
1
5066
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA
0
3225
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
Networking - Hardware / Configuration
0
3213
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Visual Basic .NET
0
1576
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
C# / C Sharp

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us