We Keep Coding

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.

jQuery Accordion nav issue

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() {
});
});

Jquery sticky footer that adjusts with dynamic content

I'm currently using the plugin here http://codedumper.com/jquerystickyfooter to create a sticker footer.
Take a look http://client.astam.co.uk. It works as you would expect.
The only problem is that, for example, if an error message comes up and the user clicks to remove, or toggled content is available the footer will jump up from the bottom of the browser until the window is resized and then it will sort itself out.
Is there a way for the plugin to know to re-position itself?

Better use $.stickyFooterPos() as a callback for other layout changing functions
like changing the close function in your app.js to
function close(){
$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200,function(){$.stickyFooterPos()});
}
P.S: as others suggested, position:fixed is a far more better choice considering the fact that the number of IE6 users are declining... (see http://www.w3schools.com/browsers/browsers_explorer.asp and also http://www.w3schools.com/browsers/browsers_stats.asp )

Are you supporting IE6? If not, then you can simply position the footer as "position: fixed" instead of using the jQuery plugin. Apart from that the JQ plugin positions the div only on window load, resize and scroll. The following code added for the alert close button will work -
$('#alert .close').click(
function() {
$.stickyFooterPos();
}
);
Just add that to your js file and the positioning will work when the close button is clicked.
EDIT - The previous code may not work if you are using fadeOut() for the close button. Rather you can change the code for the close button to -
$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200, function(){$.stickyFooterPos()});
$.stickyFooterPos();

How do I get my prev/next links to send me to the top of the page?

I'm using a javascript pagination div that I found on dynamicdrive.com, so I've been cut and pasting - I'm no javascript junkie, far from it! Right now, I have a pagination bar at the top of the article and one at the bottom, but when I use the one at the bottom, it sends me to the bottom of the next page, instead of the top. So I click next and then have to scroll up - is there a way I can tweak this so that it sends me directly to the top of the next page?
This is the pagination version I'm using - it's Demo 3 on: http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm
Thanks in advance for any tips you can give me!

It doesn't look like there is a way to do this using the virtualpagination.js library. You should be able to wrap the library's main navigate function with your own funciton that will bring the scroll back to the top.
Try putting this in a javascript file, and including it after the virtualpaginate.js file:
virtualpaginate.prototype._navigate = virtualpaginate.prototype.navigate;
virtualpaginate.prototype.navigate = function (keyword) {
window.location = '#wrapperDivId';
this._navigate(keyword);
}
And then wrap your pagination content in a div like so:
<div id="wrapperDivId">
... your content here ...
</div>