I want the div to slide on the screen left to right i have a html file and a java script file shown below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DY Fitness</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="javascript" src="css/nav.js"></script>
</head>
<style>
#import "css/nav.css";
</style>
</head>
<body>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
</body>
</html>
<------------------ Javascript(nav.js)-------------------------->
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
ithink the code is correct but its not working for me any help is appreciated thanks
set position:absolute; to content, see code working: http://jsfiddle.net/mig1098/mnjxmfhr/ :
#content{
position:absolute;
/* ---- */
}
It's very difficult to help you because you don't give us that much clue. For exemple, what the console output ?
Anyway, by putting your script tag in the head you have to assume that the script will be loaded before the DOM has finished to be loaded. So your script can't find #right or #left element because they haven't been loaded in the DOM three.
You have 2 solutions :
First one :
Wrap your code in a load event like this :
$( document ).ready(function() {
//Your code here
});
or the shortcut :
$(function() {
//Your code here
});
Second one :
Put your script tag before the end of the body
<script type="javascript" src="css/nav.js"></script>
</body>
Also note that you can't have 2 <head> into another one.
You cannot attach click handlers to elements that have not yet been loaded to the DOM. There for you should wrap all event handler assignments in the $(document).ready function or $(window).load function. The first fires when the DOM is completely loaded. The second fires when all images and other resources have also loaded.
The first is:
$(document).ready({
.... code goes here ....
});
or you can use the shortcut for it:
$(function(){
.... code goes here ....
});
The second is:
$(window).load(function(){
.... code goes here ....
});
The window.load method is primarily used when getting the size of objects that might include images, since the size of a div will be misreported when getting its size before the image is completely loaded.
Try this and see if it helps:
$(function(){
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
});
IMPORTANT: Your #content element must be set to position: relative; in your css or this will not work. see this fiddle: http://jsfiddle.net/8gog742m/
Related
I have the next code. What am trying to do is when i refresh or open the page, to add the class intro. But my main problem is in the part :
$("body").load(function(){
I want when the page is opened, then to add the class .intro. Instead of body, i have also tried html, and still doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").load(function(){
$("p").addClass("intro");
});
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
You should not use load() for this purpose.
load() function description : Load data from the server and place the returned HTML into the matched element.
You need just ready function to achieve that :
$(document).ready(function(){
$("p").addClass("intro");
});
//OR
jQuery(function($){
$("p").addClass("intro");
});
Hope this helps.
Try this instead:
$(document).ready(function(){
$(window).load(function(){
$("p").addClass("intro");
});
});
Load event attached to the window. If that is what you meant? Load on a DOM element like that doesn't make much sense.
Whilst this should work, you could pull it out of your ready() event.
$(document).ready(function(){
// Nothing to see here...
});
$(window).load(function(){
$("p").addClass("intro");
});
This waits for the load of the window, but if you just want to add the class as soon as possible when the DOM is ready, well, you won't need the load() at all:
$(document).ready(function(){
$("p").addClass("intro");
});
Bonus: You should use on() to attach all events going forward.
$(window).on('load', function(){
$("p").addClass("intro");
});
on() is the preferred method for events in future jQuery versions, as older methods are deprecated.
All the best.
Put your code inside $(document).ready callback.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").addClass("intro");
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
$(window).on('load', function(){
$("p").addClass("intro");
});
I have tried different websites even tried to decode waypoint guide but no luck. I can't seem to get scroll function to work with following code. (reference: http://blog.robamador.com/using-animate-css-jquery-waypoints/)
Any help will be greatly appreciated.
<!doctype html><html><head><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<style>
img {
margin:1000px 0;
display:block;
}
</style>
<script>
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
},
{ offset: 'bottom-in-view' });
//Animate from bottom
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));});
</script>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img class="animated" data-animated="fadeInLeft" src="http://placekitten.com/g/200/300">
<img class="animated" data-animated="bounce" src="http://placekitten.com/g/200/300">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"> </script>
</body>
</html>
First of all, put the jQuery script and Waypoint script inclusion in the HEAD tag. This is, in the 99% of the case, the right way to include javascript libraries in your DOM.
Second thing: you write your javascript code in the HEAD tag (it's right), but without a "start control". In your case, the browser start to execute your javascript code before reading the rest of the DOM, so it can't attach events on the right elements (the images with class "animated") because it haven't read them yet. In simply word, when the browser start to read your SCRIPT tag, it don't know who ".animated" are, so it do nothing.
There are two way to resolve your problem:
1 - Move you SCRIPT tag and its content at the end of the BODY tag.
2 - Wrap you javascript code in a DOM.ready state like:
<script>
$(document).ready(function() {
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
}, {
offset : 'bottom-in-view'
});
//Animate from bottom
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
});
});
</script>
Honestly, I prefer the option number 2. =D
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.
Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
Edit; sorry you already did that.
Try puttting your js file Under the js library file.
This is my ready handling:
$(document).ready(function() {
$(document).hide();
$('.foo').each(function(elem, i) {
$(elem).text('So long and thanks for all the fish');
});
$(document).show();
}};
What I'm trying to do is hiding the document completely until everything is ready on my terms, but it seems that the show() function doesn't wait for the elements iteration.
By the way, I tried changing show() and hide() to css('display', 'hide') and css('display', 'block') but still, you can the text is changing in your eyes.
How do you make sure all your code ran before calling show()?
Let's suppose you fix this by hiding the body or a container element. That won't do the trick, and here's why:
What happens during the time after the document is (mostly) loaded but before you hide the document?
That's right, the document may get displayed during that time despite your best efforts.
So what you could do instead is use a CSS class that hides, say, the body without any JavaScript intervention. For example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body.hide { display: none; }
</style>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready( function() {
$('.foo').each(function( i, elem ) {
$(elem).text( 'So long and thanks for all the fish' );
});
$('body').removeClass( 'hide' );
});
</script>
</head>
<body class="hide">
<div class="foo"></div>
</body>
</html>
Of course this does mean that if JavaScript is disabled, your document won't be visible at all. What if you want to have a non-JavaScript fallback? In that case you could do it like this instead. We'll hide the html element instead of the body because that way we know the code will work in the head (the body element may not exist yet at this point), and only hide it if JavaScript is enabled:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
html.hide { display: none; }
</style>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('html').addClass( 'hide' );
$(document).ready( function() {
$('.foo').each(function( i, elem ) {
$(elem).text( 'So long and thanks for all the fish' );
});
$('html').removeClass( 'hide' );
});
</script>
</head>
<body>
<div class="foo">
This content is displayed if JavaScript is disabled.
</div>
</body>
</html>
Now you have a non-JavaScript fallback, but the document will still be hidden immediately when JavaScript is enabled, because of the code that adds the hide class.
Also note that you had the parameters reversed in your $().each() callback. (Interestingly enough, the order you used makes much more sense and indeed is the order used by the newer native .forEach() function. The order in $().each() is really backwards - one of those things that seemed like a good idea at the time but really was just a mistake.)
You can not hide() the document. Instead, try hiding the main container element on your page; or hiding the body e.g. $('body').hide() might work as well.
Just an aside: the display property should be none. hide is not a valid value.
I have a page that looks like this..
<!DOCTYPE html>
<html>
<head>
<title>JQM</title>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script>
$(function(){
$('[data-role="list-divider"]').toggle(function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
I am adding html in dymanically from the server in the content area. The problem is that when I add the content dynamically, the jquery function that I created statically on the page doesnt engage..
<script>
$(function(){
$('[data-role="list-divider"]').toggle(function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
</script>
If I add the html statically all the code works fine and everything is good. My question is how do I make this jquery available to run once html is added to the page from the server?
I DID THIS AND IT WORKED, is there a more elegant way using .on or is this fine?
//got html blob
deferred.success(function (res) {
$(function () {
$('[data-role="list-divider"]').toggle(function () {
$('.' + $(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
}, function () {
$('.' + $(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
});
Since the jquery is currently ran when the document is ready and your content is not loaded yet it won't find the elements and wire-up the events. Adding your script to the ajax.success should solve your problem.
looking at your code, I don't see where you're loading the content dynamically. But if you want that script to run. You should try a document.ready() in front of that script
You can't bind event handlers to elements that haven't been created. Check out this:
http://api.jquery.com/on/
Try this:
$(function(){
$(document).on('toggle', '[data-role="list-divider"]', function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
Haven't tested it though. For on('click') this usually works.
What you do is you bind the 'toggle' trigger to the whole document ( $(document) ) and then check on what element is was triggered. This way you can detect elements that were created after the initialization of the DOM.
You have to use jquery .On() method to attach even handlers to contents dynamically added to pages. Check this - .on
Some thing lik this might work (didn't test) :-
$(function(){
$('[data-role="list-divider"]').on('toggle' ,function(event){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(event){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});