CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1994521
user1994521

Reputation: 87

jquery fade toggle div over another div when click?

This is my test page and I want when the page is loaded everything is hidden. When I click on "About" text is fade in using fadeToggle(); but when I click on "My work" another text is fade in but under the previous one. I want fade it over the previous one. Can u help me?

My code:

<script>
$(document).ready(function(){
    $(".thumbnail").hide();
    $(".work").click(function(){
        $(".thumbnail").fadeToggle('slow');      
    });
});


$(document).ready(function(){
    $(".person").hide();
    $(".about").click(function(){
        $(".person").fadeToggle('slow');      
    });
});
</script>

Upvotes: 2

Views: 3350

Answers (5)

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Try this.

$(document).ready(function(){
    $(".thumbnail").hide();
    $(".person").hide();

    $(".work").click(function(){
        $(".person").hide();
        $(".thumbnail").fadeToggle('slow');      
    });


    $(".about").click(function(){
        $(".thumbnail").hide();
        $(".person").fadeToggle('slow');      
    });
});

Updated based on Matthew's comment Demo here

Upvotes: 4

Matteo Rubini
Matteo Rubini

Reputation: 831

This is a common problem:

multiple items to display but one of them showing at a time

simple solution is:

  • hide all elements
  • show what you want to see

in this way, you cover all possible solutions, even display nothing, where you skip second phase

in your case:

function hideAll(){
 $(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}

$(document).ready(function(){
    $(".work").click(function(){
        hideAll();
        $(".thumbnail").fadeToggle('slow');      
    });
    $(".about").click(function(){
        hideAll();
        $(".person").fadeToggle('slow');      
    });

hideAll();
});

Upvotes: 2

Mouser
Mouser

Reputation: 13304

function hideAll()
{
    $(".hideable").hide();
}

$(document).ready(function(){
    hideAll();  // great idea. First hide all then show the correct one.
    $(".button").click(function(){
        hideAll();
        if ($(this).hasClass("work"))
        {
          $(".thumbnail").fadeToggle('slow');
        }
        else if ($(this).hasClass("about"))
        {
           $(".person").fadeToggle('slow');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail hideable">thumbnail</div>
<div class="person hideable">person</div>

<button class="work button">Work</button>
<button class="about button">About</button>

This example should you give you a start. It attaches a click event to the buttons using the .button class selector. Then it checks if the button has another class and performs the appropiate action.

Upvotes: 0

Adjit
Adjit

Reputation: 10305

Your question is not reliant upon jQuery - it is reliant upon CSS and styling those two texts on top of each other. Then you can fade in/out.

What I would suggest trying is wrapping both text inside one div and working with position properties.

ie

HTML

<div class="wrapper">
    <div class="thubmnail">Some Thumbnail</div>
    <div class="person">Some Person</div>
</div>

CSS

.wrapper {
    position: relative;
}

.wrapper div {
    position: absolute; //This will position both divs one on top of the other
}

Upvotes: -1

Stewartside
Stewartside

Reputation: 20905

This is something very easy to complete, its best to use the same click event names with the divs you want to open so it can be modular.

There are some slight amendments to your HTML as well as a big change in the JS but it will work with as many sections as you like now without having to continuously add new click() functions.

$(document).ready(function() {
  $('section').hide();
  $(".btn").click(function() {
    $('section').fadeOut('1000');
    $('section#'+$(this).attr('id')).delay('1000').fadeIn();
  });
});
/* CSS Document 
html {
    background: url(green.jpg) no-repeat center center fixed;
    background-size: cover;
} 
 */

body {
  font-family: 'Candara', 'Open Sans', 'sans-serif';
}
/* css for the shiny buttons */

.btn {
  cursor: pointer;
  margin: 10px;
  text-decoration: none;
  padding: 10px;
  font-size: 14px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
}
.btn:hover {
  cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}
.contact {
  color: #000;
}
.contact:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.about {
  color: #000;
}
.about:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.work {
  color: #000;
}
.work:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
}
.buttons {
  padding-top: 30px;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 100px;
}
.title,
.subtitle {
  font-family: 'Wire one';
  font-weight: normal;
  font-size: 5em;
  margin-bottom: 15px;
  text-align: center;
}
.subtitle {
  line-height: .9em;
  font-size: 5.5em;
  margin-top: 0;
  margin-bottom: 40px;
}
.tagline {
  font-size: 1.4em;
  line-height: 1.3em;
  font-weight: normal;
  text-align: center;
}
.thumbnail {
  background-color: rgba(255, 255, 255, .2);
  border: 0 none;
  padding: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.thumbnail .caption {
  color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <a class="btn" id="about">About</a>
  <a class="btn" id="work">My Work</a>
  <a class="btn" id="contact">Contact</a>
</div>




<!-- Main (Home) section -->
<section class="section" id="about">
  <div class="container">
    <div class="person" style="display: block;">
      <div class="row">
        <div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center">

          <!-- Site Title, your name, HELLO msg, etc. -->
          <h1 class="title">Welcome!</h1>
          <h2 class="subtitle">My name is Daniel Adamek</h2>

          <!-- Short introductory (optional) -->
          <h3 class="tagline">
					I am 23 years old IT enthusiast located in Zlin, Czech Republic.<br>
					Currently, I am looking for any kind of job in IT field.<br>
          Please, check out my work and feel free to contact me :)
				</h3>

          <!-- Nice place to describe your site in a sentence or two -->

        </div>
      </div>
      <!-- /col -->
    </div>
    <!-- /row -->

  </div>
</section>


<!-- Third (Works) section -->
<section class="section" id="work">
  <div class="container">
    <div class="thumbnail" style="display: block;">
      <h2 class="text-center title">More Themes</h2>
      <p class="lead text-center">
        Huge thank you to all people who publish
        <br>their photos at <a href="http://unsplash.com">Unsplash</a>, thank you guys!
      </p>
    </div>
    <div class="row">
      <div class="col-sm-4 col-sm-offset-2">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-sm-offset-2">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>

If you do want to keep your HTML the exact same, try this out

$(document).ready(function(){
    $(".thumbnail").hide();
    $(".person").hide();
    $(".work").click(function(){
        $(".person").fadeOut('500');
        $(".thumbnail").delay('500').fadeIn('slow');      
    });
    $(".about").click(function(){
        $(".thumbnail").fadeOut('500');
        $(".person").delay('500').fadeIn('slow');      
    });
});

Upvotes: 0

Related Questions