Mouseover image lags - javascript

On the site I am currently building, I have 5 external links, with mouseovers, linking to social sites such as facebook, twitter, youtube, etc. These links have a small image (15px x 15px) of the social networks logo in white, and then text in white of the name. I am using javascript to change the img src, to the coloured version of the logo, and change the colour of the text to a light blue. The text changes colour immediately, but the images have a slight lag on them, especially the facebook logo.
My code in javascript for the mouseovers is:
function FacebookMO(Type) {
if (Type == "Off") document.getElementById('Facebook').style.color = "#FFF", document.getElementById("FacebookLogo").src = "Images/Social/Facebook Logo W.png";
if (Type == "Over") document.getElementById('Facebook').style.color = "#3B5998", document.getElementById("FacebookLogo").src = "Images/Social/Facebook Logo B.png";
if (Type == "Clicked") document.getElementById('Facebook').style.color = "#141e33"; }
The code for the other 4 links is the same except facebook has been changed for the relevant link/text/img.
here is all the relevant code for the html;
<a href="http://www.facebook.com/WrecRecords" class="bar3" id="Facebook"
onmouseout="FacebookMO('Off')" onmouseover="FacebookMO('Over')" onmousedown="FacebookMO('Clicked')"
onmouseup="FacebookMO('Over')" style="padding-left:10px;"><img class="padr5" id="FacebookLogo"
src="Images/Social/Facebook Logo W.png" style="height:15px; width:15px;"/>Facebook</a>
and the css too;
a.bar3 {
font-family:"Bebas Neue", sans-serif;
font-size:20px;
color:#FFF;
padding:0px 20px;
text-decoration:none;
}
I've tried preloading the image via different methods including visibility:hidden; display:none; and loading the image into the webpage as a 1x1px img at the bottom, but I still have the lag.
The delay is significantly worse online than when just using the whole site locally. If anybody can offer any help I would really appreciate it, as i'm really stumped as to how to prevent this lag from happening. Thanks.
Edit: just tested this on a few different browsers.
On firefox I have no lag and it works flawlessly when tested from the local files. yay! :) however on the web, there is a slight delay of about 3 seconds when you first hover over it, and then works flawlessly afterwards. (Think I just need to load the images immediately when the page loads).
Chrome, which is what I was testing on initially, still having this slight lag issue, although i have absolutely no idea why still.
I tried testing on internet explorer, but no scripts are running on there at all atm.

The trick with this one is not to use separate images but a so called spritemap. You image is 15x15px, now you make a 30x15px image which contains the normal and hover state next to each other. Instead of replacing the image, you change the background-position of the background image.
Example from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}

Related

Background/foreground color contrast fails Lighthouse test when JS adds a class that changes the theme of an element

Firstly, I need this website I'm developing to score 100/100 in all Lighthouse tests: SEO, performance, accessibility and best practices.
Until now, my fixed navigation bar at the top of my page has a white background (#FFF) with #24292E foreground text using a 15px sans-serif font (font-family: sans-serif);
As the user scrolls down the page, one of the effects I've included changes the navigation bar colors based on the section they have scrolled to i.e. the navigation bar changes to a dark theme (adds 'dark' class) when it reaches a dark section and returns to the default light theme (removes 'dark' class) when it reaches a light section.
Without the Javascript change of class, my accessibility score is 100/100, meaning the contrast ratio test passed as dark text on white. With the Javascript change of class, the test annoyingly fails with light text on dark and one website contrast ratio checker tool reported that some links in the navigation bar now have #FFF background and #FFF foreground with a 1:1 ratio, which is not the case when looking at my website and not the case when you look at the CSS that has changed.
It seems that Lighthouse and other testers are having trouble determining which colors are used after the Javascript change and this annoys me because I'm meant to be building a 100/100 website with that particular effect and not sure how to move on from here. I have check contrast ratio tools to make sure those color combinations pass and they do.
Can anybody share an insight into what is happening and how to rectify it?
It's pointless sharing my JS code because it simply adds a class/removes a class when the browser is scrolled to a set waypoint and works as expected. I will, however, share my CSS (SCSS) to prove that it's not the issue:
#main-navigation {
background: #FFFFFF;
#main-navigation-links {
li {
a {
color: #24292E;
}
}
}
&.dark {
background: #24292E;
#main-navigation-links {
li {
a {
color: #FFFFFF;
}
}
}
}
}

Background colors not touching from two lines of text

I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.

Why do I have so much lag?

