1

I'm creating a personal "Portfolio Website" which has 2 html pages.

On the First page there is portfolio.html, I use JavaScript to Filter Category and the Default Category activity is Show All,

well, .. On the Second page of index.html, I have a button that redirects to the portfolio.html page.

My question: "How to make a button in index.html so that it directly redirects to the portfolio.html page & automatically the Default Category activity is to Category Programming?"

Please Feedback & Help, Thank You.

This is the Code button in index.html

<a href="menu/portfolio.html#myprojects"><button onclick="filterSelection('programming')">Read More</button></a>

This is the code in portfolio.html

<!-- FILTER BUTTON -->
<div id="myBtnContainer">
    <a href="#myprojects"><button class="btn active" onclick="filterSelection('all')">Show all</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('programming')">Programming</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('game')">Game Development</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('design')">Graphic Design</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('3d')">3D Creation</button></a>
</div>

<!-- Card Portfolio -->
  <div class="container">
      <!-- Card Portfolio -->
    <div class="filterDiv programming">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Programming</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p>
              <h2 class="blog-title">What is the future of front end development?</h2>
              <p class="blog-description">My thoughts on the future of front end web development</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv 3d">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">3D Creation</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1413708617479-50918bc877eb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Photography gear you need this year</h2>
              <p class="blog-description">Looking to upgrade your gear? Here is the list of the best photography tools for this year</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv design">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Graphic Design</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1592496001020-d31bd830651f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Mediation and Mental Wellness Best Practices</h2>
              <p class="blog-description">Mediation has transformed my life. These are the best practices to get into the habit</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv programming">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Programming</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p>
              <h2 class="blog-title">What is the future of front end development?</h2>
              <p class="blog-description">My thoughts on the future of front end web development</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv 3d">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">3D Creation</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1413708617479-50918bc877eb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Photography gear you need this year</h2>
              <p class="blog-description">Looking to upgrade your gear? Here is the list of the best photography tools for this year</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv design">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Graphic Design</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1592496001020-d31bd830651f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Mediation and Mental Wellness Best Practices</h2>
              <p class="blog-description">Mediation has transformed my life. These are the best practices to get into the habit</p>
          </div>
      </div>
        </a>
    </div>
    <!-- End Card -->
  </div>
<!-- End Card -->

This is the code in script.js

// JavaScript Filter Category
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}

function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}

function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
    arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
}
element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var button = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < button.length; i++) {
button[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
});
}

This is an example of a Picture

index.html

when I click the read more button in index.html default category activity not change to Programming

and this is what I want when I click the read more button in index.html

Improve this question
1

4 Answers 4

Reset to default
1

you could use Query String Parameters in your url string like so:

<a href="menu/portfolio.html?filter=programming#myprojects">Read More</a>

and in your portfolio.html check the Query String Parameters to apply the required filtering or whatever custom actions you want to make based on the string provided in the filter param

var urlParams = new URLSearchParams(window.location.search);
urlParams.get('filter') // returns "programming"

Read more about URLSearchParams

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I don't understand, does it automatically redirect to the programming category when I click Read More?
Can you edit all my code and put it in the answer here, Please.. I don't really understand because I'm still a beginner hehe
@IrfanHafizh when you click read more, it would redirect to the portfolio page, and then to myprojects section if you set anchor tags on the page. by adding filter=programming to the query you are including extra information with your navigation. Your javascript inside portfolio.html can make use of this information to execute more code like setting your filters, adding or removing elements from the page or whatever you want to do that can be done with javascript. I will not write your whole code for you as this is not how stack overflow works. We get paid to write code for others.
1

Please backup your work first in another folder before trying this. My codes only contain the relevant information only for checks.

index.php

This page only contains the button for redirection. Copy the code exactly the way it is.

<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
</head>
<body>
<a href="menu/portfolio.php?category=programming">Visit portfolio</a>
</body>
</html>

portfolio.php

<?php
 //default value
 $category = 'all';
 if(isset($_GET['category']) && !empty($_GET['category'])){
 $category = $_GET['category'];
 }
 ?>
 <!DOCTYPE html>
 <html>
 <head>
 <title>Portfolio</title>
 </head>
 <body>
 <div id="displayed"></div>
 <script>
//create an array of all the categories called all_categories.
//A user might literally type a crazy query string so we verify
let all_categories = ['programming', 'game', 'design', '3d', 'all'];
let fromURL = '<?php echo $category;?>';
let accepted = all_categories.includes(fromURL) ? fromURL : 'all';
// In the accepted variable, we check if the query string belong to our defined values. If not, we assign all to accepted but if it belongs, then we accept it.
filterSelection(accepted);
function filterSelection(category) {
    document.getElementById('displayed').innerText = category;
}
</script>
</body>
</html>

Anytime you change the value of category from the browser address bar, the innerText of html div with id displayed is changed to the new category, this could be what you want your program to do. If the category is not recognized amongst the array of categories, then all is set to accepted variable which can literally be called using filterSelection('all') for default setting

Improve this answer

12 Comments

this works, but how do I implement it into the original portfolio.php file
Copy the php part of my portfolio.php starting from <?php to ?> and paste it at the top of your own portfolio.php page. Then copy my entire JavaScript code excluding my funny filterSelection() definition part and paste it at the top of your js code. Provided you have defined your filterSelection(argument) very well, it should work. Anytime you want the default as per your definition, just call filterSelection('all')
this works, the button follows according to all_categories, but the portfolio / filterDiv card does not appear
Then the issue should be within your filterSelection() definition which is too bulky. Instead of looping through the characters of a class name, why not use element.classList.toggle('new-classname') to add new-classname to become old-classname new-classname and element.classList.remove('new-classname') to remove new-classname to become old-classname. You need to check the function very well, was it working very well before we added php?
before I add php it works very well, now what should I replace in the javascript code?
|
0

I advice you use .php instead of .html. With php, you can receive a query String and pass it to your js filterSelection(). On the index.php, the button should be like <a href="receiving-page.php?category=programming"><button class="btn active">Button name</button></a> Now on the receiving-page.php page, type the following at the top of the page..

<?php
  //default value
  $category = 'all';
  if(isset($_GET['category']) && !empty($_GET['category'])){
  $category = $_GET['category'];
  }
  ?>

Then type the following in your js..

//create an array of all the categories called all_categories.
//A user might literally type a crazy query string so we verify
let fromURL = '<?php echo $category;?>';
filterSelection(all_categories.includes(fromURL) ? fromURL : 'all');
Improve this answer

20 Comments

does receiving-page.php mean my portfolio.html?
Yes, portfolio.html should now be portfolio.php (Everything you have written will remain unchanged) but you need to have a local server like the one from XAMP or WAMP installed in your machine during developement.
PHP Syntax Check: Parse error: syntax error, unexpected 'category' (T_STRING), expecting ']' in your code on line 5 $category = $_GET['category'];
There is a typo, please change form !empty($_GET['category]) to !empty($_GET['category']) . I will edit the answer right. The apostrophe is missing
Can you edit all my code and put it in the answer here, Please.. I don't really understand because I'm still a beginner hehe
|
-1

You need to create two separate files in your directory (index.html,posts.html) ‍‍‍‍‍ <a href="./post.html">Go to the post</a> <a href="./index.html">Go to the index</a>

Improve this answer

1 Comment

for what I created two separate files?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.