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">
Related
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>
first, there are codes I wrote.
<body>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
<script>
$(function(){
$('#btn').click(function(){
$('.popup').show();
$('#sure').on('click', function(){
var $box = "<div class='box'></div>";
$('.panel').append($box);
});
$('#cancel').on('click', function(){
$('.popup').hide();
});
});
})
</script>
</body>
then,there are steps i did.
the result
why i click the cancel button at first, and next time i click Sure button, there appears two DIVs actually.I just want one div.
How to solve this problem?
Do not add the event-handler as many times you click on #btn.
Bind click handlers for "sure" and "cancel" out of the click handler for "#btn"
$(function() {
$('#btn').click(function() {
$('.popup').show();
});
$('#sure').on('click', function() {
var $box = "<div class='box'>Added</div>";
$('.panel').append($box);
});
$('#cancel').on('click', function() {
$('.popup').hide();
});
})
.popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
If elements in the pop-up are created dynamically, Use Event delegation
$(function() {
$('#btn').click(function() {
$('.popup').show();
});
$(document).on('click', '#sure', function() {
var $box = "<div class='box'>Added</div>";
$('.panel').append($box);
});
$(document).on('click', '#cancel', function() {
$('.popup').hide();
});
})
.popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
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();
});
After some research, the below code should works fine to change the image source but it's not?
$("#li_1").mouseover(function () {
$(this).attr("src", "images/hover_12.png");
}, function () {
$(this).attr("src", "images/ori_12.png");
});
HTML Code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
<style>
li{
display: block;
}
</style>
</head>
<body>
<div id='wrap'>
<div id="clickable_div">MENU</div>
<div id="nav_menu">
<ul class="dropDown">
<li id="li_1"><img src="images/ori_12.png"></li>
<li id="li_2"><img src="images/ori_14.png"></li>
<li id="li_3"><img src="images/ori_15.png"></li>
<li id="li_4"><img src="images/ori_16.png"></li>
</ul>
</div>
</div>
</div>
</body>
<script>
$("#li_1").mouseover(function () {
$(this).attr("src", "images/hover_12.png");
}, function () {
$(this).attr("src", "images/ori_12.png");
});
$('#wrap').mouseover( function(){
$('#nav_menu').slideDown();
});
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();
});
</script>
</html>
DEMO.CSS:
#clickable_div {width:166px; background-color:#9c9c9c;}
*{margin:0; padding:0}
#nav_menu{width:166px; height:auto; background-color:#CCC;display:none;}
#wrap{ width:166px }
The idea is very simple. I'm trying to mouseover an element and have a dropdown feel to list the items, and for each item I hover, the image of li will be replaced.
You seem to be trying to change the src of the LI element, not the IMG element.
You will also need a mouseout event to change the image src back to normal.
Try this:
$("#li_1 img")
.mouseover(function () {
$(this).attr("src", "images/hover_12.png");
})
.mouseout(function () {
$(this).attr("src", "images/ori_12.png");
});
If you want it dynamic, so you don't have to add a block of code for each image, try this.
$('#nav_menu li img')
.mouseover(function () {
this.src = this.src.replace('/ori_', '/hover_');
})
.mouseout(function () {
this.src = this.src.replace('/hover_', '/ori_');
});