I'm trying to set a mouse enter event that triggers if the element contains a certain text, but it's not recognizing the :contains parameter for some reason.
html:
<div class="sample">red</div>
<div class="sample">text</div>
javascript:
$(".sample").on({
mouseenter: function () {
if($("this:contains('red')").length > 0)
{ $(this).css("background-color","red")}
},
mouseleave: function () {
if($("this:contains('red')").length > 0){
$(this).css("background-color","yellow")}
}
});
This is the JSFiddle
Any help would be greatly appreciated!
Personally, I'd check the value of the .text() of the div. Your selector is off, since you're not selecting the JS this, but the string 'this'.
$(".sample").on({
mouseenter: function () {
if($(this).text() =='Red') {
$(this).css("background-color","red")}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sample">Red</div>
<div class="sample">Text</div>
use is:-
$(".sample").on({
mouseenter: function() {
if ($(this).is(":contains('red')")) {
$(this).css("background-color", "red")
}
},
mouseleave: function() {
if ($(this).is(":contains('red')")) {
$(this).css("background-color", "yellow")
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sample">red</div>
<div class="sample">text</div>
try this instead
$(".sample").on({
mouseenter: function() {
if ($(this).is(":contains('red')")) {
$(this).css("background-color", "red")
}
},
mouseleave: function() {
if ($(this).is(":contains('red')")) {
$(this).css("background-color", "yellow")
}
}
});
'This' should not be in quotes
Use jQuery .text()
$(".sample").on({
mouseenter: function () {
if($(this).text()=="red")
{
$(this).css("background-color","red")}
},
mouseleave: function () {
if($(this).text()=="red"){
$(this).css("background-color","yellow")}
}
});`
Rather than using the complicated:
if($("this:contains('red')").length > 0)
try instead the simpler:
if(this.innerHTML === 'red')
It works fine. You can also use:
if(this.textContent === 'red')
Tested this way of doing it and it works.
I'm not sure how to get the contains to work within that sort of statement - i have a feeling it is to do with that you are checking the element and not it's text, try using this instead:
$(function(){
$(".sample").on({
mouseenter: function () {
if(this.innerHTML.indexOf("red") != -1){
$(this).css("background-color","red")
}
},
mouseleave: function () {
if(this.innerHTML.indexOf("red") != -1){
$(this).css("background-color","yellow")
}
}
});
Related
Im currently trying to combine two if functions but somehow I only get errors. I already tried multiple ways of combining them with no result.
What I wanna do: I need to check if body has a specific class, if yes, a checkbox needs to be be unchecked.
What I tried to combine:
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
$(function() {
$(document).on("click", function(e) {
if ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});
My try on combining the snippets:
$(function() {
$(document).on("click", function(e) {
if (document.body.classList.contains('thatClass')) && ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});
You could shorten it and just call the function when you need.
$(function() {
checkCheckbox()
$(document).on("click", '.main-nav-slideout', checkCheckbox)
});
function checkCheckbox() {
$("#main-nav-toggle").prop("checked", $('body').hasClass('thatClass'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class='thatClass'>
<input type='checkbox' id='main-nav-toggle' />
<div class='main-nav-slideout'>Click me</div>
</body>
Try this:
$(function() {
$(document).on("click", function(e) {
if (document.body.getAttribute('class').split(' ').indexOf('thatClass')>-1 && ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});
I found a tutorial on adding popup boxes but want the box to appear on hover rather than on click. How can I alter this code to do that?
function div_show() {
document.getElementById('abc').style.display = "block";
}
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#youtube').on('click', function() {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#youtube'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({
opacity: 'toggle'
}, 'fast', easing, callback);
};
You can use the hover() method in jQuery:
$("#youtube").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "blue");
});
The first function is the method that will execute when the user's mouse enters, and the second function will be fired when the user's mouse leaves the element.
Demo: https://jsfiddle.net/2hLjs4qt/
I'm trying to make it comments counter div. If comments as 0 div class is red or more than 0 div class is blue, but javascript duplicating same colors.
$(function () {
if(parseInt($(".notification-counter").text()) > 0) {
//$(".notification-counter").hide();
$('.notification-container').addClass('notification-container2');
}
});
jsfiddle: http://jsfiddle.net/783h57zy/10/
thanks for answers!
You need to iterate over the divs using .each() and $(this):
$(function () {
$('.notification-container').each(function () {
if (parseInt($(this).text()) > 0) {
$(this).addClass('notification-container2');
}
})
});
jsFiddle example
$(function () {
$('.notification-counter')
.filter(function() {
return $(this).text() > 0;
}).parents('.notification-container')
.addClass('notification-container2');
});
jsfiddle
You need to iterate on the elements and then update the class.
You need to update your code to
$(function () {
$(".notification-counter").each(function(){
if(parseInt($(this).text()) > 0) {
//$(".notification-counter").hide();
$(this).parent().addClass('notification-container2');
}
});
});
Here is the updated fiddle - http://jsfiddle.net/783h57zy/12/
You need to loop through your divs and check them separately:
$.each: loop through divs
'.parent()': get the container div
$(this): use the current object
$(function () {
$('.notification-counter').each(function () {
if (parseInt($(this).text()) > 0) {
$(this).parent().removeClass('notification-container').addClass('notification-container2');
} else {
$(this).parent().removeClass('notification-container2').addClass('notification-container');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notification-container">
<div class="notification-counter">200</div>
</div>
<div class="notification-container">
<div class="notification-counter">0</div>
</div>
Since there are many instances of the same class on the page, you need to run through each instance and make the decision based on each element.
$(function () {
$('.notification-counter').each(function(){
if( parseInt($(this).html()) === 0 ) {
$(this).addClass('notification-container2');
}
});
});
Updated: http://jsfiddle.net/783h57zy/14/
Fiddle
i have a jquery which is for that, if the selected value is "<>"(Between) i want to change the style to display:block to an input box .. but here all the selected items css is changed
$(document).ready(function () {
$('.condition-change').change(function () {
if ($('select[name="SearchCondition"]').find('option[value="<>"]').attr("selected", true)) {
$('.second-value').css("display", "block");
}
});
});
Wrong condition
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').prop("selected")==true)
{
$('.second-value').css("display", "block");
}
});
});
You simply need to access the selected option value which you can get using val(), so put condition on val(),
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>") {
$('.second-value').css("display", "block");
}
});
});
Also using show and hide instead of setting css.
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>")
$('.second-value').show();
else
$('.second-value').hide();
});
});
Try,
$('.condition-change').change(function () {
if($(this).val().trim() === '<>') {
$('.second-value').show();
}
});
DEMO
Or
$('.condition-change').change(function () {
$('.second-value').toggle($(this).val().trim() === '<>');
});
DEMO I
// add .is(":checked") function to check whether "<>" value option is selected
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').is(":checked"))
{
$('.second-value').css("display", "block");
}
else
{
$('.second-value').css("display", "none");
}
});
});
I have the following markup:
<select style="display:none">
<option value='1'>1</option>
<option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
<li id='1'>1</li>
<li id='2'>2</li>
</ul>
and the following JQuery code:
$(document).ready(function() {
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
});
When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?
Put mouseenter and mouseleave events and change the value of a global variable say isOver.
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBoxData').mouseover(function(){
isOver = true;
}).mouseleave(function(){
isOver = false;
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
if(!isOver){
$('#comboBoxData').hide();
}
});
You do not require this:
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
instead use this inside $('#comboBoxData').on('click', 'li', function() {
if you are fine with plugin , you could just use this way:
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
You can get that plugin here
Also, I have changed the code without using the plugin:
Please check the updated answer:
DEMO
try with blur() function
$('#comboBox').blur(function () {
$('#comboBoxData').hide();
});
The blur event is sent to an element when it loses focus.
from http://api.jquery.com/blur/
Not exactly elegant but it works.
$("body").click(function(event){
if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){
$("#comboBoxData").hide(); }
});
$(document).ready(function() {
$('select').each(function() {
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
});