jQuery UI slider doesn't seem to render? - javascript

I may be missing something completely obvious here but when I call $("#zoom_slider").slider() I get no slider appear.
If you goto this url you can replicate the issue by click on any of the images in the main window, this will then load a larger image (currently of a watch). The slider should appear to the top right underneath where it says "Zoom" but it does not...
I include the jQuery UI from google via this call:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

I can't say for sure, but what I would try to do would be to put all of your script declarations in the <head></head> section of your HTML. Also, make sure you are using the most up to date versions of jQuery UI and jQuery.

Related

jQuery not working in Blogger

I am tryting to install a facebook slider tab in a friend's blog and I cannot make it work.
This is her blog: http://secretosdeprofe.blogspot.com.es/
And this is the tutorial: http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html
jQuery is installed in the blog (hence the hover Pin it button working on images) but when hovering the mouse over the facebook tab, the widget does not come out
Any ideas why is not working?
Thanks!
You are using the jQuery variable in a <script> (line 1090) element before you add <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> (line 1543), at the time when your earlier script block was parsed jQuery hadn't been defined. It's possible with a little extra work to queue something before jQuery is included (as shown here) but this approach will still require some code after jQuery is loaded in order to be referenced by jQuery's onReady listener.

Image Slider is not loading correctly

On my webpage there is supposed to be an image slider (carousel). My one problem is, it's not loading correctly. As you can see on my site there are 4 bullet points and 4 images next to them. Could you see if i am missing anything in terms of my files being incorrect? I will also add a link to the site where you can find my image slider, and i also added a link to my site to help on your end.
-Thanks!
My site: http://rootforsite.azurewebsites.net/
ImageSlider: http://bxslider.com/
Your javascript to init the bxSlider isn't working, it looks like you may have an errant "style" tag or something (it's trying to close a style block, the body, and the html all within your script), also make sure to include type="text/javascript" in your tag, and finally it's usually safest to do you jQuery onLoad functions like so:
jQuery(function($){
$(...).blahblah();
});
Then "$" will be scoped a bit better.
first of all you are using
<script src="myscripts.js"></script>
before loading jquery.
Please always use jquery scripts after loading jquery.min.js
also try to load the
<script src="js/jquery.bxslider.min.js"></script>
after bootstrap.js

js jquery slideshow

I have been using a jquery slideshow, but when I include a jquery newsticker (text that scrolls to the right) either the slideshow or the menu javascript popup (or both) do not work. For instance, if I put
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
right above the slideshow script, the slidshow works but something else does not. If I put the code inside the head tag, its the other way around. This is very unusual (and not logical), but Ive been troubled with this stuff for 6 hours. I am sure this is the only link to jquery, besides a prototype.js that works with the menu. However, I am simply editing the website so I do not know how everything works.
Does anyone have an idea about what may be the solution?
The other way I can deal with this is by using a javascript slideshow (but no jquery).
But I cant find an example of what I want, that works without jquery.
What I need is this - php gets all images from a folder, and data (links) from the database. Each image is actually a link, and all images are displayed inside a div.
<div id="slideshow">
<img src="src.jpg">
<img src="src.jpg">
<img src="src.jpg">
</div>
div id slideshow is what the javascript (again, not jquery) uses to know what to cycle (fade animation). Can someone please help me here?
Other libraries like prototype and mootools also share the same "$" alias so when combined in same page they conflict.
You will need to use jQuery.noConflict() to resolve.
In a script tag immediately after jQuery loads call:
jQuery.noConflict();
Now in order to continue using "$" in your code, wrap code in:
jQuery(function($){/* $ argument passes use of $ alias for jQuery into function*/
$(selector).hide() ; /* can use normal jQuery syntax inside this function*/
});
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Two jquery tools interfere with each other

I am new to jquery. I am working on a website that uses a scroll function I found to move from page to page its scripts looks like this:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
I also have a script that I want to use on a few pages that is a type of shadowbox for an image gallery. Its script looks like this:
<script type="text/javascript"src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
If I have both scripts on the page then only the shadowbox works and the scrolling does not. If I take the shadowbox script off then the scrolling does work.
If I put the shadowbox script above the scrolling script then only the scrolling works.
I am not sure if I need to include any more information to explain my problem. From what I can tell it is these scripts that are causing the problem and conflicting with each other.
With jQuerytools, you only need to include it and you get jQuery 1.6.4 for free (read quick start, and you can remove jquery from it if you want, look below the quick start). Therefore, by including jQuery 1.3.1 above jQuery tools, you are trying to load two different versions (1.3.1 and 1.6.4) of the same toolkit, thus conflicting with each other and causing you problems.
Remove the line including jquery 1.3.1 and try that.
I had a problem with jQuery plugins clashing somehow.
So after a little research I loaded both scripts into the head of the html document, between consecutive separated script tag zones. Then I used:
window.onload = function() {function01(); function02();};
to load each function in an orderly fashion and separately.
It worked for me this time.

JScrollPane not working on site

I am trying to implement the JScrollPane plugin on my website. Having taken a look through numerous FAQ/tutorials for this and double checked my scripts but cannot see where something is going wrong.
All of the scripts are being correctly referenced, I am calling the latest version of the JQuery library and I have the CSS being called before the scripts.
The page I am trying to implement this on is:
http://theindiecinema.com/walking-backwards/99 (click on the rate button on the right side of the tv)
To see the scrolling box that the JScrollPane should be being applied I have set up a duplicate page but with the JScrollPane stuff removed:
http://theindiecinema.com/testing-nopane
Please can I get some advice of how I can get this working.
Much Appreciated
Francis
Call jScrollPane on .commentslist when it's revealed (by clicking Rate), not on $(document)ready. jScrollPane is having trouble initializing while the target element's parent is hidden. You should only have to do this once, but it won't really even matter if you re-call it every time you show #comments.
Alternately, you could un-hide #comments in your external CSS, then on document-ready, first initialize jScrollPane on .commentslist and then hide #comments.

Categories