I can't figure out why the jQuery tap event isn't even getting a respond when I test it. I put in an alert and I haven't gotten it to pop up at all. My code looks like this:
var calendarOpen = false;
$('.calendar').on("tap", function () {
alert('1');
if (calendarOpen == false) {
$('.login-body').animate({left: '90%'}, 300);
$('.calendar-body').animate({right: '10%'}, 300);
calendarOpen = true;
} else {
$('.login-body').animate({left: '0px'}, 300);
$('.calendar-body').animate({right: '50%'}, 300);
calendarOpen = false;
}
});
I have the script and css pages attached and I've checked for any typos. I copied the jQuery documentation and I'm still having problems. Thanks for the help.
These are my included scripts and the code provided above is under main.js.
<script src=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js></script>
<script src=http://code.jquery.com/ui/1.10.3/jquery-ui.js></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="scripts/main.js"></script>
You need to load your JS files in this order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
reference: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html
Related
I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.
This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.
I have code:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".koncecki-web-design").addClass("konecki-scroll");
$(".top-nav").addClass("show");
$("#work").addClass("work-margin");
} else {
$(".koncecki-web-design").removeClass("konecki-scroll");
$(".top-nav").removeClass("show");
$("#work").removeClass("work-margin");
}
if (scroll >= 200) {
$(".top-text").addClass("top-text-scroll");
} else {
$(".top-text").removeClass("top-text-scroll");
}
});
I have this in my index file but i want to have in control.js
<script type="text/javascript" src="js/control.js"></script>
When i paste this code to control.js script does not work.
What could be wrong?
Thanks!
Silon
Be sure to have jQuery included before control.js. So
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/control.js"></script>
instead of
<script type="text/javascript" src="js/control.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
You need to:
Check if you including control.js before jquery.js then it would not work move your jquery file to top.
DOM is not ready to be worked on so move all your code to $(document).ready()
Or include your control.js just before closing body tag, it will take care of above two points.
i got the correct codes which could solved my problem, in previously posted questions : How do I get an image to fade in and out on a scroll using jQuery?
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
divs.stop(true, true).fadeIn(5000);
} else {
divs.stop(true, true).fadeOut(5000);}
});
now I can't understand how to implement this code in blogger.
First include the jQuery in your <head> if you don't have it (this is compulsory, else you won't be able to use any jQuery code).
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>
Then paste this code in your <body> between the <script> tag
<script type="text/javascript">
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
divs.stop(true, true).fadeIn(5000);
} else {
divs.stop(true, true).fadeOut(5000);}
});
</script>
The JQuery event on click is not firing with the following code:
core.js
$(document).ready(function() {
$('.login-form-input').on('click', function(){
alert("s");
$('#login-description').css({color: #000;}).fadeIn(1000);
alert("s");
});
}
index.php
http://pastebin.com/khHZS3HN
You've got this in your page...
<script type="text/javascript" src="js/core.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
That includes your script, core.js, before it includes jQuery. Your script requires jQuery so it should be the other way round...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/core.js"></script>
Also, as pointed out by reyaner in the question comments, you need quotes around the colour...
$('#login-description').css({ color: "#000" }).fadeIn(1000);
This should work for you :
jQuery should be added before the click function and all codes.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
$(document).on("click", ".login-form-input ", function(e){
alert("s");
$('#login-description').css({color: "#000"}).fadeIn(1000);
alert("s");
});
This line is wrong:
$('#login-description').css({color: #000;}).fadeIn(1000);
It should be (-> {color: "#000"}):
$('#login-description').css({color: "#000"}).fadeIn(1000);
$('.login-form-input').click(function () {
alert("s");
$('#login-description').css({color: #000;}).fadeIn(1000);
alert("s");
});
I am using yepnope.js but having a slight issue with on load loading a function
in the head i include yep nope and make a call to the relevant js file
<script type="text/javascript" src="/code/trunk/javascript/external/modernizr/modernizr-development.js"></script>
<script type="text/javascript" src="/code/trunk/javascript/external/yepnope.1.5.3-min.js"></script>
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/plugin.mobile.js'],
nope:['/templates/client/jquery/qff/plugin.website.js']
});
</script>
and then at the bottom of the page
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
});
</script>
so i am looking at this on a main screen. so it's suppoed to call in plugin.mobile.js
in the plugin.mobile.js file
(function( $ ){
$.fn.setupQantas = function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
startSlide: 1,
googleAnalytics:0, // 1 sends to google
googleCode: ""
}, options);
var methods = {};
return this.each(function() {
if (settings.startSlide === 1) {
alert("slide = 1");
} else {
alert("slide > 1");
}
});
};
})( jQuery );// JavaScript Document
instead of giving the alert slide 1 it has the error
jQuery("#mainContent").setupQantas is not a function
if i dont use yepnope and just have it in a script tag it works. There seems to be a delay on when the yepnope loads in the js file and doesnt seem to do before doc.ready
is there a way around this?
thanks
Yes there is a delay. That's all the point behind an asynchronous script loader.
You should use a callback after the script is loaded by yepnope. Check the complete and callback options.
here is the code
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/mobile.js'],
nope:['/templates/client/jquery/qff/website.js'],
complete: function () {
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
}
});
</script>