Develop Reference

How to Change Background Image Attribute in JS

I'm currently attempting to change an attribute of a JS variable from url("../images/video.png") (how it was declared in the CSS) to url("../images/pause.png") via this line of code:
fullscreenPlayPauseButton.style.backgroundImage = "url("../images/pause.png")";
The mouse over of the image is showing the image and both images are in the folder. However, once this line of code is executed, the image that originally showed up (the video.png) turns grey. The error I'm getting in console is "Uncaught SyntaxError: Unexpected token ." on the line where that code is. Thanks in advance for the help!

You are using two doublequotes in one line. You have to escape them or use single quotes:
fullscreenPlayPauseButton.style.backgroundImage = "url('../images/pause.png')";
or
fullscreenPlayPauseButton.style.backgroundImage = "url(\"../images/pause.png\")";
Both should work.

try to set the property like this:
fullscreenPlayPauseButton.style.backgroundImage = "url('../images/pause.png')";

Uncaught ReferenceError: hide is not defined error

I'm newbie on javascript. I'm using Twitter Bootstrap Modal.
console get me this error. why?
Uncaught ReferenceError: hide is not defined
JS
$('#te').modal(hide)

You may try this (Check the documentation):
$('#te').modal('hide');
Notice the quotes, you missed those, hide should be 'hide'.

You need to put quotes around hide.
Like this:
$('#te').modal('hide')
Reference: http://getbootstrap.com/javascript/#modals-usage

Loading errors with jQuery pickadate.js

I'm trying to use pickadate.js for a text input but I cannot get it to work on my server. I made a fiddle and it works fine, but when I copy that code over (I even put everything in the HTML box of the Fiddle so the code is 100% the same), I get the following errors
Uncaught SyntaxError: Unexpected identifier picker.js:487
Uncaught ReferenceError: Picker is not defined picker.date.js:23
Uncaught TypeError: Object [object Object] has no method 'pickadate'
Here is the code. There is absolutely no other code on the page than this.
<input type = "textbox" id="pickadate_input"></input>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "http://amsul.ca/pickadate.js/lib/picker.js"></script>
<script src = "http://amsul.ca/pickadate.js/lib/picker.date.js"></script>
<script>
$('#pickadate_input').pickadate()
</script>
Here is a working fiddle with the same code. Notice that there are no scripts included on the left. What would cause the different results?

Line 487 in picker.js has a weird chracter in it:
options = thingIsObject && $.isPlainObject( value ) ? value : options || {}
after the "?", take this out and it should work.

Have you tried hosting the files locally?
Is your site running https? If so, your site may not be loading insecure content since the picker resources start with http.
If you use Google Chrome, you can look at the Network tab in the Chrome Developer Tools to see if those JavaScript files are loading successfully.

nivo-lightbox not launching when image clicked

I believe that I have followed the instructions to setup this javascript plugin, but it does not seem to be working. (plugin: http://dev7studios.com/nivo-lightbox#/documentation)
I can see the links to the css, theme and javascript files correctly showing in my (I can see that it is correctly seeing these files too).
(i've commented out the jquery as this is already loaded for my wordpress theme.
The lightbox doesn't seem to be running though. Any tips on why this isn't picking up my images and showing them in the lightbox?
once I get this going I still need to figure out how to wrap my images with an attribute for "data-lightbox-gallery" so I can get the galleries working as well.
Image management: nextgen gallery
image layout: Justified Image Gallery
URL: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/

If you open the console on this page - you'll see that there are two javascript errors.
1.Uncaught TypeError: Property '$' of object [object Object] is not a function (index):71
I looked into the source code of your page and on line 71 you have this:
$(document).ready(function(){
$('a').nivoLightbox();
});
This means that jQuery is not working. You need to use a no-conflict wrapper.
2.Uncaught TypeError: Object [object Object] has no method 'orbit'
On this line you use .orbit() to make a home page slider... but not on the home page. You get this error because jQuery couldn't find a block with the id of #featured.
To avoid such mistakes you need to check if the block is on the page, possibly like so:
var home_slider = $('#featured');
if( home_slider [0] ) { //if jQuery object is not empty
home_slider.orbit({
//yor params here
})
}
If you get rid of these errors - you'll most likely see the nivo-lightbox :)

jQuery UI Slider giving: Uncaught Syntax error, unrecognized expression: #

I am trying to use the jQuery slider plugin but it keeps giving the JavaScript error:
Uncaught Syntax error, unrecognized expression: #
Here is the script:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
You can view a demo here:
[link-removed]
Any ideas?
Thanks.

I figured out the problem. The plugin you're using to convert the slectbox to the slider requires the selectbox to have an id attribute.
Simply add id="slider" to the selectbox and it should work.