I am making a website. I am doing responsive menu and jQuery script work but not good. I mean that every single script wokrs very well but all of them together don't want to work that good. The first one, this from responsive menu is killing every thing, so this menu is not working as it should be :/
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$(".menu-trigger").click(function(){
$("#mainnav").slideToggle(900);
});
});
jQuery(function($)
{
//zresetuj scrolla
$.scrollTo(0);
$('#link').click(function() { $.scrollTo($('#zjazd'), 2000); });
}
);
$(document).ready(function(){
$("#container").sticky({topSpacing:0});
});
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn('slow');
} else {
$('.scrollup').fadeOut('fast');
}
});
//Kliknij aby przewinąć do góry
$('.scrollup').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
</script>
So what is wrong? What is going om? I'm still learning and it can be really silly problem but for today for me...
All website is responsive already.
You can see here what's wrong
When I delete rest of scripts and leave only this for responsive menu it works beautiful, when I delete this for responsive menu then all rest works well, but when all scripts are together then only this for menu works not well but rest of it works normal. I don't know what is going on.
I'm still learning... and the website which I'm working od is pretty good.
You only need one $(document).ready(function() { });
And the first thing inside of it should be calling the plugins you want to use.
$(document).ready(function(){
$("#container").sticky({topSpacing:0});
$.scrollTo(0);
$(".menu-trigger").click(function(){
$("#mainnav").slideToggle(900);
});
$('#link').click(function() {
$.scrollTo($('#zjazd'), 2000);
});
$('.scrollup').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn('slow');
} else {
$('.scrollup').fadeOut('fast');
}
});
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.
Im using div's with a onclick= function.
That in turn exectues a confirm box.
If users press OK. it redirects using: window.location.hash and auto scrolls to a div id.
Auto scroll works fine. But Animated scroll breaks at this point.
Using conventional a href's works fine with animated scrolling.
Im an amateur and pieced togheter the following code from different sources. I will post the code and hopefully someone has the answer.
Code:
function FrontAsNew() {
if (confirm("No damage allowed") == true) { window.location.hash = "#side"; }
else { window.location.hash = "#front"; }
}
<div id="cosmetics_box" style="cursor:hand; cursor:pointer;" onclick="FrontAsNew()">As new</div>
Animated scroll script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script>
$('div').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 2000);
return false;
});
So in short: Animated scrolling works fine with conventional a href links. But when using divs as links that exectue a function that uses location.hash the animated scrolling breaks.
Thanks for any help in advance!
Try something like this:
function FrontAsNew() {
if (confirm("No damage allowed") == true) {
scrollToTopById('side');
}
else {
scrollToTopById('front');
}
}
function scrollToTopById(id) {
$('html, body').animate({scrollTop: $('#' + id).offset().top}, 2000);
}
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>
I'm using the following code to scroll the window when a user clicks on a few different links:
$(document).ready(function(){
$("#footerlink").click(function(){
$("#slide1").slideto({});
});
$("#logo").click(function(){
$("#slide1").slideto({});
});
$("#home").click(function(){
$("#slide1").slideto({});
})
$("#others").click(function(){
$("#slide2").slideto({});
})
$("#me").click(function(){
$("#slide3").slideto({});
});
$("#laughs").click(function(){
$("#slide4").slideto({});
});
})
The slide functionality is coming from this script:
(function(b) {
b.fn.slideto = function(a) {
a = b.extend({
slide_duration: 1000,
highlight_duration: 3E3,
highlight: false,
highlight_color: "#FFFF99"
}, a);
return this.each(function() {
obj = b(this);
b("body").animate({
scrollTop: obj.offset().top
}, a.slide_duration, function() {
a.highlight && b.ui.version && obj.effect("highlight", {
color: a.highlight_color
}, a.highlight_duration)
})
})
}
})(jQuery);
My problem is the scrolling only works in Chrome and not Firefox or IE. FF and IE degrade nicely so the links still work, but I really like the scrolling animation.
FYI: I am calling Jquery with these two lines:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
Here is a Fiddle of my code: http://jsfiddle.net/LwXR3/
Can you help me track down my issue?
Okay this is too long to be in a comment. You should really avoid the copy paste mess in that code above. The code is almost exactly the same minus the ids. Use the href to get the location instead of hard coding it.
HTML
<a class="slideLinks" href="#foo">go to foo</a>
JavaScript
$(".slideLinks").on("click", function(e){
e.preventDefault(); //p[revent the click
$(this.hash).slideto({}); //call your slide to function with the hash value for the id
});
I want to get scroll even and write this:
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
alert($("body").scrollTop());
});
});
</script>
but when I run the page and scrolls, the page makes it black, it doesn't work correctlly.
Can anyone please help me, why it is not working???
Your code works fine. Have you included the jquery script in your code ?
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function (){
$(window).scroll(function () {
alert($("body").scrollTop());
});
});
</script>
I wrote a function that works then when I do scroll, and everything works fine. But if I do try debug in the browser, it same stops and shows the black screen.
$(window).scroll(function () {
setBackground();
});
function setBackground() {
// do something ...
}