So I have been working on the personal portfolio website challenge and I ran into an obstacle,
firstly, here is the code http://codepen.io/shaffie/pen/NpNjwd
What I am trying to do is to fade in the portfolio section when clicking the button (I have already figured that part out), what I haven’t figured out yet is how to replace the html\css content when clicking the experience button. I tried the replace() function but then if I decide to go back to the portfolio section it doesn’t change anything although I added an If condition for that.
Thanks in advance
You can replace the html content of a given element with the jQuery method
$.html(): http://api.jquery.com/html/ . A couple of thoughts:
- When it comes to completely changing everything on the screen, this seems like a roundabout way to do it. What if the user wants to go “back” to what they just saw? There’s no browser history, or even built-in navigation functions. You might consider doing a “single-page” scrolling model, where each page is just “down” the screen from the next–or, if you want it to be completely offscreen, model the site as a “carousel,” in which you click through from one page to the next like a slideshow.
$.html() method can replace the html; you don’t even have to bother replacing CSS, just write enough different rules and classes to cover all the sections and then call them as needed.