Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
$(".pic img").attr("src",source);
$(".pic img").css("width","450px");
$(".pic").show();
}
html:
<div id="album">
<div class="pic">
<img src="" />
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/2 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
blur event of jquery can be used
$(".screen").bind('blur',function () {
hide($(this));
});
function display($this) {
$(".pic").hide();
}
Try like this
$(document).click(function () {
if ($(this).class != "pic") {
$(".pic").hide();
}
});
Live Demo
Related
I have about 30 options that a user can select. When they click the option it opens/highlights a content/html box for that selection and hides the others (similar to a picture lightbox but instead of thumbnails and main pic I need html).
I've found this Jquery code example: http://jsfiddle.net/EhtrR/1238/
<img id="img1"/>
<img id="img2"/>
<img id="img3"/>
<img id="img4"/>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
$("#img1").on('click', function() {
$("#div1").fadeIn();
$("#div2,#div3,#div4").fadeOut();
});
$("#img2").on('click', function() {
$("#div2").fadeIn();
$("#div1,#div3,#div4").fadeOut();
});
$("#img3").on('click', function() {
$("#div3").fadeIn();
$("#div1,#div2,#div4").fadeOut();
});
$("#img4").on('click', function() {
$("#div4").fadeIn();
$("#div1,#div2,#div3").fadeOut();
});
(Please note the images are just example. These can be div boxes or span.)
but as I'll need 20-30 of these options I was wondering how I can make it more efficient or do you suggest another way? I noticed on Mobile touch taps the clicks were fairly slow with the Jquery.
To DRY and simplify the logic you could put each set of elements in containers, grouped by their behaviour. Then apply common classes to them and relate them on click by their indexes. Try this:
let $contents = $('.content');
$('.trigger').on('click', e => {
let $target = $contents.eq($(e.target).index()).fadeToggle();
$contents.not($target).fadeOut();
});
.content { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trigger-container">
<img src="01.jpg" class="trigger" />
<img src="02.jpg" class="trigger" />
<img src="03.jpg" class="trigger" />
<img src="04.jpg" class="trigger" />
</div>
<div class="content-container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
</div>
for(let i=0;i<=4;i++){
$("#img"+i).on('click', function() {
$("#div"+i).fadeIn();
for(var num=0; num<=4; num++)
{
if(num!=i)
{
$("#div"+num).fadeOut()
}
}
});
}
With this function i want to replace a static image with an animated image (gif) on mouseover. But it's not working only on FIRST mouseover. Is there someone that could help me?
JQuery function:
function mouseListener(imageDiv, image, animated, static)
{
$(function() {
$(imageDiv).hover(
function() {
$(image).attr("src", animated);
},
function() {
$(image).attr("src", static);
}
);
});
}
HTML:
<div onmouseover="mouseListener('#would_youDiv','#would_you','images/would_you.gif','images/would_you.jpg');" id="would_youDiv" class="container">
<a href="work.html">
<img id="would_you" class="img-fluid" src="images/would_you.jpg" width="100%" height="100%" />
<div class="overlay">
<div class="text">WOULD YOU</div>
</div>
</a>
</div>
You could make this much easier by generalizing the logic with classes and data elements.
$(document).ready(function() {
$('.hover-image-container').hover(
function() {
//find the image in the container
var $img = $(this).find('img');
//set the src to the animaged src on it
$img.attr('src', $img.data('animated-src'));
},
function() {
//find the image in the container
var $img = $(this).find('img');
//set the src to the original src
$img.attr('src', $img.data('src'));
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container hover-image-container">
<a href="work.html">
<img src="images/would_you.jpg" data-src="images/would_you.jpg" data-animated-src="images/would_you.gif" width="100%" height="100%" />
<div class="overlay">
<div class="text">WOULD YOU</div>
</div>
</a>
</div>
Your mouseListener method is called when the mouseover event occurs, which is when it creates the listener to the event, instead of acting on the event. You don't need to add the listener, since you've already registered the function to be called on mouse over, you just need to do the action you want for that event.
You need to either put that binding somewhere else, or create two methods that are bound to onmouseover and onmouseout.
For example, if you want to go the two methods route (as that's most similar to your current code):
<div onmouseover="mouseOverListener('#would_youDiv','#would_you','images/would_you.gif','images/would_you.jpg');" onmouseout="mouseOutListener('#would_youDiv','#would_you','images/would_you.gif','images/would_you.jpg');" id="would_youDiv" class="container">
<a href="work.html">
<img id="would_you" class="img-fluid" src="images/would_you.jpg" width="100%" height="100%" />
<div class="overlay">
<div class="text">WOULD YOU</div>
</div>
</a>
</div>
And then in your Javascript:
function mouseOverListener(imageDiv, image, animated, static) {
$(image).attr("src", animated);
}
function mouseOutListener(imageDiv, image, animated, static) {
$(image).attr("src", static);
}
You don't need a js function
HTML
<div class="container">
<a href="work.html">
<img class="img-fluid" src="images/would_you.jpg" width="100%" height="100%" onmouseover="this.src='images/would_you.gif'" onmouseout="this.src='images/would_you.jpg'"/>
<div class="overlay">
<div class="text">WOULD YOU</div>
</div>
</a>
</div>
I want to click on div with btnGenerate class and that is supposed to add an image to div with card1 class.
HTML
<div class="btnGenerate">
<p class="generate">Generate team</p>
</div>
<div class="card1"></div>
JS
$(document).ready(function () {
$('.btnGenerate').click(function () {
$('.card1').prepend('<img class="card" src="card1">');
});
});
Problem
When I click on .btnGenerate it doesn't add an image to my .card1. So I want it to add my image to the class
You code looks OK. You just need to add the proper image path to src of img element :
$(document).ready(function () {
$('.btnGenerate').click(function () {
$('.card1').prepend('<img class="card" src="http://placehold.it/100x50/ff7878">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btnGenerate">
<p class="generate">Generate team</p>
</div>
<div class="card1"></div>
Maybe just not add any extensions to link or path problems
for example that works well :
$(document).ready(function() {
$('.btnGenerate').click(function() {
$('.card1').prepend('<img class="card" src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btnGenerate">
<p class="generate">Generate team</p>
</div>
<div class="card1"></div>
Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.
So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.
The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.
All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!
$('a.navBtn').click(function(){
var divName = this.name;
$.when(function(){
$("#"+divName).siblings().filter(":visible").slideUp("slow");
}).then(function(){
$("#"+divName).slideDown("slow");
})
});
<div id="services">
<div class="noise_overlay">
<div id="contact"><img src="i/contact.png" /></div>
<div id="linkedin"><img src="i/linkedin.png" /></div>
<div id="facebook"><img src="i/facebook.png" /></div>
<div id="twitter"><img src="i/twitter.png" /></div>
<div id="flickr"><img src="i/flickr.png" /></div>
</div>
</div>
<div id="serviceContent">
<div id="contactContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="contactData">
<span>contact</span>
</div>
</div>
<div class="contentFooter"></div>
</div>
<div id="linkedinContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="linkedinData" class="mpCenter">
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="facebookContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="facebookData" class="mpCenter">
<span>facebook</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="twitterContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="twitterData" class="mpCenter">
<span>twitter</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="flickrContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="flickrData" class="mpCenter">
<span>flickr</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
</div>
You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:
http://api.jquery.com/slideUp/
$("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
$("#"+divName).slideDown("slow");
});
Should be something like that.
I have made a simple jQuery snippet for you. The javascript:
$(function() {
$('a.navBtn').click(function(e) {
var pane = $(this).attr('name'),
switchPanes = function(name) {
if($('.contentPane:visible').attr('id') === name){
return;
}
if($('.contentPane:visible').length > 0){
$('.contentPane:visible').slideUp('fast', function() {
$('#' + name).slideDown('medium');
});
} else {
$('#' + name).slideDown('medium');
}
};
switchPanes(pane);
e.preventDefault();
});
});
Here's a working(?) version. I use the callback of the slideUP to call the slideDown.
http://jsfiddle.net/yazYF/
EDIT: Just like the Justin said, I just have some code to test with. :)
EDIT 2: Now with an initial pane visible
http://jsfiddle.net/yazYF/1/
EDIT 3: Initially nothing...
http://jsfiddle.net/yazYF/2/
Hey all,
Earlier I received some help toggling between three hidden divs in a photo library. I'd like to add an underline to the anchors toggling which div to show. The script is dynamic... and therein lies my problem. I'm not sure how to tell which anchor to underline within the code. Suffice it to say that it's beyond my grasp!
I'd also like for the first of the three anchors, Promo, to load underlined.
Thanks for your help!
HTML:
<div class="text" id="content">
<h2>PHOTOS</h2>
<hr />
<p align="left"><a class="showlink" id="show_promo">PROMO</a> <a class="showlink" id="show_studio">STUDIO</a> <a class="showlink" id="show_live">LIVE</a></p>
<div class="section" id="promo">
<p align="center">PROMO</p>
<p align="center">
<img src="#">
</p>
</div>
<div class="section" id="studio">
<p align="center">STUDIO</p>
<p align="center">
<img src="#">
</p>
</div>
<div class="section" id="live">
<p align="center">LIVE</p>
<p align="center">
<img src="#">
</p>
</div>
</div>
Javascript:
$('a.showlink').click(function(){
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});
Try this:
$(function(){
$('a.showlink').css("text-decoration", "none");
$("#show_promo").css("text-decoration", "underline").click();
});
$('a.showlink').click(function(){
$('a.showlink').css("text-decoration", "none");
$(this).css("text-decoration", "underline");
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});