jquery - change background color on click - javascript

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%" });
});

Related

Star Rating mouse click when hovering over stars

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

open div on click of image

I have a very simple module to develop. On click of an image I need to open up a div element that I have created.I have attached my HTML and javascript file.When I am loading the page the div wont be coming because I have given style="display:none
myfunction() {
document.getElementById('Chatbot').style.visibility = "visible";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
<img src="sticky.png" style="width:50px;height:50px">
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
document.getElementById('Chatbot').style.display = "block";
function myfunction() {
document.getElementById('Chatbot').style.display = "block";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
Some Image
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
Avoid using inline scripts and also avoid capitalising the first letter of your ID or class name.
Just add an event listener to your #chat anchor link that loads a function which sets the css display property of your div to block on click like this:
/* JavaScript */
var chat = document.getElementById("chat");
var div = document.getElementById('chatbot');
function showDiv(){
div.style.display = "block";
}
chat.addEventListener("click", showDiv);
/* CSS */
a {text-decoration: none; padding: 5px; background-color: green; color: white;}
#chatbot {display: none;}
<!-- HTML -->
<a type="button" href="#Chatbot" id="chat">Open Div</a>
<hr>
<div id="chatbot">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
It can be a simple way
<script>
$( document ).ready(function() {
$('#chat').click( function(){
if ( $('#Chatbot').hasClass('active') ) {
$('#Chatbot').removeClass('active');
} else {
$('#Chatbot').addClass('active');
}
});
});
</script>
Add lil css
<style>
.active {
display:block!important;
}
</style>
Your HTML
<body>
<div id="chat">
Some Image
</div>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

Adding class to parent element where sub-child element input value is empty?

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');

On click and visibility for 2 DIV

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>

Semantic Ui Dropdown on hover

I want my semantic ui dropdown menu to trigger on hover instead of click, it works on click, but not hover.
Javascript:
$('.ui.dropdown').dropdown({on:'hover'});
HTML:
<div class="ui dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div:
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
Fiddle Demo
This is the same answer as above, just cleaner.
$('.dropdown').dropdown({transition: 'drop', on: 'hover' });
you can take this, it works for me
$('.dropdown').dropdown({transition: 'drop' }).dropdown({ on: 'hover' });
I use this:
$('.menu > .ui.dropdown').dropdown({
on: 'hover'
});
And it works well. On your case, try to select the parent of dropdown item.

Categories