jQuery Switch Button On/Off Should Set Different Data-status & Onclick Function - javascript

Still learning jQuery and will be thankful for any help.
I am currently using this jQuery Switchbutton https://github.com/olance/jQuery-switchButton
It uses a checkbox as an input type, and creates span tags with labels.
How would I say that I want on_label to have data-status="accept", and off_label data-status="decline"?
HTML:
<input type="checkbox" id="accept-offer"/>
JS:
$("input#accept-offer").switchButton({
on_label: "Accept",
off_label: "Ignore"
});
Thanks!!

You can try to do like this:
$('.switch-button-label.on').data('status','accept');
$('.switch-button-label.off').data('status','decline');
or:
$('.switch-button-label.on').attr('data-status','accept');
$('.switch-button-label.off').attr('data-status','decline');

Related

Unexpected response for checkbox jQuery

I have horizontal jQuery checkbox. It should display some text when it is clicked and remove the text when it is clicked again and unchecked. However, when i first load the page and click on the box nothing happens. Then when i click it again to uncheck the text appears. It seems the opposite behaviour of what i expect is going on. Here is the code:
(I can solve this problem by simply inverting the boolean sign but i want to understand why this is happening).
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
<label for="checkbox-h-2a" onclick="onfilter()">Vegetarian</label>
</fieldset>
</form>
<script>
function onfilter(){
if ($("#checkbox-h-2a").prop('checked')){
document.getElementById("hehe").innerHTML = "Yo there";
}
if (!($("#checkbox-h-2a").prop('checked'))){
document.getElementById("hehe").innerHTML = "";
}
}
</script>
You're already loading jQuery , so just use jQuery for everything - it is much easier , works better, really the only downside to jQUery is having to load it - and you're already doing that. So I would suggest using something like this:
$(function(){
$(document).on('click', '#checkbox-h-2a', function(){
if ( $(this).is(':checked') ) {
// Do stuff
}
else{
//Do stuff
}
});
});
Also, I hope you are actually closing your input element in your HTML , and that this is just a typo in your question
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
try:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<label for="checkbox-h-2a" >Vegetarian
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" />
</label>
</fieldset>
see how the label goes around the checkbox? also you can get rid on the inline function in HTML with the jQuery I provided
EDIT:
2 problems - one you selectd jQuery 1.6 , to you .on() you need a newer version , if you must use old jQuery let me know ,
the other problem is that all jQuery code must be wrapped in
$(document).ready(function(){
/// code here
});
or for short:
$(function(){
// code here
});
The problem is at the time of clicking on the label, the checkbox's checked has not been changed, so you have to toggle the logic (although it looks weird) or attach the handler to the onchange event of the checkbox input instead:
<!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>
Demo.
It involves how a label works, when clicking on the label, it looks for the attached input element via the for attribute and trying to change the appropriate property (checked for checkbox, radio, ...) or focusing the element (for textbox fields). So at the clicking time, it processes/calls your handler first. Hence the problem.
Note that this answer just fixes the issue, not trying to improve your code.

Show/Hide div with button

I have a a HTML page with a button which shoes hidden content when pressed. I am using jquery code which I have bundled into my HTML page. When I press the button to show the content in the hidden div it works find, however when I press the button again to hide the content nothing happens. If anyone could help me that would be great. Also how would I be able to target multiple buttons. Would I just paste the same jquery code and label it '2' and then '3' and so on for example? Any working examples would be great. Here is my code:
HTML:
<head>
<script>
$(document).ready(function() {
$("#spoiler1").hide();
$("#button1").click(function() {
$("#spoiler1").show(300);
});
});
</script>
</head>
<button id="button1">Adventurer ▼</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox" /></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
</div>
Thanks in advance for any help or advice.
Use .toggle() instead
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
Demo
Update
And the idea about having mutiple buttons, I've come up with the approach that you should try, use classes instead of IDs for the buttons and provide the same ID to divs that you want to toggle. This might take some design issues but you can manage and this is just a basic guideline to move forward.
As Markup is too long for mutiple divs so i'm posting only.
JQuery
$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});
Updated Fiddle
$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
if($("#spoiler1").is(':visible')){
$("#spoiler1").slideUp(300);
}
else
{
$("#spoiler1").slideDown(300);
}
});
});
Demo:
http://jsfiddle.net/YvUDV/
Use toggle instead:
$('#button1').bind("click",function(){
$("#spoiler1").toggle("fast");
});
As for multiple button event. Assign a class name to the button so you can select by class.
$('button.toggle-div').click(function(){...});
As for visibility toggle, there are a number of ways.
Use toggle() in jQuery. (the most obvious choice, but in practice we could also..)
Use toggleClass() link to
add/remove a class which has a display:none css rule. (more flexible, you can toggle other css styles like the font color, background, etc.)
Use some
two-way binding JavaScript libraries like knockoutjs or angular.
(Probably an overkill for a small application. But it will
definitely reduce the amount of coding if it is a large scale.)

