JavaScript not working when is in separate file - javascript

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.

Related

Jquery 2 scripts aren't cooperating

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.

URL Redirect Based on Screen Width

What I'm looking for is quite simply, a way to automatically redirect the user to a different URL when the screen or window width is less then 950px.
I don't want to use "refresh" as it's not recommended, and I don't do want to use "User Agent" either as it seams to me less reliable in the long term and I don't want to be concerned with updating this.
This is the Script I see suggested everywhere for this purpose but for some reason it doesn't do anything:
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
//-->
</script>
I've also tried it with all this variants with no success:
window.location
document.location
window.location.href
document.location.href
I've also tried placing it as the first thing after Head tag and even before Doctype. Nothing happens...
I'm answering my own question as I have recently found a more satisfying solution then the one provided by #Finduilas.
This solution not only redirects you in normal circumstances, it will also redirect you back and forth as you resize your window.
Even better! It will redirect you back and forth in mobile devices as you switch from landscape to portrait and vice-versa.
<script type="text/javascript">
$(window).on('load resize',function(){
if($(window).width() < 950){
window.location = "https://www.google.com"
}
});
</script>
If you have to use Javascript, try the following:
<script type="text/javascript">
function redirect() {
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
and in your body add :
<body onload="setTimeout('redirect()', 300)">
This will redirect the user after 300 ms when the page is loaded, this way you are making sure that the width of the screen is available.
You can better use JQUERY for this...
// Returns width of browser viewport
$( window ).width();
See: http://api.jquery.com/width/
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($(window).width() <= 950) {
window.location = "https://www.google.com/";
}
});
</script>
</head>
<body>
<p>Website</p>
</body>
</html>
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
//-->
</script>
<!-- you forgot to add window.location.replace("https://www.google.com/"); and yours is a little wrong-->
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location.replace("https://www.google.com/");
}
//-->
</script>
None of these scripts work. I have tried them all.
USE THIS ON TOP OF THE HEAD TAG
<script >
window.addEventListener('resize', function() {
if (window.innerWidth <= "Your desired screen width") {
window.location.href = "redirect loacation";
}
});
</script>
</head>
<body >

where to put jquery codes in blogger

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>

JQuery event .on('click' not firing

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");
});

jQuery .tap event not working

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

Categories