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.comEverything 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'>
- <!--scrollbar -->
- <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>
- <!--scrollbar -->
- <!--ligthbox -->
- <!--<script src="js/jquery.js" type="text/javascript" charset="utf-8"></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>
- <!--ligthbox -->
- </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.