Adapt my js code to an input - javascript

I have this javascript code that creates a slider:
http://jsfiddle.net/samccone/ZMkkd/
Now, i want to use this code on a checkbox input. the problem is that the code creates a child element that slides in it's parent using a css position, and an input cannot have a child.
My idea was to use background-position and just slide the background of the input from left to right using css instead of using real positioning.
How can I adapt this script? It is quite easy I think but after a couple of tries I just gave up, i'm not good enough :).
Thanks for your help,
Christopher

Believe it or not, for checkboxes a switch effect is possible to create without JavaScript.
If you follow your checkbox with a label:
<input type="checkbox" id="jim" />
<label for="jim"></label>
You will find that you can select the label with the next sibling selector:
input + label { /* some CSS */ }
Why is that useful? Because using the pseudo selector :checked you can now style the label based on the state of the checkbox:
input + label { background-position: 0 0; }
input:checked + label { background-position: 100% 0; }
Clearly, due to the for="jim" attribute, clicking on the label will change the state of the checkbox. So if you hide the checkbox, you end up with a styled, clickable label.
input { display: none; }
Of course, labels can have children so you can be as fancy as you want with your recreation of a switch. And you should be careful to include :focus styles as well, for people who tab to your checkbox rather than click on it.
For browsers that do not support the :checked pseudo class (IE8 and below), it's pretty easy to emulate with a global handler and a 'checked' class. Something like:
jQuery(document).bind('change', function(e){
var elem = jQuery(e.target);
// If this is not a checkox, do nothing.
if (elem.attr('type') !== 'checkbox') { return; }
// Add or remove checked class based on current state.
if (elem.attr('checked')) { elem.removeClass('checked'); }
else { elem.addClass('checked'); }
});
...should do it.

You might need to store some data in object properties (or the .data() api), but your background position idea should work just fine. Just replace your calls to .offset().left with .css('background-position') (you'll have to split and parseInt the string it returns tho) and keep plugin' away at it.

Related

How to check if element is not visible due to parent is hidden thanks its class

I have an array of checkboxes and want to switch them (check/uncheck) as a group, but only these which are really visible.
<style id=dynamicStyle>DIV.filterLevel3{display:none;}</style>
<div class="filterLevel3">
<input type=checkbox id=cbx_123456 name=cbx_123456 class=cbxForSwitch>
... more elements belonging to the checkbox,
... always hidden on shown together
</div>
The dynamicStyle.innerHTML may be changed by another javascript. Changing the visibility works fine, but I need to select all checkboxes of class "cbxForSwitch" that are currently visible.
I have seen many examples using jQuery, but all of them were inspecting css attributes of said element or his style etc. I need to get actual visibility after the explorer have implemented all rules of style including inheritance.
Using jQuery you can get the parent element's css attributes by using the parent() function. If the parent's 'display' css property is set to none, you can then check the box by using the jquery function prop().
$('input[type=checkbox]').each(function() {
if ($(this).parent().css('display') !== 'none') {
$(this).prop('checked', true);
}
});
Here is a JSFiddle

How can I organize interaction between two divs?

I have two div on page. One of them is hidden, and another one is visible. Both of them is on the same place, and form layers. The first is on background (we don't see it), and the second is overlay (we can see it).
I want to have button to be able to switch visibility of div. When I press the button it must change visibility of div (fist does to the background, the second goes to overlay).
How can I do it with jQuery?
UPD
Here is my try http://jsfiddle.net/0qth6jdn
The problem is I don't know how to make layers with div.
If you just need to change the visibility, Jquery's .toggle() may be the easiest way to go.
Jquery Toggle Docs
If you set both div's classes to be the same, even easier. Just call toggle on the button's click event:
$(".myClass").toggle();
Here's a simple example:
JsFiddle Example
EDIT
Here is your own fiddle updated. Instead of visibility: hidden, I've changed your style to display: none;, as it allows you to use Jquery's .toggle() without having to check for any condition:
Your JsFiddle Updated!!
Do this when your button is clicked (you have to change IdOfDiv1 and IdOfDiv2 to your actual div ids):
$("#IdOfDiv1").toggle();
$("#IdOfDiv2").toggle();
You can do like this:
You create a <input type="checkbox"> ABOVE THE <div> you want.
You give it a nice id like 'div-toggler`.
You set this css:
#div-toggler ~ #your-hidden-div {display:none;}
#div-toggler:checked ~ #your-hidden-div {display:block;}
You create a new <label for="div-toggler"> inside the other <div>
Style it the way you wish, to look like a button.
If you care about old browsers, that don't support :checked on css, use [checked] instead.The you create a <label onclick="var e=document.getElementById(this.getAttribute('for'));e.setAttribute('checked',e.checked);" for="div-toggler"> if it doesn't work after the css change.
UPDATE:
After seeing the new update, it's clear:
if ($('#first').visibility == 'hidden' && $('#second').visibility == 'visible'){
should be
if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
UPDATE 2:
Actually, this is the right code:
window.replaceDiv=function() {
if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
$('#first').css('visibility','visible');
$('#second').css('visibility','hidden');
}
}
Here it is: http://jsfiddle.net/gughtms7/
There are a million ways to do this. If both divs have an id, you can simply toggle them, like so:
$('#id-of-your-button').on('click', function(){
$('#id-first-div').toggle();
$('#id-second-div').toggle();
});
Another way would be to toggle a class on a parent element:
$('#id-of-your-button').on('click', function(){
$('#parent').toggleClass('switch');
});
And than apply all changes via css
#parent #id-second-div {
display: none;
}
#parent.switch #id-first-div {
display: none;
}
#parent.switch #id-second-div {
display: block;
}
It all depends on your situation

