Using CSS Sprites as Buttons & jQuery - javascript

my partner gave me a job to do because he wants me to learn jQuery. I'm making a section of our landing page that has three buttons that replace the content for each button. I've got that down (at least the basic function) but I need some help getting the sprites to toggle on when clicked and also toggle off when another button is clicked.
I'd like the first button to be on its active state (class .des1activecontent) when the page initially loads, and to switch when the other buttons are clicked.
Here is the jsfiddle of my most recent attempt at getting the buttons to style correctly. Having trouble with class selectors.
NOTE: Look at the jsfiddles please, I only posted this from it because it's required for me to post this.
$('#linkwrapper div a').on('click', function(){
var lmb = this+"activecontent";
$('#linkwrapper div a').removeClass(lmb);
$(this).addClass(lmb);
});
http://jsfiddle.net/HTHnW/86/
And here is the jsfiddle of the whole plugin so you can have a better understanding of what I'm doing. Thanks again in advance.
http://jsfiddle.net/89F9H/

You can add multiple classes to any DOM element, and style them in CSS:
.des3.activecontent {
background-position: 0 -375px;
}
.des1.activecontent {
background-position: 0 -250px;
}
.des2.activecontent {
background-position: 0 -625px;
}
JS:
$('#linkwrapper div a').on('click', function () {
var lmb = "activecontent";
$('#linkwrapper div a').removeClass(lmb);
$(this).addClass(lmb);
});
http://jsfiddle.net/mblase75/HTHnW/87/

Related

Make bootstrap div fade out when adding 'hidden' class

I am using Bootstrap for css and I need help in fading out a div when the class 'hidden' is toggled.
My site structure is pretty simple: there are 3 main container divs: search, wait and show. Essentially, show is the lowest positioned one, wait is on top of show and search is at the very top.
All I need is for search to fade out over 3 seconds when this Jquery event is fired:
$('.search').toggleClass('hidden');
I don't want it to just instantly disappear. Same with the wait div. I have tried using
$(".searchBar").fadeOut("slow", function() {
$('.searchBar').toggleClass('hidden');
});
But it doesn't work. The fadeout/fadein don't seem to have any visible effect. Since the hidden class is already in bootstrap, I do not want to create another custom one; there's got to be a way to accomplish this.
Bootstrap hidden class is:
.hidden {
display: none;
visibility: hidden;
}
You can easily achieve this:
$('.searchBar').toggle( "slow");
Use something like this:
$(".searchBar").fadeOut("slow", function() {
$('.searchBar').addClass('hidden').show(0);
});

How to add the hover effect to an element that is nested to an element with hover?

I have a table that consists of 7 columns and a variable number of rows. When I hover over a table row, the play button appears in the column #2. This is implemented with help of less:
.table-hover > tbody > tr {
border-left:4px;
border-left-color:transparent;
border-left-style:solid;
&:hover {;
border-left-color:#active-element-color;
>thtdbackground-color:#f5f5f5
}
>td:nth-child(2) {
background-image:url(images/play_icon.png);
background-position:center;
background-repeat:no-repeat
}
}
and it looks as follows:
You can see the hovered row has the play button. What I am trying to do - is to implement the additional (extra) hover for the button.
If it was a link element, I could add just pseudo :hover class to the link and get what I want. But this is not the link, when I click the play button - data must be send to a server.
I found the solution here on JSFIDDLE but the problem is that in my case all images added via CSS and in the jffiddle example, images added via the input element in html code. Additional problem is that there are 2 images and I want to use a single image
So the question is - what is the right way to implement extra hover?
It can be accomplished two ways, using purely just CSS or with the aid of javascript (jQuery).
Using CSS3 :nth-child() Selector:
#yourTable td { background: #ccc; height: 2em; width: 8em; }
#yourTable tr:hover td:nth-child(2) { background: red; }
fiddle demo here: http://jsfiddle.net/7F3ge/
or
Using jQuery to add hover class to a specific DOM element:
$('document').ready(function(){
$('#yourTable tr').hover(function() {
$(this).children('td:eq(1)').toggleClass('hover');
});
});
fiddle demo here: http://jsfiddle.net/u527u/3/

Changing bootstrap icon position when clicked

First, I'm very new to bootstrap so try to bear with me on this one. I've been working on a website that has a bootstrap sidebar I'm trying to get working right. I've seen other examples of this but I'm not sure what to do.
On the sidebar, I am using an <i> element icon before each item which in this case is toggle icon-chevron-right. What I would like to do is when someone clicks on an item on the sidebar, revealing the sub-items, the icon will change to toggle icon-chevron-right to toggle icon-chevron-down.
I have played around with some JavaScript trying to get it working but to no avail. Any insights would be helpful.
You could use a sprite with both your right and down arrows in then use CSS to toggle between the two by adjusting the background position.
Like:
element {
background: url(images/whatever.png) no-repeat;
}
element:active {
background: url(images/whatever.png) no-repeat 10px 10px;
}
play around with the position until you have it right
You can change the class on the icon, when the <a> clicked:
$('a').click(function () {
var icon = $(this).find('i');
if (icon.hasClass('icon-chevron-down')) {
icon.removeClass('icon-chevron-down').addClass('icon-chevron-right');
}
else {
icon.removeClass('icon-chevron-right').addClass('icon-chevron-down')
}
});

