jQuery fadeout on scroll - what am I doing wrong? - javascript

I am trying to implement http://jsfiddle.net/NKgG9/6/ into my website.
It's supposed to fade out a div when the user starts scrolling down. Instead the div just sits there, comlpetely visible and unchanging. I'm a massive newbie to java so figure it's something really basic and fundamental I'm missing.
Here's what I'm doing:
Inside the head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var targets = $(".scroll_note, .social");
if($(window).scrollTop() > 10){
targets.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 10){
targets.stop(true, true).fadeOut("fast" );
} else {
targets.stop(true, true).fadeIn("fast");
}
});
});?
</script>
And then inside the body tag:
<div class="scroll_note">Scroll down to see our amazing specials!</div>
Please help me!
Thanks, Alex :)

The other script you include, fadeslideshow.js, calls jQuery.noConflict which removes the global assignment of jQuery to the $ variable. You have a few ways around this:
Remove the call to jQuery.noConflict in fadeslideshow.js. This may break that slideshow script, however.
Use jQuery instead of $ in your JavaScript code above.
Wrap your code in a self-invoking function that remaps the global jQuery to $:
(function($) { /* your code here */ })(jQuery);

You have a ? at the end of your code that is going to throw an error and kill the script. Remove it and you should be all set.
Edit:
I see you posted your site. Your script tag pointing to the google API is malformed. It doesn't start with http:, just starts with //. Fix that, then see where you are
Edit2: Wyatt pointed out this is not true. See his answer.

Related

Javascript Changing Css Elements

I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):
jQuery
if ($document).scrolltop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("navbar").css("position","static");
}
Is there something I am missing?
Thanks in advance,
Bradon
Edit:
I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:
<script type="text/javascript">
var navbar = $("#navbar");
navbar.on("scroll", function(e){
if (navbar.scrollTop() <= 0){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
}
});
</script>
I still can't get it to work properly.
Edit 2:
I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:
<script type="text/javascript">
var navbar = jQuery("#navbar");
jQuery(document).on("scroll", function(e){
if (jQuery(document).scrollTop() > 280){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
navbar.css("top", "auto");
}
});
</script>
this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!
There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:
wrap = $('#wrap');
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.
I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.
<script type="text/javascript">
if ( $(document).scrollTop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("#navbar").css("position","static");
}
</script>

Using JavaScript to shrink navbar

I tried to use this example to add a shrink-on-scroll navbar to a webpage, but when I copied their Javascript and CSS rules across to my document, it no longer worked. The shrink class is not added to my <nav> elements like it is on their demo. When I downloaded their demo code, it didn't work either, despite working in the online example.
This is the JavaScript I've used:
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
});
I have also tried using this script with the first (and last) lines removed, as is shown elsewhere in the example.
The only answer I can think of is that Chrome refuses to execute JavaScript on local files. Is this the case, or have I missed something?
make sure you include jquery into your html BEFORE your external js file , ex:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Though seems you have already figured out the problem - just a small suggestion is to try writing your code like this - it will look much better :)
$(window).scroll(function(){
var liveview = $(document).scrollTop();
if (liveview > 120) {
$("nav").addClass("shrink");
} else {
$("nav").removeClass("shrink");
}
});

insertBefore - swap two divs

