I have tried a bunch of different solutions to similar problems on here but none of them seem to be doing anything for me. See my jsFiddle to see an example of what I would like to happen: http://jsfiddle.net/Amp3rsand/HSNY5/6/
It animates how I would like but it relies on .delay when I would prefer it to fire as soon as the image is finished loading. The commented out sections in the js are the things that I have tried.
Could the problem be that the image is actually the background of a div rather than its own element? I tested making it its own <img> tag as well but it didn't seem to make a difference. I have the image as the background so that when I use media queries it is easy to swap in a different, smaller image for mobile users or small screens.
HTML:
<header></header>
<div id="image">
<div id="blah"></div>
</div>
The image I would like to fire after it finishes loading is the background of '#image'. Then I would like for it to animate to 'opacity:1;' while '#blah' and 'header' are animated into place.
Here is the jQuery I'm using right now but it is not correct:
$('#image').hide().delay(800).fadeTo(600, 1);
$('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400);
On my website it is quite a large image so it takes about half a second to load but this code doesn't take into account caching or different network speeds.
What am I doing wrong or what should I do differently?
Thanks everyone
EDIT:
I gave the imagesLoaded plugin a go earlier and it seems to work on my website but I can't tell if it is actually doing what I want or just emulating my code from above.
$(document).ready(function() {
$('body').hide().fadeTo(500, 1)
});
imagesLoaded( document.querySelector('#homeimg'), function( instance ) {
$('article').hide().fadeTo(600, 1);
$('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400);
});
'#homeimg' being the div with the image as the background and 'article' being the container for '#homeimg' and '#caption'
I can only test with the website loaded locally at the moment so I can't simulate a slow connection. Does the code above do what I am looking for? Sorry if it should be obvious
Your image is loaded via a CSS background property, you will not be able to detect the loading of that. Why not use <img> tag for images?
If you use <img> you can read this question: Browser-independent way to detect when image has been loaded for a bullet-proof solution.
If you insist on using a background CSS property you will need to implement a way of sending your image as a data url encoded as base64 as described in this answer: https://stackoverflow.com/a/13989806/2788
Try animate
$('#image').animate({ opacity: '1'}, 600);
You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:
<style>
.easeload{
opacity: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">
Related
I've built an app where I browse instagram API and fetch photos. After that is done I use Handlebars to make a template with undordered list and images inside. I'm trying to get images to slowly fade in as soon as the template is loaded, but to no avail. So far it looks like this
In my template I add class hidden that sets the opacity to 0, so then I can just remove the class to show the image.
<template id="image-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>
<img class="hidden" src="{{url}}">
</li>
{{/each}}
</ul>
</template>
After setting everything in JS
var template = Handlebars.compile( source.html() )
var html = template( images )
$('#container').html( html )
At this point I should have the images in the container, so I should be able to use
$('img').removeClass('hidden')
and have images slowly fade in, however thats not happening.
After a bit of investigating I realised that those images aren't quite available for me, so I set up a pub/sub after adding template to html
$('#container').html(html)
$.publish('insta/photoTransition')
I was sure that calling another function after this would work, but still no result. After that just out of ideas I setTimeout before publishing, and what do you know, my assumptions were true and with a delay it finally worked. However I don't want to wait a set amount of time to show the photos, I would like to show them as soon as possible. Before I try to figure out how deferreds work to try my last idea, are there any better ways to solve my problem?
Just use css transitions.
#image-template img{
opacity: 1;
transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#image-template img.hidden{
opacity: 0;
}
more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?
It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.
You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});
You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}
Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>
I'm just getting started with CSS animations controlled via Javascript, and I'm stuck with a problem that I'm sure it's quite simple...
What am I trying to achieve?
I want to have a kind of image zone where some images are displayed with an increasing opacity effect: I want each new image to appear upon the other when the user clicks on the image.
How am I trying to achieve it?
I have a "div" which contains two "img" tags, and I'm simply trying to just animate the upper "img" and then swap the image "src" when the new image has to be shown. Let me explain it:
"img1" is the image at the bottom, which is showing "My first photo".
"img2" is the image at the top, which starts with an opacity of 0.
When the user clicks the image, "My second photo" is associated with the "img2", and "img2" starts and animation to fade in.
When the user touches again, "img1" changes its "src" to show "My second photo", "img2" changes its alpha to 0, changes its source to "My third photo" and starts the fade in animation again.
And so on, making the effect that the new image is always appearing upon the current one.
The bizarre part: the code
As I'm still quite green on CSS animations and Javascript, I'm trying to do it as follows:
index.html:
<div style="position:absolute; top:50%; left:50%; margin-left:-114px; margin-top:-203px;" onClick="canviaImatge();">
<img id="img_1" class="pantalla" src="" style="position:absolute;" />
<img id="img_2" class="pantalla" src="" style="position:relative; left:50px" />
</div>
<script>
document.getElementById("img_1").src = arrImatges[0];
document.getElementById("img_2").src = arrImatges[1];
document.getElementById("img_2").style.opacity = 0;
</script>
index.html (Javascript)
function canviaImatge()
{
document.getElementById("img_2").style.opacity = 0;
document.getElementById("img_2").classList.remove('horizTranslateApareix');
if(currentPantalla == 1)
{
document.getElementById("img_1").src = arrImatges[0];
document.getElementById("img_2").src = arrImatges[1];
}else{
document.getElementById("img_1").src = arrImatges[1];
document.getElementById("img_2").src = arrImatges[0];
}
document.getElementById("img_2").classList.add('horizTranslateApareix');
}
style.css
.pantalla.horizTranslateApareix {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
opacity: 1 !important;
}
I know I'm doing it the dirty way, but it's like I'm just there and it seems that I'm just missing a line, a tag or something... Any clue about it?
Thanks in advance for your time and effort! :)
When you bind event handler on div as well as on images inside the div, it will be called twice as there is no e.preventBubble() in event handler. You can avoid this by using it only on the div.
Second issue is that after first click inside the div, the transition is in final state and you don't move it to initial state. I would achieve required behavior by using 2 classes. One for transition and one for initial state, final state is implicit here, opacity:1 is default value.
.pantalla.invisible {
opacity: 0;
}
.pantalla.horizTranslateApareix {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
Main part is in JS. We start by removing the transition, otherwise it would took 1s to hide the image as well. Then we hide the image and return the transition, do image swapping and finally show the image again, starting the transition.
function canviaImatge()
{
img2.classList.remove('horizTranslateApareix');
img2.classList.add('invisible');
img2.offsetHeight; // <-- force repaint, otherwise browser optimize and nothing changes
img2.classList.add('horizTranslateApareix');
// image swapping
img2.classList.remove('invisible');
}
This would be the ideal case, but browsers optimize, so we can't use it as simply as that. Browsers do as much as possible without repainting the page, so they merge several opearions to one and we loose our functionality. That's where magic comes in place. We enforce repaint asking for img2.offsetHeight, which has to recalculate positions and repaint the relevant part of page (possibly whole page). Other ways to achieve it, is to move code to setTimeout function, which can't be optimized either.
setTimeout(function() {
img2.classList.add('horizTranslateApareix');
img2.classList.remove('invisible');
}, 1)
Demo at http://jsfiddle.net/Gobie/e4m3R/2/
In Chrome 27 (Windows) when I update the text of a specific element, the text disappears completely until I make it "refresh" but changing the CSS of any element or window size or whatever.
Firefox is fine, haven't tried any other browser or OS (yet). I suspect its a Chrome-specific bug. I just want to make sure I'm not going insane.
I am using: CSS3 transforms in some places; web fonts (tested without them and it still happens); nested position: fixed and z-index
It's similar to this SO question however when I disable web fonts (and falled back to Arial then sans-serif) it still occurs. I suspect it has something to do with the layering I'm doing and CSS3 transforms.
The element updating is a DIV within this container:
NAV {width:100%;height:50px;position:fixed;top:0;left:0;z-index:110;padding:15px 0;text-shadow:1px 1px 2px #FFF;font-size:110%;font-weight:500;color:#565656}
Which is wrapped in a parent page:
#pages {width:100%;position:relative;overflow-x:hidden}
#pages .page {width:100%;height:100%;position:absolute;top:0;left:0;padding-top:50px;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}
I apply CSS3 transforms only when animating pages in/out, however the bug occurs after the transform is complete:
#pages .page.left {-ms-transform:translateX(-100%);-o-transform:translateX(-100%);-moz-transform:translateX(-100%);-webkit-transform:translateX(-100%);transform:translateX(-100%)}
#pages .page.right {-ms-transform:translateX(100%);-o-transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);transform:translateX(100%)}
The code that updates the text (trimmed down):
$('.page[data-page="Game"]').find('NAV .title').text('My text');
I don't have a demo to show you yet, sorry. If you need more code, please let me know in the comments (as I'm sure you would do anyway). I've left out the HTML because I believe it's irrelevant unless you really want to see it.
I've been doing some searching on here and Google and I can't seem to find an answer that quite fits what I'm trying to do. I have a single div with some text in it that does a fade effect by transitioning to a different background image on mouse hover. What I want to do is to tile/repeat that same div dynamically so it fills the entire body (or parent div). Kind of like using background-repeat:repeat but with a div instead of a background image. I like to see what kind of cool visual effects I can achieve with elements across the entire page fading in and out as the mouse moves over them.
Of course I could just copy and paste the same div in the code a bunch of times but there must be a better solution. I'm thinking javascript is needed, but the only things I've been able to find about cloning divs look to be a bit over my head and I'm wondering if there is a more simple solution.
The CSS and HTML that I'm using as an example is from menu links on a site I'm working on. It may not be the best example but I'm a bit new to CSS. Basically I want to tile the below div across an entire page.
Here is the css:
#fadediv {
background-image:url(images/buttonback.png);
transition: background-image 0.5s linear;
-moz-transition: background-image 0.5s linear;
-webkit-transition: background-image 0.5s linear;
}
#fadediv:hover {
background-image:url(images/buttonback2.jpg);
}
.fadedivtext {
display:block;
width:320px;
height:138px;
float:left;
font-size:30px;
color:#FFF;
text-align:center;
line-height:138px;
}
And the HTML snippet:
<div id="fadediv" class="fadedivtext">about me</div>
EDIT: Looks like there's a PHP example here that could work, in addition to the javascript example given below.
I think clone should work well for you -- it's not that complicated, especially when you're talking about a basic div. Just make sure to target classes instead of IDs (you're not supposed to have multiple elements with the same ID).
Here's a basic example using JQuery's clone:
var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
var newEl = el.clone();
$("#container").append(newEl);
}
http://jsfiddle.net/9P7bY/2/
Edit
This is a comment left by aug:
Or if you want to for some reason give each clone a unique id you can access the attribute field and change the id to something else
newE1.attr("id", newId);