<script>
$(document).ready(function(){
$( "#clr" ).each(function(i) {
$("#clr"+id).fadeOut(0).delay(1000*i).fadeIn(1850);
)};
});
</script>
<div class="row" id="clr">
<span class="textstyle">WISHINDIA</span>
<span class="textstyle">SHOUTIT</span>
<span class="textstyle">SNAKE</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
</div>
</div>
I'm trying to load div one after another with some delay but unable to do so please help to do this
First of all, you would need to fix the syntax errors around the anonymous function passed to the .each function. Basically your closing ) bracket for .each should come after the closing } of the anonymous function passed to it.
Then, instead of iterating on #clr, you should be iterating over #clr > a - meaning on the anchor tags rather than the div element.
Also you don't have to specify the selector inside the .each function. You can instead refer to the elements using $(this).
Finally, you can either refer to the index of element inside .each as id or i. In the snippet below I have used id.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#clr > a").each(function(id) {
$(this).fadeOut(0).delay(1000 * id).fadeIn(1850);
});
});
</script>
<div class="row" id="clr">
<span class="textstyle">WISHINDIA</span>
<span class="textstyle">SHOUTIT</span>
<span class="textstyle">SNAKE</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
</div>
</div>
Try to use callback function:
$(document).ready(function(){
$('[id^="clr"]').each(function(i) {
let $this = $(this);
$this.fadeOut(0, function () {
setTimeout(function() {
$this.fadeIn(1850);
}, 1000 * i);
});
)};
});
Related
,hello Gentlemann please
1° How can i disable the click Behavior onclick through the css class please?
2° I can't use ID in the HTML Element because i'm not able to insert any ID in the code, so i need to use the Class the make the magic happen.
3° In all my Tries, none of them still works.
Element and CSS Class that i need to disable if clicked:
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>
Class: label.inner.all.disabled.reserved.my_numbers
1° First Try:
jQuery(document).ready(function() {
$("#inner.all.disabled.reserved").click(function() {
return false;
});
});
2° Second Try:
$(document).ready(function() {
$(".label.inner.all.disabled.reserved").click(function() {
$("label").off("click");
});
});
3° Third Try:
$(document).ready(function() {
$("#inner.all.disabled.reserved").click(function() {
return false;
});
});
4° Try:
$('#inner.all.disabled.reserved.my_numbers').disabled = true
I find it best to use the Event. You can use .preventDefault() to stop the event action.
Example:
$(function() {
function preventClick(e) {
e.preventDefault();
console.log(e.target.nodeName + " Click Prevented");
return false;
}
$("label.inner.all.disabled.reserved").click(preventClick).children().click(preventClick);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>
I specially registered the console.log() so that you could see that the click can be done only once.
Was it necessary?
$(".inner.all.disabled.reserved").click(function(){
console.log('This message will not show!');
}).off('click');
.inner.all.disabled.reserved:hover {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>
I want to look for the span element _fieldName and if it is followed by a .mandatory span element then do nothing. But if _fieldName is not followed by .mandatory span element then I want to add a text string immediately after the ._fieldName element. Here is the HTML:
<div class="container">
<span class="_fieldName">Name</span>
<span class="mandatory">*</span>
<span class="_fieldName">Email address</span>
</div>
This code works:
<script>
if($("span._fieldName").next("span.mandatory").length > 0)
{
$("span._fieldName")
}
else {
$( "<p>(Optional)</p>" ).insertAfter( "span._fieldName" );
}
</script>
But it adds (Optional) after every span._fieldName. I only want to add it after the Email address field because it does not have span.mandatory immediately after it. Is this possible?
Use: not !, .next() and .is()
$('._fieldName').each(function() {
if( !$(this).next().is('.mandatory') ) {
$(this).after('<p>(Optional)</p>');
}
});
<div class="container">
<span class="_fieldName">Name</span>
<span class="mandatory">*</span>
<span class="_fieldName">Email address</span>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
The main issue is that you're dealing with all span._fieldName elements at once. You need to loop through them and individually check them to see what their next element is. To do that you can use each(), like this:
$('span._fieldName').each(function() {
if ($(this).next('span.mandatory').length == 0) {
$("<p>(Optional)</p>").insertAfter(this);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<span class="_fieldName">Name</span>
<span class="mandatory">*</span>
<span class="_fieldName">Email address</span>
</div>
I have the below markup and I am trying to get the href but always getting undefined. Any help is appreciated.
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
$container = $('.wrapper');
$container.on('click', '.bottomP', function (event) {
console.log($(this).closest('a').attr('href'));
});
Assuming that you fix the class/ID issue noted in the comments by Mohammad you could use:
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
Aside from what Mohammad mentioned about needing to use .wrapper instead of #wrapper. I recommend using .find() instead of .closest(). .closest() does not work in IE, but that might not be an issue for you. you can also do something like this:
$("div.wrapper").on('click', '.bottomP', function () {
console.log($("div.wrapper a:first").attr('href'));
});
This will grab the first <a> tag inside the wrapper div.
I have this multiple elements with the same class.
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
1
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
2
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
3
</div>
</div>
If I click the the <a> tag on the first div, it should alert the value of .product-list-col value which is 1
if I click the second div of anchor tag, it should alert 2
here's the code for it
$(".dup-class").on('click', function() {
cont = $(this + " .product-list-col").text();
alert(cont);
});
Any solution for this stuff?
Here's the jsfiddle of it: http://jsfiddle.net/Vigiliance/PLeDs/3/
You could use siblings(), the reason why your code doesn't work is because it's selecting all .product-list-col
$(".dup-class").on('click', function () {
cont = $(this).siblings('.product-list-col').text();
alert(cont);
});
or use .next()
$(".dup-class").on('click', function () {
cont = $(this).next('.product-list-col').text();
alert(cont);
});
do this:
$(".dup-class").on('click', function() {
cont = $(this).next().text(); // this is the line where change done
alert(cont);
});
http://jsfiddle.net/PLeDs/2/
I have a div html element that has a click event set on it inline (not the way I want to do it but legacy code). See here
<div class="myDiv" onclick="triggerJavascript();" id="myDiv">
<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>
What I want to do is recognize which span tag the click event originates from test5, then dont carry out the logic in triggerJavascript function, otherwise complete logic in triggerJavascript.
How can I set this up? I am working with jquery.
You can use event.target in order to access the element. However, in order to get to this element you have to change your onclick attribute a little bit:
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
then you can access event in triggerJavascript:
function triggerJavascript(e){
var element = e.target;
}
See also this answer for a more detailed explanation why event is needed.
Demo ; Demo with text5 check:
<script>function triggerJavascript(e){
if(e.target.id === "text5")
alert("text 5 hit");
e.stopPropagation();
}
</script>
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
<span id="text1">Text 1</span> <!-- closing tags -->
<span id="text2">Text 2</span>
<span id="text3">Text 3</span>
<span id="text4">Text 4</span>
<span id="text5">Text 5</span>
</div>
You can't use onclick="triggerJavascript();", or the event target (the span which was clicked) will not be passed to the event handler.
Since you state you're using jQuery, use this:
$('#myDiv').click(function(evt) {
alert("The target is: " + evt.target.id);
});
HTML
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>
</div>
JavaScript
<script type="text/javascript">
function triggerJavascript(event) {
// event.target will catch the clicked element
if (event.target.id !== 'text5') {
// do something
}
}
</script>
DEMO
If you can't change the HTML, you could try something like this:
var triggerJavascript = (function(){
var clicked;
$("#myDiv span").click(function(e){
clicked = $(e.target).attr("id");
});
return function() {
if (clicked == "text5") {
return;
}
//do something cool...
}
})();
Although I guess, there's no guarantee that the jQuery click handler is executed before the actual triggerJavascript logic, so this might not always work correctly.