We Keep Coding

How to load specific HTML page content when page redirection using JavaScript?

In index.html page of my web site there are three buttons.
After clicking these buttons, page redirect to another page named productandservices.html. In their I show fishes for each selected category (when someone select Freshwater fish in index.html, it shows freshwater fishes in productandservices.html).
<button class="menu-buttons">FRESHWATER FISH</button>
<button class="menu-buttons">MARINE FISH</button>
<button class="menu-buttons">AQUA PLANTS</button>
In the exemple, you can see the three buttons in index.html page. But after clicking, they only re-directing page. But do not show the selected category. To achieve that, What I can do in Javascript?
What I want is when someone click on Marine fish index.html, I want to show them Marine fish category in servicesandproduct.html

Don't really know how your code works in servicesAndProduct.html yet.
For now I assume that your page has static content. So you've all products over there like below. Let's say a div with the content of a product and each div had a few classes for styling, like product, the catecory and a class that hides the product by the default.
<div class="product marine-fish hidden"><!--product content--></div>
<div class="product marine-fish hidden"><!--product content--></div>
<div class="product aqua-plant hidden"><!--product content--></div>
This way you'll be able to select all elements with the class that belongs to the category you want to show and you just remove the hidden class. Then only those elements will be shown.
On your index page change the links as below:
<a href="servicesAndProduct.html?cat=freshwater-fish">
<a href="servicesAndProduct.html?cat=marine-fish">
<a href="servicesAndProduct.html?cat=aqua-plant">
On your servicesAndProduct.html you'll add some Javascript like
const parameters = new URLSearchParams(window.location.search);
const category = parameters.get("cat"); //now this says "freshwater-fish", "marine-fish" or "aqua-plant"
// In this example the only thing you need to do now is show all elements from this category
const elements = document.querySelectorAll("."+category);
elements.forEach(element => {
element.classList.remove('hidden');
});

Open and close modal dialog in same function

I have a site that populates data into a table when it loads. Each column header is clickable resulting in the table sorting based on that column's data. This works fine, but it is slow so i was hoping to have a modal window popup advising the end user to wait while it sorts. I have the code for the modal window already made as well as the javascript line to call it and close it, but I cannot get it to appear and then disappear when the sort is done.
Modal Code:
<div id="SortingBox" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-header2">
<h2>Loading</h2>
</div>
<div class="modal-body2">
<pre><strong style="color: black;">Please Wait...</strong></pre>
</div>
</div>
</div>
I call the modal with this line:
document.getElementById('SortingBox').style.display='block';
And close it with this:
document.getElementById('SortingBox').style.display='none';
Now I already have this working on page load and the line to close it is at the end of the sorting script in a separate js file. So all I want it to be able to have it appear when a column header is clicked and close again after the sort is complete.
Thanks.

Why not just use classList's toggle method?
Create a class that called is-modal-hidden, with display: none.
// style.css
.is-modal-hidden {
display: none;
}
Create a js function to toggle modal, by toggling the class.
Something like that:
function toggleModal() {
document.getElementById('SortingBox').classList.toggle('is-modal-hidden');
}

How do I trigger a click on dropdown select

I have a list of buttons that act as checkbutton via javascript and checkbutton background images. I'm trying to convert this to a select dropdown list.
I have managed to convert the list with below script: I first move the text inside the a element for it to be a hyperlink, then I wrap the a elements inside select tags and then wrap all of them inside select tags. This creates a nice dropdown - unfortunately this wont trigger the script inside the a element and Im stuck. I cant access the HTML, so it needs to be done with jQuery or Vanilla JS.
<div class="column wide”>
<div class="filterformbox">
<label>
Gesorteerd op prijs
</label>
</div>
<div class="filterformbox">
<label>
Op voorraad
</label>
</div>
</div>
$(".filterformbox label a").each(function() {
$(this).append(this.nextSibling);
})
$(".filterformbox label a").wrapAll("<select></select>");
$('.filterformbox a').wrap('<option></option>');

How do I use JQuery in coordination with an anchor tag to move the screen to a location?

I've never worked with this before so I am not sure if I apologize if I am using too many words to define what I am looking for.
I want to create a navigation menu in the header where upon clicking a link the screen should slowly move down to that section of the page.
Code structure:
<div class="header">
About
Contact
</div>
<div class="container">
Some content
</div>
<div class="section2">
About
</div>
<div class="section3">
Contact
</div>
So if a user clicked on About how do I use JQuery to slowly drag them to that section and the same for contact?

Just add id's on your div with the section name:
<div id='about' class="section2">
About
</div>
Then use this code:
$('.link').click(function(){
$('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}) //Will maybe be $(window) instead of html,body.
return false;
})
Fiddle : http://jsfiddle.net/Hw4L6/

you could use jquery scrollTo.js script for smooth scrolling
or
you could just link to the section you want to scroll by just providing the id of the section in the href tag,like >>
About
I have also used scrollTo.js in a small website I have written 2 years ago, here is the link ->
http://students.iitmandi.ac.in/~boga_saikiran/
there, when you click the Contact Me button on the top right or Top button on the bottom right you can see a smooth scrolling effect.
The code related to it is >>
(assuming you have jquery js file is included in your head tags)
1) download the scrollTo.js file and place it in your directory where your html file is
2) include this in the head tag
<script type='text/javascript' src='scrollTo.js'></script>
3) Place these in your javascript script tags inside the head tags
$(document).ready(function()
{
$('#link_id').click(function(e)
{
$.scrollTo('#about','slow');
e.preventDefault();
});
});

want to show or hide section of html page when it loads be default based on text box check option on top of the page

I have an html where I have bunch of text controlled by a show hide button, (say this code snippet is para). Now I would like to add additional layer of control on top of that. I would like to have a text box on top of the html page when it loads to have a option to hide or show para by default based on check uncheck of the text box.
Here is my code para
print $indexfd
qq~<div id="div_$var3">\n~, # Add a div around the $key-elements
qq~<input onclick="showit('$var3')" type="button" id="btn_show_$var3" value="showit">\n~,
qq~<input onclick="hideit('$var3')" type="button" id="btn_show_$var3" value="hideit"><br/>\n~,
qq~<ol id="$var3" style="display: none"><li><b>$var3->{name} \: $var3->{value}</b></li></ol>\n~,
qq~</div>\n~;

This isn't something Perl can do for you. You will need to do it in JavaScript. Have a look at the jQuery lib's function toggle(). That should do what you want. Add your paragraph and add some sort of button or whatever. Then add a click-handler to that button to toggle the paragraph.
Here's an excerpt from the documentation:
We can animate any element, such as a simple image:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
We will cause .toggle() to be called when another element is clicked:
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
Don't forget to load the jQuery files in the <head> section of your HTML document.