We Keep Coding

How to click a button in protractor that only becomes visible on hover

I am trying to click a button on my application that only becomes visible when you hover over the area of the button. I am wondering if there is a way to click on the button before it becomes visible or to hover and then click.
I have already tried to use a regular click() with a browser.wait, but since the button isn't visible or clickable until a hover is performed, it hasn't worked.
//Delete Created Topic Clean Up
myData.click(); //goes to topic home page
browser.wait(protractor.ExpectedConditions.urlContains('home'), 5000); //waits until url is on home page
browser.wait(protractor.ExpectedConditions.elementToBeClickable(deleteLastTopic), 5000); //waits for delete button to be clickable
// deleteLastTopic.click(); //clicks delete button
browser.wait(protractor.ExpectedConditions.elementToBeClickable(deleteConfirm), 5000); //wait for delete prompt to be clickable
deleteConfirm.click(); //clicks delete confirm
With the above code, I have no problem clicking the confirm delete, but the initial delete button only appears on hover, so it will always timeout on the wait for deleteLastTopic to be clickable.

You can try this approach, that I use:
deleteLastTopic.browser_.actions().mouseMove(deleteLastTopic).click().perform();

jQuery animations on back button

I have a page where multiple tabs (subpages) are accessed via jQuery show/hide functions. When one clicks on the logo all other tabs are hidden and the first one is shown.
I would like to attach the same show/hide flow as with $("#logo").click() to the back button. When someone would tap browser's back button the default action should be prevented and show/hide combination should be activated to display the first tab.
Does anyone has a solution?
window.onbeforeunload function does not work...
https://jsfiddle.net/hqkyxz3w/3/

This is usually done using URL's hash (that's everything after #) and window.history.pushState() method.
When the user clicks on a tab/logo:
Change location.hash to whatever you want.
Call window.history.pushState() to add state to browsers history. See https://developer.mozilla.org/en-US/docs/Web/API/History_API for more detailed explanation what parameters it requires.
Call your function that hides/shows appropriate tabs.
Then, when you press the browser's back button you want the tabs to change so you need to know when the URL's hash has changed.
See this answer how to listen to hash change events: On - window.location.hash - Change?
Check current hash and call the same function from bullet point 3 in the previous paragraph that hide/shows tabs.

Here is the half working version... I have used location.hash and history.pushState to change it on clicking the tab and then window.onpopstate to hide the page..
https://jsfiddle.net/hqkyxz3w/4/
The problem still exists because the onpopstate also fires when clicking the tab and not only when tapping back button.. Here is the example:
https://jsfiddle.net/hqkyxz3w/5/
$("#tab1").click(function(){
location.hash = 'something';
history.pushState({extraData: "something"}, '', 'new-hash');
$("#page1").show();
});
$("#logo").click(function(){
$("#page1").hide();
});
window.onpopstate = function() {
alert('How to exclude it on clicking page one?');
$("#page1").hide();
};

ExtJS react to user clicks on tab in tabpanel

(Yes, I know this is similar to How can I attach an react to user clicking on tabs in Ext.TabPanel, but it is a different question)
I have a tabpanel, the panels of which can be accessed either by clicking on a tab, or by clicking links in other tabs. One tab in the tabpanel has a menu for the user to select the desired subpanel. What I am trying to achieve is that clicking on the tab does not activate it - thus forcing the user to select an option from the menu. However, I still want the panel to activate when a link on another panel is clicked, or when a menu option is selected.
This is how I disable the panel:
'beforeactivate': function (component, eOpts) {
//to prevent loading tab content on tab/menu click
console.debug('tab disabler', arguments);
return false;
}
It works - just works too well, blocking everything. I have not been able to find a way to detect the difference between clicking the tab and, well, doing anything else at all.

Basically you already described the problem: you want to prevent activation of the tab only when the tab header is clicked, not altogether, so the beforeactivate event is not the way to go.
You can access the tab header (which is basically just a button in the tab bar) via the tab property on the panel and prevent the execution of its handler by stopping the propagation of the click event:
panel.tab.on({
'click': function(tab, e) {
e.stopEvent();
}
});
Note: the docs say you can also return false to achieve the same, however that does not seem to work.
This won't affect activation of the panel at all, but the interaction on the tab header.
Check out this fiddle for a working example.

Remove onclick effect after clicking on another img/button

I am making a small image area in my clients site, WHere I have some buttons under a big image. The big image changes onclick of bottom buttons. Now what I need is to make an effect of the selected button. It means Active effect. I can do this with a onclick function but it stays intact even if I click on other buttons.
So, Basically What I need is if you can tell me a way so that I can remove the onclick effect from image/button 1 when another image/button is clicked.
You can see the page here :
http://goo.gl/S1oVS

Use $('.class-selector').off('click'); to unbind click event on all elements with class 'class-selector' (or whatever selector you might have).
You can also do it in implementation of your click event as following:
$('.button').on('click', function() {
// Do something here...
// Disable on click for this particular button, instead of all buttons.
$(this).off('click');
});

Is there a callback function for internal page links

On - window.location.hash - Change?
The above question talks about hash change while this question talks about callback whenever internal link is clicked
I have many links in a page that points to another location in the same page using # links. Whenever, I click one such link, the page scrolls to that location. But I need to adjust the scroll manually after the automatic scroll happens. So would like to know if there is any callback function for such events?
Also the event should fire if the # tag was present in the initial page load (not only when it is clicked with a link) and when the same link is clicked again (hashchange event won't fire in this case)

You can register one by calling this function on the element:
addEventListener('click', function(){/*update your stuff here/*});
in jQuery, it's even easier
$('a').on('click', function(){/*update your stuff here/*}); will update after every link click.

There is no specifica callback that I know of but you could bind a function to the window.onscroll (https://developer.mozilla.org/en-US/docs/DOM/window.onscroll) event. That will detect when the window has been scrolled by the links being clicked and will let you make your adjustments. Then only problem is that it will also fire off when a user scrolls the page normally.
Other than that you would add a class to all your # links that will allow you to detect when one has been clicked. In jQuery:
$("a.HASH-LINK-CLASS").on("click", function (event) { ... });