replace radio button with css button and keep label in div - javascript

have created a fiddle http://jsfiddle.net/4QZED/2/. (Explosion Pills updated version - http://jsfiddle.net/ExplosionPIlls/4QZED/4/ )Instead of showing the normal radio, or replacing the radio with an image. i would like to replace it with a div i can dress up as a button and on hover the class changes and on click the class changes. but also on click the hidden radio is selected. but also require the label (label in reference to the text showing e.g as below .co.uk .com .net etc.) to be inside the div/button. or be able to add text to the div button. is this possible?
$(function() {
$("input [name='domain_ext']").each(function() {
if ($(this).prop('checked')) {
$(this).hide();
$(this).after($("<div class='radioButtonOff'> label </div>"));
} else {
$(this).hide();
$(this).after($("<div class='radioButtonOff'> label </div>"));
}
});
$("input.radio").click(function() {
if($(this).attr('src') == 'radiobuttonOn') {
$(this).attr('src', 'radiobuttonOff');
$(this).prev().attr('checked', 'false');
} else {
$(this).attr('src', 'radioButtonOn');
$(this).prev().attr('checked', 'true');
}
});
});

I've attempted to improve upon your solution to get it to work the way you want. You had several errors. Most importantly, there is a vastly important difference between input[name=domain_ext] and input [name=domain_ext] (the space is the descendant selector). You were also using $(this) in the checked event to apparently change the divs, but the event was bound to the inputs. There's also a difference between input.radio and input[type=radio].
$("input[name='domain_ext']").each(function() {
if ($(this).prop('checked')) {
$(this).hide();
$(this).after("<div class='radioButtonOff'> label </div>");
} else {
$(this).hide();
$(this).after("<div class='radioButtonOff'> label </div>");
}
});
$("input[type=radio]").change(function() {
$(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
});
http://jsfiddle.net/ExplosionPIlls/4QZED/4/

Related

change active menu-items font on click

So, i've got this menu which is linked to some dynamically displayed content, I've been trying to write some js-code that changes the font of the currently active item. My problem is now that it never deselects that item if it isn't active anymore.
jsfiddle:
https://jsfiddle.net/z4uhL5wv/2/
jquery:
$(document).ready(function() {
$("a.menu2").click(function(e) {
$('.ShowClickedContent').html($($(this).attr('href')).html()); //dynamic content
var clicks = 0;
if(clicks % 2 == 0){
$(this).css('font-family','gillsans');
}else{
$(this).css('font-family','gillsanslight');
}
++clicks;
});
});
Any help would be greatful. Note: i need to use that exact showClickedContent query in the final solution due to problems arising with margin otherwise.
https://jsfiddle.net/ynrnt6xL/
$(document).ready(function() {
const buttons = $('.menu2');
const clear = function() {
$.each( buttons, function(index, btn) {
$(btn).removeClass('selected');
})
}
$.each( buttons, function(index, btn) {
$(btn).click( function(e) {
clear();
$(this).addClass('selected');
});
});
});
You can do it with CSS! I didn't mess with fonts, but I did it with font-size as an example:
a:active, a:focus {font-size:15px;}
Just replace the font-size with font-family and whatever...

Click one item on a row only

Is it possible to disabled the other buttons in a row, when I have selected at least one?
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
$(this).addClass('selected');
}
});
The result should be the user can click on any buttons in a row, but once clicked, the other items on that row should be disabled already. However, the user can still select buttons from the other items in other rows.
Here's the sample fiddle: http://jsfiddle.net/1vuf1gm7/3/
Thanks!
buttons are nothing but siblings of each other in parent div. you can use .siblings() to target other button and remove the class selected from it.
also you should use .toggleClass() instead of add/remove with hasClass condition:
$('.bet-offer div.option').click(function(){
$(this).siblings('.option').removeClass('selected')
$(this).toggleClass('selected')
});
Working demo
Try something like this:
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.bet-offer div.option.disabled').removeClass("disabled");
} else {
$(this).addClass('selected');
$('.bet-offer div.option:not(.selected)').addClass("disabled");
}
});
This will add a disabled class to all the non-selected options.
This will disable the other buttons in the same row while one button has the class selected:
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).siblings().css('pointer-events', 'auto');
} else {
$(this).addClass('selected');
$(this).siblings().css('pointer-events', 'none');
}
});

Why is removeclass not working when div is collapsed?

