Is there any way to style an internally-linked div when it becomes focused? Like say I've got a link at the top of a page that I internally link (<a href="samepage.html#more">) to a div further down the page (<div id="more">), when someone clicks to that div, is there any way to style it to show that it's focused (like I'd maybe use a change in its background color or give it a border when it's clicked to)? It's not really like giving it a hover styling, it's more giving it styling on active or on focus or something like that. Is there any way to do that?
I'm not sure if there's just no way to do it, or if I'm being dense and there's an easy way, but I'm not seeing it so far. Thanks.
You should bind a JavaScript function to the window.onhashchange event:
window.onhashchange = function () {
var hashloc = window.location.hash;
// hashloc is a string like '#focusDiv'
// .. manipulate DOM
};
This miniature working jsFiddle example uses jQuery, and adds a CSS class to the focused DIV when a hash change event occurs.
The event is bound using plain JS because jQuery doesn't natively provide this hook, which may not at all be supported for older browsers as noted by Matt. To solve this I highly recommend this jQuery plugin for simple hash events.
Divs don't have a focus property that I'm aware of, but you'd probably want to bind to an event when the hash in the URL changes, then apply the changes to the div with an ID of the value of the hash.
For example, bind to this event: window.onhashchange -- it will only work on modern browsers (ie8+, Chrome 5+, Firefox 3.6+, etc) without some tweaking.
Related
I have just come across a weird CSS quirk that goes far beyond my understanding and would appreciate some help:
I was trying to build a fancy pure css dropdown solution using the clickable event method Ryan Collins proposed: http://www.ryancollins.me/?p=1041
With :active and :hover and some nested divs we may make trigger spans (or divs or whatever) that cause a sister element in the same container to appear upon mouse click. The example on Ryans page worked on my ipad so I assumed that iOS was smart enough to handle a touch event as triggering the :active state - and if the trigger contains a hyperlink this works, but there is no way to deactivate the active state of a hyperlink, safe for clicking on another hyperlink.
This sucks, because my plan to have an elegant navigation (and some other stuff) pop up and hide from view with just css is foiled, the menu never collapses - but then why does the example on Ryan's page work? I did some testing and finally narrowed the key element down to a twitter widget he has embedded on his page. Some javascript styles the embedded tweet and in doing so, it affects the very :active and : hover solution that all of a sudden works via touch on iOS, even without hyperlinks.
Can anybody tell me what causes this behavior and if I could emulate it without relying on a crazy hack like embedding a twitter widget and hiding it from view?
Found the answer myself with some more digging through the code and a little Google help:
The twitter widget among all the proprietary stuff it does also declares a touchstart event, which by itself anywhere on the page is enough to make mobile safari utilize the CSS :active pseudo style.
http://miniapps.co.uk/blog/post/enable-css-active-pseudo-styles-in-mobile-safari/
In Google Chrome, the CSS hover state isn't being triggered when the left mouse button is held down, as shown here:
a:hover {
color: red;
}
words
http://jsfiddle.net/RHGG6/1/
This issue doesn't occur in either FF8 or IE9. It's problematic because I'm implementing a drag-and-drop action and using CSS to highlight the drop target. I could do this pretty trivially in JavaScript, but that seems heavy-handed for what is essentially a CSS problem. Are there any workarounds to this?
From a little playing around, it seems that Chrome 30.0.1599.69 m on windows7 doesn't generate a mouseenter event if the left button is held when moving over an element. As such, relying on the onmouseenter event gives the same result as using css - perhaps this (non-triggered) event is used to signal the css engine that something needs to change.
Anyhow, you can just add code to handle mousemove and mouseout events. I simply set the text colour with the js, though something that toggled a class would probably be a better option. At least the js will be using the time that the css should have been using, so it won't all be overhead, although it does suck redoing it all anytime the mouse moves.
Perhaps you could use removeEventListener from inside the handler you're trying to remove. If so, you could attach the js to handle the events with addEventListener, attaching to both events on page load. When the onmousemove event was triggered, you could change the style and then remove the handler. Then, when the mouseout event fired, you could restore the style and re-attach the onmove handler. I wouldn't be surprised if trying to remove a handler from an event, from within the handler itself would fail, but one can only try. It would only add a few bytes to the js, but would improve efficiency (in terms of the link, not the whole page) tremendously - from potentially very poor if the mouse was moved over the link a lot to 100% - i.e the style is set exactly once and cleared exactly once per enter/leave cycle.
words
Works for me - Note: only tested with chrome in win7.
I checked in Safari and Opera as well and they behave just like IE9 and Firefox. It seems Chrome is the only browser that behaves this way. The only way I was able to get the desired behavior was using Javascript. The suggestions with the :active pseudo class definitely don't work, I think they misunderstand the problem. Strangely, :hover in Chrome works when the right mouse button is being held down and not when the left button is. Go figure.
The link turns red when I mouseover it using Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, so you might want to update your Chrome.
On a related note, the :hover pseudo-class applies to an element being HOVERED by a mouse pointer. For a style to apply while the mouse button is held down while clicking the link, use the :active pseudo-class. I'm not sure why FF and IE behave differently.
When you're left mouse button is down, isn't the element supposed to be in the active state? The difference here is that Firefox and IE are allowing the active state to be inherited from the hover state, and Chrome is not. In CSS, the active state can be controlled using the :active pseudo-class. You need to explicitly set the style for the active state to ensure consistency between browsers.
Nowadays (2018), while the bug still persists in Chrome, you can work around it using HTML5 drag&drop's dragenter and dragleave events. If you have a nested dom-element you can apply a counter to mitigate the dragleave events that occur when the mouse gets over a child element.
var h1 = document.querySelector('h1')
var counter = 0
h1.ondragenter = _=> ++counter && h1.classList.add('dragover')
h1.ondragleave = _=> --counter || h1.classList.remove('dragover')
span { font-style:italic }
h1:hover { color:red }
h1.dragover { color:blue }
<h1>hover over me<span>, and me</span></h1>
<h2 draggable=true>drag me</h2>
You're looking for the :active pseudo-class. :hover will only activate when the node is being hovered over by the mouse. :active will only trigger when the node has been selected or clicked on.
Here's the jsFiddle: http://jsfiddle.net/RHGG6/21/
Stack is warning me this is a subjective question, and will likely be close, but I'm going to try this anyway.
I have a set of control buttons attached to pictures in a gallery. These are to be initially hidden, and toggle visible when the mouse hovers over the image. The question I have is this:
Should these buttons be set to hidden in the stylesheet or stay visible and be hidden by jQuery when they load? I want graceful degradation, so it seems like initializing this in the CSS is a bad idea if I want these to be visible if javascript isn't enabled.
On top of this, I'm using Ajax to load pages of these images. If I do this using the jQuery hide, it doesn't affect those that load from an ajax request, since it only triggers on $(document).ready(). I've tried using live('ready'), but learned that that event isn't supported in live().
So what is the best practice for something like this? It seems like there's a lot of pros and cons for doing this either way (css vs. document.ready), and if they're hidden by the default CSS, the buttons will toggle fine with ajax pagination. But if javascript isn't enabled, the functionality of the buttons will be lost. Does anyone have advice for this?
Note: I didn't mention it originally, but it is significant. I'm currently using fadeToggle() to accomplish my transition, which may be what's complicating this whole issue. The solutions so far all appear to work, but not so much when fading is introduced.
If you're trying to change the style of elements loaded via Ajax, it's almost like you're trying to hit a moving target. I would create two declarations in my stylesheet - one for hidden, one for visible - and then toggle them based on a class attached to the body tag (or any other containing tag).
Like so:
body .mybutton {
display:block;
}
body.loaded .mybutton {
display:none;
}
Then in your JS file:
$(document).ready(function() {
$('body').addClass('loaded');
});
This way, any elements that have the class name mybutton - current and future - will have the appropriate style applied.
You hide with CSS initially using display:none; then use jQuery's toggle() to show and hide again. This is the best way to do it. As for people that do not have JavaScript enabled, i wouldn't worry about that. They make 1% of users. Everyone have JavaScript enabled.
Check working example http://jsfiddle.net/znJxh/
Note: I've tried searching on google, but couldn't find what I was looking for.
Browsers have some default styles they use for rendering form elements, which is different from browser to browser. Is there a way to reset all of the native browser styles for form elements like select, radios, checkbox etc, to make a consistent look across browsers?
I've made a quick example:
form elements http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png
As can see the form elements are rendered slightly differently. What I would like, is some styles, that can reset them, to look alike, for IE, Firefox and Webkit.
So how do you do this? A link to a css stylesheet with all the needed styles would be fantastic.
Short answer: you can't.
Long answer: you can, but expect pain.
I've hacked together nice looking Radio buttons, Checkboxes and Selects with 'sleight of hand' javascript + css. Basically, just after an input is loaded I hide it and replace it with labels / divs with events bound to them to make them act like they're the right inputs, and css to make them look that way. The events also update the underlying input so that the correct values are submitted with the rest of the form. If my script barfs or JS is off, the user gets the normal controls.
It wasn't that fun but the result is passable.
I do not look forward to seeing the mess IE makes of it though :)
I had inspiration from:
http://sourceforge.net/projects/selectreplace/?showfeed=code
This is an old question now but adding the CSS rule -webkit-appearance:none may help remove default Webkit styling, e.g. pill shaped buttons on Mobile Safari.
I would like to style a form button (input or button tag) with 2 background images to create a stretchable button (relative to the text-length). The form button should also have a hovered state and it should be cross browser (at least IE7 & +) would need to support it.
I know how to obtain the effect with just css with an tag => test
If anyone could help me a little bit, I would be pleased
yours truthfully
See this link.
This will only work with button because an inner element like a spanis needed.
Try JQuery UI. They have a very easy cross-browser set of user interface controls that might satisfy your requirements. You can change the backgrounds used for the buttons, etc.