Hi I have been having this problem for about 4 months now i gave up at first but now i have to solve it am trying to do a zoom in effect on hover and i did all the code and it works properly, but when i copy it and paste it in the editor or like the code it self it doesn't work i tried Firefox (latest version) and Google chrome(also latest version) but still no effect happens nothing and also i tried using Google's cdm and also tried downloading the jQuery from the website itself nothing worked out please help me as i am just a beginner in coding thank you
My HTML :
<html>
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
</head>
<body>
<img src="RandomPage.png">
<p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p>
<div id="menu">
<img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage">
<img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage">
</div>
</body>
my script :
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
Thank You In Advance
You need to add the jquery library, and it has to be the first thing you add.
Paste this <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> in your head tag, and make sure it's the FIRST script there.
Your sample HTML is not including jQuery.
Put the follwoing script below the script in your head. So liek this:
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- include future js scripts here -->
</head>
Then JUST before your closing </body> tag, add the jQuery code, like so:
<script>
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
</script>
Note: It's more efficient and allows your pages to load faster if your JS scripts are included before your closing tag above the functions..but for simplicity sake, I included it in the <head>, which is not bad either.
Related
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
I am working with a book and in the book I am learning jquery's slideDown/Up method. I ran the code originally on my main web page and it will not work. So I just created a simple YES.html(seen above) to make sure I was coding it correctly. However it will not slide up or down image. I don't know what I am missing for this to work. I am a beginner so I could be missing something simple. Please explain your answer/solution in steps if possible or maybe guide me to a web page tutorial of some sort. Thanks.
are you looking for something like this?
$('#make_visible').on('click', function (e) {
/* method 1 */
/*if ($('#dramatic').css('display') === 'none') {
$('#dramatic').slideDown();
$(this).html('Hide');
}
else {
$('#dramatic').slideUp();
$(this).html('show');
}*/
/* method 2 */
$('#dramatic').slideToggle();
this.innerHTML = this.innerHTML == 'HIDE' ? 'SHOW' : 'HIDE';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="make_visible">HIDE</button>
<br />
<img id="dramatic" src="statefair.jpg" width="400px" height="400px" />
You didn't import jQuery, to use jQuery UI you have to import jQuery first.
Think this helps:
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
jQquery UI needs jQuery to function, so you should include that first. I used jQuery 1.3.2 as that seem to be the best fit for jQuery UI 1.8.
The book might be a bit dated as the latest version is 1.12.
I also changed the "onclick" code a bit:
$( "button#make_visible" ).click(function() {
$("img#dramatic").slideDown();
});
img#dramatic { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<body>
<img id="dramatic" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Wisconsin_State_Fair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
</body>
I found related articles here but none of them were useful. I am learning jQuery from codecademy and when I try to practice it by myself nothing happens.
HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
<script type='text/javascript' src='MovieSiteBehavior.js'></script>
</head>
<body>
<div></div>
</body>
</html>
CSS looks like this:
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
and Javascript looks like this:
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
There should appear an orange rectangle and when u click it it should disappear, but in fact it only appears and I can't make it disappear. (same example on codecademy works just fine)
P.S some people blame me for bad question and if you think this is a bad one please explain why.
Look like you forgot to add jQuery library - works fine. A suggestion would be to use $(this) inside the click listener so that you hide the same div that you have clicked - see demo below with 2 divs:
$(document).ready(function() {
$('div').click(function() {
$(this).fadeOut('slow');
});
});
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br/>
<div></div>
You didn't add the jQuery library.
That's why it doesn't work.
Try to add :
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
into the <head>
Add this to the bottom of your <body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
<script type='text/javascript' src='MovieSiteBehavior.js'></script>
</head>
<body>
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
</script>
</body>
</html>
I am new to jquery. I have a simple project. Two pictures stacked on top of each other. I want the page to show the second picture first (so the page needs to start at a certain scroll point) and then the user can scroll up to the first picture. So the code would go something like that
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
This works when I first load the page, but it doesn't work if I refresh the page (I assume because of something to do with cache?). How can I make the onload function work also when the page is refreshed? Thanks for your time.
If you are using jq why don't you use this type of function on $(document).ready()
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load is page load moment and beforeunload is refresh page moment
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
So if it's working first time, your code is ok. But seems you have to force to delete page cache.
Try this options:
Add this meta tags to your head and give it a try.
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
If you want to control by js the delete of the cache, you can try making a simple js function:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}
I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#info_box {
height: 221px;
width: 221px;
}
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
<img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
<img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
<span class="custom info">
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div#trigger').click(function() {
//Get info_box
var info = $('div#info_box');
//Fade the box in during 1 sec, show it for 5, and let it fade out again
info.fadeIn(1000).delay(10).fadeOut(1000);
});
});
</script>
I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.
Google chrome says Uncaught Reference Error: $ is not defined
but I'm not sure what to do with that.
If more information could help please ask which and I'll put it up.
Please include Jquery to the top of the scripts as many plugin use it.
http://jquery.com/download/
Add this link to <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You need jquery reference when using $
I'm trying to fire an event every time a navigation link (a.nav) is clicked. For Safari, it works as expected; however, in every other browser it ONLY fires the first time a link is clicked. For some reason, I'm not getting the desire result, is there anything I'm missing?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PatrickCason.com</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<style type="text/css">
#main, #namespace {
padding-right: 115px;
}
#textarea {
padding-right: 115px;
padding-top: 15px;
}
#social {
bottom: 82px;
}
</style>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.history.js" type="text/javascript"></script>
<script src="spritely.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$("#main").show("slide", { direction: "up" }, 1000);
$("#copyright").show("slide", { direction: "down" }, 500);
$("#main").effect("bounce", { times: 1, distance: 5 }, 250);
$('a.nav').live('click', function() {
//For some reason... this only works with the first time I click a nav link... herein lies the problem!
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
});
});
</script>
</head>
<body>
<div id="floater"></div>
<div id="container">
<div id="main">
<div id="spark"></div>
<div id="namespace"><span style="font-size: 20px;">hi. i am </span><h1 style="display: inline; font-size: 36px;">Patrick Cason</h1><span style="font-size: 20px;">.</span></div>
<div id="nav">
<ul>
<li>Contact Me!</li>
<li>About</li>
<li>Links</li>
<li>Blog</li>
</ul><br>
<p><b>Phone:</b><br><span style="font-size: 24px; font-weight: bold;">615.339.4300</span></p>
<p><b>Email:</b><br>pcason#comcast.net</p>
</div>
<div id="social">
<ul>
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
<li><img src="images/linkedin.png"></li>
<li><img src="images/feed.png"></li>
</ul>
</div>
<div id="home"><img src="images/home.png"></div>
<div id="textarea">
<div id="content"></div>
</div>
</div>
<div id="shadow"></div>
<script>
$(window).load(function () {
$("#shadow").fadeIn(1250);
});
</script>
<div id="copyright">
Copyright © 2011 Patrick Cason. All rights reserved.
</div>
</div>
</body>
</html>
I hope I'm not being to vague... I'd really appreciate the help.
I don't see the need for using live() in your case. That is for when you have dynamically added html. Or, when you have a decent number of elements that will bind to the same event handler (rather than click() which would bind individual handlers for each link).
$('a').click(function() {
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
});
I think the problem might be your selector. Try just selecting <a> tags
http://jsfiddle.net/EmvQk/
EDIT:
Edit your code to comment out the sprite() method and add an alert() as indicated in the comments below. I am pretty confident the problem is stemming from the sprite() call and this little test will determine if that is the case.
Your Css needs to follow the set of rules that the library requires in order to function properly. After reviewing the library example and based on your #sprite css rule ... Try making these changes:
#sprite
{
background: transparent url(images/spark.png) 0 0 no-repeat;
position: absolute;
top: 0;
left: 223px;
width: 156px;
height: 567px;
z-index: 2000;
cursor: pointer;
}
It is an issue with Spritely, as of version 0.5 they have a destroy() method, so...
$("#spark").click(function() {
var $spark = $("#spark");
$coil.sprite({
fps: 30,
no_of_frames: 12,
on_last_frame: function(obj) {
obj.spStop(); // stop the animation on the last frame
obj.spState(1);
killSprite($spark);
}
});
});
function killSprite(yourEl){
yourEl.destroy();
}
I popped the destroy method in a function that is called on the last frame of your animation so hopefully it won't cause any issues
It should be that
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
in and of itself doesn't work multiple times. Have you tried calling that function twice and see what happens.
To test if your click handler is the culprit, add an alert to the click handler and see if the issue is your click handler or the code snipped above.
It seems to me that your problem may be with the spritely plugin for jQuery. I set up a quick test at: http://jsfiddle.net/Htm4y/, that worked for me (in Chrome). In the example, clicking the .nav links fires a jQuery toggle. I would need to see your css to figure out what is supposed to be in that div, but it must be configured correctly in order for spritely to animate it.