Solved

How to design required layout using jQuery fadein/fadeout?

Posted on 2014-12-08
9
143 Views
Last Modified: 2014-12-10
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
Comment
Question by:Stiebel Eltron
  • 5
  • 4
9 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40486567
Maybe something like this?

http://jsfiddle.net/9an7g4h0/1/
0
 

Author Comment

by:Stiebel Eltron
ID: 40488068
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
 

Author Comment

by:Stiebel Eltron
ID: 40488110
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40488146
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:Stiebel Eltron
ID: 40488250
<!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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40488698
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
 

Author Comment

by:Stiebel Eltron
ID: 40491212
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40491231
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
 

Author Comment

by:Stiebel Eltron
ID: 40491307
i see... thank you so much! Great!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now