I am using jQuery to detect a click like this..
$(".clickable_link").click(function() {
console.log('Link Clicked');
}
<div class="clickable_link">
Click Me
</div>
<div class="clickable_link special">
Click Me
</div>
I am trying to determine if the div with 'special' has been clicked or if it just the div with 'clickable_link'.
What is the best way to do this? Should I use hasclass or is filter a better choice?
Something like this:
$(".click").click(function(){
if ($(this).hasClass("special")) {
alert("Its Special!");
}
});
.click {
width:100px;
height:50px;
background-color:#333;
float:left;
margin:10px;
color:#fff;
text-align:center;
padding-top:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">Not Special</div>
<div class="click special">SPECIAL!</div>
As an alternative to .hasClass, you can use .is, which allows for any selector, not just checking for a class.
if($(this).is(".special")) { ...
$(".clickable_link").click(function() {
if ($(this).is(".special")) {
alert("special clicked");
} else {
alert("nope");
}
});
.special { color: red; }
.clickable_link { cursor: pointer; margin-bottom: 0.5em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickable_link">
Click Me
</div>
<div class="clickable_link special">
Click Me
</div>
$('#id1').click(function() {
var x = $('#id1').attr('class') //dont use classname to fetch the element
x = x.split(' ')
if (x.length > 2)
alert('id1 has more than 2 classes');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='id1' class='myclass mysubclass'>dfdfdfsdfds</div>
You can bind different event handlers depending on whether the special class exists.
$(".clickable_link.special").click(function()
console.log("Special link clicked");
})
$(".clickable_link:not(.special)").click(function() {
console.log("Ordinary link clicked");
});
If there's common code for both types of links, you can put that in another function that gets called by each handler.
As example, use can can detect count of classes as like it:
$(".clickable_link").click(function() {
var classList = $(this).attr('class').split(/\s+/);
console.log(`count ${classList.length}`);
}
Related
In the following snippet if the user types something after of TEST it automatically becomes red. This is because user typed text is going inside the span. While it may be the desired behaviour sometimes, often user wants to type a new word and get out of span.
Is there a way to toggle between the two behaviours. Ideally, I would want that if the user presses right arrow key, they should get out of span.
.bg-red{
background: red;
}
<div id="wrapper" contenteditable="true">
<span class="bg-red">TEST</span>
</div>
you can try like this
.bg-red{
background: red;
}
<div id="wrapper" >
<span class="bg-red" style="float:left" contenteditable="true">TEST</span> <span contentEditable="true" style="float:left">Your Comment</span>
</div>
Dear try below its simple.
$(document).ready(function () {
$('<span id="newline"> </span>').insertAfter('.bg-red');
$('#wrapper').click(function () {
if ($("#newline").length) {
$("#newline").focus();
}
else {
$("#newline").focus();
}
});
$("#wrapper").on("keypress", function () {
$("#newline").focus();
})
});
.bg-red {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" contenteditable="true">
<span class="bg-red">TEST</span>
</div>
Here is a Pure JS execution of what you requested.
You add an event listener to listen for keypress.
You identify the key you desire.
Execute whatever you want.
Best Wishes
document.addEventListener('keydown', indentifyKeyPressed);
const wrapper = document.getElementById("wrapper");
function indentifyKeyPressed(event) {
if (event.key === "ArrowRight") {
//Creating a new element
const newElement = document.createElement("span")
newElement.setAttribute("class", "bg-green")
newElement.setAttribute("contenteditable", "true")
wrapper.appendChild(newElement).focus()
}
}
.bg-red {
background: red;
}
.bg-green {
background: green;
}
<div id="wrapper" >
<span class="bg-red" contenteditable="true" >TEST</span>
</div>
I am trying to learn jquery and I have 2 div elements that I want only with one button to toggle between hide and show. I tried to write everything that I want but I think the sintax is wrong.
<div id="first"></div>
<div id="second">
</div>
<button class="change">change</button>
CSS:
#first {
width:500px;
height:500px;
margin:0 auto;
background-color:#ccc;
}
#second {
width:500px;
height:500px;
margin:0 auto;
background-color:black;
display:none;
}
and I wrote as Jquery
$(document).ready(function() {
$('.change').click(function() {
$('#first').hide();
$('#second').show();
});
});
I was thinking about an if else statement however I am not sure if can handle that yet.
You can use toggle method of jQuery. Make your second div hidden on initialisation...
$(document).ready(function() {
$('.change').click(function() {
$('#first, #second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>
working example: https://jsfiddle.net/tanaydin/kjyq0eow/3/
documentation: http://api.jquery.com/toggle/
edited after: #Darren Sweeney's comment, much better with this selector.
First thing, you won't see emptys divs.
Example - 1
$(document).ready(function() {
$('.change').click(function() {
$('#first').toggle();
$('#second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="display: none">teste</div>
<div id="second">teste2</div>
<button class="change">change</button>
Example - 2
You can check if a element is visible with that:
$(document).ready(function() {
$('.change').click(function() {
if($('#first').is(":visible")){
$('#first').hide();
$('#second').show();
}else{
$('#first').show();
$('#second').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">test1</div>
<div id="second">test2</div>
<button class="change">change</button>
I have a set of div elements inside a container, .div-to-hide is displayed by default whilst .div-to-show is hidden.
When I click in .set, .div-to-hide should hide and .div-to-show should be visible. Next click should return the previous clicked element to its default state.
I need to display to buttons on click inside on .div-to-show.
<div class="container">
<div class="set">
<div class="div-to-hide">Some text</div>
<div class="div-to-show"></div>
</div>
<div class="set">
<div class="div-to-hide">Some text</div>
<div class="div-to-show"></div>
</div>
<div class="set">
<div class="div-to-hide">Some text</div>
<div class="div-to-show"></div>
</div>
</div>
So far I have this:
let lastClicked;
$('.container').on('click', function(e) {
if (this == lastClicked) {
lastClicked = '';
$('.div-to-hide').show();
$(this).children('.div-to-hide').hide();
} else {
lastClicked = this;
$('.div-to-hide').hide();
$(this).children('.div-to-hide').show();
$(this).children('.div-to-show').hide();
}
});
Can't get it to work properly tho.. I don't know what I am missing...
Any help is deeply appreciated!
UPDATE: got it working! Thanks everyone!
First, you are not using delegation (second parameter on the $.on() function) to define the .set element as your this inside the function.
If I understood correctly, you want to show the elements on the last one clicked and hide the rest. You don't really need to know which one you last clicked to do that
$('.container').on('click', '.set', function (e) {
// Now "this" is the clicked .set element
var $this = $(this);
// We'll get the children of .set we want to manipulate
var $div_to_hide = $this.find(".div-to-hide");
var $div_to_show = $this.find(".div-to-show");
// If it's already visible, there's no need to do anything
if ($div_to_show.is(":visible")) {
$div_to_hide.show();
$div_to_show.hide();
}
// Now we get the other .sets
var $other_sets = $this.siblings(".set");
// This second way works for more complex hierarchies. Uncomment if you need it
// var $other_sets = $this.closest(".container").find(".set").not(this);
// We reset ALL af them
$other_sets.find(".div-to-show").hide();
$other_sets.find(".div-to-hide").show();
});
Consider using class toggling instead.
$('.set').on('click', function(e) {
$('.set').removeClass('hidden-child');
$(this).addClass('hidden-child');
});
css:
.hidden-child .div-to-hide, .div-to-show {
display: none;
}
.hidden-child .div-to-show, .div-to-hide {
display: block;
}
This will make your code easier to reason about, and lets css control the display (style) rules.
Edit: changed class name for clarity; expanded explanation; corrected answer to conform to question
Try to make use of siblings() jQuery to hide and show other divs and toggle() jQuery to show and hide itself and also you will need to set click() event on .set, not in .container
$(document).on('click', '.set', function(e) {
$(this).find('.hide').toggle();
$(this).find('.show').toggle();
$(this).siblings('.set').find('.hide').show();
$(this).siblings('.set').find('.show').hide();
});
.show {
display: none;
}
.set div {
padding: 10px;
font: 13px Verdana;
font-weight: bold;
background: red;
color: #ffffff;
margin-bottom: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="set">
<div class="hide">1 Hide</div>
<div class="show">1 Show</div>
</div>
<div class="set">
<div class="hide">2 Hide</div>
<div class="show">2 Show</div>
</div>
<div class="set">
<div class="hide">3 Hide</div>
<div class="show">3 Show</div>
</div>
</div>
When I select box 2, I'd like the border to become black.
Another click it should go back to yellow.
The first click goes right but the second click stays black.
I can fix this by adding another class, but I don't want to.
How else can I do this?
This is my code:
<div class="aa">
<div class="bb">1</div>
<div class="cc"></div>
</div>
<div class="aa">
<div class="bb">2</div>
<div class="cc"></div>
</div>
$('.bb:last').addClass('yellow');
$('.bb').click(function () {
$(this).next('.cc').fadeToggle();
if (!$('.cc:last').is(':hidden')) {
$('.bb:last').addClass('black');
} else {
$('.bb:last').removeClass('black');
$('.bb:last').addClass('yellow');
}
});
.bb {
background:red;
width:90px;
height:30px
}
.cc {
background:blue;
width:90px;
height:30px;
display:none;
}
.yellow {
border:3px solid yellow;
}
.black {
border:3px solid black;
}
Sample fiddle
Much simpler:
LIVE DEMO
$('.bb:last').addClass('yellow');
$('.bb').click(function( e ) {
$(this).next('.cc').fadeToggle();
if(e.target == $('.bb:last')[0])
$(this).toggleClass('yellow black');
});
http://api.jquery.com/hasClass/
http://api.jquery.com/toggleClass/
Check this fiddle
You basically need to remove the class if it has it.
$('.bb:last').addClass('yellow');
$('.bb').click(function () {
$(this).next('.cc').fadeToggle();
if (!$('.cc:last').is(':hidden')) {
if ($('.bb:last').hasClass('black')) {
$('.bb:last').removeClass('black');
} else {
$('.bb:last').addClass('black');
}
} else {
$('.bb:last').addClass('yellow');
}
});
Very simple solution. Just use .toggleClass('yellow black'). toggleClass() will take care of everything for you. Any class in the space-separated list that is set will be cleared, and vice versa. To affect only the last .bb you could put it in it's own handler:
$('.bb:last').addClass('yellow').click(function() {
$(this).toggleClass('yellow black');
});
$('.bb').click(function () {
$(this).next('.cc').fadeToggle();
});
DEMO
I will try to be as simple as possible, i am trying to achieve a simple visibility toggle on a div when someone mouseover an a tag, kind of like this the four buttons on this link:
http://www.bt.com/help/home/
now the problem is i want it to appear or want it to be visible on mouseover of a tag, but when once i hide the div it never comes back, i have tried multiple things, some are
$("#function").on("mouseover",this, function () {
$(this).addClass("show");
})
$("#function").on("mouseout",this, function () {
$(this).removeClass("show");
$(this).addClass("hide");
})
Another is:
$("#function").hover(
function () {
$(this).addClass("hide");
},
function () {
$(this).removeClass("hide");
}
);
and also
$("#butt").on("mouseover", this, function(){
$(this).find("div#function").show();
//$("#function").toggleClass("visible");
});
$("#butt").on("mouseout", this, function(){
$(this).find("div#function").hide();
//$("#function").toggleClass("visible");
});
You should use mouseenter instead of mouseover. It is because mouseover event will be triggered when you move within the element. Go here and scroll to the bottom to check the different between mouseover and mouseenter. http://api.jquery.com/mouseenter mouseenter event will be fired only when you entering the element but not move within element.
This is the solution you want. It is almost similar to the site you provided.
JavaScript
<script>
$(document).ready(function()
{
$("#function").mouseenter(function(event)
{
event.stopPropagation()
$(this).addClass("show");
}).mouseleave(function(event)
{
event.stopPropagation()
$(this).removeClass("show");
})
});
</script>
Style
<style>
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>
HTML
<div id="function" class="functionBlock">
<h5>Demo </h5>
<ul>
<li>APPLE</li>
<li>SAMSUNG</li>
</ul>
</div>
Example on jsFiddle http://jsfiddle.net/TAZmt/1/
I got it, slight changes in selectors
$("#butt")
.mouseover(function () {
$("#function").show();
})
.mouseout(function () {
$("#function").hide();
});
$("#link").hover(function(){
$("#DIV").slideToggle();
});
and the html is
LINK
<div id="DIV" style="display:none">Your content in it</div>
This should do it. Check the jsfiddle. The basic idea here is to add a class (.shown) to your root-div on the mouseenter event, this class then makes the hidden <ul> in the div show up due to.
.shown ul{
display: block !important;
}
http://jsfiddle.net/28bb8/2/
EDIT:
Made some minor css changes, to better reflect the behaviour you're looking for, but you have to change the css to accommodate your own code basically. I hope this helps.
$("document").ready(function(){
$(".wrap").hover(
function () {
$(this).addClass("shown");
},
function () {
$(this).removeClass("shown");
}
);
});
You don't need Javascript here. This is possible with CSS alone
HTML:
<div class="panel">
<div class="teaser"><img src="http://lorempixel.com/300/400"/></div>
<div class="info">
<ul>
<li>Go here ...</li>
<li>Or there ...</li>
</ul>
</div>
</div>
CSS:
.panel {
width: 300px;
height: 400px;
}
.info {
display: none;
}
.panel:hover .teaser {
display: none;
}
.panel:hover .info {
display: block;
}
And JSFiddle for playing.
i hope this is the solution you're seaching for.
Just place the following code below your <body> tag:
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
And here is a link and the div which is toggled:
<a href="javascript: return false();" onmouseover="toggle('toggleme');">
Mouseover this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div is "toggled"</div>