during localhost developing I inspenct element and add some css rule, when it's ok I write changes in css file, after this I reload page to see if all is in the exact position, but tree position of elements are lost during refresh! Every time I inspect element to find my last position in the code again.
In the past other chrome version save the tree structure and after page reload it returns to last element clicked by me in inspect element section. How can do it?
I agree sometimes it's annoying to move down the tree at every refresh. One workaround is to use ctrl + shift + c shortcut and target the element with your mouse.
On top of that, I've made a AutoHotkey script (windows) to trigger this shortcut when I double right-click on my mouse. This way, I just target the element with my mouse and double right-click it to open the DOM tree where I want. It's very effective unless there's some z-index properties that prevents you to go straight to a nested element.
This plugin does the job:
#IfWinActive ahk_class Chrome_WidgetWin_1 ; Chrome browser
$RButton::
SetTimer , Fast, 200
Fast_Count+=1
return
Fast:
if (Fast_Count>=2){
Send, ^+c
Fast_Count = 0
} else if (Fast_Count=1) {
MouseClick, right
Fast_Count = 0
} else {
Fast_Count = 0
}
return
Use the little arrow in a square (red square on picture below) and click on the element you need. Navigating to it should be trivial that way.
Related
I'm runing a nightwatch test on Loadero and its failing.
I'm trying to test if an element is available, and if it is, to click on it.
I believe that below, I'm saying only try click the button if it exists.
client.elements("css selector", "div[aria-describedby='dialogWindowTooSmall button.ui-button']", function (result) {
if (result.value.length) {
client.click('div[aria-describedby="dialogWindowTooSmall"] button.ui-button)');
}
})
But I'm getting an error.
The first line seems to execute fine. I get two ELEMENT ids back
[ { ELEMENT: '0.7754195696252344-2' },
{ ELEMENT: '0.7754195696252344-3' } ] }
but the click function fails:
Error while running .clickElement() protocol action: An element command could not be completed because the element is not visible on the page. – element not interactable
Surely if the element is found, its clickable?
(i have tried to paste more of the log here but it loses all formatting and is impossible to read)
Thanks!
No, if the element is present on the page, it does not mean that the element is also interactable (or clickable). For an element to be interactable, it also needs to be "visible" on the page and not just "present" on the page. It can happen if the element is hidden or outside the viewport of the page.
When you try to perform a 'click' operation on an element, Selenium first tries to locate the element and if the element is not visible in the view, it tries to scroll to the element to bring it into the view and then click on the center-point of the element.
Now, if Selenium is unable to bring the element into the view, it throws element not interactable error. If it is able to bring the element into the view but the center-point of the element is covered by some other element, it throws element click intercepted error. Otherwise, it successfully performs the 'click' operation on the element.
For reference: https://w3c.github.io/webdriver/#element-click
When I want to inspect an element in the browser with either CTRL-SHIFT-C or by clicking , the current focus is changed, possibly leading to elements that was previously visible not being visible any longer.
Is there some way of avoiding that?
You can select the element you need focus on in the Elements panel. Then find the :hov toggle (As of V49 iirc, 48 may still be a thumb-pin icon) which will open a menu for toggling given element states. From there, just select the one you need applied (focus in this case.) That will force the given state even if focus is somewhere else.
I use the target selector to put and remove a class that shows and hides the navigation menu. The problem is that when a user uses the backbutton on the browser the menu states get messed up.
This is my css code
<style>
#buttons-container a.close-menu-primary{display: none;}
#wrap:target #mainmenu{display: block;}
#wrap:target #buttons-container a.open-menu-primary{display: none;}
#wrap:target #buttons-container a.close-menu-primary{display: block;}
</style>
buttons-container is a div with two buttons, open-menu-primary & close-menu-primary, that toggle each other on and off and show or hide the mainmenu.
The problem occurs when someone uses the back button. In that case it only toggles the button states between open and close-menu-primary, which are a burger and a close image.
You can check the live version here if you make the browser small enough or use a mobile device, screen size has to be smaller than (min-width: 768px) and (min-height: 558px) website with toggle by target selector
Hope someone can clear this up if it is possible to use target this way or if there better ways to get this affect without scripting please.
Thanks in advance!
The question is... when user presses the back button, do you want to go back one state of menu visibility (ie. hide it or unhide it), or do you want to go back one page?
I check your linked page http://www.rieon.nl. I think this is the problem:
I presume you want the user to go back one page, not just to hide the menu. Then, you need to change this piece of code
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(){
$("nav").toggleClass("main");
});
});
and add either return false or e.preventDefault():
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(e){
$("nav").toggleClass("main");
e.preventDefault(); // use either one
return false; // of these lines
});
});
The problem is that by clicking on the link on navigation button, browser executes the javascript handler that shows the menu AND navigates to link's href address (which is #wrap) and that creates a new step in its history, so that when user hits back button, browser just goes back to previous state (which is usually the same page but without #wrap). By adding return false (that's jQuery speciality) or calling preventDefault() on event object (that's standard JS), you cancel the navigation and leave only your own handler to be executed.
I am using a link to jump to the content section of the page. It works fine; however, in IE and Chrome, after the jump if I press Tab it goes back to .
link : Skip to Content
Content Location <a id="anchortext" class='hidden'>Content</a>
Any Idea?
I suspect it has to do with the tab indexes of existing html elements on the page - clicking on an anchor tag as the one you specify above will take you down to the relevant section, but then pressing tab will take you to the first available tab stop (usually a link or form input item), which could very easily be back at the top of the page.
If you refresh the page and press tab once, you'll be taken to the first tab index enabled element of the page - I'm guessing that'll probably be the same section you were being taken to in your original question...
This appears to be a matter of different handling of internal links in browsers, and seems to fall into the category of behavior not defined in specifications, hence browser-dependent.
When you have focused on a link (usually, with tabbing) and hit enter to follow the link, browsers may or may not retain the focus. You can see the difference in behavior by using a CSS rule like :focus { background: yellow; }.
If the focus is retained (which is somewhat illogical, as the focused element may well be out of sight), a tab will take you to the next focusable element on the page (“next” in the sense of tabbing order).
If focus is lost, it may be treated as giving focus to the entire page (an IE oddity), or as having no focus. Either way, hitting tab will take you to the first focusable element on the page (as per the tabbing order).
I’m afraid there’s nothing you can do on a page to change this. It’s between the user and the browser.
AFAIK there's no way of doing that using only html.
So, i made a javascript script using jquery.
When the user clicks on the jump item, i look for the next link or the next link inside a specific element and put a focus on it.
This solves my problem with Chrome (>25) and IE (>7) and of course Firefox does the excelent job of interpret the tab action correctly.
$("#jumpToMenu").on("keydown", function(e) {
var keyCode = e.keyCode || e.which;
if(keyCode == 13) {
e.preventDefault();
e.stopPropagation();
$("#myMenuToJump").find('a:first').focus();
}
}).on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$("#myMenuToJump").find('a:first').focus();
});
Hope this helps...
This problem refers to the main (header) nav menu on THIS PAGE.
When any of the items in the "Services" drop-down submenu is clicked, I want the "Services" page to open (in the existing browser window) AND for a specific anchor tag element on the "Services" page to be in focus. I've achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items - text will slide down to the right of the list.
HTML for the "Services" submenu link:
<li> collaborative law</li>
HTML for the targetted "a" tag and its parent div (ie "a" tag that should be in focus on "Services" page):
<div id="mylist1"><h3>Collaborative Solutions</h3></div>
Script to drive the hover behaviour of the focussed "a" tag and its parent div:
//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
$('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
//capture click events as well:
/* $('#mylist1').click(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});*/
//capture focus events on <a> as well:
$('#myTag1').focus(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
});
Note the main nav menu has been created using jquery, via a Dreamweaver extension.
What I have so far:
When the "Services" page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.
Am I hoping for too much? Have I misunderstood the limitations of 'in focus'" Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk
I'm not sure your use of "in focus" is quite what I expect... Having a fragment in the url doesn't necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.
What I'd suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.
It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code - you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. :)
P.S. I guess yes for Mt Hotham. I'd never heard of it before but I'm going to be optimistic.