Trying to use a jQuery plugin and it is not working and this error
'$' is undefined
keeps popping up. I am very new to Javascript and jQuery so please be as simple as possible
<script type="text/javascript" src="wpscripts/jquery-1.4.1.min.js"></script>
<!--[if IE 6]>
<script src="thumb-images/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('#preview_inner div a');</script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function () {
var outer = $("#preview_outer");
var arrow = $("#arrow");
var thumbs = $("#thumbs span");
var preview_pos;
var preview_els = $("#preview_inner div");
var image_width = preview_els.eq(0).width();
thumbs.click(function () {
preview_pos = preview_els.eq(thumbs.index(this)).position();
outer.stop().animate({ 'scrollLeft': preview_pos.left }, 500);
arrow.stop().animate({ 'left': $(this).position().left }, 500);
});
arrow.css({ 'left': thumbs.eq(0).position().left }).show();
outer.animate({ 'scrollLeft': 0 }, 0);
$("#preview_inner").css('width', preview_els.length * image_width);
});
</script>
That usually means that you have to import jquery at the top like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Edit: Here is the link for the updated version. I believe that this page will always update to the latest version of jQuery whereas my above answer won't: HERE
Check your script source path. It's likely not loading in.
If it's at the root of a site use:
<script type="text/javascript" src="/wpscripts/jquery-1.4.1.min.js"></script>
I see you have also tagged ASP.NET, so If it's in a control or somewhere that can be different for each page load, then use the following to have .Net figure out the actual relative path.
<script type="text/javascript" src="<%= ResolveClientUrl("~/wpscripts/jquery-1.4.1.min.js") %>"></script>
I see you are using WordPress.
You often are not able to define links with a relative path.
try using the php function "get_theme_root();" to get the theme root and navigate from there
Related
I am new to jquery/web design and download a template to try and familiarize myself. I am having an issue with a certain script that is preventing my jQuery from loading. I have this in the header on my site:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery-mobilemenu.min.js"></script>
<script type="text/javascript" src="layout/scripts/responsiveslides.js-v1.53/responsiveslides.min.js"></script>
<script src="layout/scripts/custom.js"></script>
The culprit file is the <script type="text/javascript" src="layout/scripts/jquery-mobilemenu.min.js"></script>; everytime I disable this line jQuery works fine. I am really not sure what to identify in the file that would cause jQuery to not load. The contents of js:
jQuery.noConflict()(function ($) {
// Create the dropdown base
$("<form id='mobilemenu'><select /></form>").appendTo("#topnav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value": "",
"text": "Click For Menu"
}).appendTo("#topnav select");
//Populate dropdown with menu items
$("#topnav a").each(function () {
var el = $(this);
var prefix = '';
switch (el.parents().length) {
case (6):
prefix = '';
break;
case (8):
prefix = '- - - ';
break;
case (10):
prefix = '- - - - - ';
break;
case (12):
prefix = '- - - - - - - ';
break;
default:
prefix = '';
break;
}
$("<option />", {
"value": el.attr("href"),
"text": prefix + el.text()
}).appendTo("#topnav select");
$("#topnav select").change(function () {
window.location = $(this).find("option:selected").val();
});
});
});
Would anyone be able to point me in the right direction with correcting this file? I have tried to move the order that my scripts load and it doesn't matter the order, jQuery doesn't load when the mobilemenu script is included.
Within the script you mention as causing the problem you will see a call to noConflict() this method allows jQuery to be used with other libraries that also rely on the $ as an entry point by removing $ as an alias to jQuery.
Immediately following the noConflict() call you see a very specific function signature that is being passed to jQuery:
(function ($) {
//function code here
});
jQuery is going to call this function and when it does it will pass itself in as the $ parameter and within the scope of that function you now access jQuery using $ again.
So with the script the way it is you will need to use jQuery by name.
Have a look at the documentation on noConflict for more details.
There are also several other questions on SO with regards to noConflict, this one might help in particular.
I'm trying this with no success. For reference, the bootstrap slider is here : http://seiyria.github.io/bootstrap-slider/.
I'm not a javascript expert, either, so this might be very simple. The bootstrap-slider site has many examples of how to configure the sliders the way you want them. I'm going to have many sliders generated depending on how many objects are pulled from a JSON file or some other data storing method. It could be 2 or it could be 20.
I created a javascript function called createSlider that I've attempted to pass all of the information required at the bootstrap-slider site. I'm not getting any errors in my Chrome debugging area, but nothing is happening. All of the appropriate client-side sources are loading.
function createSlider (orgId) {
slidersList = document.getElementById('slidersList');
element = slidersList.createElement("div");
var sliderElement = element.createElement('input');
var sliderUnique= orgId.concat("Slider");
var sliderUniqueVal = orgId.concat("SliderVal");
sliderElement.setAttribute('id', charityId);
sliderElement.setAttribute('data-slider-id', sliderUnique);
sliderElement.setAttribute('type', 'text');
sliderElement.setAttribute('data-slider-min', '0');
sliderElement.setAttribute('data-slider-max', '100');
sliderElement.setAttribute('data-slider-step', '1');
sliderElement.setAttribute('data-slider-value', '50');
var span = element.createElement('span');
span.setAttribute('style', 'padding-left:5px;');
span.innerHTML =' ';
var innerSpan = span.createElement('span');
innerSpan.setAttribute('id', sliderUniqueVal);
innerSpan.innerHTML = '50';
sliderElement.slider({tooltip: 'hide'});
sliderElement.on("slide", function(slideEvt) {
innerSpan.innerHTML = text(slideEvt.value);
});
}
The slider() function is from the external site, and runs fine if I explicitly call it like the examples state to. Anyone know what's going wrong? Is there a better way to do this? Any ideas would be appreciated.
Note, in plain JavaScript, you can only use document.createElement and then append to another HTML element. You cannot call createElement directly against another HTML element.
I changed some of what you wrote from plain old JavaScript into JQuery, and now seems to work:
P.S. Didn't know where charityId came from, so just added it as another parameter into the function.
$(function() {
createSlider('o1','c1');
createSlider('o2','c2');
createSlider('o3','c3');
});
function createSlider (orgId, charityId) {
var slidersList = $('#slidersList');
var element = $("<div></div>").appendTo(slidersList);
var sliderElement = $("<input/>").appendTo(element);
var sliderUnique= orgId.concat("Slider");
var sliderUniqueVal = orgId.concat("SliderVal");
sliderElement.attr('id', charityId);
sliderElement.attr('data-slider-id', sliderUnique);
sliderElement.attr('type', 'text');
sliderElement.attr('data-slider-min', '0');
sliderElement.attr('data-slider-max', '100');
sliderElement.attr('data-slider-step', '1');
sliderElement.attr('data-slider-value', '50');
var span = $('<span></span>').appendTo(element);
span.attr('style', 'padding-left:5px;');
span.html(' ');
var innerSpan = $('<span></span>').appendTo(span);
innerSpan.attr('id', sliderUniqueVal);
innerSpan.html('50');
sliderElement.slider({tooltip: 'hide'});
sliderElement.on("slide", function(slideEvt) {
innerSpan.text(slideEvt.value);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css">
<script type='text/javascript' src="http://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>
<div id="slidersList"></div>
This weird bug is bugging me from half an hour. I am dynamically trying to apply a slider using only JavaScript. Any idea as to why this is occurring to me? I could find other questions on SO, but could not understand the solution. I am new to JS and highly appreciate if someone could explain me things in laymen terms. Here is my code.
MARKUP
<!DOCTYPE html>
<html>
<head>
<title>JS sample test page</title>
<link rel="stylesheet" type="text/css" href="jquery.bxslider.css">
</head>
<body>
<div class="og-fullimg"></div>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.bxslider.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
JAVASCRIPT
// code for thumbnail slider begins
(function() {
var ogImg = document.getElementsByClassName("og-fullimg");
alert(ogImg.length);
var bxSlider = document.createElement("ul"); //created ul
bxSlider.setAttribute("class", "bxslider"); // gave a class name bxslider.
for (i = 1; i < 4; i++) {
var itemsList = document.createElement("li");
var linkImages = document.createElement("img");
linkImages.src = "images/bid_" + i + ".jpg";
itemsList.appendChild(linkImages);
bxSlider.appendChild(itemsList);
}
ogImg[0].appendChild(bxSlider);
document.body.appendChild(ogImg); //append everything to the body.
//call the slider.
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
pager: false,
adaptiveHeight: true,
slideWidth: 550
});
});
}());
// code for thumbnail slider ends.
Thanks in advance.
Several issues here:
document.body.appendChild(ogImg); is just wrong. ogImg is a nodeList. You can't directly append a nodeList to the body AND it's already in the DOM (you just got it with document.getElementsByClassName("og-fullimg");.
You are using $(document).ready() to wait to call .bxSlider(), but NOT using it to call document.getElementsByClassName(). My guess would be your code is just running too soon. If that is the case, then just put all your code inside the .ready() handler.
You're using a very odd mix of plain javascript and jQuery when switching the plain javascript over to jQuery could make your code smaller and more consistent. If you have jQuery, you may as well use it for what it's good at (which is selectors and operations on collections - among other things).
This is what I'd suggest:
//create and initialize the slider.
$(document).ready(function() {
var bxSlider = $("<ul class='bxslider'></ul>"), img;
for (var i = 1; i < 4; i++) {
img = new Image();
img.src = "images/bid_" + i + ".jpg";
$("<li>").append(img).appendTo(bxSlider);
}
bxSlider.appendTo(".og-fullimg");
bxSlider.bxSlider({
auto: true,
pager: false,
adaptiveHeight: true,
slideWidth: 550
});
});
Hoping for some help with this, as I'm not exactly a js expert.
I have a countdown set up, adapted from Keith Wood's countdown. It's not counting down in any browser, though it seems to be functioning perfectly in every other regard.
Here she is on jfiddle.
And here's the code:
html:
<div id="form">
<div id="topbox">
<div class="countdown"></div>
<div id="until">
until move-in
</div>
</div>
</div>
js:
$(document).ready(function() {
//preload rollover image
var image = $('<img />').attr('src', '../../images/countdown_button1.png');
// jqueryUI calls for buttons
$(".back a").button({
icons: {primary: "ui-icon-triangle-1-w"}
});
// checklist button rollover
$('#bottombox a').hover(
function () {
$('#bottombox').addClass("button").removeClass("nobutton");
}, function () {
$('#bottombox').addClass("nobutton").removeClass("button");
}
);
// start instance of countdown
$('.countdown').countdown({until: new Date(2014, 9-1, 21, 10), layout:
'<ul class="countdown-tabs"><li><a>{dn} <span>{dl}</span></a></li>' +
'<li><a>{hn} <span>{hl}</span></a></li>' +
'<li><a>{mn} <span>{ml}</span></a></li>' +
'<li class="last-child"><a>{sn} <span>{sl}</span></a></li></ul>'});
$('.bg-switcher input').change(function () {
// set background photo to value of photo-switcher
window.location.hash = $(this).attr('id');
var photo = "url('/images/countdown_" + $(this).attr('id') + ".jpg')";
$('#canvas').css('background-image', photo);
});
});
function setPhoto() {
if(window.location.hash === "" || window.location.hash === "#one") {
$('#one').attr("checked", "checked");
$(".bg-switcher").buttonset();
} else {
// grab the value of the URL hash
var urlHash = window.location.hash.substring(1);
// set background photo to value in URL hash
var urlPhoto = "url('/images/countdown_" + urlHash + ".jpg')";
$('#canvas').css('background-image', urlPhoto);
$('#' + urlHash).attr("checked", "checked");
$(".bg-switcher").buttonset();
}
};
I'm also calling:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.js"></script>
<script type="text/javascript" src="/js/jquery.plugin.js"></script>
Any ideas on how to get it to count down? Appreciate it!
You don't look like calling the actual countdown script as indicated on the website you took the script from:
~2. Download and include the jQuery Countdown CSS and JavaScript in the head section of your page.
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
EDITED: Other than that, check the developer tool of your browser for errors and try to fix them all. They might not be related directly to this, but they may prevent the execution of the rest of the script.
I have this script that positions a div's background in proportion with the window size:
// JavaScript Document
var jQNC = jQuery.noConflict();
jQNC(document).ready( function () {
setPunchMargin()
jQNC(window).resize( function () {
setPunchMargin();
});
});
function setPunchMargin() {
var windowWidth = jQNC(window).width();
if (windowWidth <= 980) {
var margin = 0;
} else {
var margin = Math.round((windowWidth - 980) / 2);
}
jQNC('.punch').css('background-position', margin + 'px 320px');
}
It works like a charm on my local machine, but when uploading it to the server i get jQuery is undefined and on the jquery library i get unexpected token error.
Can you tell me what is wrong here?
Thank you,
Radu.
You have jQuery included two times;
<script language="javascript" src="http://punchid.com/test/wp-content/themes/punch/js/jquery-1.6.1-min.js" type="text/javascript"></script>
And here;
<script type='text/javascript' src='http://punchid.com/test/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
The latter is an older version, I'd suggest removing that one from the code - But double check everything still works correctly afterwards.
This looks like you are not uploading or referencing jQuery correctly. Try using an absolute reference to a Jquery CDN like: http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
(where 1.5.1 is the version of Jquery you'd need).