Javascript doesnt load when refresh

Question

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!

works fine with me, google chrome and safari mac..

Jorge Y. C. Rodriguez
– Jorge Y. C. Rodriguez

2013-07-03 21:16:04 +00:00
Commented Jul 3, 2013 at 21:16 — Jorge Y. C. Rodriguez
– Jorge Y. C. Rodriguez, Commented Jul 3, 2013 at 21:16
try refreshing with out cache... cmd + shift + r

Jorge Y. C. Rodriguez
– Jorge Y. C. Rodriguez

2013-07-03 21:16:47 +00:00
Commented Jul 3, 2013 at 21:16 — Jorge Y. C. Rodriguez
– Jorge Y. C. Rodriguez, Commented Jul 3, 2013 at 21:16
without cache it's not loaded, but I can't see an error

Thomas Solti
– Thomas Solti

2013-07-03 21:18:40 +00:00
Commented Jul 3, 2013 at 21:18 — Thomas Solti
– Thomas Solti, Commented Jul 3, 2013 at 21:18

Mr Coder · Accepted Answer · 2013-09-12 19:14:32Z

1

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
            }
        }

    });
}

answered Sep 12, 2013 at 19:14

Mr Coder

512 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Voska · Accepted Answer · 2013-07-03 21:22:33Z

0

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

answered Jul 3, 2013 at 21:22

Voska

3411 gold badge3 silver badges12 bronze badges

1 Comment

Travis Over a year ago

that inline style is being put there by the responsive slider plugin i am not sure how to modify that. Can i just put a height on that UL and !important to overwrite that 20px? but still not sure why when it loads sometimes it is 20 and sometimes it is 147???

Thomas Solti · Accepted Answer · 2013-07-03 21:23:12Z

0

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?

answered Jul 3, 2013 at 21:23

Thomas Solti

8718 silver badges17 bronze badges

4 Comments

Travis Over a year ago

for some reason the carousal plugin in is giving it that height i just dont know why?

Thomas Solti Over a year ago

in your main.js in the second and third if branch you have commented the height attributes (30%) maby just set them to 147..?

Travis Over a year ago

Sorry thomas i didnt see your second comment

Thomas Solti Over a year ago

that's life :-) happy coding!

Jean-Paul · Accepted Answer · 2013-07-03 21:44:01Z

0

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.

edited Jul 3, 2013 at 21:44

answered Jul 3, 2013 at 21:20

Jean-Paul

21.3k11 gold badges67 silver badges91 bronze badges

2 Comments

Jean-Paul Over a year ago

can anybody help finding out if this is indeed the problem?

Travis Over a year ago

this problem existed before i add in the mouseover and out

TyMayn · Accepted Answer · 2013-07-03 21:48:46Z

0

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
                }
            }

        });
    }

answered Jul 3, 2013 at 21:48

TyMayn

1,9362 gold badges18 silver badges23 bronze badges

1 Comment

Travis Over a year ago

THANK YOU @tyMayn! Solved the issue! OMG i commented that out like a month a go in the begininning and never made it back... THANK YOU THANK YOU!

Collectives™ on Stack Overflow

Javascript doesnt load when refresh

5 Answers 5

Comments

1 Comment

4 Comments

UPDATE

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

4 Comments

UPDATE

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related