Alright, this is a pretty simple.. maybe even stupid question. But I have been trying for a pretty long time to get this working properly and nothing has worked. I have a Menu that toggles with a plus / minus sign... this menu only works on the homepage though and nothing else. Here is the code:
$(document).ready(function(){
$('.gh-gallink').toggle(
function() {
$('.gallery_container').animate({
marginTop: "x",
}, 1000);
$('.jquerycssmenu ul li ul').animate({
marginTop: "x",
}, 100);
$('.jquerycssmenu ul li ul li a').animate({
height: "x",
}, 100);
$('#main').animate({
marginTop: "x",
}, 1000);
$(this).text('+');
}, function() {
$('.gallery_container').animate({
marginTop: "x",
}, 1000);
$('.jquerycssmenu ul li ul').animate({
marginTop: "x",
}, 100);
$('.jquerycssmenu ul li ul li a').animate({
height: "x",
}, 100);
$('#main').animate({
marginTop: "x",
}, 1000);
$(this).text('-');
});
});
The menu works fine, but again.. only on the mainpage. And of course I don't have the x's in my actual code. But anways, the code is in the header.php file of my site and again, it only works on the homepage of my site. I tried changing the "$(document)" to "jQuery(Document)" and I also deactivated all my plugins too, but the menu still only works on the home page.
And also, here is the html that displays the toggle button:
<div class="gallerylink">
<a href="#" class="gh-gallink">
-
</a>
</div>
Any help would be appreciated! :)
Edit:
I did what Chipmunk said and one by one got rid of each script in my header. I found out that when I removed this script (listed below) that scrolls up the page to an achor, everything works fine. However, I would still like to have both scripts running at the same time. Here is the anchor scrolling script.
// When the Document Object Model is ready
jQuery(document).ready(function(){
// 'catTopPosition' is the amount of pixels #invisiblebox
// is from the top of the document
var catTopPosition = jQuery('#invisiblebox').offset().top;
// When #scroll is clicked
jQuery('#scroll, #scrolls').click(function(){
// Scroll down to 'catTopPosition'
jQuery('html, body').animate({scrollTop:catTopPosition}, 'slow');
// Stop the link from acting like a normal anchor link
return false;
});
});
So when you click on #scrolls, or #scroll.. it scrolls back up to the anchr "#invisiblebox". I don't know why this doesn't work with my toggle menu. If anyone has a solution to get both scripts running, please let me know.
Please read
http://www.ideazone.ca/2011/03/jquery-wordpress-how-to-avoid-common-conflicts/ and
JQuery conflict with an other JQuery library
Related
Here is my code http://jsfiddle.net/sh8tmba6/1/
There is a navigation bar with years in the ul>li list. Each li has <a> tag with attribute data-menuanchor. When a user clicks on these links based on data-menuanchor the respective div must scroll to the top.
Note: Here the navigation bar must be fixed even when scrolled up or down
Here is the jquery code which I tried, but it is not working as per the requirement
('.timeline-nav li a').on('click', function (e) {
var yearID = '#' + $(this).data('menuanchor') ;
$('.historyWrapper').animate({
scrollTop: $(yearID).offset().top - $(yearID).parent().offset().top + $(yearID).parent().scrollTop()
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
}
});
});
Can anyone please help. Thanks in advance
have a side menu on the left side of the website. I want the submenu to slide open to the right with a neat animation. I have made the script:
jQuery(document).ready(function($){
$(".main-navigation ul li").mouseenter(function() {
if ($(this).children().length > 0) {
$(this).children("ul").css ({
"display" : "block",
}).animate({
left: '250px',
opacity: 1,
}, 500)
}})
.mouseleave(function() {
setTimeout(function() {
$(this).children("ul").css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000);
});
});
Sliding works just fine. The menu shows up nicely.
There's two problems though. One is, that the menu z-index doesn't work. The submenu's ul has a negative index set in css but when it slides it goes OVER the main ul. I want it to go UNDER the menu so it doesn't show.
Second one is, the SetTimeout function doesn't seem to work. Once the mouse leaves the area the ul just stays there forever. Without the Settimeout function it disappears just nicely (instantly though, I want it to stay there awhile).
I have made a jsfiddle example
http://jsfiddle.net/r8vx07ae/4/
Problem with z-index:
An element can not appear behind its parent. Since the submenu exists as a child element of the menu, it will not be able to appear behind the menu, z-index is really only applicable to two elements which share the same parent.
Problem with setTimeout:
The issue is most likely being caused because the this variable is out of scope by the time that the timeout occurs. This has an easy fix: create a global variable (say subMenu) and set subMenu = this before the timeout occurs and replace this with subMenu in your timeout function. You may use additional variables or a dictionary/array if you have multiple submenus to prevent the variable from being overwritten if two submenus get opened one right after the other
It is because $(this) is losing its scope on setTimeout function. To overcome this issue, you can assign your $(this) scope into a variable like $this and then use it in your setTimeout function. Here is the code changes:
.mouseleave(function() {
var $this=$(this);
setTimeout(function() {
$this.children("ul").css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000);
});
And here is your updated fiddle:
http://jsfiddle.net/r8vx07ae/5/
The problem with the setTimeout is the scope of this
When it runs, it is the window, not the menu.
jQuery(document).ready(function($){
$(".main-navigation ul li").mouseenter(function() {
/* see if the timer has run yet, if it has not, cancel it */
var hideTimer = $(this).data("timer");
if (hideTimer) window.clearTimeout(hideTimer);
if ($(this).children().length > 0) {
$(this).children("ul").css ({
"display" : "block",
}).stop().animate({
left: '250px',
opacity: 1,
}, 500)
}})
.mouseleave(function() {
/* store the children here to get rid of the "this" scope issue */
var ul = $(this).children("ul");
/* Store a reference to the timer so we can cancel it if they mouseover again */
$(this).data("timer", setTimeout(function() {
ul.css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000));
});
});
This will not fix the z-index issue.
I guess this is from the usage of "this" inside the callback of setTimeout sadly i do not have any computer to test out...
See section "the this problem": https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout#The_%27this%27_problem
To solve it, save a reference of this before the call of setTimeout, and use the saved reference inside your callback
So, I'm sure there is a simple answer to this, but after 2 days of research I cannot find a solution.
The Story:
I have a dynamic page. When you get to one section and click on one of the 6 options it pulls up some info (name, place, etc.). I have a jQuery function that makes that info hide about half way after a few seconds. When you hover over that section with the mouse it also will animate up and back down as the mouse leaves it.
The Problem:
How do I make the whole function run again if another of those 6 option is clicked? Each time an option is selected the class with that info comes up, but after this function runs once (the delay part and animate down part) it just stays minimized unless you hover over it. I want it to appear every time and then run through the function. I have tried a number of things, and I'm sure there is a simple solution, just not sure what it is.
Here is a link to my codepen with a sample: http://codepen.io/jsegarra/pen/GxByr
I have also tried to wrap that all in a click function, for clicking on one of those 6 options and thought that would do the trick, but still the same thing:
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').delay(5000).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Just reset the div css before re-running the function
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').css('height', '100px').delay(500).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Here is the html I used with that javascript
<div class="title">title</div>
<div class="bottomTab">This is going to move from just being about 50 pixels high to about 100 pixels high after i add in some mouseenter and mouse out events</div>
I used the same CSS of your code pen, and the result was a full reclickable option
I don't see the problem. Your code seems to works fine. You've just typed an error while transfering to CodePen. Replace $('this').hover( with $('.bottomTab').hover(.
I have a series of news items (alerts and announcements, to be precise), each individually wrapped inside their own <div> tags, set to hide everything but their headline on page load. On clicking any headline (h2) that individual item's details reveal (slideDown), and any other open items collapse (slideUp). Thus only one news item is viewable at a time. All good.
I also have my code set to scrollTop to the top of the recently clicked div when the window width is tablet sized or less (767px). This only works partially.
I know what the problem is, but not the solution.
The problem is that when I click a different news item, it's scrollTop coordinates are off by the height of the div that's being auto-closed. I've banged my head enough, and the solution's probably simple, but I'm not coming up with it.
The page is live here: http://northqueensviewhomes.com/announcement-test
Remember to make your page width less than 767px and refresh (you'll see the layout respond when you're small enough, then click around a few of the top alert items and you'll eventually see one of them scroll way too high, or even down instead of up to the top of the $this div.
Here's my jQuery:
if ($('#bboards').length) {
/* Page Load Cleanup */
$('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
$('.moreText').removeClass('hidden');
function hideAll() {
$('.announcement_item h2, .alert_item h2').removeClass('toggler').children('.moreText').fadeIn('fast').end().next('div').slideUp('fast');
}
$('.announcement_item h2,.alert_item h2').hover(function() {
$(this).css({
'cursor': 'pointer',
'color': '#BC2E34',
});
}, function() {
$(this).css({
'cursor': 'default',
'color': 'black',
});
}).click(function() {
if ($('.toggler').length) {
var previouslySelected = $('.toggler').parent('div').height();
alert(previouslySelected);
} else {
var previouslySelected = 0;
// alert(previouslySelected);
}
if ($(this).hasClass('toggler')) {
hideAll();
$('.toggler').removeClass('toggler');
$(this).children('.moreText').fadeIn('fast'); //this is the "click to read more… text on the link"
if ($(window).width() <= 767 {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}
} else {
hideAll();
$(this).addClass('toggler').next('div').slideDown('fast', 'easeInOutQuad');
$(this).children('.moreText').hide(); //this is the "click to read more… text on the link"
if ($(window).width() <= 767) {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}
}
});
} // <--- End if $('#bboards').length
and you can see the HTML live on the page. I've added a bunch of dummy entries just to create page height.
I'm pretty sure that I just need to delay the scrollTop until the slideUp is complete, but, again, not sure how.
There are two relatively easy solutions you could try.
The first is, as you said, to delay the scrollTop animation:
setTimeout(function() {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}, 200);
Or, you can record the initial position of every announcement and alert after you hide their contents when the page loads. Change your section labeled /* Page Load Cleanup */ to the following:
/* Page Load Cleanup */
$('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
$('.moreText').removeClass('hidden');
$('.announcement_item, .alert_item').each(function() {
$(this).data("top", $(this).offset().top);
});
This gives every announcement a data entry that stores its initial position. Then, whenever you need to animate the scrollTop, do the following:
$('html, body').animate({
scrollTop: ($(this).parent('div.well').data().top - 13)
}, 2222, 'easeInOutExpo');
Note that this will only work well if the contents of the announcements and alerts do not change.
I hope this helps!
I'm using a jquery navigation menu that has the line follow when you hover over an element and highlights it. It works now, but I'm having a bunch of quirky issues that I can't figure out for the life of me.
I'll show you my code first and then explain the issues I'm having.
$(document).ready(function()
{
$('#nav2 li a').hover(function()
{
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav2 li.ybg').stop().animate({left:offset.left+12+"px",width:thiswidth+"px"},400,function(){
$(this).animate({height:"28px"},150);
});
},
function()
{
$('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
var offset=$(this).offset();
$(this).animate({left:offset.left+40+"px",width:"55px"},600,'easeOutBounce');
});
});
});
Also, here is the DIV for the ybg if it helps:
ul.nav li.ybg { background-color:#5222B4; position:absolute; z-index:50; width:55px; height:4px; margin-top:6px; }
The main problem is that when you move your mouse off of the menu it stops where it is and shrinks instead of going back to the left most item (Home).
There are other quirks but I'm hoping that if I can figure this out I'll be able to work out the rest.
Hopefully that makes sense (the URL is www.buildagokart.com if you want to see what I'm talking about - it's just a random URL I'm using to test).
...
$(this).animate({ left: "0px", width: "55px" }, 600, 'easeOutBounce');
...