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?
Related
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 having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
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 ¯\_(ツ)_/¯
this is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EVENTI</title>
<link rel="stylesheet" type="text/css" href="../CSS/stile.css">
<link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'> <!--importare google font-->
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
</head>
in my "ridimesionapagina.js" i've some JS code that debunk some of my elements declared in my css code , but in this page it doesen't works why?
Well making the assumption that you're using jQuery in your ridimensionapagina.js file, one would assume you'd fix the issue by reversing the order you load the scripts so that jQuery is in fact available when your ridimensionapagina.js script loads and runs.
<script src="../JS/jquery-1.11.1.js.js"></script>
<script src="../JS/ridimensionapagina.js"></script>
instead of
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
If you use jQuery in ridimensionapagina.js, you should put .. include jQuery path to above to load jQuery before loading ridimensionapagina.js file
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