Develop Reference

How to make website go to another part of it (Like another website) using javascript (Make new code appear)?

I have a website project, I created buttons such as "About Me" "Other" when clicked it should lead the user to another part of the website that looks different but still be in the same website sort of like I would "display: none" and hide the rest of the content onclick of a button and let new code fill the page.

If I am getting your question correct, and you want the link to be the exact same but load different content inside the page, you may want to use jquery and the load function to change a div on your page. Normally though, for navigating to those types of pages, you would just change the page as they should be placed in the same domain (www.yourdomain.com\aboutme.html, www.yourdomain.com\other.html).
The pages need to be on the same domain for this to work, which is why I just have some js files showing in the snippet.
function load(link){
$('#contentarea').load(link);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="load('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js')">Load Jquery Script Text</button>
<button onclick="load('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js')">Load Flower</button>
<div id="contentarea">
</div>

I don't fully understand your question, but I think what you want is that when the user clicks a button, the browser scrolls to a chapter of the webpage.
You don't even need JavaScript or jQuery for this, just create an anchor tag.
with the href attribute referring to the id of the div or section (This works for any tag, not only div and section), assuming that the id is "aboutMe", you will be adding this:
About Me
And the div or section would be:
<div id="aboutMe">
...
</div>
The browser will scroll automatically so the viewport is displaying the section. You can also make it smooth by:
html {
scroll-behavior: smooth;
}
You may also add scroll padding just so if your navbar is too big, it doesn't show over the text.
html {
scroll-behavior: smooth;
scroll-padding: 70px;
}
I hope this is what you are looking for.

Hide HTML Form Before the page loads using javascript

I would like to hide a HTML Form before even the page loads using javascript.
I was able to use display='none' style property to hide the form using javascript but the form content loads visible for a second before disappearing.
var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';
I have read many solutions in stackoverflow adding some css code in the page and display the content later using removeClass.
Problem is I do not have access to code behind the web page to add the CSS content. However I can add some custom javascript code only in header or a footer.(cannot use jQuery as well).
Please let me know if its possible hiding the form element as expected.
I am quite new to javascripting. Please provide your valuable suggestions.

edit: Sorry, if you only can use some javascript and cannot access the html or css there is probably no solution for your problem.

You can store all you form in a javascript variable, and write it in your div when the page is ready
Simple example :
function showForm(){
var container = $('#formContainer');
var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
container.html(form);
}
$(document).ready(function(){
showForm();
});
But the best way is adding a css rule to hide your form, and show it when the page is loaded.

Web browser first render HTML. It takes time, while browser download css or js file. Best apprach would be to use inline display='none', not in css file.
<form style="display:none;">
...
</form>

Partially refreshing site not working

I am trying to refresh just a part of my website (the left part in which a list with topics appear), but it don't work for me. I get a very weird screen on that left part if I click the refresh button. The script I am using is this:
$(function() {
$("#refresh").click(function(evt) {
$(".bgleft").load("left.php")
evt.preventDefault();
})
})
The weird screen I am getting is a white blank screen with a random text on it (that does not exist). I don't understand why it is happening. For a live example: go to (edited out)
and click on "refresh" at the left frame.
Edit:
The HTML snippet: <body class="bgleft">

In left.php there are two lines of code which are showing theese characters.
for(var n = 1; n < 7; n++)
document.write(String.fromCharCode(Math.round(Math.random()*25)+97));
Try to remove them, it should help.
Also as sad in other answers send only contents of <body> in response because scripts are already included in the site.

It's generally not a good idea to send a complete HTML page when doing a partial update. If you look at what's produced by your left.php, it's the complete page (with <html> tags and everything) you use in your iframe.
Either create a page that only renders the body of the left.php and use that for partial update. Or look here for how to refresh an iframe.
PS: Framesets are hopelessly deprecated and really limiting in terms of design, dynamic/javascript functionality and future extensibility. Consider not using them...

You should be only fetching the content to be updated, not the whole page. Currently, the whole page is being fetched including html, body and even script tags. The jQuery and other scripts are also being loaded again because of this. This can cause major problems later.

How come you are loading the same page HTML, HEAD, BODY inside the current BODY tag?
$(function() {
$("#refresh").click(function(evt) {
evt.preventDefault();
$(window.top.window).find('frame[name=left]').reload();
})
})

How to Detect if On Homepage to hide a button

If I have a static HTML homepage, is there a way of embedding some Javascript to see if I am on the home page? What I want to do is if a user is not on the homepage, display a "home" button on my navigation bar. So once I know if he's on the homepage I can use an if-else statement. Not familiar on how to do this in Javascript. I would do this in PHP, but due to restrictions on the project, I am not allowed to use PHP. This site is pure HTML pages.
The reason I need Javascript to detect the page, is because all of the pages, including the homepage are to be the same template (again, not my decision). If it wasn't for this I could create a template for every page but homepage. So that leaves me with the problem.
My current thought is to use something like this:
<script type="text/javascript">
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
if(sPage != "index.html"){
$turnonhomelink=true;
}
else{
$turnonhomelink=false;
}
</script>
And then for the link:
<script type="text/javascript">
if ($turnonhomelink==true){
echo '<li>Home</li>';
}
else{
//echo nada
}
</script>
Besides the normal "this won't work if Javascript isn't on", is there anything I am missing?
The line I am most concerned about is this: if(sPage != "index.html")
Important to note is that this site is only 1 layer deep link-wise (all HTML pages in one directory), but is this the proper way of comparing strings in Javascript?

May i suggest that absolutly no javascriptr is required to achieve this. There are plenty of ways to do this with just css. Especially if you are on a static html page. The easy way would be to add a id to your body tag to indicate you are on the hompegae. Then add some css to make the home button invisble when on this page. Somethiong like this:
HTML:
<body id="homepage">
...
<li id='home-button'>
<a href='/index.htm'>Home</a>
</li>
...
CSS:
#homepage #home-button {
display: none;
}
This way the visistors with js disabled get the same experience as the normal visitors...

this should be fine. Also at what point in the html , would you make this check is important (for the url to contain "index.html") normally you can create a function doAfterLoad() and put a call to doAfterLoad() that can check for the url substring and then accordingly show/hide the homepage link. you can use html body onLoad event also.
ps: you dont need to follow $ prefix to a var in js even though its a valid var name:
$turnonhomelink==true

How to add duplicate image on same page with java Script after page loaded

i m facing a problem, what i ma doing is that. i have a server side image button. what i wana do is that after that page loads at client side, i want to place that same image with same navigation url at another location on same page. Can any body tell me how to do that? same as i also want to hide some text on page with javascript. any idea??

use .clone() method.
An Example:
Let 's suppose your img being this
<img class="yourimageclass" src="Your/path/to/image.jpg" ?>
<!-- And this being where you want to copy it -->
<div class="whereuwanttocopy"></div>
Then your jQuery would be
$('.yourimageclass').clone().appendTo('.whereuwanttocopy');
To hide some text in your page, wrap them into some container, so that we could address that piece of content
<span class="todhide">here is the text to hide</span> and here is the text to not hide
Then use simple $(".tohide").hide() whenever you want to hide the text

Let the images be placed in divs having ids , on a javascript event just call the following script
document.getElementById('secondDiv').innerHTML = document.getElementById('firstDIV').innerHTML