I'd like to create a custom .js file for my website so that I do not have to keep linking it within my webpages, my code works when used inline .
Please could someone tell me why my styles.js page wont link? I'm thinking that my code is wrong?
The current page is 'styles.js', the link I use is:
$(document).ready(function() {
$('#nav').affix({
offset: {
top: 90
}
});
$('#sidebar').affix({
offset: {
top: 17
}
});
});
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function() {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
});
A few things to check first:
Check your styles.js file is actually being included, make sure you have no HTML errors when including it and that your file path is correct.
Make sure styles.js is included further down in the source code than jQuery.
If both of the above seem OK, it could be that something is overwriting $ before your code is ran, try wrapping your code in this:
(function($) {
// Your code here
})(jQuery);
This will force $ to be jQuery within the scope of the function.
Related
I'm trying to create a mobile navigation menu, but for some odd reason, the code won't work. I feel like it's something with the css, but I'm not sure. I created a JS Fiddle to play with it. I want the menu to open when you click the little button. The JavaScript must not be reading the request...
Java Script
jQuery(document).ready(function () {
jQuery("#hamburger").click(function () {
jQuery('#content').css('min-height', jQuery(window).height());
jQuery('nav').css('opacity', 1);
var contentWidth = jQuery('#content').width();
jQuery('#content').css('width', contentWidth);
jQuery('#contentLayer').css('display', 'block');
jQuery('#container').bind('touchmove', function (e) {
e.preventDefault();
});
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
jQuery("#contentLayer").click(function () {
jQuery('#container').unbind('touchmove');
jQuery("#container").animate({"marginLeft": ["-1", 'easeOutExpo']}, {
duration: 700,
complete: function () {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
jQuery('nav').css('opacity', 0);
jQuery('#content').css('min-height', 'auto');
}
});
});
});
It looks like you don't have jquery loaded in your jfiddle. When I loaded jQuery it worked for me.
Click on Javascript and then "FRAMEWORKS & EXTENSIONS" and add jQuery 1.12 at least.
I've created a fiddle to show what is happening.
I am using jquery to fade in a link to the top of the page when the user is scrolling down.
I can get it to work on jsfiddle if I place the code in the javascript window, but if I put it in script tags where my $( window ).load(function() is in the HTML window, it doesn't work at all. Does anybody know why?
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
here's the fiddle:
https://jsfiddle.net/8130fdhm/2/
Any help would be most appreciated.
Put in a script tag just before the body end tag. I have updated the jsfiddle here https://jsfiddle.net/8130fdhm/3/
....
<script>
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
</script>
</body>
I'm trying to get a script so that when this div #events is clicked the content currently in #meet div changes it's visibility to hidden (so that space is preserved) and then using jquery load method, the content in v2.html is loaded into the #meet div. However, right now the #meet div disappears but the new content does not appear. Any ideas why?
HTML:
<div id="meet">
........
<div id="exec"></div>
........
</div>
JS:
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden', function() {
$('#meet').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
})
})
});
});
.css doesn't take a function as a third parameter. It does take a function as a second parameter with only a propertyName as the first: api.jquery.com/css. Try removing that function call and moving $('#meet').load() to just below the first .css call.
You can chain the .css and .load functions as well.
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
});
});
});
use CSS class instead in JQuery : addClass("foo") which contains the style you want and removeClass("boo") which contains the style you don't want.
look at this fiddle jsfiddle.net
$("#navigation").on("click", function(){
if($(this).hasClass("foo")){
$(this).removeClass("foo");
$(this).addClass("boo");
$(this).animate({width: 100}, 350);
} else {
$(this).removeClass("boo");
$(this).addClass("foo");
$(this).animate({width: 100}, 350);
}
});
I have been trying for hours now but couldn't find a reason why the following code is not working on my site (http://robo.im) -
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
}
else{
$('.home #masthead').css("opacity", 0);
}
});
</script>
I'm calling it in the footer with 'script' tags and have included all the necessary files. Kindly help and take a look into the page source if required.
You need to make sure you put your script code within the $(document).ready. This functions makes sure the complete page content has been loaded. Otherwise you could apply functions to elements which do not exist.
So in your example you are binding the scroll function while the document has not been completed loaded yet.
Also make sure you have loaded jQuery correctly. #adeneo pointed correctly that Wordpress uses jQuery instead of $ as the reference to jQuery.
See http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
<script>
jQuery(document).ready(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
}
else{
$('.home #masthead').css("opacity", 0);
}
});
});
</script>
I have looked at your page, and it appears that jQuery is not bound to the $ variable. Either you have some script that is calling jQuery.noConflict() (this may be in a library that you have added or in your own code) or there is something overwriting $.
I would suggest either fixing that issue, or changing all $ in your code to jQuery instead:
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 400) {
jQuery('.home #masthead').css("opacity", 0.98);
}
else{
jQuery('.home #masthead').css("opacity", 0);
}
});
Alternatively, if you are sure this will not cause problems, you can do this just before your existing code:
$ = jQuery;
Finally, as advised in another answer, it would be best to wrap your entire code block in a $(document).ready or similar. A working snippet would be:
$ = jQuery;
$(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
} else{
$('.home #masthead').css("opacity", 0);
}
});
});
However, I tried this on your site, and whatever is .home #masthead has no content, so you won't actually see it doing anything.
So I'm using the History.js plugin to load pages in my Wordpress theme via AJAX. I've been successful in doing so and have the entire loading feature working fine. However, I have many scripts working in the same file and they of course do not get loaded on the state change.
Here's (a very brief) version of my functions.js file to explain:
(function($){})(window.jQuery);
$(document).ready(function() {
/* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
$projects = $("#projects");
$projects.append($(".contact"));
$projects.isotope({
itemSelector : '.item',
layoutMode : 'masonry'
});
/* END PREVIOUS BLOCK */
/* BEGIN HISTORY.JS IMPLEMENTATION */
var History = window.History,
State = History.getState();
$('.nav a, .leftHold a').on('click', function(event) {
event.preventDefault();
var path = $(this).attr('href');
var title = $(this).text();
History.pushState('ajax', title, path);
});
History.Adapter.bind(window, 'statechange', function() {
load_site_ajax();
});
function load_site_ajax() {
State = History.getState();
$('body, html').animate({ scrollTop : 0 }, 250, function() {
$("#article").animate({ left : -1*$(window).width() }, 250, function() {
$(this).load(State.url + ' #article', function() {
$(".nav li").each(function() {
$(this).removeClass("current_page_item").removeClass("current_page_parent").removeClass("current_page_ancestor");
}).promise().done(function() {
$(".nav a").each(function() {
if(State.title.indexOf($(this).text()) != -1) {
$(this).parent().addClass('current_page_item');
return false;
}
});
});
}).promise().done(function() { $(this).css("left", $(window).width()).animate({ left : 0 }, 250); });
});
});
}
/* END HISTORY.JS */
});
I load this functions.js file at the end of my document, just before the closing body tag. I can tell that whenever I change browser states, the code in $(document).ready(); doesn't run again, therefore Isotope and none of my other Javascripts load again.
QUESTION:
How should I ensure that the code in functions.js runs every time the pushstate is initiated by History.js?
It sounds like you'll need to execute the ready code again. Wrap your initialization code in a function:
$(document).ready(initializePage);
function initializePage() {
/* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
...
}
And then, when "statechange" fires, you can call initializePage() again.
You will also need to make sure the History code only runs once, so put that code in a separate function:
$(document).ready(setupHistory);
function setupHistory() {
/* BEGIN HISTORY.JS IMPLEMENTATION */
var History = window.History,
State = History.getState();
});
....
}