I have a navbar with icons and under each of them some text(like home, contacts, ecc..). I would like that if I go over the text the icons became bigger. For now I can do it only if the mouse go over the icon.
Here's my navbar:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li>
<a href="#">
<img src="img/ico_nav/hamburger.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">HOME</p>
</a>
</li>
<li>
<a href="#storia">
<img src="img/ico_nav/storia.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">STORIA</p>
</a>
</li>
<li>
<a href="#menù">
<img src="img/ico_nav/hamburger.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">MENÙ</p>
</a>
</li>
<li>
<a href="#gallery">
<img src="img/ico_nav/gallery.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">GALLERY</p>
</a>
</li>
<li>
<a href="#contatti">
<img src="img/ico_nav/contatti.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">CONTATTI</p>
</a>
</li>
</ul>
</div>
And here's the script:
function makeBigger() {
$(this).css({height: '+=10%', width: '+=10%'});
}
function returnToOriginalSize() {
$(this).css({height: "", width: ""});
}
$(function(){
$('.icons').hover(makeBigger, returnToOriginalSize);
}
As it is now the icons become bigger when hovered, but I want that they become bigger also if the text under the icon is hovered. How can I do it? I tried but unfortunately I couldn't figured out how to do it.
I hope I explained myself!
Thanks in advance
You don't need javascript for this. You can use simple CSS transitions. Something like:
.navbar-nav li img {
transition: transform 0.4s;
transform: scale(1);
}
.navbar-nav li:hover img {
transform: scale(1.5);
}
If you don't want the transition you can remove the transition line. You can also use width and height instead of transform for some way back (in browser time) browser support.
Related
I have a website and we're trying to setup a continues looping similar to this stack answer OR What Lies Below website
In our website we also have some elements that are being parallaxed. The parallaxed elements all have the class name "parallax". When I'm cloning and appending the cloned content, it's using the parallax class name and I need to get rid of it. So I thought I could just
JS
var clone = $("body").contents().clone();
var updatedClone = $(clone).find('.content').removeClass('parallax');
updatedClone.appendTo("body");
updatedClone.prependTo("body");
HTML
<body>
<main class"content">
<div class="" style="margin-top:0%">
<ul id="scene-header">
<li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
<li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
</ul>
<div>
<ul class="divider">
<li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
<li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
<li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
<li class="" id="backgroundcolor-layer"></li>
</ul>
</div>
</div>
</main>
</body>
But the appended content on the site is still adding the "parallax" class name. What simple thing am I forgetting?
clone() return jQuery object so you can use it to find and remove class
Try this :
var clone = $('body').find('.content').clone();
clone.find('.parallax').removeClass('parallax'); // Find all content with class parallax and remove class
clone.appendTo('body');
//clone.prependTo('body');
.parallax {
border: 5px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
<div class="" style="margin-top:0%">
<ul id="scene-header">
<li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
<li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
</ul>
<div>
<ul class="divider">
<li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
<li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
<li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
<li class="" id="backgroundcolor-layer"></li>
</ul>
</div>
</div>
</main>
Don't include the period in the class name on the removeClass function.
var updatedClone = $(clone).find('.content').removeClass('parallax');
https://api.jquery.com/removeclass/
Explanation
I'm trying to set a overlay on each image of the slider (slick.js) when hovering them, but for some reason, when I hover it, the overlay appears on top of the slider (all 12 images), not the image hovered.
Code
You can also see it in JSFiddle and in "fullscreen mode".
ps: it's be better to see the overlay content in fullscreen.
$('.carousel').slick({
arrows: false,
dots: true,
slidesPerRow: 3,
rows: 3
});
.carousel-wrapper {
background-color: rgb(235, 235, 235);
position: relative;
}
img {
background-color: black;
}
.slick-slide {
text-align: center !important;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(1, 1, 1, .35);
transition: 0.2s;
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.overlay-content {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>
<body>
<section class="carousel-wrapper">
<div class="container">
<div class="row">
<ul class="col-md-12 carousel text-center">
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Thanks in advance,
Luiz.
Why is it not working?
Your code doesn't work as expected because your overlay is being positioned relatively to .carousel-wrapper not the a element (.carousel-wrapper is the first parent of .overlay that has position other than static - if you don't set your position explicitly it defaults to static).
How to avoid this mistake in the future?
If you want any element on your website to have an overlay (or in general you want to use position: absolute somewhere) you need to remember that this element is going to be positioned relatively to it's parent that has positon: relative or position: absolute. If there's no such element it's going to position itself to <html>.
It's very well explained here:
Remember that these values will be relative to the next parent element
with relative (or absolute) positioning. If there is no such parent,
it will default all the way back up to the element itself
meaning it will be placed relatively to the page itself.
(on absolute positioning)
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Check the working demo:
https://jsfiddle.net/thffcgqc/2/
Wrap your anchor tags and overlay content in a separate div and style as follows. The reason is due to the fact that you are not using a margin-right for whitespace between boxes. You are simply using a fixed with li tags and the images leaves a gap in the parent container . If an overlay is placed, you will see the overlay over the white gap and the image (which is somewhat not what you want - I believe)
See snippet below
$('.carousel').slick({
arrows: false,
dots: true,
slidesPerRow: 3,
rows: 3
});
.carousel-wrapper {
background-color: rgb(235, 235, 235);
position: relative;
}
img {
background-color: black;
}
.slick-slide {
text-align: center !important;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(1, 1, 1, .35);
transition: 0.2s;
opacity: 0;
background: red;
z-index: 1;
}
.overlay:hover {
opacity: 1;
}
.overlay-content {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
display: inline-block;
}
a:hover .overlay {
opacity: 1
}
.img_cont {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>
<body>
<section class="carousel-wrapper">
<div class="container">
<div class="row">
<ul class="col-md-12 carousel text-center">
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
I'm using the Packery plugin to give my image gallery a more interesting layout on a website I'm building.
Every now and then, I visit the page and some of the images are overlapping each other like so:
But then when I refresh the page, it displays it properly:
I tried specifying a height on the container element but to no avail.
Here is the code I'm using:
CSS:
.packery-grid {
min-height: 500px;
}
.packery-grid-03 {
width: 20%;
}
.packery-grid-06 {
width: 40%;
}
.packery-grid figure {
padding: 15px;
}
jQuery:
$(document).ready(function() {
// visuals
$('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
});
HTML:
<div class="row">
<div class="packery-grid">
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
I think I've found the solution on their support page
Unloaded images can throw off Packery layouts and cause item elements
to overlap. imagesLoaded resolves this issue.
And so I've modified my code like so:
// visuals
var $grid = $('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
// layout Packery after each image loads
// to prevent overlapping images
$grid.imagesLoaded().progress( function() {
$grid.packery();
});
I am trying to make a prev and a next button that changes de "src" attribute of the "lightbox" img. Basically when you click on a thumbnail, jquery script gets its src and places on the lightbox, now i need to make a button that let me get the src of the next and prev img ( or thumbnail ?)..
$(document).ready(function(){
$(".thumbnail").click(function(){
var address= $(this).attr("src");
$("#popup").fadeIn("slow");
$("#lightbox").attr("src",address);
$(".footer").fadeToggle("fast");
});
$("#close").click(function(){
$("#popup").fadeOut("slow",function(){
$(".footer").fadeToggle("fast");
});
});
$("#next").click(function(){
$("#lightbox").removeAttr("src");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="popupslide">
<div id="popup">
<div id="center">
<img id="lightbox" src="" >
<img id="close" src="fotos/fotoscidade/close.png">
<img id="next" src="fotos/fotoscidade/close.png">
<img id="prev" src="fotos/fotoscidade/close.png">
</div>
</div>
</div>
<div>
<ul class="sidebside">
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
</ul>
</div>
Give your imgs attribute called img_no with values like 0,1,2,3,4 etc. Use that value, parseInt it and get src based on it.
Refer this link to understand what I mean. Infinite carousel doesnt work
I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.
<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="
<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
<a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
</a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen"
title="Full Screen"></a></li>
<li id="outshare">
<img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG"
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
<img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#">
<img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
</li>
</ul>
</div>
i need to print the image when i click the print button..
how do i write jquery function to print the image..
Try like
$('.printMe').click(function(){
window.print();
});
or if you want to print selected area try like
$('.printMe').click(function(){
$("#outprint").print();
});
Hey If you want to print selected area or div ,Try This.
<style type="text/css">
#media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>
Hope it helps you
function printResult() {
var DocumentContainer = document.getElementById('your_div_id');
var WindowObject = window.open('', "PrintWindow", "width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
There is a jquery print area. I've been using it for some time now.
$(".printMe").click(function(){
$("#outprint").printArea({ mode: 'popup', popClose: true });
});