jquery show/hide not working on wordpress - javascript

I have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using
<?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button>
and #excerpt is filled using
<?php the_content(); ?> .
content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>

It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:
<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />

You are loading two files that uses $ as alias ..
The following works:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
jQuery('#content').show('slow');
jQuery('#excerpt').hide('fast');
});
});
</script>
But it would be better to look for the conflict issue and use jQuery.noConflict

Place this code at the end of Head tag.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>

Related

Opacity toggle doesnt work

so I have this code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
$(document).ready(function()
{
$(".regcontainer").hide();
$(".registrateimg").click(function(){
$(".regcontainer").animate({
height:"toggle",
opacity:"toggle"}
,"slow");});
}
);
</script>
The problem is that when I load the page the registration form is there and it must be hidden until click on the image , which class is registrateimg . I think my code is okay . I saw another topic similar to this but there the problem is that it was not used $(document).ready ... and here it is . I dont know where is my mistake .
Use two script tags, one for loading jQuery, one for your own code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".regcontainer").hide();
$(".registrateimg").click(function(){
$(".regcontainer").animate({
height:"toggle",
opacity:"toggle"}
,"slow");});
}
);
</script>
(also, you don't need the type="text/javascript" bit)
you can use another way. The following methods will hide your element
$(".regcontainer").css("display","none");
or
$(".regcontainer").css('opacity', '0');

Sharing jQuery code for header and footer includes

I have to dynamically include some navigation bars, format and misc css classes via jQuery.
For each webpage I have the following code :-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').load('navigationtheory.html');
});
$(document).ready(function(){
$('#footer').load('../../include/footer.html');
});
$(function(){ $("head").load("../../include/header.html") });
</script>
This is inside the <head> dom element.
I have to isolate the second script contents into a separate file. I did so by including the exact code in a file called jqueryincludes.js and then call it in this fashion
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </script>
<script src="jqueryincludes.js"> </script>
My contents of jquery includes is :-
$(document).ready(function(){
$('#navigation').load('navigationtheory.html');
});
$(document).ready(function(){
$('#footer').load('../../include/footer.html');
});
$(function(){ $("head").load("../../include/header.html") });
The page does not render correctly.
So in theory this should work. I am pretty certain its a syntax error, I could not find anything in jQuery documentation for external definitions.
I am new to Javascript and JQuery.

(JS) calling external .js function with <script> tag

i'm looking to call a function cookiefix() which is located inside main.js and source is linked at the bottom of my html.
echo '<body>';
if(!isset($_COOKIE['clicked'])) {
if(!isset($_COOKIE['count'])) {
echo '<script type="text/javascript">cookiefix();</script>';
echo '<script type="text/javascript">'
, 'document.cookie="count=1";'
, '</script>' ; } }
I was using body onload="" and it worked fine, I know this probably sounds like an uber newby question but i've been searched for the last hour or so and nothing is working.
<script src="js/main.js" type="text/javascript">cookiefix();</script>
I've also tried linking to the source document, didn't work either..
huge thanks to anyone who has a moment
EDIT: If this isn't possible, is there an alternative to 'onload' for anything but ? I was having header issues with cookies and calling it from onload
Try to attach an onload event listener to the <script> tag.
Such as:
<script src="js/main.js" type="text/javascript" onload="cookiefix();"></script>
cookiefix() will be fired once the script has been successfully loaded.
Separate them, order is important:
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript">cookiefix();</script>
Add to seperate JS file and include in page.
JS:
(function(){
window.onload = cookiefix;
})();

TypeError: jQuery(...).plugin-name is not a function

I'm having an issue on my Wordpress site where certain JQuery elements have ceased to function
The main one is relating to an audio player plugin which we use..
TypeError: jQuery(...).audio1_html5 is not a function
isProgressInitialized:false
When clicking on this in Firebug it comes up with:
<script>
jQuery(function() {
jQuery("#lbg_audio1_html5_25").audio1_html5({
skin:"whiteControllers",
initialVolume:1,
autoPlay:false,
loop:false,
playerPadding:5,
playerBg:"#000000",
bufferEmptyColor:"#929292",
bufferFullColor:"#454545",
seekbarColor:"#FFFFFF",
volumeOffColor:"#454545",
volumeOnColor:"#FFFFFF",
timerColor:"#FFFFFF",
songAuthorTitleColor:"#FFFFFF",
showRewindBut:true,
showPlayBut:true,
showPreviousBut:true,
showNextBut:true,
showPlaylistBut:true,
showVolumeBut:true,
showVolumeSliderBut:true,
showTimer:true,
showSeekBar:true,
showAuthor:true,
showTitle:true,
showPlaylist:true,
showPlaylistOnInit:true,
playlistTopPos:2,
playlistBgColor:"#000000",
playlistRecordBgOffColor:"#000000",
playlistRecordBgOnColor:"#333333",
playlistRecordBottomBorderOffColor:"#333333",
playlistRecordBottomBorderOnColor:"#FFFFFF",
playlistRecordTextOffColor:"#777777",
playlistRecordTextOnColor:"#FFFFFF",
numberOfThumbsPerScreen:5,
playlistPadding:4,
showPlaylistNumber:true,
isSliderInitialized:false,
isProgressInitialized:false
});
});
On our homepage there is all manner of errors in Firebug. It looks to me like JQuery has not loaded correctly, however I've tried placing JQuery links first in the header, first in the footer, using both Google and JQuery hosted, and even the latest version:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Any ideas?
Do the following to load jquery properly for wordpress, in your template header.php add this in head section if not there
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
After the wp_head function add your script
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
For more detailed explanation check http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

Works in jsfiddle but it wont work in dreamweaver

I have read that I have to put back in the event handler for it to work in dreamweaver from JS Fiddle, I have put it back in and I it still wont work? Here is the Demo: http://jsfiddle.net/EfLJJ/6/
Here is my JS Code:
$(document).ready(function() {
$(".list .fs1").bind({
mouseenter:function(){
$(".sublist").show();
},
mouseleave: function(){
$(".sublist").hide();
}
});
});
Add the jQuery library to your script.
Put this code inside the <head> tags of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your html code inside head put this line of code in order to include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Otherwise will not be able to use it.
In jsfiddle this works in a different way.
Also, if you're using jQuery version 1.7 and above, I'd recommend you switch from using ".bind()" to ".on()" for as ".on()" is the preferred method according to the jquery website. Check out the difference between ".bind()", ".on()" and ".live()" for more info here, What's the difference between `on` and `live` or `bind`?
Problem solved! To get it running in Dreamweaver you have to use the Javascript Script Tags
Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Your Code Here */
</script>

Categories

Resources