If you look at my website link to website, you will find an ID for the content (#content) and one for the sidebar (#sidebar).
(It's located in "#wrapper > #main > .avada-row > #content/#sidebar")
I have tried to switch order/place so #sidebar comes before #content. I tried with this code:
<script type="text/javascript">//<![CDATA[
$(function(){
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});//]]>
</script>
Here is a JSFiddle example (it works in JSFiddle but not on my website):
JSFiddle
I really hope someone can help me!
NOTE!:
This line of javascript works too in JSFiddle but not on my website:
$('#sidebar').insertBefore($('#content'));
I guess there is no need to use each function?
And sorry - I forgot to say that I know nothing about javascript programming. I just try my best with no luck I guess :/
Best Regards
I can't comment my own question, so I will do it here:
Karl-André - Yeah, I am aware of the error "Uncaught TypeError: undefined is not a function" but i don't know how to fix it.
Arjun - I tried that too but $ is being overriding and therefore is does not work :/
Zessx - Can you help me find out what is overriding $ ?
The code:
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Did not work when I insert it in head.
Thank you so much! I really appreciate it !!!!!!!!!!!!
Something is overriding the jQuery $ :
> $
undefined
> jQuery
function (a,b){return new n.fn.init(a,b)}
If you change your script by this one, you'll see it works :
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Now, we need to define what is overriding $.
As a workaround, you still can use this code in your <head>, as mentioned in jQuery doc (search for "Aliasing the jQuery namespace") :
jQuery(function($) {
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});
if you just want to add the content above the selected div just use
$('#sidebar').insertBefore('#content');
-Thanks.

jquery page resize not working

Hey guys I'm just starting out with JQuery so I'm an utter noob, but I've been following the codecademy tutorial and am trying to implement a page resize function to fit into a resized browser. However nothing is working inside the script tags with jquery inside - even alerts aren't happening. The first script runs fine and says hi, but neither of the other two alerts work, nor any of the Jquery stuff. I'm not sure if it makes a difference, but there are two soundcloud widgets on the page as well, one which is a programmable widget.
<script type="text/javascript">alert("Hi");</script>
<script type="text/javascript">
alert("Hello");
$(document).ready(function() {
alert("Jquery");
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
)};
});
</script>
Apart from figuring out why nothing happens, I'd also like to know if this resize thing works.
You got syntax error : window.resize should close with }); not )};
And be sure you called jQuery first.
By the way : why don't you simply use Media Queries ?
#media screen and (max-width: 1020px) {
#page {
width: 500px;
}
}
Without seeing the head section of your page, it sounds like you do not have the jquery library loaded. You must include a reference to the library, you can download it to your server of reference it by including <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> on your page (before any calls to $)
If your script isn't doing anything, almost certainly you have a syntax error somewhere within your <script> tag that is causing the code to be invalid and fail to run.
In this situation, your problem is that you haven't closed your resize call / function parameter properly:
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
)};
should be
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
});
Note that the parentheses and curly braces at the end of the function must be closed in exactly the opposite order as they were opened at the start.
If you are sure that you have included the jquery library
*try this code:*
<script>
$(function () {
var oldY = document.documentElement.clientWidth;
if (oldY <= 1020) {
$('#page').css({'width', '500px'});
}
});
</script>
First correct the syntax by changing )} into }). Than make sure you are including the jquery.js file before using jQuery code. Something like:
<html><head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>//jQuery Code here</script>
</head>
<body>
<script>//jQuery Code here</script>
</body></html>
Maybe open the console and check the javascript error messages (i.e. Ctrl + Shift + I in Chrome/Firefox others might be different). Also enter $ === jQuery into the console and see to which it is evaluated (should be true if jQuery is bound to $).
It is a common shortcut in jQuery to use $( function() { ... } )); for document.ready see jQuery API
If you are using other JavaScript libs that might overwrite the $ use
jQuery( document ).ready(function( $ ) {
// Code using $ as usual goes here.
});
to ensure $ is bound to jQuery.

JS / Jquery script Help, its not looping

so here is the script:
<script>
var div = $("#gridline1");
$(document.body).mousemove(function(e){
if(e.pageX<630){div.animate({right:'+=1'},1);}
else {div.animate({left:'+=2'},1);}
});
</script>
Its working, but when it gets after the "else" its stop doing the "if" statement.
Please help.
http://jsfiddle.net/nxaFG/
I'm not sure what HTML or CSS you are using, and the effect may depend on those as well. However, I think you can just replace right:'+=1' with left:'-=1'. Here is a working example: http://jsfiddle.net/katylava/kagnr/

Categories

Resources