Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: smoothly appearing content

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    848
    Thanks
    100
    Thanked 2 Times in 2 Posts

    Default smoothly appearing content

    Hey all,
    On my website I have added this code for content to show up in a box when clicked on it.
    But I would like the content to appear smoothly. This is the code I have so far. What needs to be added, please?
    Code:
    <script type="text/javascript">
    $(function () {
        $('.toggle').click(function (event) {
            event.preventDefault();
            var target = $(this).attr('href');
            $(target).toggleClass('hidden show');
        });
    });
    </script>
    Thanks.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,086
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there chechu,

    may we see the relevant HTML?

    It is also quite possible that this task can be done with just CSS.

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Mar 2017
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    The code is actually right.
    But if you want smooth functioning, you need to use animation CSS and while you're using this, you should not use Toggle function. Instead of Toggle, you can use hide or show function.

  4. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    848
    Thanks
    100
    Thanked 2 Times in 2 Posts

    Default

    Hey coothead,
    This is what I added:
    Code:
    					<a href="#info" class="toggle"><img src="img/info.png"></a>
    						<div id="info" class="hidden">
    							<p class="infobox">content</p>
    						</div>
    Code:
    .cover .hi .infobox {font-size:11px; background-color:#fff; border:1px solid #ccc; color:#444; line-height:1.8em; padding:10px; margin-top:5px; text-align:left;}
    You can see in action here on the top left, and the button beneath the actor portfolio section: http://www.brunomazereel.com

    I'm looking for something like this:
    Code:
    $('#toggle').on('click', function() {
      	img.fadeToggle();  
      });
    But I have no idea how to make it work with the existing js.
    Last edited by chechu; 05-06-2017 at 12:01 PM.

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,086
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there chechu,

    I cannot help you with jQuery as I only know "Vanilla JavaScript".

    But I can show you the CSS version...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <base href="http://www.brunomazereel.com/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #333;  /* just used for display purposes!! */
     }
    #cb {
        position: absolute;
        left: -999em;
     }
    label[for="cb"] {
        cursor: pointer;
     }
    #info {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: 1s ease-in-out;
    }
    #info p {
        display: inline-block;
        padding: 0.625em;
        margin-top: 0.32em; 
        background-color: #fff; 
        border: 0.06em solid #ccc;
        line-height: 1.8em; 
        font-size: 0.7em; 
        color: #444; 
     }
    #info p a {
        color: #444; 
     }
    #cb:checked~#info  {
        height: 12em; /* this value is adjusable */
        opacity: 1;
     }
    </style>
    
    </head>
    <body> 
    
    <div class="hi">					
     <span>
      <a href="#overview" class="download-link hidden-xs"><img src="img/arrow_down.png"></a>
     </span>
    
     <input id="cb" type="checkbox">
     <label for="cb"><img src="img/info.png" alt=""></label>
    
     <div id="info">
      <p>
       » commercial Toerisme Limburg 2 (2017)<br>
       » commercial Engie France (2017)<br>
       » commercial Toerisme Limburg 1 (2017)<br>
       » commercial Volkswagen (2016)<br>
       » commercial CM (2016)<br>
       » commercial Volkswagen (2016)<br><br>
       <a href="#portfolio">» watch all commercials</a>
     </p>
    <!-- .hi --></div>
    <!-- .hi --></div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  6. The Following User Says Thank You to coothead For This Useful Post:

    chechu (05-06-2017)

  7. #6
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    848
    Thanks
    100
    Thanked 2 Times in 2 Posts

    Default

    That works perfectly, thanks!
    I adjusted the top one, but now there is also another I was using here, below the actor portfolio.
    How do I adjust that? Always happy to be able to replace js by css ...

  8. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,086
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there chechu,

    does this help...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <base href="http://www.brunomazereel.com/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="http://www.brunomazereel.com/css/main.css">
    <link rel="stylesheet" href="http://www.brunomazereel.com/portfolio/css/cubeportfolio.css">
    
    <style media="screen">
    #cb1 {
        position: absolute;
        left: -999em;
     }
    label[for="cb1"] {
        cursor: pointer;
     }
    #updates {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: 1s ease-in-out;
    }
    #cb1:checked~#updates  {
        height: 25em; /* this value is adjustable */
        opacity: 1;
     }
    </style>
    
    </head>
    <body> 
    
    <div id="loadMore-container" class="cbp-l-loadMore-button hidden-xs">
    
    <hr class="spacer">
    
    <input id="cb1" type="checkbox">
    <label for="cb1" class="btn btn-primary btn-lg download-link">
     click here for updates chronologically, links to commercials<br>
     and downloads of all pictures and links to commercials
    </label>
    
    <hr class="spacer">
    
    <div id="updates">
     <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#chrono">updates chronologically in 2017</a></li>
      <li><a data-toggle="tab" href="#links">links to commercials and voice-overs</a></li>
      <li><a data-toggle="tab" href="#download">downloads pictures and links to commercials</a></li>
    </ul>
    
    <div class="tab-content">
    
    <div id="chrono" class="tab-pane fade in active">
     <p style="text-align:left;">
      <a href="http://www.youtube.com/watch?v=jwB1J8FL76s?&rel=0&showinfo=0" data-title="Toerisme Limburg 2 (2017): SBS, Medialaan (BE)" class="cbp-lightbox"><img src="portfolio/img/commercial_limburg2.jpg" title="commercial Limburg 2" class="imgupdates tool-tip" data-placement="top" alt="" ></a>
      <a href="portfolio/work/torfs1.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs1.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/torfs2.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs2.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/torfs3.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs3.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/torfs4.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs4.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/fintro.jpg" data-title="Fintro (2017)" class="cbp-lightbox"><img src="portfolio/work/fintro.jpg" title="Fintro" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="http://www.youtube.com/watch?v=va4vTwOLlrc?&rel=0&showinfo=0" data-title="Engie France (2017)" class="cbp-lightbox"><img src="portfolio/img/commercial_engieFR.jpg" title="commercial Engie FR" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/ams4.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams4.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/ams2.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams2.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/ams3.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams3.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="http://www.youtube.com/watch?v=9MKvqVTtzzc?&rel=0&showinfo=0" data-title="Toerisme Limburg 1 (2017): SBS, Medialaan (BE)" class="cbp-lightbox"><img src="portfolio/img/commercial_limburg1.jpg" title="commercial Limburg 1" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/delhaize.jpg" data-title="Delhaize (2017)" class="cbp-lightbox"><img src="portfolio/work/delhaize.jpg" title="Delhaize" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/Zgeneration.jpg" data-title="Z-Generation (2017)" class="cbp-lightbox"><img src="portfolio/work/Zgeneration.jpg" title="Z-Generation" class="imgupdates tool-tip" data-placement="top" alt=""></a>
      <a href="portfolio/work/fme.jpg" data-title="Fresh Mushrooms Europe (2017)" class="cbp-lightbox"><img src="portfolio/work/fme.jpg" title="Fresh Mushrooms Europe" class="imgupdates tool-tip" data-placement="top" alt=""></a>
     </p>
    <!-- #chrono --></div>
    
    <div id="links" class="tab-pane fade">
    
    <div class="row">
    
    <div class="col-lg-6">
     <p style="text-align:left;margin-left:15px;">
      <br><a href="http://www.youtube.com/watch?v=jwB1J8FL76s" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Toerisme Limburg 2 (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=jwB1J8FL76s
      <br><a href="http://www.youtube.com/watch?v=va4vTwOLlrc" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Engie FR (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=va4vTwOLlrc
      <br><a href="http://www.youtube.com/watch?v=9MKvqVTtzzc" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Toerisme Limburg 1 (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=9MKvqVTtzzc
      <br><a href="http://www.youtube.com/watch?v=MAtwgOsycc0" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 3 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=MAtwgOsycc0
      <br><a href="http://www.youtube.com/watch?v=OFQgEAkZv8k" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="JBC (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=OFQgEAkZv8k
      <br><a href="http://www.youtube.com/watch?v=bVYHjVlXRgw" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Engie BE (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=bVYHjVlXRgw
      <br><a href="http://www.youtube.com/watch?v=gjElHVZ4f14" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 2 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=gjElHVZ4f14
      <br><a href="http://www.youtube.com/watch?v=ELFdbTwJkJE" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 1 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=ELFdbTwJkJE
      <br><a href="http://www.youtube.com/watch?v=Sa0nGFmk7Ec" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Bison (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=Sa0nGFmk7Ec
      <br><a href="http://www.youtube.com/watch?v=nvENEbvSMW4" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="CM (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=nvENEbvSMW4
     </p>
    <!-- .col-lg-6 --></div>
    
    <div class="col-lg-6">
     <p style="text-align:left;margin-left:15px;">
      <br><a href="http://www.youtube.com/watch?v=tuXjrcIGsWY" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Krėfel (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=tuXjrcIGsWY
      <br><a href="http://vimeo.com/133641061" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Skyline Europe (2016)" data-placement="top"></i> &nbsp;&nbsp; http://vimeo.com/133641061
      <br><a href="http://www.youtube.com/watch?v=MVqAA9_7gR4" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Peugeot tutorial (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=MVqAA9_7gR4
      <br><a href="http://www.youtube.com/watch?v=8MGYyB41lJ8" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="voice-over English (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=8MGYyB41lJ8
      <br><a href="http://www.youtube.com/watch?v=6uzW4hN_Yd0" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Aoste voice-over Dutch (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=6uzW4hN_Yd0
      <br><a href="http://www.youtube.com/watch?v=RMVH-JfOacQ" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Roompot (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=RMVH-JfOacQ
      <br><a href="http://www.youtube.com/watch?v=fjtfIBUzNQA" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Tour Eiffel FR (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=fjtfIBUzNQA
      <br><a href="http://www.youtube.com/watch?v=rm8mHmxASAk" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Bokrijk (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=rm8mHmxASAk
      <br><a href="http://www.youtube.com/watch?v=Ba3Y2Ov2NBE" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Colruyt (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=Ba3Y2Ov2NBE
      <br><a href="http://www.youtube.com/watch?v=KZQPkOE2PvI" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Dats24 (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=KZQPkOE2PvI
     </p>
    <!-- .col-lg-6 --></div>
    
    <!-- .row --></div>
    <!-- #links --></div>
    
    <div id="download" class="tab-pane fade">
     <form method="get" action="img/photos_BrunoMazereel.zip" style="float:left;margin-left:15px;">
      <button type="submit" class="btn btn-primary btn-lg download-link"><i class="fa fa-folder-open-o" aria-hidden="true"></i> &nbsp; click here to download all pictures (.zip)</button>
     </form>
     <form method="get" action="img/commercials_BrunoMazereel.zip" style="float:left;margin-left:15px;">
      <button type="submit" class="btn btn-primary btn-lg download-link"><i class="fa fa-folder-open-o" aria-hidden="true"></i> &nbsp; click here to download all links to commercials and voice-overs (.zip)</button>
     </form>
    <!-- #download--></div>
    
    <!-- .tab-content --></div>
    <!-- #updates --></div>
    <!-- #loadMore-container --></div>
    
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://www.brunomazereel.com/js/vendor/bootstrap.js"></script>
    
    </body>
    </html>
    Note:-

    This...
    Code:
    
    <base href="http://www.brunomazereel.com/">
    ...and various instances of...
    Code:
    
    http://www.brunomazereel.com/
    ...were added for testing purposes only.

    I have also corrected and validated the HTML.

    Your page has numerous errors...
    ...which need your attention

    coothead
    ~ the original bald headed old fart ~

  9. The Following User Says Thank You to coothead For This Useful Post:

    chechu (05-06-2017)

  10. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    848
    Thanks
    100
    Thanked 2 Times in 2 Posts

    Default

    That's some really great stuff what you did there, thanks.
    Just one issue: if you check the site on smaller devices than laptop, not the whole content of the tabs is shown (see below). I guess that's because here you set a fixed height:
    Code:
    #cb1:checked~#updates {height: 25em; opacity: 1;}
    How to fix that so that the height will always be at least the height of the tab with the most content, please?
    Click image for larger version. 

Name:	Knipsel.JPG 
Views:	15 
Size:	66.5 KB 
ID:	6167
    Last edited by chechu; 05-07-2017 at 12:07 AM.

  11. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,086
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there chechu,

    Sorry about that, I forgot to make the code responsive.

    Add these media queries...

    Code:
    
    @media screen and (max-width:75em){
    #cb1:checked~#updates  {
        height: 40em;
      }
     }
    
    @media screen and (max-width:62em){
    #cb1:checked~#updates  {
        height: 50em;
      }
     }
    ...to your "theme.css" file.

    coothead
    ~ the original bald headed old fart ~

  12. #10
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    848
    Thanks
    100
    Thanked 2 Times in 2 Posts

    Default

    Thanks for that.
    But is it not possible not to work with fixed height? I don't mind if the content underneath moves according to the amount of content in the tabs.

Similar Threads

  1. Dropdown Appearing Below Content
    By pinch in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-11-2012, 02:20 PM
  2. Ajax Tabs Content: Content appearing outside of div!
    By PeteW in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-18-2008, 06:02 PM
  3. RSS Content not appearing in RSS Display Boxes
    By rickpoet in forum Dynamic Drive scripts help
    Replies: 24
    Last Post: 04-11-2008, 11:15 PM
  4. CMotion gallery with Dynamic Ajax content added - images not appearing in IE
    By GillianSeeley in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-11-2008, 12:56 AM
  5. background image not appearing in Tab Content
    By hc14 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-03-2007, 04:54 AM

Bookmarks

Posting Permissions

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