Using JavaScript to shrink navbar - javascript

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

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>

if ($('.single-featured').width() < $(document).width())

I hope i got a simple question for you here. I went through google and stackoverflow search section, but hadnt quite the luck with solution ideas on my problem.
My problem is following, i need a banner to change second class if the width of the picture should dropt below the width size of the document. Generally i would use media queries but since it alawys depends just on the size of the picture i dont know how else i can get this to work then with js or jquery.
I don't rly know why it dosn't work. I executed all the errors i got on the console of Chrome and everyone that appeared on my editor... I generally use only html and css and can edit already existing js and jqueries. But this here is one of few codes i wrote on my own and i am kinda stuck...
$(document).ready(function(){
$('.single-featured').resize(function(){
if ($('.single-featured').width() < $(document).width()) {
$('.single-featured').removeClass('thumb-vh');
$('.single-featured').addClass('thumb-auto');
}
else {
$('.single-featured').removeClass('thumb-auto');
$('.single-featured').addClass('thumb-vh');
}
});
});
I appreciate any kind of solutions or explenations on that matter.
A couple of things:
resize doesn't fire on individual elements, it fires on window, so $(window).resize(...), not $('.single-featured').resize(...).
To get the width of the window, you want $(window).width(), not $(document).width().
Side note: It's not a good idea to constantly re-query the DOM. Do the query only when the results may have changed, and then remember the result:
$(document).ready(function() {
$(window).resize(function() {
// ^^^^^^
var featured = $('.single-featured');
// ^^^^^^^^^^^^
if (featured.width() < $(window).width()) {
// ^^^^^^
featured.removeClass('thumb-vh');
featured.addClass('thumb-auto');
} else {
featured.removeClass('thumb-auto');
featured.addClass('thumb-vh');
}
});
});

Prevent inline scripts loading until Jquery has been loaded

Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam
In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});

Showing/hiding list items works in isolation, but not in site code

I have a list of messages (a ul with a few li's) for which I'd like to show/hide as a fade-in/out marquee.
Easy enough:
function InOut(elem) {
elem.delay(100).fadeIn(1200).delay(10000).fadeOut(1200,
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#myul li').hide();
InOut($('#myul li:first'));
});
This works in isolation the way I'd like (I've tweaked it in JSFiddle, and there was CSS, etc., involved).
However, when I put the code in my live site, it fails. I placed the code just before the closing HEAD tag in case there was an "order" issue.
My suspicion is that the $(function()... is not taking effect.
The implementation is an IP Board site and the code is placed in one of the template files for the site. Those template files are loaded with PHP calls, custom CSS for things, etc. So, debugging is a bit of a nightmare.
I do not see any exceptions being thrown.
As I'm not familiar enough with javascript in this instance, I'm not sure what needs to be done here. And I realize this might be tough without being able to share the page code (then again, could be really simple).
Any help is appreciated.
Thanks!
/s/ Jon C. Munson II
OK, I got this to work by these changes (some perhaps unnecessary):
(function($){
var InOut = function (elem) {
elem.delay(100).fadeIn(1200).delay(10000).fadeOut(1200,
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function(){
$('#ayeups li').hide();
InOut($('#ayeups li:first'));
});
})(jQuery);
Thanks for everyone's looking, etc. And thanks to #ianpgall for attempting to help. :D

jQuery fadeout on scroll - what am I doing wrong?

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.

Categories

Resources