Search jQuery

jQuery Forum

Script (jScrollbar plugin) only works after reloading page

in Using jQuery • 8 years ago

I've already searched similar problems and solutions, but nothing seems to fix what troubles me, so hopefully some of you can help me out.
As the title says, what I think it is happening is that a specific script doesn't run when I open the page for the first time, but after refreshing it works as intended. And this only happens if I select and press ENTER on the link, instead of pressing F5. With F5 the scrollbar doest appear at all after refreshing for some reason.
The script is a jquery plugin named jScrollbar, In there it explains how it works and how it is implemented, but it is fairly simple.

Here is the site: gaspargaspar.com

Everything else seems to work just fine, the page's own jquery and the lightbox start with no problems on the first go. It is rather simple, just some buttons that fade in and out content from the page.

I've already tried a bunch of things like changing the order of the embed of the scripts, the scripts themselves, trying different versions of jquery, but nothing seems to fix this completely.
Considering my tests so far, I'm betting the problem is the script embedding that is causing all of this, but I can't be sure.
Upon using the "inspect element" feature on Chrome, what seems to happen is that the div that houses the scrollbar (.jScrollbar_draggable), while it appears on the code, it doesn't seem to be instantiated on the page (no blue shade around it when selected).

<!DOCTYPE HTML>
<html>
<head>
<meta name="keywords" content="gaspar, nogueira, quaresma, design, graphic, (....) " />
<meta name="description" content="graphic and multimedia design portfolio" />
<meta http-equiv="content-language" content="en">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Gaspar Nogueira Quaresma">
<meta name="reply-to" content="gaspar@gaspargaspar.com">
<meta name="generator" content="Adobe Dreamweaver CS5.5">
<title>portoflio / Gaspar Nogueira Quaresma</title>
<link href="css/pixelCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/pixelJAVA.js"> </script>
<link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="jquery/jScrollbar.jquery.css" type="text/css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery-mousewheel.js"></script>
<script type="text/javascript" src="jquery/jScrollbar.jquery.min.js"></script>
<link rel="stylesheet" href="CSS/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
(...)

And the main javascript file, pixelJAVA.js:

$(document).ready(function(){
$('.jScrollbar1, .jScrollbar2, .jScrollbar3, .jScrollbar4, .jScrollbar5').jScrollbar();
$("a[rel^='prettyPhoto']").prettyPhoto();
$("#main").fadeOut(0);
$("#main").fadeIn(4500);
(.....)
(all the stuff related to the buttons, animations, and so on...)

Honestly, if I knew it was going to be this hard to get this supposedly simple plugin to work, I wouldn't have ever used it. Stranger even is how I got this to work on a similar one page website not so long ago, but on this one it just doesn't, no matter how hard I try.

Replies(8)

jakecigar

Re: Script (jScrollbar plugin) only works after reloading page

8 years ago

I am concerned that you have 2 versions of jQuery.

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

and

<script type="text/javascript" src="jquery/jquery.js"></script>

js/pixelJAVA.js uses the first initially, then switches to the second for the ready code.

Get rid of the second one.

JΛ̊KE

gaszpp

Re: Re: Script (jScrollbar plugin) only works after reloading page

8 years ago

Thanks for the fast reply!
Unfortunately, it doesn't seem to be solving the problem :S
Tried to put the jquery.js file ( v1.8.2 ) first and remove jquery-1.10.2.js, considering the different versions and all, and how the jScrollbar could be messed up with a newer version for some reason, but still no developments.
Also thought about moving all the scripts to the same folder (jquery/), instead of being divided between two, but that didn't change anything as well.

In the end, I'm guessing it will be a very simple solution. For now though, onto banging my head against the keyboard and see if something happens.

jakecigar

Re: Script (jScrollbar plugin) only works after reloading page

8 years ago

I suggest you use Chrome’s web inspector or other, to see if one of your plugins or your code is not compatible with your single chosen jQuery version.

Other than that, I’ll ask that you make a smaller page that fails similarly, and share it so we can see the page’s demise.

JΛ̊KE

gaszpp

Re: Re: Script (jScrollbar plugin) only works after reloading page

8 years ago

Tried to view the page on another PC, and the problem doesn't occur! Why? I have no idea.
I don't know how to do that exact thing with the Inspector, but I'll search around.

Later today I'll try and put the troubled div right at the beginning of the page, rather than behind some jquery interactions.

jakecigar

Re: Script (jScrollbar plugin) only works after reloading page

8 years ago

Accursed cache? It was hallowe’en.

JΛ̊KE

gaszpp

Re: Re: Script (jScrollbar plugin) only works after reloading page

8 years ago

I'm going to guess it is a less otherworldly problem than a curse :P
Do you happen to know a better way of having a different scrollbar than the method I'm using? Because this is a huge pain in the ass.
Anyway, for frustration's sake, I decided that for now the main site would use the default scrollbar. Doesn't fit the whole aesthetic, but at this point I just want it working.

Now as you asked, I made a simplified page to better explore the problem, right here: http://gaspargaspar.com/test.html
It goes straight away to the gallery portion where the scrollbar is failing.

I re downloaded the jquery (v1.8.2) file used by the scrollbar, instead of using the latest version, but as well it doesn't seem to do anything.

jakecigar

Re: Script (jScrollbar plugin) only works after reloading page

8 years ago

Your jScrollbar doesn’t work in Safari, I saw it working in firefox. I’ve never used it and it is not pretty. You could design your own slider using Slider | jQuery UI.

JΛ̊KE

gaszpp