CSS Codes
CSS Layouts
Page 2 of 2 FirstFirst 12
Results 11 to 17 of 17

Thread: smoothly appearing content

  1. 05-07-2017, 10:27 AM #11
    coothead's Avatar
    coothead
    coothead is offline Elite Coders
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there chechu,

    You need to bear in mind that you have chosen to use
    frameworks for your site rather than bespoke coding.

    If I did not have to fight "Bootstrap" then I would have
    just coded it like this...

    Code:
    
#updates {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 1s ease-in-out;
}
#cb1:checked~#updates  {
    max-height: 100%;
    opacity: 1;
 }
    ...job done.

    The only way to bypass "Bootstrap's" control in this case,
    is to use the media queries that I have suggested.

    coothead
    ~ the original bald headed old fart ~
    Reply With Quote Reply With Quote

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

    chechu (05-07-2017)
  3. 05-07-2017, 10:43 AM #12
    chechu
    chechu is offline Senior Coders
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    927
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default

    No need for fighting, you overrode Bootstrap :-)
    Just added your code to my css file and it seems to work fine. If you could check from your side, please?
    Reply With Quote Reply With Quote
  4. 05-07-2017, 10:58 AM #13
    coothead's Avatar
    coothead
    coothead is offline Elite Coders
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there chechu,

    yes, that is working OK.

    coothead
    ~ the original bald headed old fart ~
    Reply With Quote Reply With Quote

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

    chechu (05-07-2017)
  6. 05-07-2017, 11:14 AM #14
    chechu
    chechu is offline Senior Coders
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    927
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default

    When hovering over the info icon on the "links" section (second tab), the hover text of the links in the left column doesn't appear entirely.
    Is that a pdding-margin issue?

    EDIT: no worries, I'll make the tooltip appear on the right instead of top.
    Thanks for your help!
    Reply With Quote Reply With Quote
  7. 05-09-2017, 04:33 PM #15
    chechu
    chechu is offline Senior Coders
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    927
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default

    How to create the same effect in css, but with the title disappearing when clicked upon and having the content moving up to where the title was.
    Is that possible?
    Reply With Quote Reply With Quote
  8. 05-09-2017, 08:15 PM #16
    coothead's Avatar
    coothead
    coothead is offline Elite Coders
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there chechu,

    something like this perhaps...

    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"] {
    opacity: 1;
    cursor: pointer;
    transition: 0.4s 0.25s ease-in-out;
 }
#updates {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 1s  ease-in-out;
}
#cb1:checked~#updates  { 
    max-height: 100%; 
    margin-top: -9.5em; 
    opacity: 1;
 }
#cb1:checked~label[for="cb1"]  { 
    opacity: 0;
 }
.nav li label {
    position: relative;
    display: block;
    padding: 0.625em 0.9375em;
    margin-left: 0.5em;
    border: 0.0625em solid #999;
    border-radius: 0.5em;
    background-color: #eee;
    font-weight: normal;
    color: #393939;
 }
</style>

</head>
<body> 

<div id="loadMore-container" class="cbp-l-loadMore-button hidden-xs">

<hr class="spacer">

<input id="cb1" type="radio" name="r">
<input id="cb2" type="radio" name="r">

<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>
  <li><label for="cb2">close updates</label></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>

    coothead
    ~ the original bald headed old fart ~
    Reply With Quote Reply With Quote

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

    chechu (05-09-2017)
  10. 05-09-2017, 08:42 PM #17
    chechu
    chechu is offline Senior Coders
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    927
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default

    Cool stuff, Coothead!
    Thanks!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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, 05: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
  •  

Forum Rules