Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jan 2009
    Posts
    7
    Member #
    18098
    I have two buttons at the bottom of my page that are supposed to fade in two different content areas.

    In firefox, It won't fade in the second area, and it wont fade back to the first area either. So pretty much, none of it works in Firefox.

    In Internet Explorer, the first area cuts away before the second area fades in. Also, after the second area fades away again, the first area just cuts back in. It seems as though the fade settings don't work on the first content area.

    I hope you can help me out!

    I have posted the page at: http://www.idea-palette.com/testfolder/pagetest3c.html

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    I don't see the two buttons.
    What are the buttons called?


  4. #3
    Junior Member
    Join Date
    Jan 2009
    Posts
    7
    Member #
    18098
    Here's my jQuery to fade in the different content ares:

    Code:
    $(document).ready(function() {
    
         $("#areatwo").hide();
         
         $("#button2").click(function() {
               $("#areaone").fadeOut(1500,function(){
                   $("#areatwo").fadeIn(1500);
               });
         });
    
         $("#button1").click(function() {
               $("#areatwo").fadeOut(1500,function(){
                   $("#areaone").fadeIn(1500);
               });
         });
    
    });
    This is my body content that is affected by the jQuery. Here's the two content areas that fade in when the appropriate buttons are pushed:

    Code:
    <div id="areaone">     
            <div id="slideshow" class="fadeincontent">
                    <div id="fadetest">
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb1b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb2b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb3b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb4b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb5b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                    </div>                                           
                   <div id="slidenav" class="nav">
                            <a id="prev2" href="#"> <span>Back</span></a>                          
                            <a id="next2" href="#"> <span>Forward</span> </a>
                            <span style="position:relative; left: 90px; top:7px; font-weight:500; font-size:11px;">
                                Click on Slideshow to Launch
                            </span>
                    </div>
             </div>
    </div> 
    
    <div id="areatwo" class="fadeincontent">
            <img src="images/poster_thumb3b.gif" />
    </div>
    Here are the buttons that make the fading happen when clicked on:

    Code:
    <div id="buttonstofade">
                    <center><span class="fadebutton"><a id="button1" href="#">First
            Content Area</a></span></center>
                    <center><span class="fadebutton"><a id="button2" href="#">Second
            Content Area</a></span></center>
    </div>

    Quote Originally Posted by mlseim
    I don't see the two buttons.
    What are the buttons called?

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Your website is one example of how trying too hard to use fancy navigation,
    motion, sliders, Javascripting, etc. is simply not worth the effort and stress it
    takes to make it work on all browsers.

    In most cases, I would just tell someone to not even bother with anything
    that moves. In your case, since you are a graphic designer, your website could,
    and probably should, utilize a Flash application.

    There was just a guy on WDF that asked about a template. I think he ended-up
    buying a pre-made Flash template. This is the link to his site ...
    http://threedfxman.xtreemhost.com/

    If you have a business (like you have, in graphics), I would really look at hiring a
    professional Flash programmer to work with you on a Flash presentation type of
    website. You do the graphics design, the Flash person does the programming.

    All of the mix of CSS and Javascripting on your existing site is too hard to deal with.

    In my opinion, you're knocking yourself out. It's not worth it. You'll get it sort
    of working on one browser, but something else will fail on another ... it will always
    be like that and you'll be frustrated. Then, when you want to add something,
    you'll start all over again.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com