With this code I want setVisibility 2 DIV, for the moment there is only 1 DIV = "Note-question-sub", i want add an other div :
<label for="note2" title="Passable">
<a role="button" class="btn btn-note btn-xs" onclick="setVisibility('Note-question-sub', 'block');">
<i class="fa fa-plus rouge" aria-hidden="true"></i>
<span class="sr-only">Passable</span>
</a>
<input type="radio" value="2" name="note" id="note2" />
</label>
This is my JS code:
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
Thank you so much in advance
You can call setVisibility twice
<label for="note2" title="Passable">
<a role="button" class="btn btn-note btn-xs" onclick="setVisibility('Note-question-sub', 'block'); setVisibility('YOUR_SECOND_DIV', 'block'); "><!--YOUR_SECOND_DIV is your second div-->
<i class="fa fa-plus rouge" aria-hidden="true"></i>
<span class="sr-only">Passable</span>
</a>
<input type="radio" value="2" name="note" id="note2" />
</label>
Related
I'm trying to have a mouse icon show up when I hover over the stars in this script using Bootstrap 4.
This is the form.
<div class="form-group">
<h4>Rate this product</h4>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<input type="hidden" class="form-control" id="rating" name="rating" value="1">
<input type="hidden" class="form-control" id="product_id" name="product_id" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
And here is the Javascript
$( ".rateButton" ).click(function() {
if($(this).hasClass('star-grey')) {
$(this).removeClass('star-grey').addClass('star-highlight star-selected');
$(this).prevAll('.rateButton').removeClass('star-grey').addClass('star-highlight star-selected');
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
} else {
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
}
$("#rating").val($('.star-selected').length); //count the num of star selected
});
This is how I want it to look https://imgur.com/a/sTkSQR2
I'm trying to have a mouse icon show up when I hover over the stars in
this script using Bootstrap 4
Showing mouse cursor to look like pointed hand (as in image) can be done using below css.
.rateButton {
cursor: pointer
}
Bootstrap way of doing it
Add role="button", then a cursor turns to hand. Bootstrap reference
Reboot includes an enhancement for role="button" to change the default
cursor to pointer. Add this attribute to elements to help indicate
elements are interactive. This role isn’t necessary for
elements, which get their own cursor change.
Your code will look like
<i role="button" class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<i role="button"> I am an i tag, hovering me should change the cursor to a hand</i>
<br />
<br />
<i> I am an i tag, but I dont have role="button" hovering me WILL NOT change cursor to a hand</i>
I prefer the first method if you don't want to edit the html
When clicking on button #btn-modal-clear I would like to select and add a class to the li where it's sub-child input is empty (value=""). How do I do this?
html:
<li>...<li>
<li>
<a class="myCheckboxLink" tabindex="0">
<span class="myCheckboxSpan">
<i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
</span>
<label class="radio">
<input value="" type="radio">Name
</label>
</a>
</li>
<li>...<li>
js:
$('#btn-modal-clear').on('click', function() {
$('.select-name').multiselect('select', ['']);
$('.select-name').multiselect('updateButtonText');
... .addClass("active");
});
So result should be:
html:
<li>...<li>
<li class="active">
<a class="myCheckboxLink" tabindex="0">
<span class="myCheckboxSpan">
<i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
</span>
<label class="radio">
<input value="" type="radio">Name
</label>
</a>
</li>
<li>...<li>
Fiddle: https://jsfiddle.net/ewm9pbqv/
You can use .filter() with .addClass() in this case:
$('li').filter(function() {
return $(this).find('input:radio').val() == "";
}).addClass('active');
Try this
$('li input[value=""]').closest("li").addClass('active');
Here is my HTML and jQuery code. The code is working good but the problem is when I click on one checkbox, the text "FINISHED" becomes visible below all the checkboxes instead of that one only.
My html code is:
$('.label__checkbox').click(function() {
if ($(".label__checkbox").is(':checked')) {
$(".finish").css("display", "block");
} else {
$(".finish").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
You can use DOM traversal method to target them in the current element context i.e. this
.closest() can be use to traverse up to label then use .next() to target the <span>
$('.label__checkbox').change(function() {
var finish = $(this).closest('.label').next(".finish");
//var finish = $(this).closest('.center').find(".finish");
if ($(this).is(':checked')) {
finish.css("display", "block");
} else {
finish.css("display", "none");
}
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
Suppose inside a document there are 4 label and I want the background become white when I click, but when I click another label, the previous label should back to its default (without using add class or remove class)
https://s25.postimg.org/kb1m0re0f/screenshot_9.png
<header>
<label for="slide_trigger1">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</label>
<label for="slide_trigger2">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</label>
<label for="slide_trigger3">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</label>
<label for="slide_trigger4">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</label>
</header>
<script>
$(document).ready(function(e) {
$('label').click(function() {
$(this).css({"background":"#fff","color":"green","border-radius":"100%" });
});
});
</script>
Use removeAttr() method in jquery for removing the inline style in the lable element.
$('label').click(function(){
$('label').removeAttr('style');
$(this).css({"background":"#fff","color":"green","border-radius":"100%" });
});
The following is the form created via php.
<form method="POST" action="http://localhost:8000/resources/11" accept-charset="UTF-8">
<label for="tag">Tagname</label>
<input class="form-control" id="tags" name="tagname" type="text">
</div>
<div id="tagnames" class="control-group clearfix">
<div class="tag-wrapper pull-left">
<button data-original-title='This is about quantum description.' data- placement="top" data-toggle="tooltip" class="btn btn-default tag_tooltip" type="button">
<span class="tagname">
quantum <i class='fa fa-times cancel'></i>
</span>
</button>
</div>
<div class="tag-wrapper pull-left">
<button data-original-title='This is about kids!' data-placement="top" data- toggle="tooltip" class="btn btn-default tag_tooltip" type="button">
<span class="tagname">
kids <i class='fa fa-times cancel'></i>
</span>
</button>
</div>
<input id="tag_ids" name="tag_ids" type="hidden" value="4,5">
</div>
<div id="tagname"></div>
<button type="submit" class="btn btn-primary submit_button">
<span class="fa fa-pencil-square-o"></span>
Update
</button>
<a class="btn btn-default" href="http://localhost:8000/resources">Cancel</a>
</form>
I want to alert(4) or alert(5) whichever corresponding tagname I click on.And I should be able to remove that id from the value.
Can anyone please help me?
I been scratching for two days for this problem.
I would suggest you to do this way by splitting into arrays and get the index:
$('.tag_tooltip .fa-times').on('click', function(){
var o = $('#tag_ids').val().split(','), // creates an array
idx = $(this).closest('.tag-wrapper').index(), // get the index of closest parent
value = o.splice(idx, 1); // remove the value
$('#tag_ids').val(value); // apply the new values
alert($('#tag_ids').val());
});