I want a solution for tag:hover that is not working on ie6. My guess is it has to be done with javascript.
I found this patch: csshover3.htc (http://www.xs4all.nl/~peterned/csshover.html), I checked it's demo! and i didn't work on my ie6 browser!
There has to be an elegant way to solve this very BIG and basic problem, may be a jquery plugin.
Any lead is appriciated
Using jQuery you would be able to use the hover function (http://docs.jquery.com/Events/hover) to add a class on hover.
example:
$("li").hover(
function () {
$(this).addClass('ie6-hover');
},
function () {
$(this).removeClass('ie6-hover');
}
);
You could then make the class have the same properties.
li:hover, li.ie6-hover {
text-decoration: underline;
}
A short jQuery Plugin does it for me
IE6TableHover: function()
{
if(jQuery.browser.msie && /6.0/.test(navigator.userAgent))
{
$(this).hover(
function(){
$(this).addClass('jshover');
}, function(){
$(this).removeClass('jshover');
});
}
}
required jQuery Version here 1.2.6 for 1.3.x you have to change the browser check.
If you're talking about mouseover on non anchor tags, you could use jQuery to add an event handler to catch mouseover events.
Might not be applicable for your context, but you could always just make a point of having your a elements be given the hover effect. For example, in a navigational ul>li>a list, style the a elements with display:block and style them, rather than the lis.
There's Google's ie7-js, but I'm not sure if it addresses anything other than transparent-png issues.
Visibility inherit offers this alternative that directly addresses the mouseOver/:hover problem.
Related
http://jsfiddle.net/b4fwQ/
Hi all. The link above goes to a jsFiddle example of where i have got to thus far. What i am trying to accomplish is that which ever <li> has the selected class on it will shows its child. Now this is working as above, but once you start moving your mouse around the "selected" border needs to become white as you are now looking at a different page.
How can the css be changed?
thanks.
Chris
With the current HTML markup I'm not sure this is possible with pure CSS. But a bit of jQuery can get the desired effect:
$(function(){
var selectedLi = $("#navigation ul#home-nav li.grey");
$("#navigation ul#home-nav").hover(function(){
selectedLi.removeClass("selected");
}, function(){
selectedLi.addClass("selected");
});
});
See Demo: http://jsfiddle.net/b4fwQ/1/
I want to reset the background image of a textbox when it receives focus. How can I do this?
If 'reset' means to clear out the background-image permanently, you'll need to manipulate the CSS via javascript events.
For example, if you use jQuery - you can do this:
$('input#some_id').focus(
function(){
$(this).css('background-image', 'none');
}
);
Other JS libraries have similar functionality. If you aren't yet using a JS library, you may want to seriously consider it.
If you simply need to 'reset' temporarily until the focus leaves, you can use the ':focus' css pseudoclass like this:
input#some_id:focus
{
background-image: none;
}
Something like this should work:
$("input").focus(function(){
$("input").css("background-color","#FFFFCC"); //adjust for background-image
});
$("input").blur(function(){
$("input").css("background-color","#ffffff"); //adjust for background-image
});
When moving over a dragable element I want the cursor to change to a hand and upon mouse down until mouse up I want to change to a "grabbing" hand. What is the proper, cross browser compatible way to do this?
Googling this only brings up websites from year two thousand, with tutorials on IE6. BLA!
Are there any good MODERN tutorials on this topic out there? If not, someone needs to write one. That'd make an excellent smashing magazine article!
Using the jQuery framework, you could do something like this:
// define a hover event so that when you hover over and out of the dragable element
// the cursor changes accordingly
$('#element').hover(function(){
$(this).css('cursor','move');
} , function(){
$(this).css('cursor','default');
});
// this cursor property is only supported in mozilla, but here you can insert
// an image as other posters have specified
// this event changes the cursor when you click the dragable element
$('#element').mousedown(function(){
$(this).css('cursor','-moz-grabbing');
});
// this event changes the cursor back to the default type after you let go
// of the dragable element
$('#element').mouseup(function() {
$(this).css('cursor','default');
});
For a live example, check this out: http://jsfiddle.net/EaEe3/ Let me know if you need more information. I hope this helps.
The propper way is to use cursor rule default values, as 'move' in your case.
If you want a custom cursor you must have a .cur file for IE and a png/gif file for others, so you can write
cursor:url(notie.png),url(ie.cur),move;
Using CSS:
http://www.w3schools.com/css/pr_class_cursor.asp
.myElement {
cursor: move;
}
.myCustomCursor {
cursor: url(myCoolCursor.gif);
}
is there any way to use "hover" attribute for all html elements instead of just '' in IE?
for example 'li:hover' . it doesn't work in IE6 . (i don't know about other versions of IE).
Edited:
i just want to do it with CSS no javascript.
it is a simple menu.
No, IE6 didn't properly implement the :hover pseudo-class for all elements. It only supports it for anchors.
I don't think there is anyway that you can do it without javascript in IE 6.
If it is a one level menu, you might be able to tweak the styling to make the links render as display:block inside of the li so you can perform hovers on them, and if needed put spans inside the links for extra styling flexibility, but personally never had much luck trying to extend that to multi level menus.
A strategy of graceful degradation may be your best bet there.
Use onmouseover/onmouseout with javascript.
When you mouseover an element you simply show a hidden div with your hover contents.
When you mouseout of an element you will then hide the div with you hover contents.
Jquery makes this easier if you dont want to do all the leg work
<span id="hoverSpan" class="hoverelement" hoverdata="this is my hoverdata">HoverSpan</span>
HoverAnchor
<div id="hoverdiv" style="display:none"></div>
<script language="javascript">
$(document).ready(function () {
$(".hoverelement").each( function () {
var myelement = $(this);
myelement.mouseover( function (e) {
var myhovertext = myelement.attr("hoverdata");
$("#hoverdiv").html(myhovertext).show();
});
myelement.mouseout( function (e) {
$("#hoverdiv").html(myhovertext).hide();
});
});
});
</script>
Its late and I did not test this, but the idea is there. Basically you would make a hover for any element with the class "hoverelement"
try jquery...i don't know exactly but it might work in IE6....
I have a data entry web app where the control that has focus is given a yellow background color (and when the user navigates away, it turns back to white). The script to do this came from I-don't-know-where, and it breaks in IE7 causing all sorts of problems, like drop downs not working (the script was designed to work on textboxes and drop downs, or at least it was implemented with that in mind), and it works in ie6.
Some of my users have been switched to Ie7 without my being informed, and the rest will go to ie7 at some future time. So, I'd like to implement a friendlier solution. I really like jquery and am already using it on the app for a variety of things. Also, it has been suggested that cross browser support may/will eventually be important on the intranet.
What I would prefer to avoid is manually adding a bunch of onblur="SomeMethod()" (or something similar) to the controls (There must be 600+ in the app). In fact, if I tell my boss this he's probably going to throw something at me.
I am already using JQuery in the application. Where it is used function calls are explicit, and are all called in onblur.
Currently, I am of the mind to do something like this:
$(document).ready (function(
$(':text').focus(function()
{
//Do Highlighting
}
$(':text').blur(function()
{
//Good bye highlighting
}
)
Am I on he right track? Is onblur my best option? Is there a better way?
the other onblur functions show/hide child fields based on the value of the parent. I realize I am not providing code, but am I setting myself up for any conflicts?
Use jQuery's blur() and focus() methods.
Also, I think you mean to REMOVE highlighting with your blur function (blur means the user has clicked off of the element in question). Use focus() to turn on the highlighting.
$(document).ready (function() {
$(':text').focus(function() {
$(this).addClass('highlight');
});
$(':text').blur(function() {
$(this).removeClass('highlight');
});
});
There seems to be a workaround that makes the :focus pseudo-class work in IE6/7. I haven't used it myself but I think it's quite a established solution:
http://www.xs4all.nl/~peterned/csshover.html
With 600+ elements, a scriptless workaround is probably preferable, especially if older clients are involved.
$('textarea, input:text').focus(function() {
$(this).addClass('hilite');
}).blur(function() {
$(this).removeClass('hilite')
});
.hilite {
border: 2px solid gray;
}
blur/focus will work for you. If you're able, at some point, to move all your users all the way to IE8 you can also accomplish the desired effect with CSS:
input[type=text]:focus {
background-color: lightyellow;
}
This doesn't answer your question, but is an alternative... jQuery Tools Expose will apply an overlay to all elements outside your input box thus forcing the user to focus on the input. It's a nice feature and the plugin is very lightweight. I also posted some coding that does the same thing in this answer in case you don't want to use a plugin.
There is a free widget library for this task: Focus highlight widget.