JQuery toggle two classes at once

Here is the code: http://jsfiddle.net/celiostat/NCPv9/
the 2 Jquery plugin enables to change (and set):
- background color of div to gray
- text color to red.
Problem is I have to exactly point the mouse exactly ON the text so that text changes color too.
I would like to change background Div color AND text by clicking -- anywhere -- in the div
Tried various combination from other post..but nothing worked.
(ideally I would also like to change picture at the same time !)
$(".item_unselected").on("click", function() {
$(this).toggleClass("gray_cliked_box");
$(".item_unselected").not(this).removeClass("gray_cliked_box");
});
$(".item_text_in_menubar").on("click", function() {
$(this).toggleClass("blue_cliked_text");
$(".item_text_in_menubar").not(this).removeClass("blue_cliked_text");
});
You're fairly close, but the reason you have to click on the text is because you're only setting the class for the text once you click on it - you never set it from when you click on the div. Thankfully, you can optimize (and fix) your code by only having one event. If you click on a div, you simply set both items.
You can do this using the find method in jQuery to find the span that you want to modify when clicking on the div. The updated JS is as follows:
$(".item_unselected").on("click", function () {
$(".item_unselected").removeClass("gray_cliked_box");
$(".item_text_in_menubar").removeClass("blue_cliked_text");
var $this = $(this);
$this.addClass("gray_cliked_box");
$this.find(".item_text_in_menubar").addClass("blue_cliked_text");
});
Updated Fiddle: http://jsfiddle.net/NCPv9/3/
What this actually does, is remove the class from all the objects, and then just simply add the classes back to the ones you want. You also don't have to use toggleClass. You know you're adding it so just use addClass.
This is a CSS problem, not a jquery problem. I updated your last CSS selector to:
.gray_cliked_box .item_text_in_menubar { /*for jquery*/
color: red;
}
and the text changes to red when clicked.
The added selector says that children of .gray_clicked_box with a class .item_text_in_menubar should be red. This supercedes other definitions of .item_text_in_menubar because it's a more specific selector.
http://jsfiddle.net/NCPv9/4/

Jquery Focusing on div to apply CSS style

