The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Javascript Help

View previous topic View next topic Go down

Solved Javascript Help

Post by Mike on May 19th 2011, 3:55 am

Hi there,

I need some help with JS. Right now I have something that on hover slides and shows something to the right, however I want to show it on the left.

Here's my code:
Code:
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'480px'},500);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'115px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });
        </script>

If you need a example of it I can show you


Last edited by Drogba921 on May 21st 2011, 6:55 pm; edited 1 time in total

Mike
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Solved Re: Javascript Help

Post by ElMuggs on May 19th 2011, 5:52 am

If i recall right (and it's a bit tricky coding without being able to see the example) you just need to make one of the numbers a negative to make it go in reverse

I think it's either this line:

$this.stop().animate({'width':'480px'},-500);

or this one:

this.stop().animate({'width':'115px'},-1000);

Hope that helps!

ElMuggs
Forumember

Posts : 91
Reputation : 17
Language : CSS / HTML / BBcode / Javascript / Graphics and Tech Support yeech..
Location : Deep in the belly of the code

http://wizardswb.forumotion.com

Back to top Go down

Solved Re: Javascript Help

Post by Mike on May 20th 2011, 12:56 am

No, that's the time it takes to do as such. Anyone else?

Mike
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Solved Re: Javascript Help

Post by Mike on May 21st 2011, 4:27 pm

Is anyone able to help?

Mike
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Solved Re: Javascript Help

Post by Gangstar15 on May 21st 2011, 5:34 pm

Ya.. can i see the example :=)

Gangstar15
Forumember

Female Posts : 392
Reputation : 163

http://www.designdrops.net/

Back to top Go down

Solved Re: Javascript Help

Post by Mike on May 21st 2011, 6:09 pm

[Post Removed]

Mike
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Solved Re: Javascript Help

Post by Gangstar15 on May 21st 2011, 6:21 pm

This is something to do with the CSS not the jQuery Smile
I didn't came to fix it but here is something you may like:
1. go to http://htmledit.squarefree.com/
2. Paste this code and see what will happen:
Spoiler:
Code:
<style>
ul.accordion{
    list-style:none; 
    position:absolute;
    right:80px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}
ul.accordion li{
    width:115px;
    height:200px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative ;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
    float: left;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}
ul.accordion li.bleft{
    border-left:2px solid #fff;
}
ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}
ul.accordion li .description h2{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
}
</style>

     



            <ul class="accordion" id="accordion">

                <li class="bg1">
                <div class="test">
                    <div class="heading">Discussion</div>



                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2>Discussion</h2>

                        <p>General Discussion on all of the greatest topics our members can think of!</p>

                        <a href="#">more &rarr;</a>

                    </div>
                  </div>
                </li>



                <li class="bg2">

                    <div class="heading">Programs</div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2>Programs</h2>

                        <p>Get opinions on the best development and Graphic Programs. Click here to learn more. </p>

                        <a href="#">more &rarr;</a>



                    </div>



                </li>

                <li class="bg3">

                    <div class="heading">Requests</div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2>GFX Requests</h2>



                        <p>WebDesign Offers Graphic Requests so that you can get graphics made! Click here to learn more.</p>

                        <a href="#">more &rarr;</a>

                    </div>



                </li>

                <li class="bg4 bleft">

                    <div class="heading">HTML Help</div>

                    <div class="bgDescription"></div>



                    <div class="description">

                        <h2>HTML Help</h2>

                        <p>Need help with HTML and CSS coding? Click here to view our support forum with free help!</p>

                        <a href="#">more &rarr;</a>

                    </div>



                </li>

            </ul>









        <!-- The JavaScript -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script type="text/javascript">

            $(function() {

                $('#accordion > li').hover(

                    function () {

                        var $this = $(this);

                        $this.stop().animate({'width':'480px'},500);

                        $('.heading',$this).stop(true,true).fadeOut();

                        $('.bgDescription',$this).stop(true,true).slideDown(500);

                        $('.description',$this).stop(true,true).fadeIn();

                    },

                    function () {

                        var $this = $(this);

                        $this.stop().animate({'width':'115px'},1000);

                        $('.heading',$this).stop(true,true).fadeIn();

                        $('.description',$this).stop(true,true).fadeOut(500);

                        $('.bgDescription',$this).stop(true,true).slideUp(700);

                    }

                );

            });

        </script>

 

Gangstar15
Forumember

Female Posts : 392
Reputation : 163

http://www.designdrops.net/

Back to top Go down

Solved Re: Javascript Help

Post by Mike on May 21st 2011, 6:26 pm

nah it didnt help. Ill try and use something else.

Mike
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Solved Re: Javascript Help

Post by MrMario on May 21st 2011, 11:46 pm

Solved => Locked

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum