I've been playing around with the jquery plugin Jquery Transit : http://ricostacruz.com/jquery.transit/ but no matter what I do, the code doesn't behave like I expect it to (as a matter of fact, it doesn't behave at all)
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:yellow;
width:100px;
border:1px solid blue;
position:absolute;
left:50px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script scr='jquery.transit.js'></script>
</head>
<title>test</title>
</head><body>
<button id="go"> Run</button>
<div id="block">Hello!</div>
<script>
$(function() {
$("#go").click(
function(){
$("#block").transition({ x: '90px' }, 1500 );
});
});
</script>
</body>
</html>
The code doesn't work at all. I added the jquery animation code to compare it to, which works perfectly fine. Now I KNOW that jquery 1.8 broke jquery transit, but I'm using jquery 1.7 here so that shouldn't be an issue.
I'm at a loss here, anyone got any ideas?
EDIT:
I've followed everyone's instructions and created this:
http://web.uvic.ca/~markkoni/
and although the examples seem to work jsfiddle it doesn't work in practice.
Working demo (Tested on localhost too): http://jsfiddle.net/fedmich/S2ube/
the minified script seems to be not working. change your code from
http://ricostacruz.com/jquery.transit/jquery.transit.min.js
to
http://ricostacruz.com/jquery.transit/jquery.transit.js
also don't directly hotlink the javascript and put it on your own site, because when his site is down later, your web_app will also be down if you use his site's js.
and yes, put your code after pageload
$(function() {
//your code here
});
Make sur your DOM is loaded before manipulating it by enclosing it in a jQuery ready handler :
$(function(){
$('#go').click(function(){
$("#block").transition({x: '90px'}, 1500);
});
});
Also, prefer using css left property instead of x which does not exists.
div {
background-color: yellow;
width: 100px;
border: 1px solid blue;
position: absolute;
left: 50px;
}
Here is a working fiddle
Also make sure your script tag looks like this :
<script type="text/javascript">
Instead of
<script>
Notes :
I'm using jQuery 1.7.2 in my fiddle, it seems that transit is not compatible with transit.js yet.
Transit does support backgroundColor and color properties. Check out the example : http://jsfiddle.net/PAnCh/
$(function() {
$("#block").mouseenter(
function(){
$("#block").transition({ x: '+=90px', backgroundColor: '#cacaca', color: '#000' }, 1000 );
});
$("#block").mouseleave(
function(){
$("#block").transition({ x: '-=90px', backgroundColor: '#036', color: '#fff' }, 500 );
});
});
Related
Basically, I want a div box to slide in on the page when it loads. I tested it on other websites, and html previews, all of which have worked so far.
It just seems to be that this specific website doesn't seem to like it, and I can't figure out why.
The HTML:
<div id="kitten">
<div class="banner">
bloop
</div>
</div>
The script:
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$("div.banner")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 3000);
</script>
The CSS:
#kitten{
position:absolute;
width:100%;
height:920px;
top:0px;
left:0px;
background:white;
}
.banner{
position:fixed;
width:600px;
height:45px;
left: 0;
right: 0;
margin: auto;
background:black;
color:white;
text-align:center;
z-index:500;
}
I'm jut curious if the website has some sort of way of blocking it, or if I happen to be using the wrong installation of jquery(?) Is there any way to find out what version of jquery to use that will work on there.
NO. I do not OWN the site, it's just a profile page that I posted some code onto. I'm not "hosting" anything.
First of all, you have to include jQuery library before that your js script
perhaps, "$" <- this object used by other libs, you have to check this link.
https://api.jquery.com/jquery.noconflict/
Add JQuery library before your script so that $ can be identified.
Eg:-
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
If you are using WordPress, Please convert $ to 'jquery`
$(document).ready(function() {
to
jQuery(document).ready(function($){
Try this, firstly load jquery before body closing tag</body>
<html>
<head></head>
<body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
</html>
then, create in the same folder of your index.html a file called script.js that should look like this :
$( document ).ready(function() {
$("div.banner")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 3000);
});
Now include it in your html just after jquery:
<html>
<head></head>
<body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html
If still not working try, as #Arshid KV said, to change
$(document).ready(function() {
to
jQuery(document).ready(function($){
In node-webkit, I was running the code like below.
Jquery
$(document).on('mousedown', '.clickOnMe', function(e){
console.log(e.target);
});
I noticed that it taking few mili seconds to access to e.target and you feel like there is some lag/freeze when using the application. My application contains access to e.target and wonder if there is any better way that doesn't lag or freeze. The lag is like 0.1 sec.
I've tried using pure JavaScript but the output was the same.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<script src="js/jquery/1.7.2.min.js"></script>
<style>
.clickOnMe { border: 1px solid black; height: 200px; width: 200px; background: #ddd;}
</style>
<script type='text/javascript'>
$(document).on('mouseup', '.clickOnMe', function(e){
$('.clickOnMe').css('background','red');
});
$(document).on('mousedown', '.clickOnMe', function(e){
console.log(e.target);
$('.clickOnMe').css('background','blue');
});
$(document).on('mousemove', document, function(e){
console.log(e.target);
});
</script>
<body>
<div class='clickOnMe' >
Click on me.
</div>
</body>
</html>
OldGeeksGuide, this is the code I used to test each platforms, node-webkit 0.9.x, 0.8.x, atom shell, brackets shell, chrome, etc. So far, node-webkit gives me the lag. Please take a look at console log and see how fast other ones shows the log. Im using Windows7. Thank you!
-Im using document.on but the performance is the same with pure JavaScript or $('id').on
I have been scratching my head on this one and just not quite getting it at the moment.
I am designing a "tab" theme for a new design project I am attempting which can be viewed working correctly here http://jsfiddle.net/a598t/ ... this will be the end result when it is working on anywhere but fiddle ... This is where I am stuck ...
I have developed the same code as seen in jsfiddle using Dreamweaver and it just will not perform anything from .hide() to .animate({})
I am no expert on jQuery but I know when something makes absolutely no sense. Could I have somebody look over my shoulder on this and see if I am just blind? Here is my code snippet from dw ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#billing").click(function() {
$(this).animate({
width:100
});
});
});
</script>
<style type="text/css">
#billing, #tracking, #support
{
width:20px;
height:500px;
background-color:black;
border:1px solid red;
float:left;
}
</style>
</head>
<body>
<div id="billing"></div>
<div id="tracking"></div>
<div id="support"></div>
</body>
</html>
This all looks correct to me ... but like I said, no expert ... thanks ... btw I cut out most of the header so it was less code ... thanks for any help you can offer
use this one :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
code working...
I need to apply a delay for something after loading of a page.The delay can be of 5 seconds and then i need to load some components.How to do that?
Since you are using jQuery mobile already go for the
.delay()
from jQuery. http://api.jquery.com/delay/
There is also a another question like this. Beware jQuery docs states this -
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Here is the Example from jQuery doc
<!DOCTYPE html>
<html>
<head>
<style>
div { position: absolute; width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<script>
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
</script>
</body>
</html>
function loadStuff()
{
//load stuff
}
setTimeout(function(){loadStuff()}, 5000);
Write your function to do your loading, then call that function after a timeout of 5 seconds.
Use javascript setTimeout() function.
e.g setTimeout("function()",5000);
I've been working on my problem for the past few hours and am at the end of my rope. I need help.
I have a staging page where I tested the code and verfied that it works, but on the live page, the code refuses to budge. I can't figure out why kwicks jq seems to be ignoring the html on the jujumamablog.com header. <-- this is my question.
I'm using the kwicks for jQuery. I created a working sample page so I could be sure that the code was working before trying to integrate into the live area of the site. The sample page can be found here: http://jujumamablog.com/jujumama/dev.html
The code for the workingsample page is as follows
<!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" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 98px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
I was hoping that this would be a fairly simple 'plug-and-play' instance. Boy, was I wrong.
My task was to get this slick piece running smoothly. I know there are other issues with the main site (jujumamablog.com), load time specifically, which I was told to ignore for the time being.
Edit-----------
I need to be a bit more clear here. The above code works, I'm wondering why, when I try to put the code into the live page (jujumamablog.com, where there are other scripts and -ish) that this stops working.
Thanks in advance.
It looks like you are including jQuery a second time, and since all those plugins are just methods of jQuery, you blow them all away.
The first one is on line 65, and the second is on line 91. All the plugins added between those two, are destroyed.
As a side note, you should consider consolidating all those scripts into one, then compress them with YUI compressor or whatever you prefer, and finally, if possible, put it at the bottom instead of at the top.
The $().ready(function() { looks wrong to me. I thought that the two ways of doing it were
$(function()
{
//etc
});
and
$(document).ready(function()
{
//etc
});
I get an error on this line:
jQuery('ul.sf-menu').superfish();
[Exception] TypeError: Object # has no method 'superfish'
It's possible this is stopping the rest of your ready events from firing.
I found out that the problem is that your live server uses a newer version of Jquery. I have the same problems but I don't know what's different between 1.2.6 and 1.4.2. Hopefully some answers will turn up!
Now I'm asking here: Plugin: Kwicks for Jquery works perfectly with Jquery 1.2.6 but not 1.4.2