at hover append span one time - javascript

this is my html:
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
this is my js function:-
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
i want to this type of output:-
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
<span> ***</span>
</ul>
here i am try to append one span in mouse hover on li.
its work perfect.
but i want to append only one time after last li.
thanks.

I found the example on the jQuery api manual, isn't this what you want?
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
Or you don't want to remove the span when mouse leave, and just want to append one span:
$("li").hover(function () {
if ($(this).find('span').length == 0) {
$(this).append($("<span> ***</span>"));
}
});

Use one:
$("li").one("hover", function () {
$(this).append($("<span> ***</span>"));
});
http://api.jquery.com/one/

Simply check first if the span already exists. Remember that 'hover' can take two functions if you want to remove the span after the mouse leaves. This is the equivalent to mouseover and mouseleave combined.
$("li").hover(
function () {
if ($(this).is(':empty')) {
$(this).append($("<span> ***</span>"));
}
});
References: hover, empty, mouseover, mouseleave

Use modern JS!
const lis = document.getElementsByTagName("li");
let span;
for (const li of lis) {
li.addEventListener("mouseover", function() {
// Do something cool
if (!span) {
span = document.createElement("span");
span.innerText = " ***";
li.parentElement.append(span);
}
}, {once : true}); // (optional) This will make it fire only once for each li
// You could add one "once" listener to just the ul as well
}
Documentation, CanIUse

Related

Prevent click event for wrapper when inner link is click

Here is the example for UI element construct,
HTML
<div class='wrap'>
<a class='inner-link' href="#">Link</a>
</div>
CSS
.wrap
{
background:#CDD4E0;
width:300px;
height:100px;
padding:20px;
}
.wrap:hover
{
background:#868B93;
}
jQuery
$('.wrap').click(function () {
alert("Handler for wrap container click.");
});
$('.inner-link').click(function () {
alert("Handler for inner link click");
});
What I want to do is to prevent the container with the class .wrap click event when I click the link inside.
You can reference this fiddle example.
Current code fire $('.wrap').click when I do for $('.inner-link').click.
Add if to check if the target does not contain class inner-link.
UPDATE: Oh, the comment has a better way to solve it.
$(".wrap").click(function (e) {
if (e.target.className !== "inner-link") { // add this
alert("Handler for wrap container click.");
}
});
$(".inner-link").click(function (e) {
e.stopPropagation(); // or add this
alert("Handler for inner link click");
});
Try to use event.stopPropagation
Your jQuery codes should be modified as below:
$('.wrap').click(function () {
alert("Handler for wrap container click.");
});
$('.inner-link').click(function (event) {
event.stopPropogation();
alert("Handler for inner link click");
});
thanks #riceEater for the idea with the class. I solved it with this:
var elem = $('.parentElem');
elem.on("click",function(e) {
var hitElementClass = e.target.className;
if (hitElementClass.includes("my-wrapper-class")) {
elem.find("input").trigger("click");
}
});

Check if button has been clicked more than once

I have a set of 3 tabs and everytime i click on the same tab it replays the fade-in animation and blinks and i need it to only show the animation when i click on a new tab and not display the fade-in animation when i click on the same tab.
Its because it removes and re-adds the same class everytime i click at it.
what i currently have is:
(function ($) {
var tabs = $(".tabs li a");
tabs.on("click", function () {
var content = this.hash.replace("/", "");
tabs.removeClass("active");
$(this).addClass("active");
$("#content").find("section").hide();
$(content).fadeIn(200);
});
})
<ul class="tabs">
<li><a class="active" href="#/one">Tab 1</a></li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
What i have tried:
// if tab is clicked/selected then remove animation
if(!$(tabs).data("clicked")) {
$(content).fadeIn(200);
} else {
$(content).fadeIn(0);
}
$(".active").data('clicked', true);
// if click count is higher than 1 then remove animation
var trigger = $(this),
clickCount = trigger.data('clickCount');
clickCount++;
trigger.data('clickCount', clickCount);
if(clickCount > 1) {
$(content).fadeIn(0);
}
Have you tried like that :
var tabs = $(".tabs li a");
tabs.on("click", function () {
if( !$(this).hasClass("active") ){
var content = this.hash.replace("/", "");
$("#content").find("section").hide();
$(content).fadeIn(200);
$(".tabs li").find(".active").removeClass("active");
$(this).addClass("active");
}
});
I'd suggest always check if active class exists before adding it.
And only if it doesn't exist add this class and animation.
In this case if active class exists you will not be able to add this class again and the animation not be triggered again.
in JavaScript
element is the button you need specifically.
you can get the button id using a simple Js query
var element = document.getElementById('buttonID');
element.on('click', (){
let counter = 0;
return function inner() {
counter++;
console.log('Number of clicks: ' + counter);
};
})

Check if element is hovered over in jQuery

