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
Related
JSFiddle demo: https://jsfiddle.net/cr33q8v7/
$("#findMyWeather").click(function() {
alert("button clicked");
});
All I'm trying to verify is if the JQuery is working and I'm not getting any pop-up that says button clicked, so it would appear the syntax is wrong, but I've checked it multiple times and it looks right.
So if I include the library on JSFiddle, then why does the below code in the HTML file not run, as it appears the function is identical and these pointers both direct to the library:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$("#findMyWeather").click(function() {
alert("button clicked");
});
</script>
So the // pointers didn't reference (this is what the teacher instructed). When I changed to `https:``, then it functioned correctly:
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
I need another set of eyes, or else I'm missing something else and just don't see it.
You need to include the jQuery library in JSFiddle.
Click the gear that says Javascript and choose the version of jQuery that suits you.
Your fiddle doesn't actually include jQuery via a script tag.
e.g. add: <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> to your HMTL
you must add below line after last div between body tag :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4
/jquery.min.js"></script>
Here is Demo
Add the cdn link for Jquery. Without jquery it will not work. You can add it to the before end of body tag.
Add:<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
use jquery online by adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<button id="check">Click on me to check if jquery is working ....!</button>
</body>
<script type="text/javascript">
$("#check").click(function(){
alert("yep, jquery is working");
});
</script>
</html>
every thing looks fine please select jquery in fiddle then try it
and please add this script code in your file
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
I have downloaded the 1.11.3.min.js file and placed it in the same file where I have kept the HTML and script files. Before writing this code I have practiced jQuery a lot and those time I have succeeded, but this time I can't run it.
HTML
<!DOCTYPE html>
<head>
<!---<script type="text/javascript" src="image.js"></script---->
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.js"></script>
<!---<link rel="stylesheet" type="text/css" href="image.css">---->
</head>
<body onload="slideimage()">
<img src="1.jpg" id="slide" width="400px" height="400px"/>
<div id="button">
`enter code here`<button onclick="change_image()" />1</button>
</div>
</body>
</html>
jQuery
$document.ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
I have downloaded the 1.11.3.min.js file and put in the same file where i have kept the HTML and script files.Before writing this code i have practiced jQuery a lot and those time i have succeeded.But this time i have failed to run it.
Just replace this line of code
$document.ready(function(){
with this line
$(document).ready(function(){
You did't add brackets around document
May be you want do this:
$(document).ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
First, I recommend using CDN's for jQuery (less loading time), it can be found here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
then, you forgot to end your function, and you forgot () around document
your script should look like this:
$(document).ready(function() {
$("#slide").click(function() {
$(this).slideUp(400);
});
});
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.
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.
I need to dynamically update the contents for every few seconds, without reloading the page, so i thought to use jquery load() function, this loads the contents fine but not the js or jquery file from head tag.
Here is sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{$PAGE_TITLE}</title>
<link rel="stylesheet" type="text/css" href="../web/css/style.css" />
<script type="text/javascript" src="../web/js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="../web/js/wz_tooltip.js"></script>
<script type="text/javascript" src="../web/js/tip_centerwindow.js"></script>
<script type="text/javascript" src="../web/js/tip_balloon.js"></script>
<script type="text/javascript">
{literal}
$(document).ready(function() {
setInterval(function(){
$("#content").load("load_contents.php");
},20000);
......
});
{/literal}
</script>
</head>
<body>
<div class="content">
</div>
</body>
</html>
Suggest me the solution...
Updated: Tooltip js is not loading, y?...
I can't find the reference, but any javascript in the page that is loaded will automatically be disabled to prevent conflicts. If you need to do something to the loaded content, I would suggest using either live() or delegate() on the main page to act on the loaded content.
I agree with fudgey about using live (delegate isn't an option in 1.3.2) if possible. If your plugin doesn't support that though (which I'm guessing it doesn't since it's not working), you can pass a function to .load that will run when the content is loaded. Here you will want to hook up these new elements to your plugin. For example, so for instance say you wanted to use draggable from jQuery UI on all divs inside content , you might do
$(document).ready(function() {
var init = function(){
$("#content div").draggable();
};
init();
setInterval(function(){
$("#content").load("load_contents.php", init)
},20000);
});
If you do this with your tooltip plugin and whatever else, you are reloading into content, it should work. Be careful to call the init method only on content within #content so you don't end up adding tooltips twice to other areas. Using a plugin that uses delegate (upgrade to latest jQuery) or live will avoid having to do the selection and rebind each time you add elements, making for faster reloads.