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
});
Related
The jQuery UI dialog has a dialogClass option, which is nice, since the dialog is nested directly within the document <body>. However when setting the modal option to true, a ui-widget-overlay div is also rendered directly within the body (as a sibling of the dialog div).
Is there a way to, in effect, apply an overlayClass when opening a jQuery UI dialog with modal: true?
I know we could apply custom css to the overlay by giving the <body> a class attribute, or by overriding the .ui-widget-overlay class directly. I'm looking for a solution that would make a css definition like the following work:
.my-custom-class.ui-widget-overlay {
opacity: .5;
}
Actually there is a really simple way to do this using the CSS.(So long as you downloaded the jQuery UI library). There should be a jquery style sheet entitled: "jqGrid-custom.css"
Simply go into the overlays section and adjust this line:
.ui-widget-overlay { background: #aaaaaa url(/img/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity:.9;filter:Alpha(Opacity=90); }
There is no option for this. Looking at the source, there's not an easy way to jocky it in there either. For reference, here's the bit that adds the class:
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
width: this.width(),
height: this.height()
});
You likely would be best to just customize / update your css to override / extend the default stylings.
I'm doing an image button rollover that has 3 stages (normal, hover, active).
I have the normal and hover stages working, however I can't seem to get the 'active' to work. That is, I want the image to stay on the active lever after it has been clicked.
Here is what I have:
http://jsfiddle.net/pufamuf/Q3YpU/1/
Thanks! :))
What you're trying to do will require JavaScript. Your CSS is fine, but when the link is no longer active, the :active selector no longer applies, and there's not much you can do about that.
You could (for example) use JavaScript to respond to the click event by adding an extra CSS class to the tag, and use that class to style the link identically to your :active link. For example, if your JS adds the class "clicked", your rule might look like
#emailUs:active, #emailUs.clicked
{
background-position: 0 -62px;
}
Many (most?) developers would probably use jQuery for something like this.
The :active pseudo-class only applies while the element is in the process of becoming activated. Once the mouse click is released the element no longer falls under the :active category.
In order to produce your expected behavior you will need to use some Javascript.
Use jQuery addClass on click event
If you could use JavaScript, this would be simple. Come up with some class name (e.g., active), and add it to your :active declaration:
#emailUs:active, .active
{
background-position: 0 -62px;
}
Then use JavaScript to listen for the click event on that link, prevent the default action, and add/remove the active class from the element as necessary.
However, if JavaScript isn't allowed, there's a much messier way to get what you want, which probably won't be feasible on a live site.
Change the link's href so that it points to itself:
<a id="emailUs" href="#emailUs" title="Email Us"></a>
Then use the :target selector in your CSS:
#emailUs:active, #emailUs:target
{
background-position: 0 -62px;
}
Keep in mind that the second solution has some caveats that go with it:
It tries to reposition the page so that the link is at the top of the screen
There could be a bunch of issues if you're already using the fragment identifier on your site
It won't work at all in IE6-8
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);
}
I want an animation modal (loading please wait) and when the page fully loads it disappears?
Using jQuery:
$(function() { $('#loading').fadeOut(); });
The rest is CSS and an animated GIF.
If you're using jQuery, try something like this:
$(function() {
var reqMgr = Sys.WebForms.PageRequestManager.getInstance();
reqMgr.add_beginRequest(ShowWait);
reqMgr.add_endRequest(HideWait);
});
function ShowWait() {
$("#Loading").fadeIn();
}
function HideWait() {
$("#Loading").fadeOut();
}
Then just have an element:
<div id="Loading">Loading, Please Wait...</div>
Style and position as you want with css, default it to have a display: none; though.
I recommend to write some simple html with your loading message (and may be a page mask to make it grayed) and place it at the beginning of the page. And at the end of page add script to remove that message and mask (see first answer). So users will see this message as soon as they get the html page (also some browsers support rendering of incomplete pages during loading of the page). See the code of this page for additional details.
This is my favorite way to make a modal popup. It does not use any AJAX, it's just pure HTML & CSS: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
You can hook it up to code-behind instead of using hyperlinks (get rid of the opacity attribute and work with div.visble = true/false). Set the modal div visible as default, then when page load completes, set it to visible=false.
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.