I have been working on this new website but the "buttons" I am using are causing a ton of lag, I would like to remove the lag if possible.
The website is here: http://lano-project.org/
The troubled code is here:
<td>
<a href="templink-info.html">
<img style="display: none" src="images/icons/hover-info.png"/>
<img src="images/icons/info.png"
onmouseover="this.src='images/icons/hover-info.png';
document.getElementById('home_text').style.display = 'none';
document.getElementById('info_text').style.display = 'block';"
onmouseout="this.src='images/icons/info.png';
document.getElementById('home_text').style.display = 'block';
document.getElementById('info_text').style.display = 'none';"
onclick=""/>
</a>
<h3>Info</h3>
</td>
with relevant css:
#icon tr td img{
width: 100px;
height: 100px;}
#icon tr td p{
margin: 0px;}
#icon tr td{
text-align: center;
width: 150px;}
#icon{
margin-left: auto;
margin-right: auto;}
https://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/
You can boost your responsiveness by creating only one image with both states of your button that is twice as large as the button itself. Then, on mouseover, just change the background-position property using css instead of loading a new image every time. This effectively "slides" the image so that the correct part of it shows "through" the button. This operation is very fast, and I think you'll see a big difference.
Compress your images and it the website will load a bit faster.
Post it on jsFiddle and specify the problem, because for now, I don't understand what do you want, because your website loads normally without any lag.
If you want to create an attribute with image, you can change the background of attribute or just use JS for.. some cool stuff you're trying to do.
EDIT: I've done in the past, my solution is to use background-image and change it on :hover
http://puu.sh/qc98m/a828b9ae4e.png like that.
The mouseover is only slow when hovering the images for the first time. What's happening behind the scenes, is that the new (hover) images weren't loaded into the browser's cache when the page loaded, have to be loaded on first mouseover, and hence cause the (visual) delay. Subsequent cursor passes are as fast as would normally be expected.
One possible solution would be to preload images (which would obviously happen in the background) immediately when the page loads. From a similar question:
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
preloadImage('images/icons/hover-info.png');

Needed - Javascript button to utilise Ctrl + and - keyboard shortcuts in web browsers

I am trying to create a button on a web page to increase the page size, font size image size etc. This is for a Special needs school website in order to make it more accessible. website is www.applefieldsschool.co.uk. Please note it is a work in progress.
So far I have managed to come up with this;-
<button onclick="body.style.zoom='300%'">Zoom 300%</button>
This works but simply magnifies what is rendered on the page and is not responsive. My page is HTML5 and CSS3 responsive to different viewport sizes etc.
If I use the keyboard shortcut Ctrl+ and Ctrl- This does exactly what I need. I now need to program a button to utilise the keyboard shortcut.
Sadly this is getting a little beyond my javascript skills (which I have only just, in the last week, started to play with) Thanks in advance.
It's not possible to tell your browser to 'Use the CTRL + + keys'.
Here is another thread which lists some possible alternatives. In particular:
body {
transform: scale(1.1);
transform-origin: 10% 10%;
// add prefixed versions too.
}
You can also set the font-size. Unless you did all your sizes in em, which is relative to the font size, this won't really zoom the page as such, but it will (obviously( change the size of the font (which may still be acceptable for you).
You can try this:
var value = event.keyCode;
Call it from onkeydown="keyCode(event);"
And here is the list of keycodes:
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
I guess the zooming is browser specific (please corret me if i'am wrong)
I'd recommend to add multiple styles, that you append on the website and define by your self.
for example, some CSS
/*default -no styles*/
body
{
font-size: 14px;
}
body.big
{
font-size: 20px;
}
body.omg
{
font-size: 25px;
}
body.omg img
{
width: 150%;
}
The pain with this is, that only the text will be scaled up. You will have to adress certain items to make them appear bigger. Like the <img> in the example.
Then you can address the styles on button click (you should maybe use something like jQuery to make this more clean...)
<button onClick="document.getElementsByTagName('body')[0].className ='big';">+ Zoom</button>
<button onClick="document.getElementsByTagName('body')[0].className ='omg';">++ Zoom</button>
Update here in an working example, using jQuery: http://jsfiddle.net/9DCry/

unitPngFix prevents changing "display" of hidden "div"

I have almost solved a huge problem with png files and transparency in IE browsers on my website.
The problem is that only in IE6, this wont work.
I have this code called unitpngfix.js which displays transparent PNG images correctly on my website in IE browsers.
I have a DIV with a png image inside it like this:
<div id="pop" class="pop_komm">
<img src="Graphics/komm.png">
</div>
css:
.pop_komm {
position: absolute;
z-index: 20;
height: 52px;
width: 208px;
left: 760px;
top: 239px;
display:none;
zoom:1;
}
And I have a very basic js code for making the container visible:
document.getElementById("pop").style.display='block';
//This triggers on a drop list change event, so this DIV shows when I change a drop list value
This wont work however. Nothing shows up in IE6. If I remove the unitPngFix completely, then the DIV shows with the PNG file, but the transparency wont work.
Also, if I reverse the js function and "HIDE" the DIV instead of showing it:
display='none';
Then it works fine!
In other words, when the DIV is hidden, then the unitPngFix prevents the PNG file to be shown. I am suspecting a bug here!?
Any help?
Here is UnitPngFix website
Thanks
PS: I will tag JQuery also, as I might have to use it to fix this, but I would prefer plain js as the website is currently only built using that.
Instead of hiding it, set a huge left offset and the PNG fix should apply. Then to show it, set the left to a visible legit value.
left:-9999em then to show it, left:760px

Categories