Re: [jQuery] CSS: Wasteful requests when switching input image
Brice Burgess schrieb:
Klaus Hartl wrote:
Brice,
I think having two images in the HTML source is pretty ugly. I once did
an "Image image Replacement" for inputs with type image. That way you
can easily use pure CSS hovers and use CSS sprites to avoid traffic. It
also makes skining much easier, as the appearance is changed in the
style sheet again only.
If you're interested I'm going to search for the snippet. Or write a
post about it. It worked pretty well cross browser.
-- Klaus
Klaus,
A sprite sounds promising & non ugly. Vs. changing the background url,
you just change the background-(left|right|top|bottom) value.. which I
don't think will trigger a request.
Keep me posted! :)
~ Brice
Here we go...
First the CSS, I did that for a search icon: The icon was 19 x 19
px in size and had all states in one (normal, hover/focus, active -
there is a fourth state which was needed vor visited links, attached)
plus you need a neutral icon (attached) for plain HTML:
/* image-image replacement, neutral icon is used for plain HTML - no
need for changing HTML if icon shall be replaced */
#search .image {
overflow: hidden;
padding: 0 0 0 19px;
width: 0;
height: 19px;
background: url(icon_search.gif) no-repeat 0 -150px; /* use
neutral or the same icon is used for plain HTML - no need for changing
HTML if icon shall be replaced */
}
#search .image:hover, #search .image:focus { /* @ EOMB */
background-position: -100px -50px;
}
#search .image:active { /* @ EOMB */
background-position: -150px 0;
}
/* IE: */
* html #search .image {
width /**/: 19px; /* @ IE 5 (different box model), CSS Comment Hack
- http://www.info.com.ph/~etan/w3pantheon/style/commentbugs.html */
}
Haven't tested that in IE 7, has been a little while since I made this,
needs some tweaking maybe... :hover in IE 6 also only works with a
little help of JavaScript.
Here's the (essential) html:
... src="icon_search_neutral.gif" alt="Search" />
Cheers, Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] CSS: Wasteful requests when switching input image
On 16/02/07, Brice Burgess <[EMAIL PROTECTED]> wrote: > Klaus Hartl wrote: > > Brice, > > > > I think having two images in the HTML source is pretty ugly. I once did > > an "Image image Replacement" for inputs with type image. That way you > > can easily use pure CSS hovers and use CSS sprites to avoid traffic. It > > also makes skining much easier, as the appearance is changed in the > > style sheet again only. > > > > If you're interested I'm going to search for the snippet. Or write a > > post about it. It worked pretty well cross browser. > > > > > > -- Klaus > > > Klaus, > > A sprite sounds promising & non ugly. Vs. changing the background url, > you just change the background-(left|right|top|bottom) value.. which I > don't think will trigger a request. > > Keep me posted! :) > > ~ Brice There is an article on WellStyled.com about this: http://wellstyled.com/singlelang.php?lang=en&page=css-nopreload-rollovers.html ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] CSS: Wasteful requests when switching input image
Karl Rudd schrieb: > Are you sure about the multiple reload requests? I just checked it out > (via the w3schools) and it isn't happening with Firefox 1.5. Maybe the cache was disabled, which I always do of course when developing. -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] CSS: Wasteful requests when switching input image
Klaus Hartl wrote: > Brice, > > I think having two images in the HTML source is pretty ugly. I once did > an "Image image Replacement" for inputs with type image. That way you > can easily use pure CSS hovers and use CSS sprites to avoid traffic. It > also makes skining much easier, as the appearance is changed in the > style sheet again only. > > If you're interested I'm going to search for the snippet. Or write a > post about it. It worked pretty well cross browser. > > > -- Klaus > Klaus, A sprite sounds promising & non ugly. Vs. changing the background url, you just change the background-(left|right|top|bottom) value.. which I don't think will trigger a request. Keep me posted! :) ~ Brice ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] CSS: Wasteful requests when switching input image
Are you sure about the multiple reload requests? I just checked it out
(via the w3schools) and it isn't happening with Firefox 1.5.
JavaScript:
var imgnum = 0;
var imgs = ['paper.jpg','bgdesert.jpg'];
function srcCh(e)
{
e.src = imgs[imgnum];
imgnum = imgnum ? 0 : 1;
}
HTML:
Karl Rudd
On 2/16/07, Brice Burgess <[EMAIL PROTECTED]> wrote:
> Regarding;
>
> Using Firebug's (FF 2) net monitoring, I noticed that every time I
> switched the src of an input image it would request the new src image
> from HTTP. FF simply does not cache these images. This is kind of
> annoying because it can waste a lot of bandwith or slow the user
> experience down -- especially when involving a lot of hovers, or
> frequent hover overs such as the close button of a modal window.
>
> I noticed this while looking @ the close button of jqModal. You can see
> a demonstration @ the jqModal page, or better yet, see;
> http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_form_bg
>
> The w3schools uses a background change on a text input, while jqModal
> changes the src of an image input. The reasons for the input is that it
> takes the focus() event, and allows you to "tab into it". Regardless of
> the method.. I was able to rack up 103kb by moving my mouse back &
> fourth for 10 seconds in the w3schools example. Not major.. but NOT
> OPTIMAL! :)
>
> So.. here is my way around this -- which I'll work into jqModal examples
> once I get some feedback on it. Vs. changing the source, I inline both
> versions of the input (the "over" & the "out"), alternating their
> display value.
>
>
>
>
>
>
> ---
>
>
> $().ready(function() {
>
> $('input.jqmOut')
> .mouseover(function(){
> $(this).hide().siblings('input.jqmOver').show(); $})
> .focus(function(){ var
> f=$(this).hide().siblings('input.jqmOver').show()[0]; f.hideFocus=true;
> f.focus(); });
>
> $('input.jqmOver')
> .mouseout(function(){
> $(this).hide().siblings('input.jqmOut').show(); $})
> .blur(function(){ $(this).hide().siblings('input.jqmOut').show(); });
> });
>
>
> (( the hideFocus() is for aesthetic purposes involving IE ))
>
> Anyhow.. does anyone have any thoughts on this topic? Or can this be
> improved upon?
>
> Regards,
>
> ~ Brice (another one of those 3am posts... ;) )
>
>
>
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] CSS: Wasteful requests when switching input image
Brice,
I think having two images in the HTML source is pretty ugly. I once did
an "Image image Replacement" for inputs with type image. That way you
can easily use pure CSS hovers and use CSS sprites to avoid traffic. It
also makes skining much easier, as the appearance is changed in the
style sheet again only.
If you're interested I'm going to search for the snippet. Or write a
post about it. It worked pretty well cross browser.
-- Klaus
Brice Burgess schrieb:
> Regarding;
>
> Using Firebug's (FF 2) net monitoring, I noticed that every time I
> switched the src of an input image it would request the new src image
> from HTTP. FF simply does not cache these images. This is kind of
> annoying because it can waste a lot of bandwith or slow the user
> experience down -- especially when involving a lot of hovers, or
> frequent hover overs such as the close button of a modal window.
>
> I noticed this while looking @ the close button of jqModal. You can see
> a demonstration @ the jqModal page, or better yet, see;
> http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_form_bg
>
> The w3schools uses a background change on a text input, while jqModal
> changes the src of an image input. The reasons for the input is that it
> takes the focus() event, and allows you to "tab into it". Regardless of
> the method.. I was able to rack up 103kb by moving my mouse back &
> fourth for 10 seconds in the w3schools example. Not major.. but NOT
> OPTIMAL! :)
>
> So.. here is my way around this -- which I'll work into jqModal examples
> once I get some feedback on it. Vs. changing the source, I inline both
> versions of the input (the "over" & the "out"), alternating their
> display value.
>
>
>
>
>
>
> ---
>
>
> $().ready(function() {
>
> $('input.jqmOut')
> .mouseover(function(){
> $(this).hide().siblings('input.jqmOver').show(); $})
> .focus(function(){ var
> f=$(this).hide().siblings('input.jqmOver').show()[0]; f.hideFocus=true;
> f.focus(); });
>
> $('input.jqmOver')
> .mouseout(function(){
> $(this).hide().siblings('input.jqmOut').show(); $})
> .blur(function(){ $(this).hide().siblings('input.jqmOut').show(); });
> });
>
>
> (( the hideFocus() is for aesthetic purposes involving IE ))
>
> Anyhow.. does anyone have any thoughts on this topic? Or can this be
> improved upon?
>
> Regards,
>
> ~ Brice (another one of those 3am posts... ;) )
>
>
>
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] CSS: Wasteful requests when switching input image
Brice Burgess schreef:
> Regarding;
>
> Using Firebug's (FF 2) net monitoring, I noticed that every time I
> switched the src of an input image it would request the new src image
> from HTTP. FF simply does not cache these images. This is kind of
> annoying because it can waste a lot of bandwith or slow the user
> experience down -- especially when involving a lot of hovers, or
> frequent hover overs such as the close button of a modal window.
>
> I noticed this while looking @ the close button of jqModal. You can see
> a demonstration @ the jqModal page, or better yet, see;
> http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_form_bg
>
> The w3schools uses a background change on a text input, while jqModal
> changes the src of an image input. The reasons for the input is that it
> takes the focus() event, and allows you to "tab into it". Regardless of
> the method.. I was able to rack up 103kb by moving my mouse back &
> fourth for 10 seconds in the w3schools example. Not major.. but NOT
> OPTIMAL! :)
>
> So.. here is my way around this -- which I'll work into jqModal examples
> once I get some feedback on it. Vs. changing the source, I inline both
> versions of the input (the "over" & the "out"), alternating their
> display value.
>
>
>
>
>
>
> ---
>
>
> $().ready(function() {
>
> $('input.jqmOut')
> .mouseover(function(){
> $(this).hide().siblings('input.jqmOver').show(); $})
> .focus(function(){ var
> f=$(this).hide().siblings('input.jqmOver').show()[0]; f.hideFocus=true;
> f.focus(); });
>
> $('input.jqmOver')
> .mouseout(function(){
> $(this).hide().siblings('input.jqmOut').show(); $})
> .blur(function(){ $(this).hide().siblings('input.jqmOut').show(); });
> });
>
>
> (( the hideFocus() is for aesthetic purposes involving IE ))
>
> Anyhow.. does anyone have any thoughts on this topic? Or can this be
> improved upon?
>
> Regards,
>
> ~ Brice (another one of those 3am posts... ;) )
>
>
>
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
>
I saw a css technique where the initial and the mouseover image where
one image and they swiched them with by showing only that part of the
picture that was needed.
I can't find it back right now but i think it was on a list apart.
i got an article here : http://wellstyled.com/css-nopreload-rollovers.html
--
David Duymelinck
[EMAIL PROTECTED]
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] CSS: Wasteful requests when switching input image
Regarding;
Using Firebug's (FF 2) net monitoring, I noticed that every time I
switched the src of an input image it would request the new src image
from HTTP. FF simply does not cache these images. This is kind of
annoying because it can waste a lot of bandwith or slow the user
experience down -- especially when involving a lot of hovers, or
frequent hover overs such as the close button of a modal window.
I noticed this while looking @ the close button of jqModal. You can see
a demonstration @ the jqModal page, or better yet, see;
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_form_bg
The w3schools uses a background change on a text input, while jqModal
changes the src of an image input. The reasons for the input is that it
takes the focus() event, and allows you to "tab into it". Regardless of
the method.. I was able to rack up 103kb by moving my mouse back &
fourth for 10 seconds in the w3schools example. Not major.. but NOT
OPTIMAL! :)
So.. here is my way around this -- which I'll work into jqModal examples
once I get some feedback on it. Vs. changing the source, I inline both
versions of the input (the "over" & the "out"), alternating their
display value.
---
$().ready(function() {
$('input.jqmOut')
.mouseover(function(){
$(this).hide().siblings('input.jqmOver').show(); $})
.focus(function(){ var
f=$(this).hide().siblings('input.jqmOver').show()[0]; f.hideFocus=true;
f.focus(); });
$('input.jqmOver')
.mouseout(function(){
$(this).hide().siblings('input.jqmOut').show(); $})
.blur(function(){ $(this).hide().siblings('input.jqmOut').show(); });
});
(( the hideFocus() is for aesthetic purposes involving IE ))
Anyhow.. does anyone have any thoughts on this topic? Or can this be
improved upon?
Regards,
~ Brice (another one of those 3am posts... ;) )
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