Enable/disable checkboxs using links instead of checkboxs

I have a checkbox to add and remove a service. Currently it looks like this:
<div class="cknow" align="center" valign="top">Add/Remove to Checkout
<input type="checkbox" id="ckNow_<?php echo $i;?>" name="ckNow[<?php echo $i;?>]"></input>
</div>
I've also got a script that says this:
$('input[id^=ckNow_]').each(function(){
$(this).bind('click',function(){
if($(this).attr('checked'))
{.... does some stuff }
It's working great as a single checkbox but I'd like to the make the text 'Add/Remove' to be text links (without the input box of the checkbox) so that when Add is clicked it registers as CHECKED and when Remove is clicked, it registers as UNCHECKED.
How can I do this?
You can use the label element to assign text to a checkbox, then use CSS to hide the checkbox like so:
HTML
<label>Add/Remove
<input type="checkbox" id="ckNow_" name="ckNow" class="hideme">
</input>
</label>
CSS
.hideme {
display:none;
}
You can use:
$('[type=checkbox]').attr('checked', true); // or false
Note: of jQuery 1.7 you should use .prop('checked', ...) instead:
$('[type=checkbox]').prop('checked', true); // or false

Highilight a button after pushing javascript

I'm trying to make simple image gallery with html/css and a bit of javascript.It's all up and working, but one function.
I want that when I open the index.html 'All' would be already highlighted by my custom style and if pushed on another button highlight would go to that particular button.
html of a button looks like this
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
edit: I ended up using OnResolve's method and it worked just fine!(even for someone who doesn't know any JS) Thank you all for help :)
Assuming your highlighted class is called activeButton, you could do the following with jQuery
$(function () {
$(".cat-itemem").click(function () {
$(".cat-itemem").removeClass('activeButton');
$(this).addClass('activeButton');
}
})
I've created an example with jsfiddle for you with simple jQuery. You can see each aspect (markup, css, and jquery).
http://jsfiddle.net/p5ZUv/7/
You can certainly append styles on button click via pure css, but to unhighlight others you need javascript.
HTML:
<input type='button' value='All' class="cat-itiem highlighted" id='filterAll'>
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
<input type='button' value='Logo' class="cat-itiem" id='filterLogo'>
<input type='button' value='Photography' class="cat-itiem" id='filterPhotography'>
CSS (Add yours)
.cat-itiem{}
.highlighted{background:green}
JS (Jquery is used)
$('.cat-itiem').click(function(){$('.cat-itiem').removeClass('highlighted'); $(this).addClass('highlighted')}

linking HTML checkbox with element to hide when checkbox is unchecked

What's a good pattern for adding additional data to an HTML element? For example, I'd like to link a checkbox to HTML I'd like to hide when the checkbox is unchecked. Like the for attribute of a label element, I want to specify the linkage in markup so I can write a simple, generic script to iterate through all checkboxes and hook up a jquery event handler to do the hiding/showing.
For example, in this HTML:
<input type="checkbox" id="showFoo" />
<div id="foo">
Some HTML here. Hide this when the checkbox is unchecked.
</div>
What's a good to let my script know that #showFoo is related to #foo? Ideally something that doesn't make my HTML non-validating or and doesn't require me to use a specific naming convention for IDs. Extra credit if it makes my script more efficient.
use a data-[key] attribute to identify what #showFoo should control
example jsfiddle
HTML:
<input type="checkbox" id="showFoo" data-toggles="foo" />
<div id="foo">
Some HTML here. Hide this when the checkbox is unchecked.
</div>
jQuery:
$('#showFoo').change(function() {
$('#' + $(this).data('toggles')).toggle();
});
This seems like a perfect case for data elements.
<input type="checkbox" id="showFoo" data-relateddiv="foo" />
Then in an event handler on the checkboxs:
$('#' + $(this).data("relateddiv")).show();
You can use the "rel" attribute
<input type="checkbox" id="showFoo" rel="foo" />
$('#showFoo').click(function(){
var element_id = $(this).attr('rel');
var element = $('#'+element_id);
if(element.is(':hidden')){
element.slideDown();
//element.show();
}
else{
element.slideUp();
//element.hide();
}
});
I use this currently
element.each(function(i, e) {
var checked = $(e).prop('checked'),
foo = */Relationship betweeen element and foo*/;
foo .toggleClass('invisibleClass', checked)
.toggleClass('visibleClass', !checked);
});
in case you have multiple foos and elements (you have to define the relationship between them first)
Run it on the event of your choice
Try below
if (checkboxIsChecked) {
foo.visibility:visible;
} else {
foo.visibility:hidden;
}

Categories

Resources