• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 295
  • Last Modified:

fade in an active class

Hi all,
here is a link to my development page http://gromit.utopia.co.nz/~bhadmin/jquery/full-width-scroller/full-width.html.
The full width slider works fine.

When a next arrow is clicked an active class (dpui-ws-active") is applied which changes the opacity of the text from 0 to 1. I would like to fade in this action as oposed to making it simply appear. Can anyone assist?

The add class happens on line 350 of jquery.ui.dpui.wideScroller.js.
Cheers,
N
0
Neil_Bradley
Asked:
Neil_Bradley
  • 5
  • 5
1 Solution
 
Kyle HamiltonData ScientistCommented:
you could change the follwing two lines :

activeItem.removeClass(ws_activeItemClass);
self.nextItem.addClass(ws_activeItemClass)

to:

activeItem.stop().animate({"opacity":"0"});
self.nextItem.stop().animate({"opacity":"1"});
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi kozaiwaniec,
the suggestion looked promising however when applied, the slider went a little out of whack.
 I have mocked up your suggestion here http://gromit.utopia.co.nz/~bhadmin/jquery/full-width-scroller/full-widthEE.html.

I thought that is might work but no luck:
 self.nextItem.addClass(ws_activeItemClass).fadeIn("slow");

Cheers,
N
0
 
Kyle HamiltonData ScientistCommented:
sorry i was rushing. those two lines are not what controls that though. i'll have another look later - cant do it right now.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Cheers, essentially its the green text box that I looking at fading in..
N
0
 
Kyle HamiltonData ScientistCommented:
so the way the text item is done is this:

When an item is active, the active class is added to it via javascript. Then, in the css file, the text (p element) is assigned opacity:1 by virtue of being a child of the active class.

So it's not the active class that you want to fade, but the opacity of the p element that is a chil of the active class.

There a re a couple of ways to do that. the easiest would be to use CSS3 transitions, but this would not work in IE<9

The ther way is to remove the p (child) element from the css, and add the fade animation to to the javascript.

which would you prefer?
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi kozaiwaniec,
you have hit the nail firmly on the head.
To to remove the p (child) element from the css, and add the fade animation to to the javascript would be the preferred solution.
Cheers,
N
0
 
Kyle HamiltonData ScientistCommented:
let's start with this.

remove the class:

.dpui-ws-active, .dpui-ws-active p {
opacity: 1 !important;
}

Open in new window

Add these lines to the js
activeItem.removeClass(ws_activeItemClass);

// add this line:
activeItem.find("p").stop().animate({"opacity":0}, {duration:500});

self.nextItem.addClass(ws_activeItemClass);

// add this line:
self.nextItem.find("p").stop().animate({"opacity":1}, {duration:500});

Open in new window

add this to your onload function:
$("p.dpui-ws-active").css({"opacity":1});
like this:
<script type="text/javascript">
        // Instantiate wide scroller with no options - this is a basic example
        $(function() {
            $("p.dpui-ws-active").css({"opacity":1});
            $("#scroller").wideScroller();
        });

    </script>

Open in new window

0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Beautiful!
http://gromit.utopia.co.nz/~bhadmin/jquery/full-width-scroller/full-width.html
Before I close this question out, how easy would it be to make the first "text heading" visible when the page first loads?
Cheers,
N
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
If I could grade this answer an A++ I would.
Thanks for a superb solution.
Cheers,
Neil
0
 
Kyle HamiltonData ScientistCommented:
:)

I noticed you didn't do the last step. To make that first text box visible you need to add that line in the onload function per the post. It is in the head of your html file. Does that make sense?
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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