Why isn't my jQuery functioning - javascript

So I am trying to use some jQuery on a site I am building, but nothing seems to get it working.
Here is how I have the files linked in my html:
<head>
<title>Eddy: Designer</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script src="script.js"></script>
</head>
Then in my javascript document "script.js" I have this code:
$(document).ready(function () {
"use strict";
$('#branding').click(function () {
$('.branding').removeClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').addClass('.hideen');
});
$('#ui').click(function () {
$('.branding').addClass('.hidden');
$('.ui').removeClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').addClass('.hideen');
});
$('#logos').click(function () {
$('.branding').addClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').removeClass('.hidden');
$('.print').addClass('.hideen');
});
$('#print').click(function () {
$('.branding').addClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').removeClass('.hideen');
}); });
My code editing software says that my $(document).ready is using a '$' before it is defined... I have no idea what that means or if that is what is causing me these issues.
The idea is, when I addClass '.hidden' it will make every image that ISN'T the category that the button is labeled go to 50% opacity. This would in a sense "highlight" all the items that are "branding" or what have you.
I have been looking at tutorials about using jQuery, and I can't find what is going wrong. Please help. I am stressing myself out over this.
I tried linking the jQuery like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
This did not fix my problem. Is my jQuery code written incorrectly and that's why it isn't functioning? It seems like I am loading the jQuery properly, but it still doesn't work.

First you have dots in removeClass and addClass method. You need to pass only class names not .classname, only classname. And as other sad you should check your folder structure and try loading jQuery from some CDN.
In your CSS you have #branding and in HTML and JS it's a class. And you are adding classes the wrong way you in HTML. Multiple classes are separated by spaces in class attribute like:
class="one two"
not like class="one" class="two"
Try this fiddle , it's working xD, I have just commented opacity and use outline: solid 2px red;. So you could better see changes when clicked.

Related

Jquery-ui dialog box 'x' button image is not visible

I am doing a simple jquery-ui dialog application with my js,css code as,
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="dialog">this is a dialog box</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
this jquery ui is added.....
<script>
$("#dialog").dialog()
</script>
</body>
</html>
When i add a simple dialog box, the x mark inside the dialog's close button is not visible.
Am i missing inclusion of any image sprite file?
Try this..
Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}
Alternatively, I think you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
This issue here might be helpful to know more!!
The below order works to showup your close button
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
The below causes issue
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!
Might be you have forget to include the sprite image
It looks very much like it wasn't able to load image resources for some reasons. Try to open your browser's network console and check it for any errors.
Perhaps it's trying to load the images from css/images/* rather than from the place that you're expecting for.

Simple JQuery Script Does Not Work

I am trying to use jQuery for the first time and I am coding it by hand. But my jQuery code doesn't work at all... Here's my setup :
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJQuery.js"></script>
</head>
<body>
<div class="test"> </div>
</body>
</html>
mainCSS.css
.test {
background-color:#FF0004;
border-radius:25px;
display:block;
height:500px;
width:500px;
}
mainJQuery.js
// JavaScript Document
$(document).ready(function() {
$('.test').click(function() {
$('.test').fadeOut('slow');
});
});
Just to state it for the record:
In order for your jQuery code to work, you need to link to the jQuery library in your HTML.
If you are following a tutorial that doesn't include this in the first step, you should find another tutorial to follow. If you got to this question because you did not follow the first step of your tutorial, you should read more carefully before falling back on StackOverflow, or risk getting some serious downvotes.
The two most common ways of including jQuery in your HTML page are:
1) Downloading the library, and linking to a local copy. In your <head> section:
<script type="text/javascript" src="/url/path/to/local/jquery.min.js"></script>
2) Linking to a remote copy of the jQuery on Google's CDN. Again, in <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
If you don't link to jQuery using one of those options, or something similar, your code will not work. In most browsers you will be able to tell that this is the problem by opening the Javascript console, typing "jQuery" and getting an error like jQuery is not defined.
It's amazing that I couldn't find a duplicate question to close this in favor of, but then again I didn't click on every single "Why doesn't this simple jQuery script work" question on StackOverflow.
And there are a lot.

jQuery fadeOut and fadeIn

I am having trouble using jQuery to fadeOut() an image and fadeIn() another when a button is clicked.
To keep it simple, here is the HTML of just the part that needs to be affected:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="landing-page">
<div id="call-to-action">
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/>
</div>
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/>
</div>
</div>
</body>
Here is the jQuery:
$(document).ready(function() {
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow");
$("#more-info").fadeIn("slow");
});
});
When the button #call-to-action is clicked, the #landing-page div should fadeOut, and the #more-info image should fadeIn. It is not working. In fact, any jQuery command I've typed in has not worked for other divs. I believe there is something wrong with my jQuery plugin, or I'm missing some reference to the jquery sheet.
"or I'm missing some reference to the jquery sheet."
Yes. The code you show does not include the jquery.js file. If you have a copy of jquery.js in your project then add this in the <head> section immediately before your other JS include:
<script type='text/javascript' src='jquery.js'></script>
Otherwise you can reference a copy from a CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
(Specify whichever version of jquery you want to use in accordance with what your chosen CDN supports; I've suggested the latest version compatible with old IE.)
Also you probably want to hide the second img to start with, and not fade it in until the first img has finished fading - if you pass a function as the second argument to .fadeOut() it will be called after the fadeout finishes:
$(document).ready(function() {
$("#more-info").hide();
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow", function(){
$("#more-info").fadeIn("slow");
});
});
});
Demo: http://jsbin.com/OmaCOju/1/edit
You missed to include the jquery library. You can include it from google CDN. From you question i understand that on click of a button you want div to be fade-in and fade-out. Please refer the below demo for doing this.
Demo : http://jsbin.com/IGAJeqew/2/edit