here is my fiddle
why when a div is clicked from another div does the arrow not appear back when the other div has collapsed? i have it set up so when the div does not have the class 'clicked' it then removes the class 'arrowhide' but it when you do the above it doesn't seem to remove the 'arrowhide' even though the div no longer has the class 'clicked' here is my code...
$(function timelinetiles() {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if ($('.selected').children().hasClass("clicked")) {
$('.details').addClass('show');
}
if ($('.timelineTile').hasClass("clicked")) {
$(this).children('.arrow').addClass('arrowhide');
} else {
$('.arrow').removeClass('arrowhide');
}
if ($('.selected').children().hasClass("clicked")) {
$(this).children('.header').height(430);
} else {
$('.header').height(80);
}
});
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
$('.arrow').removeClass('arrowhide');
});
Your line 4 also needs to remove the arrowhide class, like this:
$('.selected').children().not(this).removeClass('clicked')
.children('.arrow').removeClass('arrowhide');
Updated fiddle: http://jsfiddle.net/mcx0t0fh/2/
Alternatively, you could do away with the arrowhide business, and change your .arrow.arrowhide CSS rule to .clicked .arrow
Alternative fiddle: http://jsfiddle.net/mcx0t0fh/4/

click elsewhere

i have problem with click event. click to another element with event(click), doesn't count like click elsewhere. I want active one element or none.
demo: http://jsfiddle.net/WP4RH/
code:
$('span').click(function(){
var $this = $(this);
if($this.hasClass('active')){
$this.removeClass('active')}
else $this.addClass('active');
$('div').click(function(){
if (!$this.has(this).length) {
$this.removeClass('active');
}
});
return false;
});
Add this at the beginning of your span event handler:
$('.active').removeClass('active');
Demo
This is assuming that you want multiple clicks on the same span to retain active. If you don't want that, then let me know and I can modify the code.
​
For starters, You should move the div handler outside and then removeClass based on div element.
$('span').click(function(e) {
e.stopPropagation();
$(this).parent().find('span').removeClass('active');
$(this).toggleClass('active');
});
$('div').click(function() {
$(this).find('span').removeClass('active');
});
DEMO: http://jsfiddle.net/WP4RH/1/
Don't bind a click handler inside a click handler, just check if the target is the div or the span inside the click handler instead. Also, when adding the active class to this, just remove it on any sibling span :
$('span').on('click', function(){
$(this).toggleClass('active').siblings('span').removeClass('active');
});
$('div').on('click', function(e){
if (e.target == this) $('span').removeClass('active');
});
FIDDLE
​
If you want to keep the toggle-off functionality when the span itself has been clicked, then you can use the following. Also, note that you're binding an event handler each time a span is clicked.
http://jsfiddle.net/WP4RH/7/
$("span").click(function() {
$(this).siblings("span").removeClass("active"); // remove from other spans
$(this).toggleClass("active"); // toggle this span
return false;
});
​
$("div").click(function() {
$(this).find("span").removeClass("active"); // remove from all spans
});

Only select one row at a time using jquery

I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:
//Mouseover any row by adding class=mouseRow
$(".mouseRow tr").mouseover(function() {
$(this).addClass("ui-state-active");
});
$(".mouseRow tr").mouseout(function() {
$(this).removeClass("ui-state-active");
});
$('.mouseRow tr').click(function(event) {
$(this).toggleClass('selectRow');
});
The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?
You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').not(this).removeClass('selectRow');
$(this).toggleClass('selectRow');
});
Here's a working example.
Use this script at end of your html,meant after </body> tag
<script>
$("tr").hover(function()
{
$(this).addClass("hover");
}, function()
{
$(this).removeClass("hover");
});
$('tr').click(function(event) {
$('tr').not(this).removeClass('click');
$(this).toggleClass('click');
});
</script>
This is css that highlight your row:
.click{
background:#FF9900;
color: white
}
.hover{
background:blue;
color: white
}
here is the link of working example
Working example
Hope this will help
While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:
$(document).on('click', '.DTA', function (event) {
$('.DTA').not(this).css('backgroundColor', "#FFF");
$(this).css('backgroundColor', "#FAA");
});
Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/
$('.mouseRow tr').click(function(event) {
if (!$(this).hasClass('selectRow')){
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
} else {
$('.selectRow').removeClass('selectRow');
}
});
Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
Using jquery-ui .selectable function with tbody id='selectable':
$(function() {
$("#selectable").selectable({
filter: "tr", //only allows table rows to be selected
tolerance: "fit", //makes it difficult to select rows by dragging
selected : function(event, ui) {
var rowid = "#"+ui.selected.id; //gets the selected row id
//unselects previously selected row(s)
$('tr').not(rowid).removeClass('ui-selected');
}
});
});
Each of my table rows, which were created dynamically have an id of 'task'+i
You could try this:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').each(function(index) {
$(this).removeClass('selectRow');
});
$(this).toggleClass('selectRow');
});
You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.

Categories

Resources