Making an image change once it is clicked

I’ve already spent hours looking at as many online resources and stackoverflow questions as I can find but for some reason I just can’t figure this out.
I’m attempting to use CSS and image sprites to make a link display as an image that changes once it is hovered over and once it has been clicked. I’ve played round with CSS and looked at JavaScript for far too long now and I just need some direction on how to get it working.
I’ve managed to make it change once its hovered over however what i really need to do is have the image change once it is clicked. So the begin with it displays the play button and when its clicked it displays a pause button, click it again and it displays the play button etc.
From what i can gather i will need to use JavaScript and an onclick event. However I’m not sure how this would work or how to use it with image sprites.
My CSS so far looks like this
.testclass .stratus {
background-position: -1px -1px;
width: 21px;
height: 21px;}.
.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height:
21px;}.
However this only effects the play button and when it is hovered over. Now i need a way to display the pause button when the play button is clicked and vice versa.
Image sprites URL.
http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png
URL of page im trying to get this to work on.
http://www.priceofmilk.co.uk/uncategorized/ddd-2
Can this be achieved using CSS and HTML or will I also need to use some JavaScript? Any assistance would be much appreciated.
I made a simple example. I use background colors and an anchor but you can easy implement this in your situation.
update
Updated the code so it uses your images.
HTML
<a class="play_pause">PLAY</a>​
CSS
.play_pause {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing {
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}​
And the JS:
$(document).ready(function() {
$(".play_pause").click(function() {
$(this).toggleClass('playing');
});
});​​
​
JsFiddle example
If you only wanted to detect the first click, you could do this in pure CSS by giving the link an id and using the :target pseudoclass (e.g. a#theid:target {...})
But since you need to detect a second click, you'll need to use JS to toggle between CSS classes. The basic way is to use an event handler:
document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};
You will have to use JavaScript to accomplish the switching, there is no way to accomplish such logic with pure CSS.
The easiest way to go would be to have two classes play and pause. Through CSS you declare which part of the sprite you want to show for each of those classes. Then you attach a click-event listener to the element with JavaScript, and in the click-event callback you remove class play from the element and apply class pause instead, and vice versa.
MDN has a good article on how to attach event-listeners to an element. And this SO question discuss how you can add/remove classes on an element.
That is simple where have you read?
jQuery('.testclass .stratus').click(function{
jQuery(this).toggleClass('played');
})
css:
.played{
background-position: -1px -29px;
}
Example using .querySelectorAll and .addEventListener, with your current sprite. No jQuery is used.
var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
e.addEventListener('click', function () { // this fn generates the listener
var pause = false; // captured in scope, not global
return function () { // this is the actual listener
this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
}
}(), false); // the () invokes the generator

jQuery: How to animate two elements without them bumping each other

I'm trying to get a 100% width table to "slide over" to reveal a "panel" behind it.
Here is a jsFiddle with an example of where I'm at and the "bumping" that happens: http://jsfiddle.net/z93se/2/ (using jQuery UI)
Click on a table row to see the transition happen. During the animation, the table "pops under" the new expanded panel. Then after the animate it goes back to the left where it belongs.
How do I get them to both slide at the same time and keep their positions?
PS - I'm okay with the moving which elements have the padding and floating as long as the end result works.
Update:
Two other requirements that I have: 1) The table needs to be 100% width before the animation. 2) The panel on the side that is "sliding out" needs to be fixed width.
Update 2:
New jsFiddle that shows the width of the table using a border (so it's easier to play with). http://jsfiddle.net/z93se/14/
Which brings up a second problem. You have to click the row twice for it to begin acting like I expect it to. It's default state is with the table expanded and the panel hidden. After clicking a row twice, it starts working closer to how I expect (except it still has the problems in the original question). Help on this would also be appreciated.
Finally got it working. Had to use the animate() function and pass in a callback to hide the div when it is done.
See this jsFiddle: http://jsfiddle.net/744BL/
Notes: Using IDs as selectors caused some problems that switching over to classes didn't.
This css would do
html, add container with id task-details-container to task-details
CSS
#task-list table {
width: 75%;
}
.details-active {
padding-right: 0px;
}
#task-details-container {
width: 25%;
float: right;
}
#task-details {
width: 100%;
padding: 0;
display:none;
}
I hope this is what you wanted, please see the css i have changed
**Updated

Categories