How can I use .append() with effects like .show('slow')
Having effects on append doesn't seem to work at all, and it give the same result as normal show(). No transitions, no animations.
$(function () {
var html = "<div id='str'>Hello</div>";
$('#btn').click(function () {
$('#cont').append(html);
});
});
<button id='btn'>click</button>
<div id='cont'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
try this:
$(function () {
$('#str').hide();
var html = "";
$('#btn').click(function () {
$('#str').toggle(1000);
});
});
<button id='btn'>click</button>
<div id='cont'></div>
<div style="display:none" id='str'>Hello</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you really are desperate about the adding HTML
$(function () {
$('#str').hide();
var html = "";
$('#btn').click(function () {
$('str').innerHTML ="Hello"
$('#str').toggle(1000);
if($('str').style.display=="none"){
$('str').innerHTML =""
}
});
});
<button id='btn'>click</button>
<div id='cont'></div>
<div style="display:none" id='str'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I tried to remove a button and alert() when i click it, then the function will append a 'same' button to a container div, after searching senior's legacy,
i tried to use on()/live()/delegate()/ unfortunately they not work.
<body>
<div id="container"></div>
<hr>
<button onclick="clicked()">Other one</button>
<hr>
</body>
<script>
$(document).ready(function(){
var i = 0;
$("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!</button>");
$("[id='btn_sub']").delegate(this,"click",function(){
$("#container").empty();
$("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!"+i+"</button>");
i++;
});//tried click/on click/live
});
function clicked(){
alert(1);
}
</script>
Finally, in this example, the clicked function put out of $(document).ready() and the part of alert worked.
Is there any other method to do the same effect?
and why on()/live()/delegate()/ not work?
Thanks.
First off $("[id='btn_sub']") can be replaced with $("#btn_sub"), then it's actually better to use a class as you might have many buttons.
This is a working example as an illustration: https://codepen.io/antoniandre/pen/XoNNpO
$(document).ready(function(){
$("#container").on("click", '.btn_sub', function() {
removeButton(this);
});
});
function addButton() {
$("#container").append("<button class='btn_sub'>Delete Me!</button>");
}
function removeButton(btn) {
btn.remove();
}
With the on() bound on the container, you actually make sure any matching button .btn_sub will get this event attached to them when they are created in the future.
Regarding live, it does the same as on but is now deprecated so you can forget it. https://api.jquery.com/live/#live-events-handler
Use on function to attach event.http://api.jquery.com/on/
$(document).ready(function () {
var i = 0;
$("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!</button>");
$("#container").on("click", "[id='btn_sub']", function(){
$("#container").empty();
$("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!" + i + "</button>");
i++;
});
});
function clicked() {
alert(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container"></div>
<hr>
<button onclick="clicked()">Other one</button>
<hr>
</body>
var i = 0;
var btn = "<button id='btn_sub' onclick='clicked()'>Click Me!</button>";
($(function(){
$("#container").append(btn);
$("#container").on("click", '#btn_sub', function() {
$("#container")
.empty()
.append($(btn).text($(btn).text() + " " + i++));
});
}));
function clicked() {
alert(i);
}
<body>
<div id="container"></div>
<hr>
<button onclick="clicked()">Other one</button>
<hr>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have some html code with below structure. when I click on tag a with "moreCases" class,div with class "container-cases" is become show and when I click on "lessCases" div with class "container-cases" is become hide but tag a with "moreCases" do n't become show.how I can solve it?
HTML:
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
JavaScript:
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
You have to target the parent() before using prev():
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
.hide{
display: none;
}
.show{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
Remove the last .addClass('hide')
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show');
});
});
Working example
There is no need to iterate over the .moreCases & .lessCases instead you can simply add the click event to it. Beside since the click is on an a tag , prevent the default behavior by adding e.preventDefault
$(document).ready(function() {
$(".moreCases").click(function(e) {
$(this).next().removeClass('hide').addClass('show');
$(this).removeClass('show').addClass('hide');
});
$(".lessCases").click(function(e) {
e.preventDefault();
$(this).parent().removeClass('show').addClass('hide');
$(this).parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
$(document).ready(function(){
$('.quality-link').click(function () {
$('#aboutus').fadeOut('slow', function () {
$('#quality').css("display","block").hide().fadeIn('slow');
});
});
});
});
It should work fine.
Just check your code for syntax errors.
$('.quality-link').click(function() {
$('#aboutus').fadeOut('slow', function() {
$('#quality').fadeIn('slow');
});
});
$('#bring_back_about').click(function() {
$('#quality').fadeOut('slow', function() {
$('#aboutus').fadeIn('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="quality-link">click me</button>
<button id="bring_back_about">bring back about</button>
<div id="quality" style="display: none;">
Quality div
</div>
<div id="aboutus">
About us
</div>
I have this function that shows the ALT of an image on img click. How can I toggle this function and hide the #show when there will be a Self.close click that hides the lightbox?
$("img").on("click", function() {
$("#show").text($(this).attr("alt"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">
Thanks in advance.
A simple solution:
$("img").on("click", function() {
var alt = $(this).attr("alt");
$("#show").text($("#show").text() === alt ? '' : alt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">
You need to keep track of which state it's currently in. There's a number of ways of doing this but this is likely the easiest:
var isShowingText = false;
$("img").on("click", function() {
if (isShowingText) {
$('#show').text('');
} else {
$("#show").text($(this).attr("alt"));
}
// Toggle the flag. false becomes true, true becomes false
isShowingText = !isShowingText;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">
You could do this by setting the text to nothing if it is filled using:
$('#show').text('');
Example:
$('img').on('click', function () {
$('#show').text($('#show').text() === '' ? $(this).attr('alt') : '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">
EDIT:
Another solution might be to toggle a CSS class:
// Set the alt text
$('span').text($(this).attr('alt'));
$('img').on('click', function () {
$('span').toggleClass('hide');
});
.span {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="hide"></span>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">
Here is my code:
HTML:
<div id="a">
aaa
</div>
<div id="b">
<button>hide aaa</button>
</div>
link
JS:
if($('#a:visible').length > 0) {
$('a').click(function() {
alert('a');
});
}
$('button').click(function () {
$('#a').hide();
});
http://jsfiddle.net/kgj4uw6f/
If I click "hide aaa" and then I click on the link, alert is shown. I don't want to show the alert when #a is hidden. How can I change my code?
It's inside-out. You have to check visibility when the click happens.
$('a').click(function() {
if ($('#a:visible').length > 0) {
alert('a');
}
});
$('button').click(function() {
$('#a').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">
aaa
</div>
<div id="b">
<button>hide aaa</button>
</div>
link
JS:
I got it working changing your condition to inside the click event, like so:
$('a').click(function() {
if($('#a:visible').length > 0) {
alert('a');
}
});
$('button').click(function () {
$('#a').hide();
});
http://jsfiddle.net/kgj4uw6f/2/
Here's another way of doing it! You can check the visibility of an element using $(element).is(":visible").
$('a').click(function() {
if($('#a').is(":visible")) {
alert('a');
}
});
$('button').click(function () {
$('#a').hide();
});