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/

change icon on html page upon user action using css or javascript

I am quite a newbie web development having basic knowledge in HTML CSS and JavaScript. I have a small blog page, which allows users to upvote a title of a blogpost - similar to what SoF has on its questions.
So, the problem I am facing is that I am unsure how I should change the icon (which I have in a sprite) once the user has clicked on it. So, in a nut shell
(Page1) icon1.png --> User Clicks --> (Page1) icon2.png
where icon1.png and icon2.png are in my sprites.png
I think JS is the way to go for this - but I was wondering if it is (is doing some sort of AJAX the way to do it?)- any directions would be much appreciated.
Thanks.

$(function(){
$('#SELECTOR').click(function(){
$('#icon1').css('background-position','0px, 120px') //whtever bg position
});
})

You can use javascript as below.
On click set background image position.
document.getElementById('SELECTOR').style.backgroundPosition='0px 150px';
where SELECTOR is the element's ID on which you want to change image position
As per you said you have sprite image so you just need to set image position accordingly.

Javascript Image Gallery

(I have limited coding experience)
I have a template file for a website and currently the image gallery for the site opens in a new page, I would like instead for the image gallery to not open additional pages/tabs and instead contain images in rows of five with one large main image under the rows all within the same page, I would like the main image when scrolled over with the mouse it zooms in on the picture Also when you click on the smaller additional images (in rows of five) it will change the main bigger image to the image that was clicked and allow the zoom in feature as well.
What are the tags I need to place in the template file (in the link below) and where do I put the tags?
Shown below is the current tags in the template
This is the picture gallery tags in the template file of the site:
<!-- picture gallery -->
<script type="text/javascript">myThumbs = ##CST_ITEM_IMAGE_ARRAY_T##;myPix = ##CST_ITEM_IMAGE_ARRAY_M##;</script>
Here is a link to the template file and a pdf of what I am trying to accomplish
http://sdrv.ms/UCHk8z
Here is what the current image gallery looks like now that needs to be changed to not open a new window
http://www.ebay.com/itm/4-Behringer-B208D-Active-800-Watt-2-Way-PA-Speaker-Systems-8-Woofer-/390478326914?pt=US_Pro_Audio_Speakers_Monitors&hash=item5aea526c82
I am not proficient with programming I understand some things but not how it all flows together, I only know basic links and tags so thank you everyone for your help, I greatly appreciate all the responses. I have been Google searching everything to no success.

According to my understanding of your question I think you require something like Thumbnail gallery , if so refer the below url
http://www.queness.com/post/3141/10-image-galleries-jquery-script-with-thumbnail-filmstrip
so I have choose one ( http://www.robertnyman.com/picture-slides/) to use for your purpose right so by that 80% of work is done just download the demo of that and is it will be easily understandable, in your case you can see 3 links in demos click on the one you like and download it and use it
so you have downloaded the file using the picture gallery link, so you will get a zip file which consists of gallery and _Macosx don't bother about the Macosx.
Now go into the gallery file in that there will be a index.html,css and required js, copy them where you require and if you see the index html there will be a div which consists of Picture slider container class div, complete the copy the div and paste it where you require.... Thats it :D
Note: Make sure you give the correct paths to the images, thumbnails, css and js
Hope this helps

Load content on mouseover

I want to load the content of a div on the mouseover of an icon within the div. Furthermore, the mouseover should only fire once and preferably the icon should disappear after loading the content.
The content that will be loaded in de div will be an external file with social media buttons. In case you are wondering; I don't want them to load with the rest of the page because they slow it down. Also, some visitors might not be comfortable with sites like FB and G+ tracking their internet movement.
So, I have gathered some code and copy pasted a bit and this is what I came up with:
<div id="social_media">
<img src="icon.png" onmouseover="javascript:$('#social_media').load('external_file.php'); this.onmouseover=null;" alt="Show Social Media Buttons!" />
</div>
The thing is, it works perfectly fine :) But since it is code that I got from 3 different sources and pasted together, my question is if it's any good? For example, I never tried to find a way to remove the icon on mouseover, it just did :)
I have almost no experience in coding Javscript/jQuery, so please let me know what you think about it so that I can learn from it!
Thanks and greetings from Amsterdam!

avoid the inline code try
<div id="social_media">
<img src="icon.png" alt="Show Social Media Buttons!" />
</div>
attach a mouseenter event handler to the img
$(function(){// short cut of $(document).ready(); read more on google
$("#social_media>img").bind({
mouseenter:function(e){
$('#social_media').load('external_file.php');
}
});
});
P.S the selectors are not optimized nor the outcome of this code it was just to give you an idea
DEMO

The answer to your real question is "the code is kinda middling." The reason the icon went away is because when you called load you replaced it. Internally your document is a tree of piece of the document called the DOM, for "document object model" -- abusing terminology, since that tree is actually an expression of the model, not the model itself.
There's a node in that tree that is your div, and it contains a node with the icon img. When you do the load(), that node is replaced with what you loaded.
As #john says, it's undesirable to put code like that inline, because when you want to figure out what it's doing later, it can be hard to find.

Several things to note:
You really should avoid inline JavaScript code in HTML, that's not clean at all. Move it to an external JavaScript file of possible, or, at least, in a separate <script> tag. It will be ways easier to maintain.
Using this method to fire the event only once seems odd. You should use the jQuery one method, which is made exactly for that.
The icon just disappears because the load method replaces the content of the div in which the icon is.
For example, IMO, the code should be:
$('#social_media').one('mouseover', function(){
$(this).load('external_file.php');
});

How to change a url for the first element only?

I want to be able to change a url directory for, e.g. the first <img> in a <div>, or, any image that is not the first.
My reason is that the loading speed is too slow. That's because I used CSS to generate thumbnails from larger images. I now want to redirect those thumbnail images to a thumbnail folder with small images, rather than having to redirect them individually, which would be a pain.
<img src="images/stories/Images_for_Web/baths_windowToTheSoul_WB4_p90.jpg">
<img src="images/stories/Thumbs/baths_windowToTheSoul_WB4_p90.jpg">
here is the link to the site I'm working on: http://www.d1187169-1.cp.blacknight.com/whitebook1/
I have the CSS automatically resizing and cropping the images for any that is not the first. I like that solution as it will save work in the future so if this part could work also, it would be brilliant, unfortunately I just know CSS, HTML, a little Joomla and only starting in javascript etc., but I am willing to try anything to get this to work!
Any thoughts or suggestions much appreciated. Thanks, Paul

If you were to use jQuery, you could do the following:
$("#somediv img:first").attr("src", "images/new/location");
As you can see just one line of code thanks to the CSS-like selectors. I highly recommend using jQuery for such tasks.

Thumbnails should be generated with php/on the server side. Resizing with CSS is not really resizing - still the full image is loaded.
Maybe you should look in jQuery - it has selectors that are like CSS selectors.