WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
How to have a CSS Sprite "Button" Default to ON/PRESSED on Page Load
Posted on 2014-01-09
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.
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;}
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
8-
7
15 Comments
/*--- 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;}
Active 6 days ago
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.
/*--- 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;}
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.
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.
Active 6 days ago
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?
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?
Add this just before your closing BODY tag
<script>
elem = document.getElementById("b
elem.className = elem.className + " current";
</script>
Make sure your css is back to the original format.
<script>
elem = document.getElementById("b
elem.className = elem.className + " current";
</script>
Make sure your css is back to the original format.
Active 6 days ago
That had the same outcome as the others.
The button is selected but won't deselect when another button is pressed.
The button is selected but won't deselect when another button is pressed.
Just the rendered HTML - be quicker to save the page from your browser selecting Complete and then zip it and attach it here.
Active 6 days ago
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
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
Ok, makes more sense now
Replace
#branch_buttons #branch0:active{background
#branch_buttons #branch1:active{background
#branch_buttons #branch2:active{background
with
#branch_buttons #branch0.current{backgroun
#branch_buttons #branch1.current{backgroun
#branch_buttons #branch2.current{backgroun
Replace the script I gave above with this
<script>
$(function() {
$("#branch0").addClass("cu
$("#branch_buttons a").click(function(){
$("#branch_buttons a").removeClass("current")
$(this).addClass("current"
})
})
</script>
Replace
#branch_buttons #branch0:active{background
#branch_buttons #branch1:active{background
#branch_buttons #branch2:active{background
with
#branch_buttons #branch0.current{backgroun
#branch_buttons #branch1.current{backgroun
#branch_buttons #branch2.current{backgroun
Replace the script I gave above with this
<script>
$(function() {
$("#branch0").addClass("cu
$("#branch_buttons a").click(function(){
$("#branch_buttons a").removeClass("current")
$(this).addClass("current"
})
})
</script>
Forgot something
Replace
#branch_buttons #branch0:hover,#branch_but
#branch_buttons #branch1:hover,#branch_but
#branch_buttons #branch2:hover,#branch_but
with
#branch_buttons #branch0:hover,#branch_but
#branch_buttons #branch1:hover,#branch_but
#branch_buttons #branch2:hover,#branch_but
Replace
#branch_buttons #branch0:hover,#branch_but
#branch_buttons #branch1:hover,#branch_but
#branch_buttons #branch2:hover,#branch_but
with
#branch_buttons #branch0:hover,#branch_but
#branch_buttons #branch1:hover,#branch_but
#branch_buttons #branch2:hover,#branch_but
Active 6 days ago
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!!
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!!
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS
Create a new class by typing ".Ribbon": Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS
Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month7 days, 10 hours left to enroll
632 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.