Solved

How to design required layout using jQuery fadein/fadeout?

Posted on 2014-12-08
9
158 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
boostsrap 1 35
asp.net mvc5 6 34
Looking FTP apps that behaves similar to WinDirStat 3 35
Why is my combox not displaying in jqwidgets grid 14 37
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

710 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