Skip navigation
Currently Being Moderated

How do I create a clickable drag down list?

Apr 25, 2013 1:45 PM

Tags: #down #pull #box_art #drags

How do I make a box that has a list of 10 words, but if you pull down on it, it can show you up to 20 or 30? If the visitor clicks on the bottom and pulls down on it, it will show more to the list. Do you understand what I mean? It is a structured box with a structured sie that fits the 1-10, but when you click on the bottom corner or just the bottom, you can drag the box to become larger which in turns reveals more to the list.

 

Thank you in advance.

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Apr 25, 2013 2:50 PM   in reply to BillyKundalini

    Are you looking for something like this?

    http://jsfiddle.net/AP9Hm/3/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2013 7:40 PM   in reply to BillyKundalini

    Got a link to an example?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2013 1:02 PM   in reply to BillyKundalini

    Sorry.  But there's no such property in CSS.  You would need to look at jQuery.

    http://jqueryui.com/resizable/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2013 12:10 PM   in reply to BillyKundalini

    If you want advanced layout help, you must upload your work to a public web space you control and post the URL here.   When your question is answered, you can delete the page from your web space.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2013 1:12 PM   in reply to BillyKundalini

    Create a 3-column header like this:

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5, 3-Col Header</title>
    
    <style>
    
    body {
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size:100%;
    width: 1000px;
    margin: 0 auto; /**with width, this is centered**/
    color: #000;
    background: #069;
    }
    
    header {
    background: #000;
    color: #FFF;
    min-height: 150px;
    overflow: hidden; /**float containment**/
    }
    
    /**header columns**/
    header aside {border:1px dotted red; box-sizing:border-box;}
    header aside.left { float:left; width: 20%; }
    header aside.middle {float:left; width: 59%; text-align:center}
    header aside.right {float:right; width: 20%;
    }
    
    /**clear floats after 3rd column**/
    aside-nth:child(3) {clear:both;}
    </style>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
    
    <header>
    
    <aside class="left">
    <p>Menu goes here</p>
    </aside>
    
    <aside class="middle">
    <p>Background-image goes in the CSS.</p>
    <h1>Site Name</h1>
    </aside>
    
    <aside class="right">
    <p>jQuery Re-sized Box goes here</p>
    </aside>
    
    </header>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 10:48 AM   in reply to BillyKundalini

    Show me your URL please. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 12:52 PM   in reply to BillyKundalini

    Use your graphics editor to crop out content and scale your banner image to fit inside the .middle column. Something like this.  View source to see the code.

    http://www.alt-web.com/sandbox/3-col-header.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 2:43 PM   in reply to BillyKundalini

    Use CSS to style your table or definition lists.

     

    Definition List Examples:

         http://jsfiddle.net/NancyO/SxGNV/

         http://www.maxdesign.com.au/articles/definition/

     

    I don't know what doc type or layout methods you're using in your other site pages.  I would probably use this page as a basic template and add whatever else is needed below the </header> tag.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2013 11:48 AM   in reply to BillyKundalini

    APDivs are pure poison.  Do yourself a favor and don't go down this slippery slope.  Absolute positioning removes content from the normal document flow.  You can't center it.

     

    MM_Rollover images for menus are not professional either.  They can't be indexed by search engines nor seen by language translators and screen readers.  Worse yet, if JavaScript is not enabled, they don't work. 

     

    If that doesn't seal the deal for you, consider that image based menus are as tedious and time consuming to edit as they are to create in the first place.  If you ever need to add another menu item, you must open your graphics editor and re-craft the entire thing.  This gets real old in a hurry.

     

    Get rid of the MM_Rollovers, APDivs and image based menus you have now and learn to use CSS to create list menus and layouts without positioning. 

    See my example below:

    http://www.alt-web.com/sandbox/3-col-header.html

     

    Good luck!

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2013 2:22 PM   in reply to BillyKundalini

    Is there a way that the below content will stay in place and the menu pulls down on top of it?

    Not that I'm aware of.  The whole point of the jQuery resize plugin is to make all content accessible without overlapping which would pose usability problems. 

     

    In your mock-up, the resize panel gets knocked out by the APDiv (menu).

    my boss really wanted to make the buttons look like those keys so use an actual picture of a key for the background seemed to be the most logical thing in my mind.

     

    You can do some amazing things with CSS borders, shadows and gradients, you know?   It's worth exploring to get the exact style you're after without resorting to images.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2013 3:38 PM   in reply to BillyKundalini

    CSS:

     

    #apDiv1 {

         width: 1000px;

         margin:0 auto; /*this is centered*/

         position:absolute;

        left:13px;

        top:322px;

        width:991px;

        height:155px;

        z-index:1;

    }

     

     

    HTML:

     

    </header>

     

    <div id="apDiv1">YOUR MENU CODE GOES HERE...

    </div>

     

    <script>

         resize function code goes here...

    </script>


    </body>

    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 12:34 PM   in reply to BillyKundalini

    That's a standard method in this forum showing you how to amend your code (in this case delete those lines).

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 1:30 PM   in reply to BillyKundalini

    CSS for containers with scrollbars:

     

    article.left, article.right {

        background: #FFF;

        height: 200px; /**adjust height and width as req'd**/

        width: 200px;

        overflow:scroll;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 1:32 PM   in reply to Nancy O.

    Oooops. My bad.  Article is the wrong selector.

    Change that to aside.left and aside.right.

     

     

    aside.left, aside.right {

        background: #FFF;

        height: 200px; /**adjust height and width as req'd**/

        width: 200px;

        overflow:scroll;

    }

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 2:32 PM   in reply to BillyKundalini
     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 3:09 PM   in reply to BillyKundalini

    With CSS, change styles to suit.

     

     

    aside.left h3 {

         font-size: 26px;

         color:red;

         text-transform:uppercase;

    }

     

    aside.right h3 {

         font-size: 36px;

         color: green;

         letter spacing: 2px;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2013 2:08 PM   in reply to BillyKundalini

    First, validate your code and fix the errors. 

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.bestmarke tingnames.com%2Fbanneredit.php

     

    Align attribute is obsolete, you should use CSS text-align: to center text. 

    Border attribute on images is obsolete.  Remove it.  Also, remove added <div> tags from the <aside> divs.   You don't need them. 

     

    CSS:

         aside p {text-align:center}

     

         aside.right p {color: #000}

         .green {color:green}

     

    HTML:

         <p class="green">This text is green</p>

         <p>This text is black <span class="green">this is green text</span> and this is black text again.</p>

     

    You need to devote an hour or more to doing the W3Schools CSS exercises.  Pay particular attention to CSS IDs and Classes.

    http://www.w3schools.com/css/css_intro.asp

     

    Re: your question about adding images to headings, can you post an example of what you're trying to do?

     

     

    Nancy O.

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points