Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 181
  • Last Modified:

How to design required layout using jQuery fadein/fadeout?

WEB layout: EE-02.jpg
Dear EE experts,

Please see the attached web layout that we require. We don't how to approach it using jQuery fade-in / fade-out...
temp_DHC_ECtemp_DXtemp_WStemp_XGtemp_01
We're attaching the PNG images, what we want to happen is, we want to have an action effect (FADE-IN / FADE-OUT) on the images that are original look, and not red. Only those image will fade-in / fade-out, but not the items on RED colors will fade-in / out (such as: HAPPY HOLIDAYS, Logo, other images that are in red color).

So, do we need to cut it out and make a separate file for the original look of it?
0
Stiebel Eltron
Asked:
Stiebel Eltron
  • 5
  • 4
1 Solution
 
Tom BeckCommented:
Maybe something like this?

http://jsfiddle.net/9an7g4h0/1/
0
 
Stiebel EltronAuthor Commented:
hi Tom!

Yes that's what we need! Thank you so much!

The Javascript codes will be inside the <BODY> </BODY> right?

But how about for its JS files? Where can we get it & what would be its code?

Thank you!
0
 
Stiebel EltronAuthor Commented:
And is it possible, even though we resize the browser or use it on other browser and the resolution is different, would it be possible that the image will follow its screen resolution? How?

Thank you!
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Tom BeckCommented:
If you set the width of the images to 100% instead of a fixed width in pixels, the images will then match the width of the browser window.

Like this:

http://jsfiddle.net/9an7g4h0/2/

The code can be as is in the body, anywhere after the header images markup. Or, the code can be in a javascript include file in the head section. But if you do that, be sure to wrap the code in a window on load handler like this:
$(window).load(function(){
var index = 4;
var inter = setInterval(function(){
    $('#header img').eq(index).delay(1000).fadeOut(1000);
    if (index == 0) {
        index = 4;
        $('#header img').delay(1000).fadeIn(1000);
    } else {
        index--;
    }
}, 2000);
});

Open in new window

0
 
Stiebel EltronAuthor Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST eGreetingt</title>

 <style type="text/css" media="screen">
#header {
    position: relative;
}
#header img {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left 0;
}
</style>

<script type="text/javascript" charset="utf-8">
var index = 4;
var inter = setInterval(function(){
    $('#header img').eq(index).delay(1000).fadeOut(1000);
    if (index == 0) {
        index = 4;
        $('#header img').delay(1000).fadeIn(1000);
    } else {
        index--;
    }
}, 2000);
</script>

</head>

<body>

<div id="header">    
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886794/temp-DHC-EC.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886795/temp-DX.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886796/temp-WS.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886797/temp-XG.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886798/temp-01.png" alt="" />
    
</div>
</body>
</html>

Open in new window


Hi there Tom! Please see the attached script that we did based from your scripts, but we're wonderin' where can we get and put the js files? So that the effect will show. Because from that script the effect isn't working... :(

For the attached image, kindly check the "L" & "I" from the word "HOLIDAYS", it's too close to each other, can it move a little or where can we adjust it?
forEE
Thank you!
0
 
Tom BeckCommented:
You're forgetting the jQuery library. Also, these days there's no reason not to use an HTML 5 doctype. A simple page with the Happy Holidays header would look like this.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header {
    position: relative;
}
#header img {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left 0;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(window).load(function(){
    var index = 4;
    var inter = setInterval(function(){
        $('#header img').eq(index).delay(1000).fadeOut(1000);
        if (index == 0) {
            index = 4;
            $('#header img').delay(1000).fadeIn(1000);
        } else {
            index--;
        }
    }, 2000);
});
</script>
</head>

<body>
<div id="header">    
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886794/temp-DHC-EC.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886795/temp-DX.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886796/temp-WS.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886797/temp-XG.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886798/temp-01.png" alt="" />
</div>
</body>
</html>

Open in new window

YOUR LINKS TO THE IMAGES SHOULD BE LOCAL, RATHER THAN COMING FROM EXPERTS EXCHANGE SERVERS!

I don't think putting the javascript in an external file is necessary for something like this but if you want to do that you would first create your .js file, call it whatever you like, such as scripts.js.
$(window).load(function(){
    var index = 4;
    var inter = setInterval(function(){
        $('#header img').eq(index).delay(1000).fadeOut(1000);
        if (index == 0) {
            index = 4;
            $('#header img').delay(1000).fadeIn(1000);
        } else {
            index--;
        }
    }, 2000);
});

Open in new window

Then your page would just include it in the header:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header {
    position: relative;
}
#header img {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left 0;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="scripts.js"></script>
</head>

<body>
<div id="header">    
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886794/temp-DHC-EC.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886795/temp-DX.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886796/temp-WS.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886797/temp-XG.png" alt="" />
    <img src="http://filedb.experts-exchange.com/incoming/2014/12_w50/886798/temp-01.png" alt="" />
</div>
</body>
</html>

Open in new window

For the "L" in Holidays on the images, you would need to edit them in an image editor like Paint or GIMP or Photoshop. The simplest fix would be to draw a box the color of the background between the "L" and the "I" like this.white boxThe whole picture then looks like this. Happy HolidaysIf the background is transparent, just erase the part of the "L" you don't want.
0
 
Stiebel EltronAuthor Commented:
Hi there Tom!

Sorry for the late reply. We're on holiday today that's why we're not able to check EE on time.

Anyway, regarding to the images, yes we'll save it to our local server, we just copied it to show you what we've done.

For the L & I, we need to put a white space on every image?
0
 
Tom BeckCommented:
Yes.

Alternately, you could divide the base image into two images, top half and bottom half. The top half could be a static image with the corrected "Happy Holidays" and the bottom half could be the five fade-in/fade-out images
0
 
Stiebel EltronAuthor Commented:
i see... thank you so much! Great!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now