Develop Reference

Automatic Slideshow on load

I am trying to create a slideshow with an onload event through a separate JS file. I've tried looking for possible solutions online and all of them require the coding to be all in one file. What would be the best way to approach this issue?
I have attached my HTML coding for the JS reference.
<div class="slideshow-container">
<div id="slideshow">
<div class="numbertext">1 / 5</div>
<img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/>
<div class="text">Yellowstone National Park<div>
<div class="numbertext">2 / 5</div>
<img src="images/SanMural.jpg" width="408px" height="616px"/>
<div class="text">San Francisco, CA</div>
<div class="numbertext">3 / 5</div>
<img src="images/SanJelly.jpg" height="408px" width="616px"/>
<div class="text">San Francisco Aquarium</div>
<div class="numbertext">4 / 5</div>
<img src="images/AKGold.jpg" height="408px" width="616px"/>
<div class="text">Alaska Yukon</div>
<div class="numbertext">5 / 5</div>
<img src="images/SaltLake.jpg" height="408px" width="616px"/>
<div class="text">Salt Lake City, UT</div>
</div>
</div>

I'm not exactly sure what you are asking since you didn't give us the JS code you are working with. I am assuming you only want 1 image displayed and we should start cycling through the images after the web pages loads.
I updated your HTML slightly and added JS code to do this in the below codepen/
http://codepen.io/anon/pen/WopMzb
I updated your "slide" html to the be wrapped in a div so we can easily hide/show the "slide"
<div class="slide active">
<div class="numbertext">1 / 5</div>
<img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/>
<div class="text">Yellowstone National Park<div>
</div>
This will only show 1 "Slide" at a time and will change the slide every 3 seconds.
For future questions it may be best to create a codepen or something similar with the CSS/JS/HTML that you are having trouble with. You are more likely to receive a response if it is easier for someone to debug.

"All of them require the coding to be all in one file". That's false. There is no difference, how you include, for example, Javascript code for your HTML:
Creating separate js file and include it via script tags like this (in your HTML):
<script src="yourFile.js"></script>
Or you include all the Javascript logic in your HTML like this:
<script>
// Your Javascript logic here
</script>

Your html structure reminds me of bootstrap's carousel option. If you don't mind adding bootstrap to your project it might be worth a look:
Bootstrap carousel
Added bonus is that you don't have to write anything custom for your slideshow control.

Bootstrap Row starts up behind the margin

I am currently learning Bootstrap. I came across a piece of code where I was trying to create a bunch of rows to create a kind of table. But when I ran the code on the browser, the margins of the rows start of behind the screen. Look at the very simple piece of 'Hello World' code below in JS Fiddle.
<div class="row">Hello World!</div>
http://jsfiddle.net/x8y50sas/
Why is the text starting from behind the margins? An detailed explanation could help?

You need to include a cell inside the row:
<div class="container">
<div class="row">
<div class="col-xs-12">Hello World!</div>
</div>
</div>
The reason for the offset is that rows in bootstrap have a negative margin. They should always contain a cell which adds additional padding.
More info in the docs: http://getbootstrap.com/css/#grid

Because to be able to use the grid system you need to wrap your element inside class container. Read this article: http://getbootstrap.com/css/#overview-container
Example:
<div class="container">
<div class="row">Hello World!</div>
</div>

You must enclose the block "row" in the block "container" as:
<div class="container">
<div class="row">
<!-- Example: 3 Cell -->
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
</div>

jquery basic content slider

I would like to build very simple content slider but have no idea where to start, I have tried almost all of the free sliders out there and couldn't quite find one which suits my needs. Simply I have inline-block elements of the same width which I need to scroll with next and prev button. if the content is greater than the wrapper hide the rest content and when next button pressed show the rest content, and the same for previous button too. can someone at least get me started? here is a fiddle http://jsfiddle.net/RC33S/1/
<div class="main_wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<button class="prev"><</button>
<button class="next">></button>

Search for liquid slider. I have used it a number of times successfully. Very configurable.

CSS or Javascript DIV align

I have website that where the php code generates all the products on the same page.
So far i get something like this.
http://ratecleveland.com/irregular_height_columns.jpg
however i am trying to get something like this.
http://ratecleveland.com/new.jpg
any idea if this can be done in css. or if no, is there a javascript examle.
thank you for the help

jQuery Masonry: http://masonry.desandro.com/

Here's a fiddle, use display:inline-block; with the ?display hack
http://jsfiddle.net/qW3TV/
No javascript is necessary.

Looks like all of the divs are the same width. Why not just create containing column divs around the ones you want to stack?
<div class="col1">
<div class="a"></div>
<div class="e"></div>
<div class="i"></div>
</div>
<div class="col2">
<div class="b"></div>
<div class="f"></div>
<div class="k"></div>
</div>
<div class="col3">
<div class="c"></div>
<div class="g"></div>
<div class="l"></div>
</div>
<div class="col4">
<div class="d"></div>
<div class="h"></div>
<div class="m"></div>
</div>
Float each column left and your interior div's, which appear to already have specified width and height, will fall into place. You can even give the columns the same class, since they will just be floated left containers.

Is there a way to "link" several elements?

Suppose I have 4 visible divs:
- 2 on top
- 2 on the bottom, wrapped in a container
and 1 hidden div.
When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.
When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.
I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.
So there are the questions:
- Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?
- What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?
Code example here: http://jsfiddle.net/Xq9kr

You can create implicit links through structure.
For example with this HTML:
<div class="top">
<div>Div 1</div>
<div>Div 2</div>
</div>
<div class="bottom">
<div>Div 1</div>
<div>Div 2</div>
</div>
You can then select the respective div in the top via indices:
$('div.bottom > div').hover(function () {
var index = $(this).toggleClass('highlight').index();
$('div.top > div').eq(index).toggleClass('highlight');
});
Or you can create explicit links through data attributes and IDs.
<div class="top">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</div>
<div class="bottom">
<div data-for="div2">Div 2</div>
<div data-for="div1">Div 1</div>
</div>
Then select like this:
$('#' + $(this).attr('data-for')).toggleClass('highlight');
// Or, even better if you're using jquery-1.4.3+
$('#' + $(this).data('for')).toggleClass('highlight');