(Beginner) Portfolio Help

Hey All,

I started on my portfolio but I am running into some challenges.

My goal is for the user to select from each button (Home, Projects, About and Contact) and content is shown for each. Home would be an intro, Projects will be a showcase, About is personal information, and Contact will contact info.

I’ve tried numerous options such as jQuery but kept running into hiccups. Right now, if you click Home, then text shows ups. I was just trying to test the transitions but kept hitting a brick wall when I want content for Projects to show up separately.

Any direction to resources or feedback would be greatly appreciated. Hopefully I am making sense!

Thanks in advance!!

I dont know if this really helps, but when I was looking at your code just now, I noticed that you only coded in JS for the Home button, you didn’t add any functionality for any of the other buttons, which also dont have classes like the Home button does.

You could try adding a class and removing a class to the buttons trhough JS, so like if they click on Home, Home will have the class that allows it to be seen, but once they click on projects, home looses the class and projects gains the class…?

Sorry if this doesnt help much :frowning:

  • Nao
1 Like

So here is my current code after your suggestion

  <div class="row">
<div class="col-md-3">
  <h2><button class="btn1"><strong>Home</strong></button></h2>
</div>
<!--Home tab code ends here-->
<!--Projects tab code starts here-->
<div class="col-md-3">
  <h2><button class="btn2"><strong>Projects</strong></button></h2>
</div>
<!--Projects tab ends here-->

And here is the JS

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p:first").fadeIn();
  });
  $(".btn2").click(function(){
    $("p:second").fadeIn();
  });
});

But when I select “Projects” nothing is populating.

I don’t know whether :second is a valid jQuery selector but it sounds like it should be :nth-child(2) if any.

However, I advice against doing this because it’s confusing and can easily be broken if you modify your html (for example if you add another p element before it). You should be using IDs instead. It’s easier to keep track of and tells jQuery to stop searching once it has found that particular element.

HTML

<p id=homeText style="display:none">Home</p>

<!--Projects - fadeIn - information-->
<p id=projectText style="display:none">Projects</p>

JS

$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").fadeOut();
  $("#homeText").fadeIn();
  });
  $(".btn2").click(function(){
    $("p").fadeOut();
    $("#projectText").fadeIn();
  });
});

Also since you’re technically showing and displaying different sections, not just the text, you should be using divs that act as the page. Give them a common class and what you can do is hide all of those class upon click, then show the specific one one upon click.

var currentPage;

$("#homeLink").on("click", function(){
   if (currentPage == "home"){
      return false;   /////This is to prevent the page from fading out and in if it's the current page
}
  
   $(".page").fadeOut();
   $("#homePage").fadeIn();
   currentPage = "home";

}

One last thing you should probably move “display: none” from your style tag to CSS for consistency. It does the same thing but it makes more sense for CSS rules to be found in the CSS section.

1 Like

WOW! That helped so much. Before using the code I had to ensure myself that I understood the function (but one question below regarding JS). It makes much more sense using ID because it definitely was confusing, especially trying to get Projects text to display.

Here is my HTML code for p (after removing the style for display)

<p id=homeText class="display">Home</p>

However, I don’t understand why p and fadeOut are before the ID of homeText and fadeIn. Same goes for projectText. I thought it would be vice versa.

$("p").fadeOut();
$("#projectText").fadeIn();

Do you mean this?

The reason is that #projectText is also a part of p. The JS code executes in sequence. What this basically says is “hide everything including projectText but immediately show projectText after”.

If you did

$("#projectText").fadeIn();
$("p").fadeOut();

what would happen is that

  1. projectText would fade in
  2. all the of p elements, including projectText, would fade out, so there would be no point for step 1
1 Like

Makes sense! Thank you very much!!!

1 Like