Javascript issue

[TheBuz]

hi i am trying to get this code

http://www.andrewpeace.com/javascrip...ng-screen.html

to run just on the products pages, i can get the code running across the whole site but not just on the products pages.

i've created a .js file (without script tags) and put it in the product_info folder and now im really stuck and dont know which files to edit , any help would be very much appreciated thank you

[yellow1912]

put it in includes/modules/pages/product_info/something.js

[davewest]

hi i am trying to get this code


to run just on the products pages, i can get the code running across the whole site but not just on the products pages.

i've created a .js file (without script tags) and put it in the product_info folder and now im really stuck and dont know which files to edit , any help would be very much appreciated thank you

You can add the style to your site stylesheet or create one of your own and place it in the css folder. The JS can go ether in the head or in the body, they actually suggest placing it in the body right under the div tag, thus making it easy to just have it display on a product page. Open includes\templates\YOUR_SITE\templates\tpl_product_info_display.php
and place there div and javascript after this line

<div class="centerColumn" id="productGeneral">

so it looks like this..

<div id="loading" class="loading-invisible">
  <p><img src="../images/loading.gif" alt="Loading..." /></p>
</div>

<script type="text/javascript">
  document.getElementById("loading").className = "loading-visible";
  window.onload=function(){
    document.getElementById("loading").className = "loading-invisible";
  }
</script>

to have the script in the head, just add it to includes\modules\pages\product_info\jscript_main.php
make sure to remove its script tags and it can go before the closing script tag in jscript_main.php

[TheBuz]

hi dave west, thanks for your help so far. I have managed to get the script to run on just the products pages. although i don't think i did it right. As other javascript on that page (Ajax image swapper) is being hidden as well.

for some reason the code would only work if it was in \modules\pages\product_info\jscript_main.php

AND tpl_product_info_display.php

i put the CSS code in jscript_main.php as i didn't know where to put it in the stylesheet and it worked apart from the problem above. do you think there is a way around this or are the two scripts going to fight with each other? thanks again :)

[TheBuz]

put it in includes/modules/pages/product_info/something.js

hi yellow, i did try that but the script didn't load doing it that way

[davewest]

hi dave west, thanks for your help so far. I have managed to get the script to run on just the products pages. although i don't think i did it right. As other javascript on that page (Ajax image swapper) is being hidden as well.

for some reason the code would only work if it was in \modules\pages\product_info\jscript_main.php

AND tpl_product_info_display.php

i put the CSS code in jscript_main.php as i didn't know where to put it in the stylesheet and it worked apart from the problem above. do you think there is a way around this or are the two scripts going to fight with each other? thanks again :)

Placing the style into jscript_main.php would work if you placed it outside of the javascript tags with the style tags in place, just not a clean way of doing it with Zen.

I use this type of code for my floating login box.

The key to the code is that it needs to run during page load and it uses the ID tags to make the switch. If your Ajax image swapper is using the same ID as the loading image... then it to would hide. On loading image change id="loading" to something like id="myloading" as will, change the script to

<script type="text/javascript">
  document.getElementById("myloading").className = "loading-visible";
  window.onload=function(){
    document.getElementById("myloading").className = "loading-invisible";
  }
</script>

[TheBuz]

hi dave,

i have tried renaming the class ID as i thought that might be the issue i tried renaming it to loadings, myloading and hideit, but the same issue keeps happing . if you have any other ideas i'd be happy to hear them, and i do appericated the advise you have give so far

[TheBuz]

sorry for double posting but i came back to late to edit.

update: i did some tests and it seems any other JS on the products info page stops the Ajax image loader from working

[TheBuz]

Hi guys, i have discovered that this JS is interfering with the AJAX image loader it stops the images from being shown anyone know why this might be? thanks for all the help so far :)

[LTCreations]

Ok...after reading until my eyes are popping out from all the posts over the years on JS implementation, I'm going to stick out my neck and see if there's an answer I'm just not understanding.
Creating the ??.js and placing it in the /includes/modules/pages/{pagename}/ all makes sense, except that the "Gallery" pages I've created do not have a specific name. They are "General Document" pages, but I don't want all of the general doument pages to have the script run.

I'm running the current version of 1.3.8a on a PHP version 5.2.6. I run all of my altered scripts in /custom/ folders. "I" am the hosting company.
Everything works well, but I get an error on the pages that do not need the script, which are all pages in the site but the few "Gallery" pages because I was frustrated and 'dumped' the script in the default template.
Here's a site page example: http://www.peninsulaoutfitters.com/s...roducts_id=186

Everything works, but the IE error icon in the lower left of the browser drives me crazy.
Is there a way to put that little snippet of JavaScript (found in "view source" of any of the 3 gallery pages head) into a file as suggested through all the forum posts? I don't have a page name, and it's only the 3 pages in which the script is needed.

Now, to make things more difficult, I have another JS running the images at the top of each page. With each page reload or page change the image changes. I have some pages I want to load different sets of images. Right now, I settled for running the same images on all pages because the JS set up was too confusing. I'm sure it makes great sense to those who have accomplished or wrote the instructions. But, in both of these cases I think you'll agree it's not that simple.

Thoughts? Help?
Thanks. BTW - you all do great work.