We Keep Coding

How to load html from clicking a div class button without page refresh

I'm sorry for asking a simple question as I'm still learning html/css/js. What I want to do is to be able to click on this button that is a div class made from css and js, to load it's content without refreshing the page, which I believe requires ajax or jquery, but not sure how. Here is my github page danielroberto.github.io and the repo https://github.com/danielroberto/danielroberto.github.io so you can get an idea of what I mean. I basically want to click on any of the navigation buttons and then loads whatever content I want without redirecting to whole new html page. For example, when I want to click on the "photography" button, I want the button effect to happen while my images load on the bottom without redirecting to something like photography.html. Similar to clicking on the "design" button, I want it to transition and load my content.

There is a wealth of resources on the net to get the intro you need to AJAX - the technique of loading parts of a webpage instead of the whole thing.
You correctly suggest that you could use the jQuery JavaScript library to do this - there are lots of alternatives, but that's easy to learn, and is widely used on the net. Tried and tested!
Start here: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
That would only be if you are planning to use some server-side technology to serve up your images.
If you are just going to manually set a list of images to show, and you want the buttons to cycle through these, then you're probably best just to build a carousel of some kind, using a jQuery carousel plugin, and include it all in your HTML markup from the beginning. Loads to choose from or get inspired by here: https://plugins.jquery.com/tag/carousel/.
Also, you should size your images to fit the screen you are serving them to. I recommend you look at using srcset. Your image on the test site was 4600px wide! Check this out: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I hope it goes well. The early days can be hard work but you'll soon get the hang of it.

You could store your content in a var in your js. Then when your button is clicked you can call the function which creates a text node or an element and append that to your div.
HTML
<button onClick="function()"></button>
<div id="show-data">
</div>
JS
var newText = 'Stuff here';
function function() {
var div;
div = document.getElementById('show-data');
div.appendChild(document.createTextNode(newText));
}

You can easily edit the html of an element when clicking a button using jQuery
HTML
<div class="my-button">click here</div>
<div class="my-content">init content</div>
JS
contentElement = $('.my-content');
$('.my-button').click(function() {
contentElement.html('new content');
});
https://jsfiddle.net/jaxon58/zp9mvu38/

menu on only a single page

I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. I want to create a single site menu. So if i press on a list item the browser should open an other content but on the same page. I tried using css with targets but everytime i click a new target the tagets will overlap and the old content will not disappear. I tried using Javascript with innerHTML but in javascript i need to write the whole page in a single line (.innerHTML ='websitecode') this will create a horrible overview.
Is there any other possibility to create something like this? Maybe with the require() / involve() function in php?
Thank you

From your question, what I understood is you want menu navigation without loading the content again.
`http://codepen.io/ArslanRafique/pen/raZybL`
Above is the snippet, I recently developed, simple menu navigation by using simple CSS and HTML. You can achieve simple menu navigation by using HTML label and can swap your views accordingly.
Please have a look at shared snippet, hope it will help you.

Sounds like you would like to create a single page web application:
There are many great javascript frameworks for this, try angular.
https://www.airpair.com/angularjs/building-angularjs-app-tutorial
Put your menu in the header file, and the content you want to replace in to views.
Or use angular UI-router https://github.com/angular-ui/ui-router/wiki

There are few possibilities to achieve your goal.
The simple and not so elegant one would be to generate the complete content and set anchors on the page. From the menu the user can call the anchors and will be brought to a desired part of the page. Example:
<!-- Menu -->
<ul>
<li>About us</li>
<li>Products</li>
</ul>
<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>
More elegant, sophisticated and professional approach would be creating a SPA (single page application). It would include some techniques like AJAX, where you can load (or remove) contents on the page without refreshing.
There are many modern JS frameworks that can help you, for example AngularJS, ReactJS, etc.
Wikipedia offers also more information on SPA:
https://en.wikipedia.org/wiki/Single-page_application

So Arlan's version looks a lot prettier, but you can also use javaScript with divs that you can hide or display with functions. You can format the divs in your css with whatever you want. May get a little clunky if you have a long menu...
<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>
var formatOne = document.getElementById("button1"); //create handle for first button
formatOne.onclick = function() { //add functionality
document.getElementById("divOne").style.display = "block";
document.getElementById("divTwo").style.display = "none";
document.getElementById("divThree").style.display = "none";
}
Jsfiddle to show the functionality.
https://jsfiddle.net/lattivalidus/s7a9dLe7/

Responsive Site - Load html based on dimensions

Is there any JS library that can help load different html files based on the dimensions? I guess this would be a mixture of responsive and adaptive, not sure if that's kosher.
Basically I want the site to show a different top menu on a phone.

Instead of arguing with you about how you're approaching the problem, I'll say that yes, there are JS libraries that could help you out.
There's a good writeup about enquire.js at http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/. This one lets you set callbacks for breakpoints.
Another you might be interested in is breakpoints.js which, similarly, will let you write jQuery to be executed at certain breakpoints.

Is there a reason you'd want to avoid doing this with a purely responsive design? You could include both a phone navigation and desktop navigation, then hide/show via CSS based on browser dimensions.

I agree with #Kolink's comment..
But if you want to do this anyway I would suggest enquire.js.
You will be able to do something like this:
enquire
.register("screen and (max-width:50em)", function() {
// Load top menu content 1 via AJAX.
// Show content menu 1
})
.register("screen and (max-width:40em)", function() {
// Load top menu content 2 via AJAX.
// Show content menu 2
});

The ideal situation is to load just an HTML and change the CSS rules applied to it through responsive design.
If you want to have different HTML versions, then you should redirect to another URL if the request comes from a mobile browser. Look at the following link with different recipes depending on your platform:
http://detectmobilebrowsers.com/

What is the best way to populate container with data from link?

I have not been able to wrap my brain around how to call information from a link (In my domain) to populate a sidebar container that I wish to show other sources for the same information.
It would look much like a "related news", but would not be automated and instead use links that are included in code that calls it from either clicking the link (most likely), or having it loaded after the link is loaded in to an Iframe.
The site is built around CSS, but I assume I will need javascript to accomplish this task. Am I going about this the correct way or should I look at the problem from a different angle?

Here is a basic example. When you click the link the jQuery will load content.html into "xyz" div.
HTML...
<a id="abc" href="#">Load Info</a>
<div id="xyz"></div>
jQuery...
$('#abc').click(function() {
$('#xyz').load('content.html');
});
Here is a demo where I used the html() function instead but it's the same basic idea...
Demo: http://jsfiddle.net/wdm954/JBWxr/1/

Selectively display different parts of a HTML file without SSI/Server side scripting

Is it possible to create a text sprite and selectively display parts of the same HTML file and ignore the rest. The part to be displayed is selected by a menu generated generated using CSS with links within the same page.
(The length of each section is unknown and expected to vary greatly).
Communicating with the server is unfortunately not an option.
And as you might expect i am new to CSS,PHP and JS

you will want to wrap each section with an ID tag, and control the visibility with javascript. There are several methods of controlling visibility in JavaScript.
The CSS elements that control visibility are visibility and display.
Visibility shows or hides text using the attributes in the above reply, and display allows you to actually remove that block from the DOM by using "block" and "none" as the attributes. You'll want to choose whichever element works best for your application.
Javascript libraries such as Prototype/script.aculo.us or J-Query, MooTools, etc are fantastic for this kind of control.
If you want to learn this kind of scripting from scratch, the book "DOM Scripting" by Jeremy Keith is a fantastic book that can be completed in a couple of days.

Sounds like CSS property visibility set to hidden | visible | collapse.

You should use display none to hide things and display block to show them again (or display inline)