CODEWITHSUNDEEP
phpjavascriptjquery
Travis
Travis

Reputation: 2245

Javascript doesnt load when refresh

I am having the strangest error.

When you load this link http://travisjterry.com/SBCorp/index.php

The carousal doesn't load near the bottom of the page but if you click the logo or home from the nav it does. Also if you do a command + r it breaks the carousal.

This seems to be only an issue in Chrome and Safari on both windows and mac.

Anyone have any idea what could be causing this? I am stumped on this one PLEASE HELP!

Upvotes: 1

Views: 146

Answers (5)

Mr Coder
Mr Coder

Reputation: 51

if(jQuery("#gallery-thumb").length){
jQuery('#gallery-thumb').carouFredSel({
        responsive: true,
        auto: false,
        width: '100%',
        prev: '#prevy',
        next: '#nexty',
        pagination: "#pager2",
        scroll: 1,
        items: {
            width: 150,
            height: 130,    //  optionally resize item-height
            visible: {
                min: 1,
                max: 5
            }
        }

    });
}

Upvotes: 1

TyMayn
TyMayn

Reputation: 1936

I think its that you have your height commented out when you are initializing the slider through jquery.

On your second call to the plugin when your initializing #gallery-thumb try setting the height to be fixed at 130 like so. I think that will do the trick.

if(jQuery("#gallery-thumb").length){
    jQuery('#gallery-thumb').carouFredSel({
            responsive: true,
            auto: false,
            width: '100%',
            prev: '#prevy',
            next: '#nexty',
            pagination: "#pager2",
            scroll: 1,
            items: {
                width: 150,
                height: 130,    //  optionally resize item-height
                visible: {
                    min: 1,
                    max: 5
                }
            }

        });
    }

Upvotes: 0

Jean-Paul
Jean-Paul

Reputation: 21170

I don't know for sure but maybe it has something to do with:

onMouseOut=src="images/productbump/booth.png"
onMouseOver=src="images/productbump/booth_hover.png"

normally for image swaps you would use something like:

<img id="img2"

    onmouseover="imgChange2('../images/image1.gif')" 
    onmouseout="imgChange2('../images/image2.gif')" 

    src="../images/image2.gif">

</img>

with javaScript:

function imgChange2( img ) { document.img2.src = img; }

UPDATE

Your caroufredsel_wrapper has an assigned height of 23px:

<div class="caroufredsel_wrapper" style="display: block; text-align: start; float: 
none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 
auto; width: 618px; height: 23px; margin: 0px; overflow: hidden;">

And is set to overflow:hidden;

Changing these parameters to appropriate numbers should do the trick.

Upvotes: 0

Thomas Solti
Thomas Solti

Reputation: 871

the first time you are loading the page, the .caroufredsel_wrapper is assigned 25px height.. this not enough. So actually it is loading at the beginning, but the height is off. Maybe you a are setting the height, before page is fully loaded?

Upvotes: 0

Voska
Voska

Reputation: 331

The problem is with your height setting inline with the carofredsel_wrapper. You have it set to 20px height and overflow hidden, so the pictures won't fit. Change that number to something as large as the photos and it will work fine.. I used 100px

Upvotes: 0

Related Questions