Uncaught ReferenceError: $ is not defined? Jsfiddle - javascript

I'm a beginner at javascript and i have used jsfiddle to create a navigation bar which appears when the user has scrolled down.
When i copy the code to dreamweaver it no longer works?
I have researched and it said something about adding the jquery framework or something?
Or is there a way to do this without the framework?
Link to jsfiddle for full code: http://jsfiddle.net/fNn7K/270/
javascript :
$(window).on('scroll', function () {
console.log($(this).scrollTop());
if ($(this).scrollTop() > 50) {
$('.nav').addClass('visible');
}else if ($(this).scrollTop() <= 50 && $('.nav').hasClass('visible')) {
$('.nav').removeClass('visible');
}
});

Without jQuery you can do :
window.onscroll = function() {
var display = document.body.scrollTop > 150 ? 'inline' : 'none',
elems = document.getElementsByTagName('nav');
for (var i=0; i<elems.length; i++) {
elems[i].style.display = display;
}
}
FIDDLE

When i copy the code to dreamweaver it no longer works?
JS Fiddle assembles a page based on several pieces of user entered data. One of those pieces of data is the selection of a library.
You have to copy the code to the right places in the document and include the same libraries.
Even then, the preview modes of Dreamweaver might not show it up, because they are (or at least were) entirely awful. Do you testing in a real browser.
I have researched and it said something about adding the jquery framework or something?
You need the jQuery library to use jQuery methods, yes.
Or is there a way to do this without the framework?
jQuery is just some JavaScript written by other people. You can reproduce anything it does. A line by line rewrite of your code to not use jQuery would be out of scope for a stackoverflow answer though.

you need to add jquery.js file in your code (dreamweaver)..
add this in between <head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
in the fiddle you provided, the jquery is already loaded..so you didn't get that error.
and don't forget to wrap your code inside document.ready function (which is again, already added in fiddle)..
$(function(){
$(window).on('scroll', function () {
.....
});
});

Related

Meteor won't run jQuery code

I'm trying to run a block of jQuery code that shows and hides a form, but can't find a way to get Meteor to run the code on the client side. Here's the code I'm attempting to use at the moment:
if (Meteor.isClient) {
Template.post.onRendered(function(){
$(document).ready(function(){
$('.replybtn').click(function(){
if( $(this).parent().next().css('display') === 'none' ){
$(this).parent().next().css('display', 'block');
} else {
$(this).parent().next().css('display', 'none');
}
});
});
});
}
I've also tried putting the code in a script tag, which did not work. Strangely, the jQuery portion of the code alone works fine when pasted into the browser console - meaning the bug is likely in how I'm running the code in Meteor, not the jQuery itself. Also, I've confirmed that the template name is correct and can't think of any other issues that could be causing this. Any ideas on why the jQuery code may not be running?
This is probably not the best solution, but it appears that this issue can be fixed by defining a function that creates the event listener and then setting a 2 second timeout to run the function with setTimeout().
You're trying to apply a traditional jQuery pattern when Meteor provides a simple facility to attach event handlers to templates. Here would be the meteoric way:
if (Meteor.isClient) {
Template.post.events({
'.replybtn click'(e){
const selector = e.target.parentElement.nextSibling;
selector.css('display', selector.css('display') === 'none'? 'block' : 'none');
}
});
});

JSFiddle doesn't work even if I copy code from another working fiddle

I visited this link to get some help in learning how to play around with Javascript: http://jsfiddle.net/8ZtqL/1/
I attempted it on my project. Didn't work. Hmm.
So I made a new JS Fiddle and copied to code over. Still didn't work.. Why?
Here's my fiddle which doesn't work: https://jsfiddle.net/mt6bwry9/
The code is an exact copy.
Here's the code used:
var text="This text will be written one by one.";
var delay=200;
var elem = $("#myText");
//text- string
//elem - jQuery element where text is to be attached
//delay - the delay in each text
var addTextByDelay = function(text,elem,delay){
if(!elem){
elem = $("body");
}
if(!delay){
delay = 300;
}
if(text.length >0){
//append first character
elem.append(text[0]);
setTimeout(
function(){
//Slice text by 1 character and call function again
addTextByDelay(text.slice(1),elem,delay);
},delay
);
}
}
addTextByDelay(text,elem,delay);
<body>
<div id="myText"></div>
</body>
Since you said you're new to JavaScript, here is a little more detailed answer.
If your JavaScript isn't behaving the way you expect it to, definitely check your browser console. You can do that in Chrome by going to View>>Developer>>JavaScript Console or simply pressing Command+Alt+J. In other browsers you will find similar developer tools.
In the case of your JS Fiddle, when you open the console you see an error that says $ is not defined. $ is shorthand for jQuery. The JavaScript code that you've copied from the other Fiddle uses jQuery to do DOM Manipulation and your Fiddle hasn't loaded jQuery. So click on the gear icon in your JS section and under Frameworks select jQuery (I recommend 2.2.1) and try running your code again.

How to properly use jQuery noConflict mode in Wordpress

