Click inner div run fancybox, how to stop bubble to outer div? - javascript

How can I make if click .a(bluearea) then .menu fadein,
but click .apic(apic is inside a) run fancybox and menu not fadein?
http://jsfiddle.net/e5Tdv/12/
jQuery
$('.apic').fancybox({});
$('.a').not('.apic').click(function(){
$('.menu').fadeIn();
});
HTML
<div class="a">
<a class="apic" rel="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>
</div>
<div class="menu">menu</div>
CSS
.menu{
display: none;
}
.a{
background: blue;
}​

You can check where user clicked (event target) and fade when not clicked on image, for example:
$('.apic').fancybox({});
$('.a').click(function(e){
$('.menu').hide(); // This is just to see that it works
if ($(e.target).is('div')) {
$('.menu').fadeIn();
}
})
​
See in action - http://jsfiddle.net/Qeay5/

Related

Simple carousel slider: remove class to clicked element, and add it to next sibling

I'd like to implement (in pure Javascript, not jQuery) a simple slider/carrousel such that each time I click on an image, it hides it, and show the next image.
The following code nearly works, except that when we arrive at the end, it doesn't loop. I thought about using a if ... in the case, but it would not be very elegant.
How to make this carousel loop?
Array.from(document.getElementsByClassName("imgslider")).forEach(function(element) {
element.addEventListener('click', function(e) {
element.nextElementSibling.classList.toggle("visible");
element.classList.toggle("visible");
});
});
.imgslider { display: none; }
.visible { display: block; }
<div id="carousel">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" class="imgslider visible">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="imgslider">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" class="imgslider">
</div>
NB: if the div #carousel contains only one image, nothing should happen when we click on the image.
I found a solution with (element.nextElementSibling || element.parentNode.firstElementChild): when there is no "next" sibling, then element.nextElementSibling is null, and element.parentNode.firstElementChild gives the first sibling. This allows the carousel to loop at the end:
Array.from(document.getElementsByClassName("imgslider")).forEach(function(element) {
element.addEventListener('click', function(e) {
(element.nextElementSibling || element.parentNode.firstElementChild).classList.toggle("visible");
element.classList.toggle("visible");
});
});
.imgslider { display: none; }
.visible { display: block; }
<div id="carousel">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" class="imgslider visible">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="imgslider">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" class="imgslider">
</div>

how toggle all div tags

how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture
add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link
The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle

How to change img src link mouse hover?

