Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to design required layout using jQuery fadein/fadeout?

Posted on 2014-12-08
9
Medium Priority
?
169 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
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 2000 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

Industry Leaders: 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!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to count occurrences of each item in an array.
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).
Suggested Courses

688 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