I am trying to use jScrollPane, the original scrollbar disappearing and it is not working!
I already used it in another site about a month ago, and it worked well. The single problam was: The mouse wheel was not worked(Thats my second problem).
Code:
<link type="text/css" href="jScrollPane/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="jScrollPane/mwheelIntent.js"></script>
<script type="text/javascript">
$(function(){ $("#body").jScrollPane(); });
</script>
</head>
<body id="body">
I'm working on this same issue and have discovered a couple of things. I agree that you should use a newer version of jQuery. If you use 1.8.2, it will work. However, if you use 1.9.1, you will need to get rid of mWheelIntent.js as there is some issue with it and 1.9.1. Hope this helps someone!
The plugin needs to interact with the css file which contains basic styling of the scroll pane elements. The window.load method, loads all the assets of the page before of running the initialization script. I have used jQuery 1.9.1 for this case.
$(window).load(function(){
$(".scroll-pane").jScrollPane();
});
I hope this helps. Best regards
Related
I'm trying to use the Jquery plugin Flexslider on a website that I'm developing. I have my stylesheets and scripts in order like so:
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>'
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
I checked to make sure that Jquery is working by writing just a simple script by putting a red box around all of my divs, and that worked.
I'm not sure what I'm doing wrong...I'm using the code (the HTML as well, but for some reason the ctrl+K isn't working for the code) exactly how the website tells me to use it
Any thoughts?
I have these codes in my webpage:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
It is working perfectly fine with my textbox. But since I have a dropdown function with my header:
I need these lines to make them work:
<%--<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>--%>
When I try to paste them, the header dropdown is working but the problem now is my datepicker. Any tricks on this please?
ANSWER: made it work by pasting the pageresolve url to the top .
UPDATE QUESTION: what may cause this problem?
You are including jQuery.js twice. The second version is loading after the datepicker plugin has extended the original jQuery object and wipes it out .
You likely are seeing error datepicker is not a function or similar. You made no mention of errors thrown which is always the first thing to look for
Only include jQuery.js once and before all dependent plugins and code.
Ok, guys. I am new to js and I have a problem, it seems that my html does not call my js. I dont know if I´ve place it on a wrong line or what causes that, but I´ve all ready checked my code on http://validator.w3.org/nu and it seems right. My html is:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>hola</title>
<script type="text/javascript" src="menuscrollfixed.js"></script>
<link href="scrollfixedmenu.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="texte/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="nav-container">
<div class="nav">
<ul>
<li>NOSOTROS</li>
<li>VISIÓN</li>
<li>MISIÓN</li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Here is my Js:
jQuery("document").ready(function($) {
var nav = $(".nav container");
$(window).scroll(function () {
if ($(this).scrolltop() > 400) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
I know it´s a bit long, but I really hope someone can help me =)
You need to rearrange the order of script references. Refer jquery before your custom js file.
<link href="scrollfixedmenu.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script type="texte/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="menuscrollfixed.js"></script>
Because, you are using jquery functions inside your custom js file. At the time of executing those codes, the jquery file will not be loaded, which will cause the error.
Some of the things i noticed in your page:
Re-arrange the stack order of your scripts. add jQ lib before your script file.
use only one jQ lib instead of two diff versions.
type="texte/javascript" is not a valid type.
Better to use jQuery(document) instead of jQuery("document").
$(".nav container"); there is no element of named container in .nav and i don't think it's a valid html element container.
First thing is you are using multiple versions of Jquery Library files. This we create conflicts while using the features. Use the latest version.
And keep an eye on the wrong spelling for scripts and calling class names.
I am trying to get the buttons in my code (the only two buttons) with the class names "play" and "credits" to fade out when they are clicked using JQuery but it is not working. Please tell me what is wrong.
HTML
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="startMen">
<div class="playDiv">
<button class='play'>Play</button>
</div>
<br>
<div class="creditsDiv">
<button class='credits'>Credits</button>
</div>
</div>
</body>
</html>
JavaScript
$(document).ready(function(){
$('.play, .credits').click(function(){
$('.play, .credits').fadeTo('slow',0);
});
});
Add this to the <head> section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JQuery hasn't been linked to you HTML. Add it to the head somewhere before your link to your script.js so the rest of your Javascript can use the JQuery library as well.
Should be:
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
You need to include the JQuery library in your script. It's hosted on the Google CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
As a side note, while you can use .fadeTo();
.fadeTo()
requires duration and opacity as arguments. a.e:
.fadeTo("slow", .5);
If you're looking for it to fade into displaying nothing you could use the method .fadeOut(); and pass a duration argument. a.e. :
.fadeOut("slow");
Edit: When I first read the script my eyes skipped over the 0 in the fadeTo method. I assumed that was the issue. After throwing it through jsfiddle, it seems like the problem was the library missing.
You didn't link jQuery. This means the browser has no idea what jQuery is. You have to add the <script> tag.
Use the following in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Fiddle
Your code actually works, just a simple mistake :)
You can also use .fadeOut() instead of .fadeTo(). It's more simple. Take a look at that here
'Cause I'm posting an answer, you can use $(function () { as short for $(document).ready(function(){. I know it's not related but just mentioning ¯\_(ツ)_/¯
I'm trying to put together 2 Jquery scripts on the same page but can't get both working at the same time. There is always a bug of some sort. Could you tell me if you can do this?
All I'm looking for is a blank HTML page with 2 inputs, one with the datepicker and the other with timepickr.
I'm really not that good with javascript, so if someone could help me it would be awsome. Both links give like 2-6 files to include, js and css and I do not know which one to include so that they don't interfere with one another. I want the minimal implementation of both.
My latest try was this :
<link rel="stylesheet" href="js/jquery-ui-1.8.16.custom/development-bundle/themes/base/jquery.ui.all.css">
<link rel="Stylesheet" media="screen" href="js/ui-timepickr/src/css/ui.timepickr.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.utils.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.strings.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.anchorHandler.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/ui-timepickr/src/ui.timepickr.js"></script>
<script src="js/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="js/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$('#ATTRIBUT_38').timepickr({
convention:24,
rangeMin: ['05','10','15','20','25','30','35','40','45','50','55'],
rangeHour24: [$.range(8, 12), $.range(12, 21)],
prefix: ['Avant-midi','Après-midi & Soirée'],
suffix: ['Avant-midi','Après-midi & Soirée']
});
});
</script>
</head>
<body>
<div class="demo">
Date: <input type="text" id="datepicker">
<input id="ATTRIBUT_38" type="text" value="02:30">
</body>
</html>
The problem with timepickr and jQuery UI exists since jQuery UI 1.8 and was reported already in April 2010. It seems there is no official bugfix yet :-( but here is a hack that might work: http://code.google.com/p/jquery-utils/issues/detail?id=48#c4
Anyway, I'd recommend to use an alternative TimePicker (e.g. as already proposed by Tim above)