I have various styles, such as:
.line{}
And:
.line:focus{}
Each have their own unique look.
What I want to do is have jquery focus on a div with the .line class and thus change it's style to line:focus. However, when using $('.line').focus();, the style does not change, and I'm reasonably sure the div with .line class is not focused on.
Any ideas/suggestions? Thanks in advance :).
jQuery's focus would work, demo
Edit:
Without a focus-able element, I would use toggleClass demo2
$(".").focus() only works on certain elements.
DIV isn't a supported element to be focused.
You can try to recreate focus using .click
$("div").click(function(){
$(this).toggleClass('focused');
if ($(this).hasClass('focused')){
// do something
}else{
// do something else
}
});
div elements don't support a focus state that I'm aware of, so you'll have to manually change the divs style anytime one of its inputs is focused (and of course change it back when the input is blurred).
$("div.line input").focus(function() {
$(this).closest(".line").addClass("line-focus");
}).blur(function() {
$(this).closest(".line").removeClass("line-focus");
});
And of course change
.line:focus { }
to
.line-focus { }
$('input').focus(function() {
$(this).css('background','green');
});
See example

Change background color for rows of an HTML table on click

I need that when i check a checkbox i apply different background color to HTML table rows according to and ID of a user in database using jquery, and then i uncheck the checkbox go to previous state.
For the record i am not asking for code i am asking for concept.
http://www.freeimagehosting.net/image.php?ef44cf44a5.jpg
I assume the issue is how to store each row's individual background colour.
You could store each colour in an individual attribute:
<tr bg_checkbox_active="#FFFFFF">
but there is no W3C valid way to do this in HTML 4.x (see discussion e.g. here).
The best idea that comes to mind is declaring each row's colour in a CSS class:
....
.row10.active { background-color: #FFFFFF }
.row11.active { background-color: #FAFAFA }
.row12.active { background-color: #BCBCBC }
....
and then have jQuery switch the row's class according to the check box state. It keeps the code clean; the CSS syntax causes a bit of an overhead when used with a lot of rows but that is probably going to be negligible.
Update re one checkbox to change all rows: that is even easier to do with CSS.
....
table.active .row10 { background-color: #FFFFFF }
table.active .row11 { background-color: #FAFAFA }
table.active .row12 { background-color: #BCBCBC }
....
and then switch the table's active class.
You want to use a selector that matches the table rows, get the id of the user from the row and choose the color, then use the css function to set the background-color. You can use the data method to store the previous color. When your checkbox is unchecked, simply get the previous color using data, and restore it.
If the id of the user isn't included in the row or relatable to the row somehow, then you'll need to change the table and add it, otherwise it isn't possible.
Here's a little code to get you started -- this is the "check" part.
$('tr').each( function() {
var id == $(this)... // get user id
var color = chooseColor( id ); // figure out color somehow
$(this).data( 'previous-color', $(this).css('background-color') );
$(this).css( 'background-color', color );
});
EDIT: Based on your comment, I think CSS classes may be a better solution for you -- just assign the group name as the class. Then in your CSS have different CSS selectors for .groupX and .groupX.active, .groupY and .groupY.active, etc. Then all you need to do is add/remove the active class from the rows on checkbox toggle. I don't know if the "active" class name is the most semantically appropriate, but it's convenient for the example.
CSS
tr.group-ANIM { /* no special formatting */ }
tr.group-ANIM.active { background-color: #f00; }
tr.group-ZZZ { }
tr.group-ZZZ.active { background-color: #0f0; }
$('#toggleBox').click{ function() {
var checked = $(this).filter(':checked').length > 0;
if (checked) {
$('tr').addClass('active');
}
else {
$('tr').removeClass('active');
}
});
Theoretically you could use jQuery calls to do pretty much all of this. You'd use the .change() event bound to a TR to handle the row clicking.
http://api.jquery.com/change/
Inside your .change() handler function, you'd use the jQuery .css() method to update the style for each row.
http://api.jquery.com/css/
Or even better use the .addClass() and .removeClass() methods to update the class for the row.
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/
Regardless, you'd need to have a unique style or class applied to the background of each individual row when the page is initialized.
http://www.w3schools.com/css/css_background.asp

Categories

Resources