How do include jQuery in HTML

I'm trying to include jQuery in my HTML-file but I haven't succeed yet.. I know there are a lot of tutorials and stuff on the internet (and this site!) but it still won't work.
This is my code in the HTML-file.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="global.css"/>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<title>test</title>
</head>
<body>
<script>
$(document).ready(function() {
$("p").css("font-size:50px");
};
</script>
<p id="first">Hello there!</p>
</body>
</html>
I just don't understand why nothing is happening..
Would be awesome if someone could help me with this on!
You are not using the jQuery css() function quite properly. You also missed a closing parenthesis. Try changing it to this:
<script>
$(document).ready(function() {
$("p").css("font-size", "50px");
});
</script>
You should always use .css('property-name', 'property-value') in that format for best results. There are other ways (object properties) but they are slightly different syntax and do not conform directly to expected vanilla CSS property names.
jQuery API reference - .css()
If that does not fix it, check to be sure your jquery file is in the same directory as the HTML page. Or (probably better) just replace it with the CDN call recommended by other answers (e.g. replace <script type="text/javascript" src="jquery-2.0.3.min.js"></script> in your head with <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>).
You missed to close the code properly. You missed the );. Also the css method is little different in your version. The parameters should be property name, property value.
Try this
$(document).ready(function() {
$("p").css("font-size","50px");
});
Working sample : http://jsbin.com/AfAjihiP/1/
There is a small syntax error. Replace:
$(document).ready(function() {
$("p").css("font-size:50px");
};
With this:
$(document).ready(function() {
$("p").css("font-size", "50px");
});
You forgot to close a parenthesis, and the .css() function needs two parameters.
YOu can do one of two things. You can use the cdn version and link it like this:
or
<script type="text/javascript" src="jquery-2.0.3.min.js"></script> after making sure the file is in the root of your project.
also you should have:
<script>
$(document).ready(function() {
$("p").css("font-size", "50px");
});
</script>
and not what you currently have.
Don't write several code: Instead of $(document).ready use $ , it works:
so :
$(function() {
$("p").css({"font-size": "50px"});
});
or
$(function() {
$("p").css("font-size", "50px");
});

My first dig at jQuery

I'm a complete newbie as far as jQuery is concerned. I also don't know much of JavaScript except for some very basic stuff.
I'm following this tutorial here: http://docs.jquery.com/How_jQuery_Works
And nothing's working! :-)
I created a folder on my machine's hard drive here: C:\rnd\jQuery
Then, in that folder, I put the jquery.x.x.js file that I downloaded from the jQuery website and I created a test.html file and wrote the following code in it:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
It just does the normal behavior of taking me to the jQuery website. I ran it on Chrome, IE and Firefox. I have JavaScript enabled in the browsers. It's all the same everywhere. It doesn't do anything that I expected it to do. It just takes me to the website.
Except on IE, it shows me that message box saying an error occurred in your script. When I click "Yes" to debug, it opens up the debugger but it doesn't highlight any line of code so I don't really know what's happening.
Then, when I had the following line to my code:
$("a").hide("slow");
And my complete code looks like this:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
$("a").hide("slow");
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
At this, nothing different happens in Firefox and Chrome, but in IE, it breaks again into the debugger, this time with this line highlighted in yellow, and it reports that the identifier jQuery is not defined.
(function($) {
$.fn.textDropShadow = function(){
$(this).html('<span class="jq-shadow">'+$(this).html()+'</span><span>'+$(this).html()+'</span>');
return $(this);
}
})(jQuery);
And that, I believe is some JavaScript code on the jQuery website.
I feel completely lost. Any help would be appreciated.
Update:
I have my complete HTML and it is valid XHTML. It's too bad the browser displays that as an HTML response stream and I can't even get it to show up here as a script. Damn! How do you make HTML show up here?
I can see one issue. You have a . following the $ in the document ready statement.
$.(document).ready(function()
^--- remove the .!
It should look like this:
$(document).ready(function()
First off make sure you have the jQuery library referenced before writing any jQuery code (or loading any plugins)
<script type="text/javascript" src="{path to jquery.x.x.js}" ></script>
Also, it should be $(document).ready(function() { });
not $.(document)
Obviously the problem was an extra dot in the $.document part however here is a tip for you when learning jquery.
You may find yourself in the situation that you have another javascript library running on the page and it's using the $ symbol too. A good way to keep your jquery separate from the other library but still share the $ symbol is to alias $ inside your jquery init statement.. like so.
// the dollar symbol doesn't exist outside of this as we started it with jQuery so i personally like this approach.
jQuery(document).ready(function($) {
$('#...');
});
Did you include the line:
<script type="text/javascript" src="jquery.js"></script>
You need to show more of your page for us to know what's wrong.

Categories

Resources