How can one check if the cursor is hovered over in jquery or js.
I have tried $('#id').is(':hover') but this doesnt seem to be working at all.
I have to mention that i am calling this line inside of a hover() function could this maybe be the problem?
here is my code:
$(document).ready(function() {
/* On hover function, over the menu items */
$('nav ul li').hover(function(){
$('nav ul li').css("background-color", "");
$('#append').css("background-color", "");
$(this).css("background-color", "#9999FF");
$('#append').css("background-color", "#9999FF");
var append;
if($('#menu-item-12')) {
append = 'news';
}else if($('#menu-item-9:hover')) {
append = 'account';
}else if($('#menu-item-11').is(':hover')) {
append = 'check out';
}
$('#appendp').empty();
$('#appendp').append(document.createTextNode(append));
});
Hope someone can tell me whats wrong.
here is jsfiddle link, i did my best :) https://jsfiddle.net/xsv325ef/
A nice way to do it is to store the related texts into an Object literal,
and recall the text depending on the hovered element ID:
fiddle demo
$(function() { // DOM ready shorthand ;)
var $appendEl = $('#appendp');
var id2text = {
"menu-item-12" : "unlock this crap",
"menu-item-9" : "check your gdmn account",
"menu-item-11" : "check the hell out"
};
$('nav ul li').hover(function(){
$appendEl.text( id2text[this.id] );
});
});
Regarding the colors... use CSS :hover
You just need to check if hovered item has this id.
Something like this: https://jsfiddle.net/hrskgxz5/5/
if(this.id === 'menu-item-11') {
append = 'check out';
alert('hovered');
}
$('li').hover(function(){
$(this).css("background-color", "#9999FF");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
You should notice that jQuery .hover() function takes 2 handler function, and here you only provide one. Check the official documentation here.
In your case, you may just use .mouseover() to add a class on top of it, and then set your styles in css file. (Document here)
For example:
$(document.ready(function(){
$('nav ul li').mouseover(function() {
$(this).addClass('active');
});
});
If you do need to toggle the class for that element, the hover function should be as follow:
$(document.ready(function(){
$('nav ul li').hover(function() {
// Stuff to do when the mouse enters the element
$(this).addClass('active');
// Other styles you want to do here
// ...
}, function() {
// Stuff to do when the mouse leaves the element
$(this).removeClass('active');
// Other styles you want to remove here
// ...
});
});
Edit:
As I found out, jQuery .hover() function DO accept single handler. In that case, you'll have to let the class toggle inside:
$(document.ready(function(){
$('nav ul li').hover(function() {
// Stuff to do when the mouse enters the element
$(this).toggleClass('active');
});
});

Bootstrap nav-tabs with progress bar

I am building a registration system and I have a progress bar and a bootstrap nav-tabs in that page.
I am trying to setup the JQuery so that the progress bar advances with the nav-tabs. Here is a visual.
I tried to come up with a simple if else conditional jquery using hasClass and addCLass functions but never got to make a dent.
Something like this:
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if (".nav-tabs") hasClass(".active"); {
$(".checkout-bar li").addClass("active");
}
});
});
I am attaching a CODEPEN
Any idea on how to do this client side? I'd rather keep C# out of this one
http://jsfiddle.net/o3637uwh/2/ (update)
in html remove class form all checkout-bar li, except first
HTML
<ul class="checkout-bar">
<li class="active">Get Started</li>
<li class="">About You</li>
<li class="">Looking For</li>
<li class="">Review</li>
</ul>
JQ (update)
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var href = $(e.target).attr('href');
var $curr = $(".checkout-bar a[href='" + href + "']").parent();
$('.checkout-bar li').removeClass();
$curr.addClass("active");
$curr.prevAll().addClass("visited");
});
});
You are not specifying which .checkout-bar li to select. You have to get the index of the .active tab and with this index select the checkount li, I think you shoud do something like this:
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
activeTabIndex = $('.nav.nav-tabs > li.active ').index();
(".checkout-bar li.active").removeClass('active');
$(".checkout-bar li:eq("+activeTabIndex+")").addClass('active')
});
});

Closing submenu by clicking outside of main menu doesn't work in IE but works in Firefox & Chrome

I have the a javascript code which close a mwnu with submenu made with ul and li elements.
A submenu is opened and if I click in other region of page or outside of menu, that submenu must be closed.
This script works only in Firefox and Chrome but not in IE.
The JS code:
$(function(){
$(".item").on("click focusout", function(){
$(".test").toggleClass("no-display");
});
$(document).on("click", function(e){
if(!$(".test").hasClass("no-display") && $(e.originalEvent.target).closest(".mega").length === 0) {
$(".test").addClass("no-display");
}
});
});
And HTML code:
<ul class="mega">
<li>Item1</li>
<li class='item'>Item2
<ul class='test no-display'>
<li>SubItem1</li>
<li>SubItem2</li>
</ul>
</li>
<li>Item3</li>
</ul>
More better, I provide Jsfiddle to see the issue in action
Here's one approach to this which is, I think, simpler:
$("html").click(function() {
if(!$(".test").hasClass("no-display")) {
$(".test").addClass("no-display");
}
});
$(".test").click(function(event) {
event.stopPropagation();
});
$(".item").click(function() {
$(".test").toggleClass("no-display");
});
May be you can use stopPropagation() for this. Write like this:
var box = $('.item');
var sub = $('.test');
box.click(function() {
sub.show(); return false;
});
$(document).click(function() {
sub.hide();
});
box.click(function(e) {
e.stopPropagation();
});
​
Check this for more http://jsfiddle.net/xemhT/2/
I would try this with BODY click listener, it works for me in IE:
jQuery('body').click(function(event) {
var target = jQuery(event.target);
// your code
});
Use the following code:
$(document).click(function(){
if( $('.test').is(':visible') ) {
$('.test').hide();
}
});

Categories

Resources