Load different content through PHP? (refresh content without refreshing page)

Beginners
1

Hi all,

I have a relatively simple question, I think.

I have created a portfolio page with menu buttons like about, portfolio, skills, ect. When one of those are clicked you go to either index.html, about.html - The whole page is reloaded. No problems here.

On the portfolio.html however I want to be able to load different content in the body depending on what year you click (different work for 2019, 2018, 2017) without it reloading the whole page. Check the Adobe XD images below for what I mean:

mygoal2
mygoal1.jpg2880×1800 242 KB

(don’t look at the logo for now (it is code generated and should therefore change somewhat similar to the this simpeler problem so I’ll solve that after understanding the dynamic div content.))

I did some coding before and I know this is relatively easily possible with PHP. However I’m not the best coder and new to PineGrow. Is PHP really the best way to create what I want, or is there another method? (like if then statement?) Can someone please help me with this issue?

The code below as it is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Brigitte's Portfolio</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div id="navbar">
        <div id="links1">
            <a href="about.html">About</a>
            <a id="active" href="portfolio-2019.html">Portfolio</a>
        </div>             
        <div id="navbar_logo">
            <a href="index.html"> <img class="w-100 img-thumbnail" img src="logo-0033.png" alt=""> </a>
        </div>
        <div id="links2">
            <a href="inspiration.html">Inspiration</a>
            <a href="skills.html">Skills</a>
        </div>
    </div>         
    <div id="container-about" style="display:grid;grid-template-columns:1fr 150px 150px 150px 150px 150px 1fr;grid-template-rows:100px auto auto;grid-template-areas:'. title title title title title .' '. . . date date date .' '. image image image image image .';grid-gap:20px;">
        <div id="content-about" style="grid-area:title;">
            <ah1 class="title1">PORTFOLIO</ah1>
        </div>
        <div id="content-date" style="grid-area:date;">
            <h5 class="date-button" style="grid-area:date;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:auto;">
            <a href="portfolio-2019.html">2019</a>
            <a href="portfolio-2018.html">2018</a>
            <a href="portfolio-2017.html">2017</a>
            <a href="portfolio-2016.html">2016</a>
            <a href="portfolio-2015.html">&lt;2015</a></h5>
        </div>

 </div>
        <div id="content-portfolio-2019" class="portfolio-images">
            <img src="http://pinegrow.com/placeholders/img18.jpg">
        </div>
   </div>
   </div>
        <div id="content-portfolio-2018" class="portfolio-images">
            <img src="http://pinegrow.com/placeholders/img18.jpg">
            <img src="http://pinegrow.com/placeholders/img18.jpg">
           <img src="http://pinegrow.com/placeholders/img18.jpg">
        </div>
   </div>

    <footer class="footer">
        <p class="footer-text">©2019 Copyright <span class="footer-text2">Kock.Design</span></p>
    </footer>
    <script src="assets/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/popper.js"></script>
</body>
</html>

So, as you can see in the code the images for 2019 and 2018 are just displayed below each other.
Is there a way to code if href=“portfolio-2019.html” is active then display div id=“content-portfolio-2019”, if href=“portfolio-2018.html” is active then display div id=“content-portfolio-2018” ? without needing to make all these pages separately?

The solution I came up with would look somewhat like this:

<div id=“content-date”>
<a href=“portfolio.php/2019”>2019</a>
<a href=“portfolio.php/2018”>2018</a>
<a href=“portfolio.php/2017”>2017</a>
<a href=“portfolio.php/2016”>2016</a>
<a href=“portfolio.php/2015”>&It;2015</a>

<div id=“content”>
<?php
	if($_GET[‘content’])
		{
			$content= $_GET[‘content’];
			$display= $content;
			include($display);
		}
	else{
		echo ‘Pick one of the years to view my work of that year.’
	}

I would really appreciate the help!! I can’t manage to figure it out on my own, especially since PineGrow doesn’t accept the normal way to code with PHP, making looking it up on internet so much more difficult.

Kind regards,
Brig

3

thats an impressive laggy website

4

@Eike

That’s what you can get when you click a link that’s almost 2 years old. In the meanwhile the client persisted on a “cool image loader” (not my idea! :wink:) for loading the gallery images that is slowing down the site.

When your interested to see a modern approach of Ajax (Ajaxify) in a website I made recently:
https://www.dwazeherder.nl

I will remove the old link!

Regards,

David :smiley:

5

definitely a better website. Thanks for sharing, I will get into Ajax :slight_smile: