jQuery not working in Blogger - javascript

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.

Related

Slidebars Triggers Not Working (aka Slidebar)

This is the first time I've tried implementing this plugin. I'm excited to use it because I think it looks great. It's nice and smooth even on mobile devices, so thank you to the developer! I'm simply not able to get the toggle/trigger to work.
I have implemented Slidebars on this site in development but the triggers (.sb-open-left, .sb-toggle-left, etc) are not triggering. I know the plugin is being called by the page because the code blocks with the classes .sb-left and .sb-right are hidden and adding the class .sb-active shows them. The site and code can be seen at development.infowest.com/passion
As previously mentioned as comment only - the slidebars weren't working because they were initialized wrapped in the inline script tag
<script type="text/javasctipt">
instead of
<script type="text/javascript">

Activating wordpress plugins breaks jquery effects

I'm currently working on converting an HTML5 template called Rekreato into a wordpress theme. I've managed to set up a bare-bones theme, but whenever I activate any plugins with jQuery scripts, a few of my jQuery effects are broken. Specifically, in Firefox debugger I get --
TypeError: jQuery.easing[jQuery.easing.def] is not a function #
jquery.easing.1.3.js:46
Here is the page in question. You can see about halfway down there is an image slider that is not functional. I have left one plugin active, called WP eMember.
I've tried a number of things like configuring my theme as a child theme, wrapping jquery.easing.1.3 in a document ready function, and moving the script call around in the code, but to no avail. I'm not even sure that the easing script is at fault. The answer is probably staring me in the face, but I can't seem to figure it out. Many thanks in advance.
EDIT: Excellent suggestion from markratledge. I put the scripts in functions.php with wp_register_script() and wp_enqueue_script(). At first I was very confused that even more things were broken. Reading further, I saw that since Wordpress uses a noConflict wrapper around its built-in jQuery library, the $ shortcut is unavailable. So, I went through all of my scripts that were showing errors in the inspector and swapped '$' with 'jQuery'. Voila! Everything jives. Thanks again!
Check out Function Reference/wp enqueue script « WordPress Codex on how to load JS in WordPress themes and avoid jQuery errors, with examples shown.
You're loading a bunch of jQuery by direct link, but then wp_head comes in and loads more jQuery for the plugins, and collisions occur. I.e., the two different main jQuery libraries; check in the Firefox console to get a list of all the JS that is loading.
From that doc:
wp_enqueue_script links a script file to the generated page at the right time according
to the script dependencies, if the script has not been already
included and if all the dependencies have been registered. You could
either link a script with a handle previously registered using the
wp_register_script() function, or provide this function with all the
parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress
generated page.

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.

jQuery simple dialog not working

I'm trying to figure out why my jQuery dialog is not working properly on this page:
http://bit.ly/nOKwYz
This is the code snippet:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#dialog22").dialog();
});
</script>
and I also have:
<div id="dialog22">test</div>
For some reason it does not load the dialog, any ideas?
It's gotta be the library order. See this fiddle. Your sample works just fine if you have the library order right:
http://jsfiddle.net/mikethomsen/a25gw/
The way it works is you need to load jQuery.js, jQuery UI's JS and then the jQuery UI CSS, then throw in your custom code.
Edit
I replaced my fiddle's libraries with your sample and Firefox says jQuery('#dialog').dialog is not a function. That means you are missing the dialog code from the build of jQuery UI you made. You need to go back to the jQuery UI site and build a new distribution of jQuery UI that includes the other pieces you need.
To show the dialogo you should first hide it i think:
<div id="dialog22" style="display:none;">test</div>
and then show it with a button for example
EDIT - look at the fiddle here : http://jsfiddle.net/LCPJe/
Where do you load jQuery (and jQuery UI) on that page? You need to reference those libraries in the page (specifically before any code that uses them). Unless I'm just not seeing the reference, you do have quite a few script tags in the header.
You don't have to host a copy, though. You can reference a CDN link.

Categories