HTML
<div module="product_listnormal">
<ul>
<li>
<input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
<div id="prdImgWrapper">
<img src="{$image_medium}" alt="" class="prdImgImg"/>
</div>
.....
So i Add onmouseover in img tag
<img src="{$image_medium}" onmouseover="this.src={$image_medium} + 'aaa'" alt="" class="prdImgImg"/>
but it doesn't call {$image_medium}aaa link what's wrong?
ex) if $image_medium = 111.png
$image_medium + aaa = 111aaa.png
I use on mouse over and on mouse leave function like this
onmouseover='this.src = this.src.replace(".jpg","_2.jpg")' onmouseleave='this.src = this.src.replate("_2.jpg", ".jpg")'
this source can use every picture
You have two links image_medium and image_medium2.
Say image_medium="a.jpg" and image_medium_2="a_2.jpg";
Using pure JavaScript
1) You can add listener for the same using mouseenter and mouseleave events if you know values
var divToBeHovered=document.getElementById("prdImgWrapper");
//add listener
divToBeHovered.addEventListener("mouseenter",function(){
var imgEle=document.querySelector("#"+this.id+" img");
imgEle.src="a_2.jpg"; //image_medium_2
},false);
divToBeHovered.addEventListener("mouseleave",function(){
var imgEle=document.querySelector("#"+this.id+" img");
imgEle.src="a.jpg"; //image_medium
},false);
2)If you don't know values i.e src of image is dynamic then you can create one function and call it both on mouseenter and mouseleave event.
<a href="/product/detail.html{$param}" class="prdImg">
<img src="{$image_medium}"
onmouseenter="changeURLOfImage(this,'{$image_medium}aaa')"
onmouseleave="changeURLOfImage(this,'{$image_medium}')"
mouseralt="" class="prdImgImg"/></a>
function changeURLOfImage(imageElem,url){
imageElem.src="url"
}
3)Assign direct values to src
<img onmouseenter='this.src ={$image_medium}aaa' onmouseleave='this.src ={$image_medium}'/>
This can be done using pure CSS by using two images and changing the display on hover state.
a.prdImg > img {
display: inline-block;
}
a.prdImg > img + img {
display: none;
}
a.prdImg:hover > img {
display: none;
}
a.prdImg:hover > img + img {
display: inline-block;
}
<div module="product_listnormal">
<ul>
<li>
<input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
<div id="prdImgWrapper">
<img src="http://media-cache-ak0.pinimg.com/736x/65/7e/a2/657ea254eb522135fbd59e0656a2e1dd.jpg" alt="" class="prdImgImg"/><img src="http://baconmockup.com/400/300" alt="" class="prdImgImg"/>
</div>
.....
By the way; wouldn't cause this.src={$image_medium} + 'aaa' the src to change from 111.png to 111.pngaaa?
While changing image src is not possible with css you can have 2 images(one hidden) and a container and on container mouse hover hide first image and show the second image.
something like this:
Html:
<div>
<span>This could be an image</span>
<span>This could be an image</span>
</div>
CSS:
div{
float:left;
width:200px;
height:200px;
}
div span{
width:100%;
height:100%;
display:none;
background-color:red;
}
div span:first-child{
display:block;
background-color:lime;
}
div:hover span:first-child{
display:none;
}
div:hover span:nth-child(2){
display:block;
}
have a look:
http://jsfiddle.net/mzvaan/fs6mc952/
html code like
<img src="sample1.png" id="newimg">
script like this
$(document).ready(function(e) {
$("#newimg").hover(function() {
$("#newimg").attr('src', 'sample2.png');
})
});

Show/Hide divs that occupy the same space with separate links

I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}
JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.
Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div
The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});
You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});

Muliple hidden fullscreen divs?

I'm working on my portfolio website, but can't solve the following problem.
The website is basically just pictures, if you click on one,
a semi-transparent fullscreen div opens with information (more pics and some text).
If you click again the div will close.
jQuery for hiding and showing:
<script>
$(function()
{
$('.masonryImage').click(function()
{
$('.hiddenDiv').show();
$("body").css("overflow", "hidden");
});
$('.hiddenDiv').click(function()
{
$('.hiddenDiv').hide();
$("body").css("overflow", "auto");
});
});
</script
HTML:
<div class="masonryImage">
<img src="images/pic1.jpg" alt="">
</div>
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="images/pic2.jpg" alt="">
</div>
</div>
So far it works with one picture, but when I'm adding another,
the new hidden text will overlay the first one, same with the pictures.
Is it because I'm using the same class ("masonryImage")?
Or isn't my Javascript removing the divs properly?
Many thanks.
Edit: CSS might be usefull:
.hiddenDiv {
position:fixed;
top:0;
left:0;
background:rgba(255,255,255,0.8);
z-index:900;
width:100%;
height:100%;
display:none;
overflow: scroll;
}
.masonryImage {
margin: 20px 20px 20px;
display: inline-block;
cursor: pointer;
}
here is how I modified your code :
DEMO
HTML
<div class="masonryImage">
<img src="..." alt="">
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="..." alt="">
</div>
</div>
</div>
I put the hiddenDiv inside the masonryImage so every masonryImage will have a custom hiddenDiv to show/hide.
JQUERY
$('.masonryImage').click(function()
{
if ($(this).find('.hiddenDiv').toggle().is(":visible")) {
//alert('hiddenDiv is visible !');
$("body").css("overflow", "hidden");
}
else {
//alert('hiddenDiv is hidden !');
$("body").css("overflow", "auto");
}
});
You can just use .toogle() to show/hide the div. $(this) refers to the clicked masonryImage and .find('.hiddenDiv') to its child (you can also use .children('.hiddenDiv') ).
Then you can test if the clicked div is hidden or visible with .is(":visible"), to apply your body custom css :)
Hope I helped you.

Categories