Task Dropping content with JS

Page 1 of 1

9 Replies - 330 Views - Last Post: 08 October 2012 - 08:15 PM

#1 Redbird5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 07-July 12

Task Dropping content with JS

Posted 08 October 2012 - 06:59 PM

I'm looking for a tutorial that will allow me to click on a link and the container will drop down with content in it. I'm wanting to use JS or Jquery. I'm not sure what to look for on Google.
Is This A Good Question/Topic? 0
  • +

Replies To: Task Dropping content with JS

#2 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 04-December 08

Re: Task Dropping content with JS

Posted 08 October 2012 - 07:12 PM

Hi there,

This is actually pretty simple. It can easily be achieved with jQuery with a function called slideDown(). Hehe it sounds simple enough. Here's an example on the jQuery website.

http://api.jquery.com/slideDown/
Was This Post Helpful? 0
  • +
  • -

#3 Redbird5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 07-July 12

Re: Task Dropping content with JS

Posted 08 October 2012 - 07:16 PM

Thanks, I'm assuming it doesn't matter that I'm calling it from another JQ action? The menu is built with JQ.
Was This Post Helpful? 0
  • +
  • -

#4 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 04-December 08

Re: Task Dropping content with JS

Posted 08 October 2012 - 07:19 PM

Not at all. You can assign it to a click function.



(function(){ 
	
    $("a.yourclass").click(function(){

        $("#yourDivContainer").slideDown();

    });
	
})();


Or something along those lines. Hope this helps!
Was This Post Helpful? 2
  • +
  • -

#5 Redbird5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 07-July 12

Re: Task Dropping content with JS

Posted 08 October 2012 - 07:34 PM

This is my current code. I'm using a fly out menu. When I click a menu item I want for the slow slide to work. Where do I put it? 

 $(function() {
            $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-15px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'-10px'
                        }, 400);
                },
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-95px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'50px'
                        }, 400);
                }
            );
        });

Was This Post Helpful? 0
  • +
  • -

#6 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 04-December 08

Re: Task Dropping content with JS

Posted 08 October 2012 - 07:40 PM

Just a quick question, you want the menu to slide down when you hover over it or click?

BTW are you trying to achieve an accordion menu? Maybe you could post your HTML too please so I could help you better :bananaman:
Was This Post Helpful? 0
  • +
  • -

#7 Redbird5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 07-July 12

Re: Task Dropping content with JS

Posted 08 October 2012 - 07:43 PM

The menu is on the bottom of the page and I would like the "pages" to drop down from the top. Right now all I have written is the menu. I'll work on the content once I get this part figured out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Index</title>
        
        <link rel="stylesheet" href="portfolio.css" type="text/css" media="screen"/>
    </head>
    <body>
    <div id="banner"><img src="image/bannertext.png" /></div>
        <div class="container">
<ul id="menu">
                <li>
                    <a>
                        <i class="icon_about"></i>
                        <span class="title">About</span>
                        <span class="description">Learn about me</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="icon_work"></i>
                        <span class="title">Portfolio</span>
                        <span class="description">See my work and portfolio</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_help"></i>
                        <span class="title">Contact</span>
                        <span class="description">Talk to me</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_search"></i>
                        <span class="title">Home</span>
                        <span class="description">Come Home</span>
                    </a>
                </li>
            </ul>
        </div>



        <!-- The Javascript -->
        <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-15px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'-10px'
                        }, 400);
                },
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-95px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'50px'
                        }, 400);
                }
            );
        });
        </script>
    </body>
</html>

Was This Post Helpful? 0
  • +
  • -

#8 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 04-December 08

Re: Task Dropping content with JS

Posted 08 October 2012 - 07:54 PM

Okay from what I've understood you'd want something like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Index</title>
        
    <link rel="stylesheet" href="portfolio.css" type="text/css" media="screen"/>
    </head>
    <body>
    <div id="banner"><img src="image/bannertext.png" /></div>
        <div class="container">
				<div class="menu" style="float: left;">
				<ul id="menu">
                <li>
                    <a>
                        <i class="icon_about"></i>
                        <span class="title">About</span>
                        <span class="description">Learn about me</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="icon_work"></i>
                        <span class="title">Portfolio</span>
                        <span class="description">See my work and portfolio</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_help"></i>
                        <span class="title">Contact</span>
                        <span class="description">Talk to me</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_search"></i>
                        <span class="title">Home</span>
                        <span class="description">Come Home</span>
                    </a>
                </li>
            </ul>
            </div>
            
            <div class="pages" style="float: left;">
            	This is some sample content.
            </div>
            <div style="clear:both;"></div>
        </div>

        <!-- The Javascript -->
		<script type="text/javascript" src="scripts/jquery-1.7.2.min.js">
        <script type="text/javascript">
        $(function() {
        
            $('#menu > li').click(function(){
	            $('.pages').hide();
            	$('.pages').slideDown();
            });
        });
        </script>
    </body>
</html>


Please forgive the styling :whistling:
Was This Post Helpful? 0
  • +
  • -

#9 Redbird5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 07-July 12

Re: Task Dropping content with JS

Posted 08 October 2012 - 08:07 PM

I'm wanting to keep the menu and want to add a slide menu you click "about me."
Was This Post Helpful? 0
  • +
  • -

#10 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 04-December 08

Re: Task Dropping content with JS

Posted 08 October 2012 - 08:15 PM

In that case, you could just add the "about me" div anywhere and hide it and a click listener. You can use the same code in my second reply. Just add it after the hover function and you'll be just fine :rockon:
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1