We Keep Coding

Replacing static background image with simple j Query slideshow

I'm busy building a website and have a banner in it. The banner consists out of a static background image with static text overlay.
Now I want to keep the banner with the text overlay, but replace the static background image with a simple slideshow. The images should be replaced every 3 seconds. It should be a continuous loop, triggered on page load event. This function should utilize jQuery.
This is the html code for the banner as it is at the moment:
<!--BANNER HTML-->
<div class="banner">
<div class="banner-text">
<h1>LONG LAYOVER?</h1>
<h1>Is Amsterdam Schiphol your transfer hub?</h1>
<h4>Make the most of your layover by doing some sightseeing!<br>Tailored according to the length of your layover</h4>
</div>
</div>
This is the CSS:
.banner h1, .banner h1, .banner h4 {
margin: 0;
text-shadow: 2px 2px 6px #000;
text-align: center;
}
.banner {
color: white;
background: url(images/bannerimage.png) top left/cover no-repeat;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
Does anybody have a smart solution to my problem?

The simpliest answer comes to my mind is defining functions and call them in timeout functions as shown in the DEMO here
You can also use togglaClass instead of .css() function. I would prefer toggleClass but just did this was is quicker for me.

Parallax scrolling tutorial for background image

After spending days trying to figure out why I can't seem to get parallax scrolling working for one picture on a website I'm working on, I'm finally posting here. So I have this code so far:
HTML:
<div class="intro">
[a bunch of stuff here]
</div>
CSS:
.intro {
background: url(../images/IMG_100.png) 50% 0 fixed;
background-position: center;
margin: 0 auto;
width: 100%;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
padding: 100px 0;
}
I've pretty much tried all the tutorials for a simple parallax scroll effect, but they don't seem to work for my situation as it stands. What seemed most promising to me was to use the skrollr.js plugin - I tried adding the following to my div tag:
<div id="intro" class="intro"
data-bottom="opacity:1;background-position: 0px -50px;"
data-center="opacity:1;background-position: 0px 0px;"
data-top="opacity:1;background-position: 0px 50px;">
I then initialized skrollr at the end of my html:
<script type="text/javascript" src="js/skrollr.js"></script>
<script>
window.onload = function() {
skrollr.init();
}
</script>
...doesn't work. I'm fairly new to this, so any help would be greatly appreciated!

I think that the id of your main div should be equal to skrollr-body and not intro.
1st EDIT
Actually, I see there are situations where the main id doesn't need to be named scrollr-body. Maybe this tutorial could help you achieve different effects since I couldn't find any official documentation.
Check the fiddle of your snippet from the question.
2nd EDIT
I changed your html code to this
<section id="skrollr-body">
<div class="intro"
data-bottom="opacity:1;background-position: 0px -50px;"
data-center="opacity:1;background-position: 0px 0px;"
data-top="opacity:1;background-position: 0px 50px;">
<h1>Content in here</h1>
<p>first big text block</p>
<p>second huge text block</p>
</div>
</section>
I also changed the background attribute of the .info class to this
background: url('bg-image.jpg') no-repeat fixed center;
but feel free to experiment with values. Check the working fiddle

How to make a div resizable for users?

What is the simplest way to offer a resize div method for users, such as the StackOverflow text box. Can this be done via HTML only or is JavaScript required?

<div style="resize:vertical;overflow:auto;"></div>
Did you mean this?

DEMO FIDDLE (2 and 3)
If you want it to look and behave exactly like the textarea in SO, then you definitely need JavaScript. More info here.
If you just want a simple realizable div to display text, this should be sufficient:
HTML
<div class="display-info">Resizeable div</div>
CSS
.display-info {
resize: vertical;
overflow:auto;
width: 250px;
height: 50px;
border: 1px solid gray;
background-color: lightgray;
}
3. If you want a textarea that allows users to type something in it (For eg: a form):
HTML
<textarea name="test" id="test" cols="30" rows="10">Text area</textarea>
CSS
#test {
resize: vertical; /* can on be resized vertically*/
}

Overlay div with transparent area

I'm trying to achieve an effect on a webpage whereby I have a semi-transparent overlay over all elements on a page, except for one specific div.
This is an example of my page structure:
<div id="d1">
<div id="d2"></div>
<div id="left"></div>
<div id="d3"></div>
<div id="right"></div>
<div id="d4"></div>
</div>
<div id="overlay"></div>
And here is a fiddle of the above in action. I would like the green div (#d3) to be visible on top of the overlay.
Is there any way of achieving this without adding position:absolute to #d3 or modifying the DOM? I am targeting the latest version of Chrome here and am open to Javascript/jQuery solutions if there is no pure-CSS3 solution available

use position: relative for #d3 for the z-index to work
#d3 {
background: green;
z-index: 9999999;
position: relative;
}
Demo: Fiddle
See this answer

For me, the outline property is the simplest way to add an overlay around any element in CSS.
No need of z-index, just add the following code:
.myElement {
outline: 99999px solid rgba(0, 0, 0, 0.5)
}
I created a demo on jsFiddle.
Have a nice day,
Thomas.

This is the explanation of why this works: "The z-index will only work if the position property is set as well."
see http://webdesign.about.com/od/styleproperties/p/blspzindex.htm et.al.

Have column extend to bottom of browser with an empty header

<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?

You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.