Solved

How to have a CSS Sprite "Button" Default to ON/PRESSED on Page Load

Posted on 2014-01-09
15
402 Views
Last Modified: 2014-01-10
I'm new to CSS and web design in general. I created a CSS sprite sheet of sorts that corresponds to 3 "buttons" or "links" on the page. These buttons have a default position of OFF and when clicked on (or hovered over) they have a position of ON.
I'd like one of them to default to the ON position when the page is loaded. Can someone help me do this with CSS? Here's the CSS I'm using.
PS - branch0 is the one I want to default to ON.

   /*--- Set Sprite Image ---*/
#branch0,
#branch1,
#branch2
{background-image : url('images/sprite2.jpg');}
#branch_buttons #branch0{width:300px; height:65px; background-position:0 0;} 
#branch_buttons #branch1{width:300px; height:65px; background-position:left -66px;}
#branch_buttons #branch2{width:300px; height:65px; background-position:left -131px;}
   /* Hover/Focus State */
#branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;}
   /* Active */
#branch_buttons #branch0:active{background-position:left -195px;}
#branch_buttons #branch1:active{background-position:left -261px;}
#branch_buttons #branch2:active{background-position:left -326px;}

Open in new window

0
Comment
Question by:homerslmpson
  • 8
  • 7
15 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39769059
   /*--- Set Sprite Image ---*/
#branch0,
#branch1,
#branch2
{background-image : url('images/sprite2.jpg');}
#branch_buttons #branch1{width:300px; height:65px; background-position:left -66px;}
#branch_buttons #branch2{width:300px; height:65px; background-position:left -131px;}
   /* Hover/Focus State */
#branch_buttons #branch0, #branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;}
   /* Active */
#branch_buttons #branch0:active{background-position:left -195px;}
#branch_buttons #branch1:active{background-position:left -261px;}
#branch_buttons #branch2:active{background-position:left -326px;}

Open in new window

0
 
LVL 1

Author Comment

by:homerslmpson
ID: 39769073
The code you gave me is defaulting branch0 to the ON position which is what I wanted but unfortunately it isn't going to the OFF position when you click the other buttons.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39769088
   /*--- Set Sprite Image ---*/
#branch0,
#branch1,
#branch2
{background-image : url('images/sprite2.jpg');}
#branch_buttons #branch0{width:300px; height:65px; background-position:0 0;} 
#branch_buttons #branch1{width:300px; height:65px; background-position:left -66px;}
#branch_buttons #branch2{width:300px; height:65px; background-position:left -131px;}
   /* Hover/Focus State */
#branch_buttons #branch0,#branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;}
   /* Active */
#branch_buttons #branch0:active{background-position:left -195px;}
#branch_buttons #branch1:active{background-position:left -261px;}
#branch_buttons #branch2:active{background-position:left -326px;}

Open in new window

0
 
LVL 1

Author Comment

by:homerslmpson
ID: 39769096
Still no luck. Same result. Branch0 stays in ON position indefinitely.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39769114
This might be easier to just give branch0 a class of current - I assume this is set in your js to push the button on. And leave the css as it is.
If it is too much hassle programmatically to do this in your code then just add a bit of js to add the class at page load.
0
 
LVL 1

Author Comment

by:homerslmpson
ID: 39770697
Sadly the stuff you mentioned above is a bit over my head.
I would have thought there is a way to state:
"on page load, click branch0 button"
That's pretty much all I would need.  Then when another button is clicked, branch0 would deactivate.
Do you know of a simple way to do this either in js or html?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39771281
Add this just before your closing BODY tag

<script>
elem = document.getElementById("branch0");
elem.className = elem.className + " current";
</script>

Make sure your css is back to the original format.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:homerslmpson
ID: 39771333
That had the same outcome as the others.
The button is selected but won't deselect when another button is pressed.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39771345
Can you attach your html, css etc or  link to a testing page.
0
 
LVL 1

Author Comment

by:homerslmpson
ID: 39771350
Sure. It's going to be a mess though. Give me a minute.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39771379
Just the rendered HTML - be quicker to save the page from your browser selecting Complete and then zip it and attach it here.
0
 
LVL 1

Author Comment

by:homerslmpson
ID: 39771393
Please see attached.
I verified all needed files are included in order to render this one page properly.
The last piece of code you gave me is already included so you will see "branch0" already selected - it just won't deselect.
Webpage.zip
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39771494
Ok, makes more sense now

Replace
#branch_buttons #branch0:active{background-position:left -195px;}
#branch_buttons #branch1:active{background-position:left -261px;}
#branch_buttons #branch2:active{background-position:left -326px;}


with
#branch_buttons #branch0.current{background-position:left -195px;}
#branch_buttons #branch1.current{background-position:left -261px;}
#branch_buttons #branch2.current{background-position:left -326px;}


Replace the script I gave above with this
<script>
$(function() {
$("#branch0").addClass("current")
$("#branch_buttons a").click(function(){
      $("#branch_buttons a").removeClass("current")
      $(this).addClass("current")
})
})
</script>
0
 
LVL 58

Expert Comment

by:Gary
ID: 39771566
Forgot something

Replace
#branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;}



with
#branch_buttons #branch0:hover,#branch_buttons #branch0:focus{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus{width:300px; height:65px; background-position:-301px -131px;}
0
 
LVL 1

Author Closing Comment

by:homerslmpson
ID: 39771567
OK well you took care of the issue.
I am very grateful for your help.
For whatever reason the "hover" image and the "active" image were swapped after adding the updated code but I just went ahead and edited the sprite sheet as that is easier than trying to decipher all of this nonsense.
Thanks again!!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now