I have 5 buttons and when i pass my pointer o some of then, i want change the background image but with a fade effect.
HTML:
<body>
<div id="content" class="row">
<div class="large-4 center columns ">
<a id="column1" class="button expand" href="http://www.page1.com">WEB 1</a>
</div>
<div class="large-4 center columns">
<a id="column2" class="button expand" href="http://www.page2.com">WEB 2</a>
</div>
<div class="large-4 center columns">
<a id="columna3" class="button expand" href="http://www.page3.com">WEB 3</a>
</div>
<div class="large-4 large-offset-2 center columns">
<a id="columna4" class="button expand" href="http://www.page4.com">WEB 4</a>
</div>
<div class="large-4 center columns end">
<a id="columna5" class="button expand" href="http://www.page5.com">WEB 5</a>
</div>
</div>
</body>
Jquery:
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
$("#column1").mouseover(function(){
$("body").css('background-image', 'url("img/dib1.jpg")');
});
$("#column2").mouseover(function(){
$("body").css('background-image', 'url("img/dib2.jpg")');
});
$("#column3").mouseover(function(){
$("body").css('background-image', 'url("img/dib3.jpg")');
});
$("#columna4").mouseover(function(){
$("body").css('background-image', 'url("img/dib4.jpeg")');
});
$("#column5").mouseover(function(){
$("body").css('background-image', 'url("img/dib5.jpg")');
});
</script>
The problem is when change the image, is so quickly, for that i want put a fade transition, tried put fadetoggle slow, but disappear all my content because use "body" for my selector.
Here is a little mock up I made. Its just a basis, but should be easily modifiable.
http://jsfiddle.net/sB8hU/
HTML:
<div id="content" class="row">
<div class="large-4 center columns ">
<a id="column1" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page1.com">WEB 1</a>
</div>
<div class="large-4 center columns">
<a id="column2" class="button expand" data-bg="http://www.psdgraphics.com/file/abstract-background.jpg" href="http://www.page2.com">WEB 2</a>
</div>
<div class="large-4 center columns">
<a id="columna3" class="button expand" data-bg="http://wallpapergrab.com/wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg" href="http://www.page3.com">WEB 3</a>
</div>
<div class="large-4 large-offset-2 center columns">
<a id="columna4" class="button expand" data-bg="http://sciencelakes.com/data_images/out/26/8856597-daisies-green-background.jpg" href="http://www.page4.com">WEB 4</a>
</div>
<div class="large-4 center columns end">
<a id="columna5" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page5.com">WEB 5</a>
</div>
</div>
<div class="bg1"></div>
<div class="bg2"></div>
jQuery:
$('.bg1, .bg2').height( $(window).height() );
$('.button').hover(function(){
var bgImage = $(this).data('bg');
if( $('.bg1').is(':visible') ){
$('.bg2').css('background-image', 'url(' + bgImage + ')');
$('.bg1').fadeOut(200, function(){
$('.bg2').fadeIn(200);
});
} else {
$('.bg1').css('background-image', 'url(' + bgImage + ')');
$('.bg2').fadeOut(200, function(){
$('.bg1').fadeIn(200);
});
}
});
Use a absolute element and add background to it. Do it like this:
<body>
<div id="bg"></div>
And styles:
#bg {
position: fixed;
background: url(xyz.com);
width: 100%;
height: 100%;
top:0;
left:0;
z-index:-1; /* to place it behind body elements */
}
And follow your same trick. :D
CSS3 is the easiest way. You just have to reassign the image in JavaScript as you already have, then putting this in the body tag will take care of the rest for you. Be sure to play with the timing to meet your needs. Disclaimer: this transition doesn't work in IE earlier than 10.
body {
transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;
}
Unfortunately, this is not currently possible with "simple" CSS.
However, you could use a container (your web page) with position: relative and place your main div in it, with position: absolute and top: 0; left: 0. then add, at the same level as this div:
<img src="img/dib1.jpg" class="bg-img active" />
<img src="img/dib2.jpg" class="bg-img" />
<img src="img/dib3.jpg" class="bg-img" />
<img src="img/dib4.jpg" class="bg-img" />
<img src="img/dib5.jpg" class="bg-img" />
In your CSS :
img.bg-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-out; /* could be another duration / transition effect */
-webkit-transition: opacity 500ms ease-out;
-moz-transition: opacity 500ms ease-out;
-ms-transition: opacity 500ms ease-out;
-o-transition: opacity 500ms ease-out;
}
img.bg-img.active {
opacity: 1;
}
Then in your code, instead of changing the background-image property of "body", change the class of the desired images et add / remove active.
You can use CSS 3 transition property. Define class in your style sheet for example as follows:
.backgroundChanged
{
background-image: your image;
transition-property:background-image;
transition-duration: 0.3s;
transition-timing-function: linear;
}
And then apply this class programmatically in javascript when you need.
Hope this helps.
Related
I am using a Plugin for Owl Carousel:
https://github.com/gijsroge/OwlCarousel2-Thumbs
It inserts Images as Navigation-Thumbs.
I tried to figure out the height of the whole .owl-thumbs Element. Which is possible in the Console. But the same Code in my scripts.js returns "null" for the height.
Here is my Code:
jQuery( document ).ready(function($) {
console.log($('.owl-thumbs').outerHeight());
});
.. I also tried to use another selector, like $('.owl-carousel.single owl-loaded .owl-thumbs') etc..
Here is the Markup of the Carousel:
<div class="carousel single">
<div class="owl-carousel single owl-loaded owl-drag" data-slider-id="1">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-6985px, 0px,
0px); transition: all 0.25s ease 0s; width: 8255px;">
<div class="owl-item video-item" style="width: 635px;"><a href="/wp-
content/uploads/2016/02/thumbexample-4.jpg" data-thumb="<img
src="/wp-content/uploads/2016/02/thumbexample-4.jpg"/>"
class="single-slide" data-featherlight="image">
<img src="/wp-content/uploads/2016/02/thumbexample-4.jpg"></a>
</div>
</div>
<div class="owl-nav"><button type="button" role="presentation"
class="owl-prev"><span aria-label="Previous">‹</span></button><button
type="button" role="presentation" class="owl-next"><span aria- label="Next">›</span></button></div><div class="owl-dots"><button
role="button" class="owl-dot"><span></span></button>
</div>
<div class="owl-thumbs"><button class="owl-thumb-item"><img src="/wp- content/uploads/2016/02/thumbexample-4.jpg"></button>
</div>
</div>
</div>
</div>
Get the value after the plugin has initialized
var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('initialized.owl.carousel', function(event) {
$('.owl-thumbs').outerHeight();
})
I just found a solution:
if($.fn.owlCarousel.Constructor.Plugins.Thumbs) {
thumsHeight = $('.owl-thumbs').outerHeight();
}
...works :)
i have a main div under which i have three different div, each sub div contain image and text. i want to zoom image of that particular sub div to scale(1.1) whenever i hover on a that sub div. for now when i hover on any sub div all the three images of all sub div are scaled.
html for my code is
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="...">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>abz</p>
</div>
</div>
and jquery is
$(".sub-div").each(function(){
$(this).hover(function(){
$('.img').css('transform','scale(1.1)');
},function(){
$('.img').css('transform','scale(1.0)');
});
});
If you absolutely have to use Javascript, use the selector this :
$(".sub-div").hover(function(){
$('.img',this).css('transform','scale(1.1)');
},function(){
$('.img',this).css('transform','scale(1.0)');
});
But you can do the same with CSS :
.sub-div:hover .img{
transform: scale(1.1);
}
Working JSFiddle here : https://jsfiddle.net/26zdf038/
Why jquery? .simply do with css :hover
.sub-div img{
transition:all 0.2s ease-in;
transform:scale(1.0);
width:100px;
height:100px;
}
.sub-div:hover img{
transform:scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>abz</p>
</div>
</div>
Try this It will help you,
div:hover .picture{
transform: scale(1.1);
}
<div>
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
<div >
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
<div>
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
You don't need to loop with each. Just assign a hover event for .sub-div
Use $(this) to refer to the current object you interact with and find img inside of it.
$(".sub-div").hover(function(){
$(this).find('.img').css('transform','scale(1.1)');
},function(){
$(this).find('.img').css('transform','scale(1.0)');
});
.sub-div {
float: left;
width: 33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>abz</p>
</div>
</div>
The problem is your selector for the image selects all the images, while you have to select only the child one:
$(".sub-div").each(function() {
$(this).hover(function() {
$(this).find('.img').css('transform', 'scale(1.1)');
}, function() {
$(this).find('.img').css('transform', 'scale(1.0)');
});
});
However in that case I would recommend you to use CSS because of performance:
.sub-div img { transition: 0.3s ease }
.sub-div:hover img { transfrom: scale(1.1) }
Why I can't click this link inside :focus? The link always immediately closed when I try to click them.
If possible, I prefer to use only CSS, but if someone can give tips with simple Javascript or jQuery, that's would be great.
This is my code:
.ourservices{text-align:center;background-color:grey;padding:3%}
.cont{width:20%;background-color:white;display:inline-block;padding:1%;margin:1%;cursor:pointer;float:left}
.cont:focus{width:40%}
.cont a{display:none;text-decoration:none;color:black;font-weight:700}
.cont a:hover{color:white}
.cont:focus a{display:inline-block}
.cont img{width:100%}
.cont:focus img{width:100%}
.cont p{display:none;width:90%}
.cont:focus p{display:inline-block}
.kirig{width:100%;display:inline-block}
.cont:focus > .kirig{width:50%;float:left}
.kirig img{float:left}
.kirip{width:50%;display:inline-block}
.more{background-color:white;margin:0 auto;border:2px solid grey;display:inline-block;padding: 2% 3%;margin:5%}
.more:hover{background-color:gray;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.clearfix{clear:both}
<div class="ourservices">
<div class="cont kiri" tabindex="0">
<div class="kirig">
<img border="0" src="http://www.mo2properties.com/wp-content/uploads/2016/02/click-here-pointer-md.png" />
</div>
<div class="kirip">
<p>click read more click read more click read more</p>
<a href="http://stackoverflow.com">
<span class="more">
Read More
</span>
</a>
</div>
</div>
<div class="clearfix" />
</div>
Your link "Read more" is expanded when <div class="cont"> have focus. When you click on "Read more", your div loose focus and "Read more" is hide
$('.kirig').click(function(){
$('.kirip').toggle();
});
I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this: instagram images , we can zoom the image a bit and make overflow hidden, its just i dont know the tricks :)
here is my work: http://jsfiddle.net/jazzu20/1c9yf61x/
img {
max-width: 100%;
border: 0;
}
.col-md-3 {
width: 25%;
float: left;
}
.livery-instafeed-section {
min-height: 285px;
}
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>
Here's a fiddle.
Explanation of what happens here:
First of all, I've moved the images to be a background image of the anchor (<a>) tag. That gives you a lot more flexibility, because you can make use of the background-position and background-size properties.
Next I've positioned the anchor absolute (and the column relative to make sure the anchor is taking account of it's parents size) and made it as heigh and wide as the column.
Now you have the same width, but not the same height, as the column doesn't have a height from itself. Giving it a percentual height doesn't help you, because that would be relative to the parent, while you want to have the column to have a height relative to it's own height. And now kicks in the classic padding trick; give the element a bottom-padding and make it's child 100% the height of it's parent, like so:
.parent { width: 25%; padding-bottom: 25%; } /* .col-md-3 in your case */
.child { position: absolute; width: 100%; height: 100%; }
So now we have perfectly square elements, with the images as a background. This would normally suffice, because with background-size: cover the browser would make sure the image would span the whole div. But as you have images with white borders (to the side and the top/bottom) you'll have to zoom those to correct it. And the larger the borders (eg. for panorama images) the bigger the zoom size. That's why I have created the .zoom and .zoom2 classes, which just increases the background-size property.
There you go!
I have this script that does a few things but the focus is the last line as it doesn't seem to make the class opacity arrive at 100%....
$('.fa-briefcase').parent().on('click', function () {
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBig");
$('.fadeInUpBig').css('background-color', 'rgba(33,29,134, 0.2)');
$(".tile-area-main").css({width: "720px"}).load("content.html #overview");
$(".submenu-ctn").load("content.html .submenu-ctn");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
$( ".submenu-ctn" ).animate({ opacity: 10 }, 2000);
});
the css of the class is this....
.metro .submenu-ctn {
position: fixed;
left: 3px;
top: 150px;
height:400px;
width:263px;
float:left;
cursor: pointer;
overflow: hidden;
z-index : 999;
opacity:0;
}
does anyone know why the class .submenu-ctn isn't animating to 100% opacity within 2 seconds ?
EDIT ...
Since the issue is still causing issues I wanted to post the html of the pages (on request) that are being used here to help...
... fro the index.html page (where stuff is getting loaded to)
<!-- INITIALISE THE SPACE FOR CONTENT -->
<div class="tile-area">
<!--INITIALISE THE DIVS FOR CONTENT TO BE LOADED INCLUDING SUBMENU OPTIONS -->
<div class="submenu-ctn"></div>
<div class="tile-area-main"></div>
the content.html page that is having it's divs selectively loaded into the divs above...
<div class="submenu-ctn">
<header class='masthead'>
<div class='brand-container'>
<a href='#'>
<span class='brand-initials'>Who Are Musability?</span>
<span><i class="fa fa-briefcase brand-initials-icon"></i></span>
</a>
</div>
<nav>
<div class='nav-container'>
<div>
<a class='slide' href='#'>
<span class='element'>Mission and Values</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>Ethos</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>Music</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>Expression</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>People</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>Potential</span>
</a>
</div>
</div>
</nav>
</header>
</div>
opacity property values are from 0, 0.1,0.2,0.3, etc, etc to 1 so 10 its invalid
change it to
$( ".submenu-ctn" ).animate({ opacity: 1 }, 2000);
Example
opacity’s initial value is 1, so make sure to animate to 1.
Here’s what the spec says about opacity: http://www.w3.org/TR/css3-color/#transparency
Try this:
$('.submenu-ctn').animate({
opacity: 1
}, 2000);
Here’s a jsbin to illustrate this: http://output.jsbin.com/lefilerube/2/
Also consider fadeTo since, according to jQuery’s docs, it should be used when you’d like to “adjust the opacity of the matched elements”.
With your example, that would translate to:
$('.submenu-ctn').fadeTo(2000, 1);
Hope that helps.