I have my template file for home page, Home-template.php, and in it I have a sliding menu html.
This is my script for sliding menu:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("fast");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("fast");
});
$(".toggle a").click(function () {
$(".toggle a").toggle();
});
e.preventDefault();
});
and both jquery and this script are loaded on the page but the slide effect doesnt work, its only poping up and down without effect.
Any help?
here is html code:
<div id="panel">
<nav id="main-menu">
<ul>
<li>Home</li>
<li>About me</li>
</ul>
</nav>
</div>
<div class="toggle"><a id="close" style="display: none;position: absolute;right:5px;top:5px;" class="close" href="#"></a></div>
<div class="toggle" style="position: absolute;right:10px;top:10px;"><a id="open" class="open" href="#"></a></div>
here is a link of a page:
http://pavlovic.com/about-me/
Well for one the e is not defined and secondly I'm not sure how you are including your js so
you should read this: http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/
try the following code which works for me
$(this).effect('slide', { direction: 'down'}, 500);
for the slide effect to work in wordpress along with jquery file the jquery-effects-core and jquery-effects-slide has to be also loaded.
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-slide');
this code also works:
$('#test').effect( "slide", "right" );
Related
i'm try to add toggle menu on wordpress in mobile but the script is not working
but on normal website is working perfectly and when i try to add same script to wordpress template is not working
this is the script:
<!--responsive toggle menu -->
<div class="menu-toggle"><i class="fa fa-bars fa-2x"></i></div>
<!-- Script for show menu -->
<script type="text/javascript">
(document).ready(function() {
(".menu-toggle").toggle(function() {
}, function() {
}).click(function(){
("#togglenav").slideToggle("slow");
});
});
</script>
<nav id="togglenav">
<ul>
<li>Home</li>
<li>Concerts</li>
<li>Sports</li>
<li>Arts & Theater</li>
</ul>
</nav>
NOTE: console on chrome say: Uncaught TypeError: document.ready is not a function
this code is working fine.
jQuery(document).ready(function() {
jQuery(".menu-toggle").toggle(function() {
}, function() {
}).click(function(){
jQuery("#togglenav").slideToggle("slow");
});
});
I have the following code for my menu, the trouble is I want it to hide/close as soon as I click on one of the options, instead of closing at the X button:
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
Try this:
$( ".icon" ).bind( "click", function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
This will bind the click function to the class. Also a side-note watch where you place your scripts. From personal experience I've had best results putting all js code (inline and external) right before the tag (even when using document.ready()) but this is probably just personal preference.
DOCUMENTATION FOR BIND
I have sticky problem with jquery tabs. Below link to my website:
http://www.rask.pl/test/majatruck/wynajem-krotkoterminowy.html
Structure of divs:
<div class="cnt">
<div class="left">
<ul class="list">
<li><span class="title"><a class="tab_link tab_link_wybrany" rel="#rnt1" href="#">First</a></span></li>
<li><span class="title"><a class="tab_link" rel="#rnt2" href="#">Second</a></span></li>
<li><span class="title"><a class="tab_link" rel="#rnt3" href="#">Third</a></span></li>
</ul>
</div>
<div class="super">
<div id="rnt1" class="tab_text tab_wybrany">First</div>
<div id="rnt2" class="tab_text">Second</div>
<div id="rnt3" class="tab_text">Third</div>
</div>
</div>
Tabs script:
$(document).ready(function(){
$(".tab_wybrany").fadeIn();
$(".tab_link").live("click", function(event){
event.preventDefault();
$(".tab_link_wybrany").removeClass("tab_link_wybrany");
$(this).addClass("tab_link_wybrany");
var container_id = $(this).attr("rel");
$(".tab_wybrany").animate({
opacity : "toggle",
},function(){
$(this).removeClass("tab_wybrany");
$(container_id).addClass("tab_wybrany");
$(".tab_wybrany").animate({
opacity : "toggle",
});
});
});
});
When I click on tab - divs disapear? Offline is everything OK... I don't know where is my mistake... Please help me! :)
May i suggest instead of using animate opacity that you use fadeIn and fadeOut. That may solve your problem.
So your script would look like this:
$(document).ready(function(){
$(".tab_wybrany").fadeIn();
$(".tab_link").live("click", function(event){
event.preventDefault();
$(".tab_link_wybrany").removeClass("tab_link_wybrany");
$(this).addClass("tab_link_wybrany");
var container_id = $(this).attr("rel");
$(".tab_wybrany").fadeOut(750, function(){
$(this).removeClass("tab_wybrany");
$(container_id).addClass("tab_wybrany");
$(".tab_wybrany").fadeIn(750);
});
});
});
I have set up a jquery hover show and hide function click here for site however it doesn't work the way i want it to. When you hover over the link "store" it reveals the hidden div, which is a submenu, once the mouse cursor has been moved from the link "store" the hidden div slides.
I want the submenu to stay activate unless one the links in the submenu have been click on or the mouse cursor is have been moved outside of the submenu area.
below is a snippet of my code...
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').hover(function(){
$(".slidingDiv").slideToggle();
});
$('.slidingDiv').mouseout(function(){
$(".slidingDiv").slideUp();
});
});
<div id="menu_store" class="slidingDiv transparent">
<div class="menu">
<h3>clothing</h3>
<ul class="navigation">
<li>sweats / knitwear</li>
<li>shirts</li>
<li>denim</li>
<li>outwear</li>
<li>footwear</li>
</ul>
</div>
<div class="menu">
<h3>lifestyle</h3>
<ul class="navigation">
<li>books</li>
<li>art</li>
<li>objects</li>
</ul>
<div id="menu">
<ul class="cl">
<li><a class="show_hide" href="#">store</a></li>
<li>daily</li>
<li>featured</li>
<li>contact</li>
</ul>
Does anyone have a solution for this...?
I figured it out. http://jsfiddle.net/vtFfv/
Relevant documentation: http://api.jquery.com/mouseleave/
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').mouseenter(function () {
$(".slidingDiv").slideDown();
$(".slidingDiv").mouseleave(function () {
$(".slidingDiv").slideUp();
});
$('.slidingDiv a').each(function () {
$(this).click(function () {
$(".slidingDiv").slideUp();
});
});
});
});
When you hide slidingDiv, mouse events aren't registered. So the solution is to attach a mouseleave event to it once you decide to show it (that is, on mouseenter). And then registering clicking on the links is easy.
I don't want to use the toggle, what would I need to use to get the following nav structure to stay put when main link is hovered over?
Current js:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
Sample page
(Notice that when the submenu pops up, I cannot click on the links, as the submenu fades away)
If you aren't fussed about animation, and you wish to use JQuery you can toggle the CSS visibility rule on the class.
$(document).ready(function()
// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");
{
$(".downservices").hover(function()
{
$(".servicesdropped").css("visibility", "display");
},
function()
{
$(".servicesdropped").css("visibility", "hidden");
});
});
Using visiblity means the element will still consume the space it does in the DOM but does not display making sure the structure and positioning of other elements surrounding it are left in tact. The downside is that animations such as fadeIn() and fadeOut() will not work.
Your html markup architecture of menu should like this:
<ul>
<li class="downservices">GUYS
<div class="servicesdropped" style="display: none;">
<ul class="middle">
<h3>Shirts & Tanks:</h3>
<li>MuSkull</li>
<li>Bamboo Athletic Tank</li>
<li>Thin Strap Tank</li>
</ul>
<ul class="right">
<h3>Other Stuff:</h3>
<li>Shorties</li>
<li>Hoodies</li>
<li>Socks</li>
<li>Hats</li>
</ul>
</div>
</li>
<li>products</li>
<li>portfolio</li>
<li>contact</li>
</ul>
And in the script use this:
$(document).ready(function(){
$("li.downservices").hover(function()
{
$(this).find(".servicesdropped").slideDown("fast");
},
function()
{
$(this).find(".servicesdropped").slideUp("fast");
});
});
use like this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>
for hover out the menu disappear use this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>