goto Add a new Page > HTML tab. Then put the javascript and update the page.
that’s simple chinmoy I did that already but script is not working properly I fix the jquery conflict in the code but nothing changed.
see the script below
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery. noconflicts() ;
jQuery.(document).ready(function() {
//Get all the LI from the #tabMenu UL
jQuery.('#tabMenu > li').click(function(){
//perform the actions when it's not selected
if (!$(this).hasClass('selected')) {
//remove the selected class from all LI
jQuery.('#tabMenu > li').removeClass('selected');
//After cleared all the LI, reassign the class to the selected tab
$(this).addClass('selected');
//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');
//Look for the right DIV index based on the Navigation UL index
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
}
}).mouseover(function() {
//Add and remove class, Personally I dont think this is the right way to do it,
//if you have better ideas to toggle it, please comment
$(this).addClass('mouseover');
$(this).removeClass('mouseout');
}).mouseout(function() {
//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');
});
//Mouseover with animate Effect for Category menu list :)
$('.boxBody #category li').mouseover(function() {
//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {
//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});
//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});
});
</script>
<script src=”js/jquery-1.3.1.min.js” type=”text/javascript”></script>
remove this.
Because WP by default put the jquery.js in the header. Check your header as view source on FF.
I removed both scripts and did what you said.
but still it’s not working, is there any other option…
keep one. Don’t delete jquery. If you delete jquery lib, your javascript would not work. Keep one not both.
You can put the javascript in header.php file not in to the post.
<script type="text/javascript">
jQuery. noconflicts() ;
jQuery.(document).ready(function() {
//Get all the LI from the #tabMenu UL
jQuery.('#tabMenu > li').click(function(){
//perform the actions when it's not selected
if (!$(this).hasClass('selected')) {
//remove the selected class from all LI
jQuery.('#tabMenu > li').removeClass('selected');
//After cleared all the LI, reassign the class to the selected tab
$(this).addClass('selected');
//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');
//Look for the right DIV index based on the Navigation UL index
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
}
}).mouseover(function() {
//Add and remove class, Personally I dont think this is the right way to do it,
//if you have better ideas to toggle it, please comment
$(this).addClass('mouseover');
$(this).removeClass('mouseout');
}).mouseout(function() {
//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');
});
//Mouseover with animate Effect for Category menu list :)
$('.boxBody #category li').mouseover(function() {
//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {
//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});
//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});
});
</script>
Put it inside <head></head> tag
yes but it repeats to the all the pages. What I want is to add this in to specific page…
Yes it is possible. Put the code at HTML tab mode in WP editor. But sometime WP editor change the tags in your own format. Try this above javascript once.
no luck bro I tried all the stuffs but still I think my code cannot identify the path of main jquery (wp-includes\js\jquery) I give this one too but not working
hi is anybody there who knows how to resolve the problem I have tried this in manyways even I put the right path the effects not working I did as ‘chinmoy’ said but still didn’t get solved this things
Here I will tell you how did I do this by steps,
1.) I add a new Page and add the cording into HTML tab in this case I tried this in many ways
a.) I removed the jquery-1.3.1.min.js in my cording and let the main jquery in header.php
b.) I keep the jquery-1.3.1.min.js in my cording and tried adding Conflict
c.) I put the jquery-1.3.1.min.js in to the themes folder ‘js’ (wp-content\themes\template\js)
d.) I put the jquery-1.3.1.min.js in to the wp-includes folder (wp-includes\js\jquery)
Also I need to appear the code in few pages not the all the pages so give me a solution somebody who knows, thanks š
For conditional script inclusion try the approach shown here.
whypad.com/posts/wordpress-add-scripts-to-the-pages-you-want/749/