I have the following functional (in html) jsfiddle:
http://jsfiddle.net/pmpvLjuq/1/
I've found that in order to be functional in Wordpress too, should be used in jQuery's noConflict mode. In wp codex I've found this section:
At this point, I'm not so sure if I understand the global term in these circumstances. Should I replace all the $ signs with jQuery ?
What I've done without error in the console (but I'm concerned) also working in wp pages it's here: http://jsfiddle.net/8r9rcft2/2/
In other words, in these particular cases should I still replace the $ mark(?)
line 15
$links = $(".pagedMenu li"), will be jQuerylinks = jQuery(".pagedMenu li"),(?)
line 16
count = $links.length, will be count = jQuerylinks.length, (?)
line
The same for lines 25,26,26, ect.
Can I have your prepared for wordpress jsfiddle in jQuery's noConflict mode in order to have the whole picture of this process please?
Can you please confirm, as a rule of thumb, if I dont receive any error in the browser console that means everything is fine in the code? Thanks
I always used jQuery like this in wordpress and it's working for me I hop this is working for you.
(function($){
$(document).ready(function(){
// write code here
});
// or also you can write jquery code like this
jQuery(document).ready(function(){
// write code here
});
})(jQuery);
I always prefer below method because it always separate jquery libraries and never conflict and it is one of recommended method of jquery.
Its just a example. I mostly used it for smooth scrooling.
$scroll= jQuery.noConflict();
$scroll('a').click(function(){
$scroll('html, body').animate({
scrollTop: $scroll( $scroll(this).attr('href') ).offset().top
}, 1000);
return false;
});

Auto Loading HTML in a Div with Javascript

I'm looking to use this code in JS Fiddle http://jsfiddle.net/syE7s/ to load some content into a div.
It's exactly what I need but I want link A to auto load when the page loads. My knowledge of Javascript is fairly minimal so if someone could get it working in jsfiddle I would be very greatful.
I've tried googling everything but I just can't seem to make it work.
It is essential I use the HTML as the links I use parse tokens that use {} to identify them as tokens but it obviously gets confused with Javascript when they are sat together.
enter code here
thanks
Here is a working JS Fiddle, I added a function to load the first link :
function launch() {
var link = $('#A').attr("href");
$('#target').load(link);
}
launch();
http://jsfiddle.net/dhmLjme6/
You can add just one line to your javascript.
It will look like this (line 3):
$(document).ready(function(){
$('#target').load($('.trigger').attr("href"));
$('.trigger').click(function(e){
e.preventDefault();
var link = $(this).attr("href");
$('#target').load(link);
});
});

jQuery code is making conflict with others

I am using a jquery code(given below) but when I am using this code then there are some forms in the site those are not working anymore I have tried by using jQuery.noConflict(); and $.noConflict(); but neither is working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
</script>
So can you please help me to solve this problem. Now I have removed the code as it is making problem. Thanks.
I don't know if this would apply to your case, but to avoid conflict between multiple versions of jQuery this is what I would do.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
$(document).ready(function(){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
}(jQuery.noConflict(true)));
// jQuery has been removed and is undefined at this point
// so no chance of conflicting with other version of jQuery
</script>
There are a couple issue - one is the use of jQuery.noConflict() and then referencing $ for jQuery. You can either replace the references of $ with jQuery, or as Felix Kling mentioned, reference the argument passed by jQuery.
Unless you need a specific reason for jQuery.noConflict(), I would recommend removing the call from your jQuery file.
This is what your updated code might look like:
<script>
jQuery(document).ready(function($){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
</script>
Now, as you mentioned, when this script works, it breaks other pages with forms (ex: http://propertymanagementoh.com/pma/) - When I looked into it, I noticed a JS error being thrown by the sticky script.
My guess is you're using a CMS (looks like WordPress) that's generating IDs - so $('#wrapper-29') may exist on one page, but not on another page. If we revisit the code above and make the following changes:
<script>
jQuery(document).ready(function($){
var $topPart = $('.wrapper-first');
var $block = $('#block-30');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$topPart.addClass('sticky');
if ($block.length > 1) {
$block.hide();
}
} else {
$topPart.removeClass('sticky');
if ($block.length > 1) {
$block.show();
}
}
});
});
</script>
That should work on BOTH pages (I actually verified it works on both by using Charles Proxy and injecting that script). The main changes I made were:
1) Use the .wrapper-first class as a selector, since it's common between the pages.
2) Update the variable name to $topPart, a common naming convention to say "HEY! I'M A JQUERY OBJECT!"
3) Reference $('#block-30') as a $variable, but since it's NOT common between the two pages, we check the length property of the object, to see if we need to call show or hide -
This is NOT required (since jQuery will just silently fail...) I'd recommend using a unique class for this as well (especially if it will be on other pages).
Hopefully this helps!
If you want your header part fixed, there is a more simple and elegant way to do it:
$("header").css('position', 'fixed')
The position of the header will remain same regardless of browser's window position
If jQuery is not working simply edit the css file like below:
.header
{
position:fixed;
}
to change the header at scroll use scroll listener like below:
var b = $( "body" );
b.scroll(function(){
if ((b.scrollTop())>0){ // perform what you want to do
}
});

Categories