Solved

How to design required layout using jQuery fadein/fadeout?

Posted on 2014-12-08
9
133 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
Comment Utility
Maybe something like this?

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

Author Comment

by:Stiebel Eltron
Comment Utility
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
Comment Utility
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
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:Stiebel Eltron
Comment Utility
<!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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
i see... thank you so much! Great!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

763 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

11 Experts available now in Live!

Get 1:1 Help Now