I want to do .jscrollpane scrollbars but they are not showing up, and firebug is not picking up any errors. I'm doing cufon font replacement, a prettyPhoto lightbox, and a simple portfolio filter that sorts ul's. I've looked into jQuery noConflict mode but can't figure out if this is the issue, and if it were, how to use it in my case.
Here's how I'm calling in scripts in the header:
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script src="scripts/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/trajan.font.js" type="text/javascript"></script>
<script type='text/javascript' src="scripts/jscrollpane-1.2.1.js"></script>
<script type='text/javascript' src="scripts/mousewheel.js"></script>
<script type='text/javascript' src="scripts/mwheelintent.js"></script>
And then I use $(document).ready(function(){ to run the prettyPhoto, the portfolio filter, and the jscrollpane scripts before the end of the head. The PrettyPhoto and portfolioFilter work, but the jscrollpane doesn't render any changes, but Firebug doesn't detect any errors either.
The jscrollpane is being applied (using class="scroll-pane") to a div id called #box with these attributes:
#box {
width:auto;
height:600px!important;
position:absolute;
margin-top:10px;
I've included the jscrollpane CSS directly from the source, and have the selector class styled like this:
.scroll-pane {
overflow-y:auto!important;
position:relative;
display:block;
}
The issue can be seen live at http:ricardojattan.com/portfolio.html
You need to update to the latest version of jScrollPane.
Related
I'm using <script src="js/jquery.min.js"></script>FOR THE SLIDER and many other functionalities.
I'm also using <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> FOR THE GALLERY.
Everything seems to work perfectly but when I add 1.6.2 jquery.min.js from googleapis it stops everything, including the sliders and the smooth scrolling. The only thing that is working is the gallery.
Here's my code:
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
In the body I have this code:
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
This is the one that's causing conflict, I have tried to put it in the head but it did not make any difference:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Thank you for your assistance!
In general you should avoid using 2 different versions of jQuery on the same page. Most of the time you won't need to - they are largely backwards compatible. Try putting the newer of the 2 versions of jQuery first, then removing the other one. As js/jquery.min.js is the newer version, try removing the google ajax apis one completely.
If you are using something that is broken by a new version of jQuery, check that there hasn't been a new version of that thing released. If there hasn't, try to fix it yourself to work with the new jQuery.
The next option is to check if there is an older version of the thing that requires a new jQuery that might work with the older jQuery version.
If none of those options work, you can try to use 2 versions of jQuery on your page using jQuery.noConflict(), but this is not recommended. After you load the first version and before you load the second, do something like:
j = jQuery.noConflict();
Then use j instead of $ whenever you want to use that version of jQuery, and $ for the second version.
enter code here <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script>
$j = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="vendor/jquery/jquery.min_multi_select.js"></script>
Works well, then you can use $j.ajax({
})
I have an issue with yepnope that is driving me crazy, and I spent a good amount of time searching for the answer with no luck.
First, I am using device.js to detect screen size, it will throw an desktop class in the tag if it detects a desktop. On the desktop I want another script to be loaded which will then give functions to a certain class (on mobile devices, the script will not load and the certain classes will remain static.)
However, when yupnope executes, it throws my script on TOP of all the other scripts in my head tag and will not execute and run. I know the script works because I manually put it in on the bottom of my other scripts. My question is how can I make yepnope load the script last instead of putting it on the very top of the other scripts? I have a nagging feeling that this is where a callback comes in but I am still trying to get ahold of javascript!
this is my yepnope code:
$(document).ready(function(){
if ($('.desktop').length !=0) {
yepnope({
load: "js/jquery.malihu.PageScroll2id.js",
});
};
});
This is my html:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
The yepnope condition is in the file scripts.js which executes last but still puts the jquery.malihu.PageScroll2id.js script that is called on top which is wrong order then as shown in this code:
<script src="js/jquery.malihu.PageScroll2id.js"></script> //script on top = BAD!!
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
So I'm pretty new to web design and Dreamweaver, but I've managed to put something fairly solid together. The only problem I'm having is that my two main javascripts for images - one slider and one lightbox gallery - are canceling each other out. If one works, the other cannot. Here's the code at the head. Any advice?
<!-- Style sheets themes for the Nivo Slider -->
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/orman/orman.css" type="text/css" media="screen" />
<!-- Main Styles Sheet for the Primento theme -->
<link rel="stylesheet" href="styles.css">
<!-- Google Webfonts - Other fonts can be installed - http://www.google.com/webfonts -->
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<!--script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script-->
<!--script src="js/jquery.validate.js" type="text/javascript"></script-->
<!-- Nivo Slider -->
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
Try removing the second instance of jquery. That is likely re-initializing the jQuery object, causing the page to fail.
You only need one instance of jQuery on the page. It looks like the plugins you are using are older (i.e. pre-1.9), so you should try an older version of jQuery. If 1.7.x doesn't work, try a 1.8.x version. Version 1.9 removes several features that may prevent the plugins from working.
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
I have an html page which calls multiple javascripts and css stylesheets. However some of the functionality of one of the scripts is failing.
The first four scripts and the last two make the buttons and styles look like the iphones.
The middle scripts are for a shadowbox.
I have tried rearranging the scripts but it still doesnt work properly, my shadowbox appears with the image on a new screen.
How to get around this?
Here are my calls:
<head>
<script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="CodeGeneral.js" type="text/javascript"></script>
<script src="CodeAppDetailScreen.js" type="text/javascript"></script>
<!--Script that doesnt work properly-->
<script src="shadowbox/shadowbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="shadowbox/shadowbox.css" type="text/css">
<script type="text/javascript">
Shadowbox.init();
</script>
<--till here-->
<link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="StyleMaincss.css">
</head>