www.webdeveloper.com
Results 1 to 2 of 2

Thread: Toogle Contents Like WikiPEdia

  1. #1
    Join Date
    Apr 2007
    Posts
    395

    Toogle Contents Like WikiPEdia

    Im trying to reproduce a Toggling contents (Hide > Show), like that on wikipedia
    see:http://en.wikipedia.org/wiki/Tiny_Dancer

    I Have the Javascript it works Fine, But I can't get the text to wrap around the Image when the Contents are Hidden, when I click Hide the Contents Disappears but the text underneath moves up and over the Images. I think it may have todo with the order of the components on the page, Does anyone have a simple example of this system?

    Basic Page Layout
    PHP Code:
    <div class="wikiImages">
    <
    asp:DataList runat="server" Width="300px" RepeatColumns="1" RepeatDirection="Vertical" ID="dlWikiImages">
    <
    ItemTemplate>
    <
    asp:Image ID="imgWiki" CssClass="wikiHeaderImage" BorderStyle="Solid" BorderWidth="1px" BorderColor="#C0C0C0" runat="server" />                     
    </
    ItemTemplate>
    </
    asp:DataList>
    </
    div
    <
    div id="Contents">
    Contents Goes Here with Javascript Links Hide Show
    </div>

    === 
    Then Another Datalist with the text underneath 
    which I need to wrap
    === 

    CSS
    PHP Code:
    .wikiImages{    
        
    padding:6px 6px 15px 6px
        
    margin-left:5px;
        
    float:right;
        
    width:300px;
        
    display:inline;    }
            
        .
    wikiHeaderImage{
            
    height:75px;
            
    width:100px;
            
    padding:5px;
            
    margin:2px;
            
    float:right;} 

  2. #2
    Join Date
    Apr 2007
    Posts
    395

    Fixed

    Not exactly sure what I did but it works now, I replaced the text below that was displayed using a datalist with a ASP:label which enabled it to be stuck into a <p> tag which I think fixed the problem.

    this is the CSS
    PHP Code:
    .wikiImages
    {    
        
    padding:6px 6px 15px 6px
        
    float:right;
        
    width:300px;
        
    text-align:center;
        }
            
        .
    wikiHeaderImage
        
    {
            
    height:75px;
            
    width:100px;
            
    padding:1px;
            
    margin:2px;
            } 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles