If you go to a page like youtube.com and drag the mouse around while holding down the left button all kinds of things get selected. In the image below, for example, I'm just dragging the mouse along the red arrow and all the stuff at the top got selected and turned blue.
But if I create a jsfiddle - http://jsfiddle.net/nxwLc/ - with a simple div and drag the mouse around with the left button down, I'm not able to select anything. I can even drag completely around the box without selecting it.
Does anyone know what the difference is?
Thanks
<div id="box1"></div>
The selection (highlight) you see is being applied to textual content elements specifically text and images. In your example you have nothing but a <div> element
Now you'll have something to highlight: http://jsfiddle.net/nxwLc/2/
<div id="box1"><img src="//placehold.it/100x100/cf5"/> asdasdasd</div>
Also worth noting that Firefox will highlight exactly what should be highlighted, while in Chrome the highlight area will have unspecific and also unpredicted results, element-related, keeping an eye to line-heights content-flows etc... strange in any case.
Chrome vs. Firefox
Related
I'm trying to make a material design inspired Tab component, and I'm having a lot of trouble getting a bottom border to show up on the selected tab. I understand that the best way to do this is to override the Tab style in the theme, but there's no way to set just a bottom border there. I even went so far as to use an ActionListener to set the border when the tab is clicked, but then the border only flashes for a moment, as it seems the UIID gets reset immediately after being selected.
I'm looking for an effect similar to the Skype android app, where the current tab is 'underlined' at all times.
How can I make the border appear?
You can set a 9 piece border in the style that has a solid or transparent/translucent color and a line on the bottom.
No need to subclass.
I must have tried a hundred time by now to select an html element and then create a snippet with Chrome SnappySnippet, but each time I get the error
Error! DOM snapshot could not be created. Make sure that you have inspected some element.
In this video it looks easy, but out of those 100 times, I have been able to make it work once with something random.
Question
Is the selection somehow time based, so I have to click on SnappySnippet in e.h. less than a second?
How do you keep the selected element, so when moving the mouse to the SnappySnippet button other elements are not selected from hovering them?
Use the tree-DOM menu, left click on a div so it becomes dark blue. Now it is selected even thought hovering the mouse over other div's it will remain selected.
The problem you have is probably because SnappySnippet can't handle large div's. Try with a very small one first.
In Internet Explorer 10 the behavior of drop-down boxes (<select> element) has changed: when expanding the box, instead of placing the list of options below the field, the list overlays the field, with the list positioned so that the currently-selected element is centered over the input field.
This is a little hard to describe, so here's a jsFiddle that shows it.
Our users are finding this behavior very confusing. Is there anything I can do in CSS to make the box behave like it did in IE9, and like every other major browser? (Perhaps something like the -ms-clear pseudo-element that hides the clear button in IE10 text input fields.)
Here's a sort of time-lapse screenshot:
One option is dynamically change size property of the select to the number of options (or a fixed number - if you have too many options). You would do it on mouse-down, and change it back on-change.
Style, Position of select as well as additional events will have to be tweaked - but here is the proof of concept: http://jsfiddle.net/KnAXL/1/
I have layered 4 canvases over the top of each over, however i want to be able to click a button and the linked canvas will come to the top.
http://jsfiddle.net/5g3Fe/ shows what i have currently got. I tried to put the following code into the button click functions. however this doesn't work.
function canvasView1()
{
document.getElementById("canvas1").style.z-index="1";
document.getElementById("canvas2").style.z-index="0";
document.getElementById("canvas3").style.z-index="0";
document.getElementById("canvas4").style.z-index="0";
}
can anyone suggest a way to be able to get specific canvas from a button click.
Thanks
For some reason, jsFiddle was ignoring your JavaScript code because of this reason. You can get around that by choosing No wrap - in <body> on the left hand side options.
Then your problem was that to set the z-index in javascript you use .style.zIndex rather than .style.z-index.
Working fiddle here
Or cleaner code version here
I have a select list in IE 8 it works ok.
On Firefox 3 and 4: I cannot click on the select box, unless I move the mouse 0.5cm below the actual select box.
On Webkit the same as firefox, plus by default it looks blank with no options in it until clicked?
The page is http://gocruising.com.au/Cruises/Search the select list is on the right "sort results by"
I know there must be some invalid HTML somewhere but I cannot see it.
Your <div class="icons">...</div> is hanging down, meaning the click events on the control are really click the the div.
You may need to make that div smaller, reposition it, or lift the select above using z-index.