jQuery Accordion nav issue - javascript

So finally, I was able to create a simple accordion nav but it's making me nuts that when a user goes from second nav to third one( Future Generations to Israel Overseas) it doesn't work properly. The animation happens twice, sometimes even three times based on how fast you mouse is moved. Moreover, when a nav is open and if you exit the div and come back the animation happens again.
A) Is there a way to fix the issue with going from second to third navigation
B) how do I write a conditional statement so that if a user is with in a section lets say Future Generation and goes outsize the div and comes back it doesn't repeat the close and opening thing again.
CODES at
http://jsfiddle.net/rexonms/Hj9my/1/
Note: I cannot use a different jQuery beside 1.2.6 and sorry for the messy HTML code, wanted to make sure it worked on the site, when it works here.

Fixed your accordion , had to lose some of you html as it was a bit confusing .
updated fiddle:
http://jsfiddle.net/Hj9my/3/
The code :
$(function() {
$(".menu").hover(function() {
$('.dropdown').removeClass('current').addClass('notcurrent');
$(this).find('.dropdown').removeClass('notcurrent').addClass('current');
$('.notcurrent').slideUp();
$('.current').slideDown();
}, function() {
});
});

Related

Scrolling to top inside an accordion

In my page I have 2 scrolls.
One is apparent in the page ( They are not loaded with ajax or something.)
The other one is inside an accordion.
I want these scroll to be always at the top. They have same class names.
With the snipets I can achieve my first goal, scrolling to top in apparent scroll
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
As well as with this one
var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
However, the scroll inside the accordion menu is not affected by this change.
If I open the accordion and run this snippets it scrolls to top.
So that either
I need to find a way to run this snippet not only to apperent but also all scrolls in the page or
when I click the accordion this javascript code needs to be executed.
I would like to solve this problem with the first solution.
I tried this and I couldn't succeed as well. If I put alert() rather than scrolltop inside this function, I got the alertbox.
$(".m-accordion__item").click(function() {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});
How can I achieve this goal?
This solved my problem. BTW this is bootstrap4. So that it may apply to any of bootstrap 4 templates.
$('.collapse').on('shown.bs.collapse', function(e) {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

breaking out of browser.actions().mouseMove in protractor

I have a need for using the actions.mouseMove() fuction to hover over a reactive dropdown element. After doing so and clicking the elemen, that reactive dropdown persists so I now need to find someway to move the mouse away from the hover box. I do this by including a return browser.actions().mouseDown().perform() after I click my link. Here is my full function
this.changeCurrentClient = function() {
var profile = $('[id="hdr-profile-wrapper"]');
var changeClient = element(by.buttonText('Change Client'));
browser.actions().mouseMove(profile).perform();
changeClient.click();
return browser.actions().mouseDown().perform();
};
This works fine, however the problem is that when I run this on the grid, it sometimes does not properly do the moveDown() function to break out of the hover menu. I assume this is because it runs a bit slower on the grid and the DOM takes a bit longer to load. Is there a better way to break out of this rather than refreshing or doing a hard wait?
I have tried implicitly waiting for another element on the page outside of the hover menu before doing the mouseDown(), however it seems like that first action.perform() pretty much isolates you to that hover menu, so no other elements outside of the hover menu can be found. Is a refresh really the only way to do this?

jQuery scrolling issues with scrollTop

I am having 2 issues with scrolling, i figured it would just be easier to ask them both in one post.
Before I ask, below is my jQuery code im having issues with.
$("a").click(function() {
if(this.hash){
$("#main").animate({
scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120
},2000,"easeOutExpo");
}
});
Situation: What I have going on in my page is basically i have a side menu with a couple lists. Each item in each list links to a anchor in my main div section, or my 'content' section. When a list item is clicked, the code above runs and it scrolls to one of the anchors.
Issue 1: When i click on a item in one of the lists, it scrolls down to a anchor which works just fine. But when that same item is clicked again, the main area scrolls back up to the top of the div. My thought to fix this was to check the current 'scrolled to' location of the div, and then not allow the code to run again if the location hadn't changed since the first click but i couldn't get that to work. Any suggestions on how to fix this issue?
Issue 2: Again as stated above, when i click on a item in a list it scrolls down to a anchor. What i then want to be able to to is click on a different list item and have it scroll to that position. The problem is when i click on a different list item, it scrolls to some random position in the main div, positions i haven't even anchored yet. Can anyone explain how I can make it so i can scroll from anchor to anchor?
Note: Please respond by having issue 1 or issue 2 above your explanation so i know which one your referring to. Thanks
EDIT: Thanks to Roko's help i got it working. For future viewers here is the fiddle of a working demo: http://jsfiddle.net/TsUcc/3/ and below is what the finally jquery code looks like
$("a").click(function( e ) {
e.preventDefault();
if(this.hash){
var target = '#'+ this.hash.substr(1);
var destination = $(target).offset().top - 10;
$('#main').stop().animate({
scrollTop : '+=' + destination
}, 1000);
}
});
LIVE DEMO
ISSUE 1:
you probably use something like: goto and you did not prevented the browser default behavior which is simply done by passing the event to the click handler like:
$("a").click(function( e ) {
e.preventDefault();
// .....
});
ISSUE 2
The HTMLelement position you're using is just a passive position of an element relative to it's positioned parent element.
which means that an element can have a position of ie: 30 even if it's at the bottom of your page.
To fix that use
offset().top
Also worth reading: https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
ISSUE 3
H3 elements are not supposed to have a name attribute.
Use an ID for that purpose.
Why?
if you have a nice web and you have some sexy stuff at the bottom of your page, I can send a link to my friend by referencing your web page and the ID in a link like:
example.com#bottomLady
and he'll get immediately my thoughts without the need to scroll your page all the way down.

$(window).scrollTop executes before expected?

I want the page to scroll to the top if its on a certain page of my app.
It needs to do this after the page has been shown.
I'm using the code:
$('.current-page, #'+desiredPage).toggleClass('current-page')
if(desiredPage === 'page-search-results'){
$(window).scrollTop(scrollPosition)
}else{
$(window).scrollTop(0)
}
however, the page scrolls to the top a split second before the class is actually toggled (the class has the css in it to show the page). Why is this? and how to make sure it only happens after?
This is only noticeable on mobile.
as per the comments/ answer i tried using:
$('.current-page, #'+desiredPage).toggleClass('current-page').promise().done(function(){
if(desiredPage === 'page-search-results'){
$(window).scrollTop(scrollPosition)
}else{
$(window).scrollTop(0)
}
});
but it still happens?
If you add a return false; at the end of the function (i.e. after the if/else clauses) it might solve the problem?
I've been wrestling with a similar problem, and found the hint at the bottom of this article:
http://chris-spittles.co.uk/jquery-smooth-page-scrolling/
It says there,
Returning false simply prevents the browser carrying out its default behaviour
For me, and in the example given on the page that means that the anchor does not jump down to the page before the animation, although, since your not using anchors, but toggling classes, I'm not quite sure what the "default behaviour" is in this case.
Hope it helps.

4 navlinks needs to close all content and open its own

I have an almost working script but I don't understand scripting too good to make it work on all links.
When you have a look at my fiddle, and you click on the first two links, all work fine.
When you click on the other two ones the other content fields don't close. I need to close all, open just one..
http://jsfiddle.net/fourroses666/8y7Sr/100/
This is a part of the script:
$('#activator-werkwijze').click(function(){
$('#overlay-werkwijze').fadeIn('fast',function(){
$('#box-werkwijze').animate({'bottom':'0px'},800);
});
$('#box-bureau').animate({'bottom':'-600px'},800,function()
{
$('#overlay-bureau').fadeOut('fast');
});
});
i actually don't need the overlay
This is the script which works, (the overlay is useless) jsfiddle.net/8y7Sr/126/

Categories