Develop Reference

Chatbox wrapper blocks click on button

I have a chatbox that shows and hides on click of the button.
As example I have some pages with some buttons that are behind the chatbox.
In this example the button is not clickable.
How do I fix this?
The chatbox isn't even open and still the button is not clickable.
I want the button to be clickable when my chat is closed.
I tried to do this:
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
z-index: -99; //////// doesn't work
}
How is it even in front of my button?
Here you got my chat example with an example button.
const btn = document.querySelector(".js-chat");
const chatBox = document.querySelector(".js-chatbox");
$("#chat-circle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
$(".chat-box-toggle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
btn.addEventListener("click", () => {
chatBox.classList.toggle("chatbox--is-visible");
if (chatBox.classList.contains("chatbox--is-visible")) {
btn.innerHTML = '<i class="fa fa-times"></i>';
} else {
btn.innerHTML = '<i class="fa fa-comments"></i>';
}
});
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
}
button{
float: right;
margin-top: 70px;
margin-right: 20px;
}
.btn--chat {
align-self: flex-end;
background: #46A7B3;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.15);
color: #fff !important;
display: block;
font-size: 1.8em;
margin-top: 0.5em;
transition: all 300ms ease;
text-align: center;
height: 60px;
width: 60px;
border-radius: 50%;
}
.btn--chat:hover {
background: #37848e;
}
.chatbox {
border-radius: 0.5em;
opacity: 0;
order: -1;
transition: all 300ms ease;
transform-origin: 100% 100%;
transform: scale(0);
visibility: hidden;
width: 300px;
box-shadow: -2px 2px 15px 4px #222d32;
}
.chatbox__input {
border-radius: 0.5em;
border: 0;
color: #555;
font-size: 0.9rem;
padding: 2em 1em;
position: relative;
resize: none;
}
.chatbox__input:required {
box-shadow: none;
}
.chatbox__submit {
background: none;
border: 0;
bottom: 0.75em;
cursor: pointer;
color: #3e54a4;
font-size: 0.85rem;
position: absolute;
right: 0.5em;
}
.chatbox--is-visible {
opacity: 1;
transform: scale(1);
visibility: visible;
}
.chat-box-header {
background: #46A7B3;
height:30px;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:white;
text-align:center;
font-size:20px;
padding-top:17px;
}
.chat-box-body {
position: relative;
height:300px;
height:auto;
border:1px solid #ccc;
overflow: hidden;
}
.chat-box-body:after {
content: "";
background: blue;
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
height:100%;
position: absolute;
z-index: -1;
}
#chat-input {
background: #f4f7f9;
width:77%;
position:relative;
height:47px;
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
padding-left:15px;
border:none;
resize:none;
outline:none;
border:1px solid #ccc;
color:#888;
border-top:none;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
overflow:hidden;
}
.chat-input > form {
margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ccc;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
color: #ccc;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
color: #ccc;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
color: #ccc;
}
.chat-submit {
position:absolute;
bottom:5px;
right:10px;
background: transparent;
box-shadow:none;
border:none;
border-radius:50%;
color:#46a7b3;
width:35px;
height:35px;
}
.chat-logs {
padding:15px;
height:170px;
overflow-y:scroll;
background: #939393;
}
.chat-logs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar-thumb
{
background-color: #5A5EB9;
}
#media only screen and (max-width: 500px) {
.chat-logs {
height:20vh;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> click me (doesnt work) </button>
<!-- Button trigger modal -->
<div class="wrap">
<button class=" btn btn--chat js-chat"><i class="fa fa-comments"></i></button>
<div class="chatbox js-chatbox">
<div class="chat-box" style="display: block;">
<div class="chat-box-header">
Chat
</div>
<div class="chat-box-body">
<div class="chat-box-overlay">
</div>
<div class="chat-logs">
</div>
</div>
<div class="chat-input">
<input type="text" id="chat-input" placeholder="message" DISABLED AUTOFOCUS>
<button class="chat-submit" id="chat-submit" DISABLED><i class="fa fa-paper-plane"></i></button>
</div>
</div>
<!-- End of .chatbox__form -->
</div>
<!-- End of .chatbox.js-chatbox -->
</div>
<!-- End of .wrapper -->

Scale function is doing that, because it holds its position even if its set to 0 it still has full width and height.. Opacity makes it only invisible but still holds the position.
If you want cool efect, dont use css class and use jquery funcion .fadeToggle().

Using display:none and display:block instead of using opacity should fix the issue.
The problem is with visibility(and opacity) the div is still above the button and prevents the event from reaching the button. with display property the div is completely removed from the DOM!
const btn = document.querySelector(".js-chat");
const chatBox = document.querySelector(".js-chatbox");
$("#chat-circle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
$(".chat-box-toggle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
btn.addEventListener("click", () => {
chatBox.classList.toggle("chatbox--is-visible");
if (chatBox.classList.contains("chatbox--is-visible")) {
btn.innerHTML = '<i class="fa fa-times"></i>';
} else {
btn.innerHTML = '<i class="fa fa-comments"></i>';
}
});
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
}
button{
float: right;
margin-top: 70px;
margin-right: 20px;
}
.btn--chat {
align-self: flex-end;
background: #46A7B3;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.15);
color: #fff !important;
display: block;
font-size: 1.8em;
margin-top: 0.5em;
transition: all 300ms ease;
text-align: center;
height: 60px;
width: 60px;
border-radius: 50%;
}
.btn--chat:hover {
background: #37848e;
}
.chatbox {
border-radius: 0.5em;
opacity: 0;
order: -1;
transition: all 300ms ease;
transform-origin: 100% 100%;
transform: scale(0);
visibility: hidden;
width: 300px;
box-shadow: -2px 2px 15px 4px #222d32;
display: none;
}
.chatbox__input {
border-radius: 0.5em;
border: 0;
color: #555;
font-size: 0.9rem;
padding: 2em 1em;
position: relative;
resize: none;
}
.chatbox__input:required {
box-shadow: none;
}
.chatbox__submit {
background: none;
border: 0;
bottom: 0.75em;
cursor: pointer;
color: #3e54a4;
font-size: 0.85rem;
position: absolute;
right: 0.5em;
}
.chatbox--is-visible {
opacity: 1;
transform: scale(1);
visibility: visible;
display: block;
}
.chat-box-header {
background: #46A7B3;
height:30px;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:white;
text-align:center;
font-size:20px;
padding-top:17px;
}
.chat-box-body {
position: relative;
height:300px;
height:auto;
border:1px solid #ccc;
overflow: hidden;
}
.chat-box-body:after {
content: "";
background: blue;
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
height:100%;
position: absolute;
z-index: -1;
}
#chat-input {
background: #f4f7f9;
width:77%;
position:relative;
height:47px;
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
padding-left:15px;
border:none;
resize:none;
outline:none;
border:1px solid #ccc;
color:#888;
border-top:none;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
overflow:hidden;
}
.chat-input > form {
margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ccc;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
color: #ccc;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
color: #ccc;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
color: #ccc;
}
.chat-submit {
position:absolute;
bottom:5px;
right:10px;
background: transparent;
box-shadow:none;
border:none;
border-radius:50%;
color:#46a7b3;
width:35px;
height:35px;
}
.chat-logs {
padding:15px;
height:170px;
overflow-y:scroll;
background: #939393;
}
.chat-logs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar-thumb
{
background-color: #5A5EB9;
}
#media only screen and (max-width: 500px) {
.chat-logs {
height:20vh;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> click me (doesnt work) </button>
<!-- Button trigger modal -->
<div class="wrap">
<button class=" btn btn--chat js-chat"><i class="fa fa-comments"></i></button>
<div class="chatbox js-chatbox">
<div class="chat-box" style="display: block;">
<div class="chat-box-header">
Chat
</div>
<div class="chat-box-body">
<div class="chat-box-overlay">
</div>
<div class="chat-logs">
</div>
</div>
<div class="chat-input">
<input type="text" id="chat-input" placeholder="message" DISABLED AUTOFOCUS >
<button class="chat-submit" id="chat-submit" DISABLED><i class="fa fa-paper-plane"></i></button>
</div>
</div>
<!-- End of .chatbox__form -->
</div>
<!-- End of .chatbox.js-chatbox -->
</div>
<!-- End of .wrapper -->

Webpage doesn't adjust to any screen height automatically

I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>

What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units

You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.

Javascript slider seems wrong in IE7

I've made JS-slider so that when I click on an image in it this image increases. Increased image seems true in all browsers except IE7. What can I do, that it would be correct in IE7 as well? Thanks in advance and sory for not good english.
Correct reflection: http://gyazo.com/f56ac573b95879da52b51b97fd2b0adb
ie7: http://gyazo.com/59d8965c569544a7dbd554236dcb0e7a
<div class="wrapper_slider">
<div class="carousel">
<!-- <div class="carousel-button-left"> </div>
<div class="carousel-button-right"> </div> -->
<div class="carousel-wrapper">
<div class="items-wrap">
<div class="carousel-items">
<div class="see-all">Смотреть всех детей →</div>
<div class="carousel-block">
<img src="images/1.jpg" alt="" width="156" height="114"/>
<div class='full_size_img'>
<div><img src="images/41.jpg" width="321" height="239"/></div>
<div class="name">Даниил Королев</div>
<div class="wrap-descript">
<p>Учится играть заново. Он уже и забыл, каково это быть дома, ведь долгие 1,5 года мальчик провел в больнице...</p>
<p>Нужно собрать:</p>
<div class="price">
<p><span>1 000 500р.</span> до 23.10.12</p>
</div>
<div class="will">
Я хочу почь
</div>
<div class="detailer">Подробнее →</div>
</div>
</div>
</div>
.wrapper_slider {
height: 487px;
width: 100%;
/*border: 1px solid blueviolet;*/
position: absolute;
top:149px;
left:0px;
}
.carousel{
height: 480px;
width: 100%;
/*border: 1px solid #0fa628;*/
}
.carousel {
width: 100%; /* ширина всего блока */
margin: 5px auto;
}
.carousel-wrapper {
width: 100%; /* ширина области карусели */
overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
margin:0px;
padding:0px;
position:relative;
/*border: 1px solid #d91513;*/
top: -1px;
}
.carousel-items {
background: url(../img/slider-bg.png);
width: 10000px; /* устанавливаем большую ширину для набора элементов */
position: relative; /* позиционируем блок относительно основной области карусели */
left:-115px !important;
/*border: 1px solid #b3d4fc;*/
height:203px;
/*margin-top:108px;*/
padding-top:65px;
}
.see-all a{
display: block;
text-decoration: none;
background: url(../img/bg-all.png) repeat-x;
position:absolute;
left:1053px;
top:-14px;
width:175px;
height:26px;
border-radius: 13px;
text-align: center;
color:#fff;
line-height: 29px;
behavior: url(PIE.htc);
}
.items-wrap{
height:331px;
position:relative;
padding-top: 108px;
}
.block{
display: block !important;
}
.full_size_img .carousel-block{
position: absolute;
}
.carousel-items .carousel-block .full_size_img{
display: none;
line-height: 1.5;
z-index: 9999;
left: -127px;
top: -278px;
padding: 10px 9px;
border-radius: 7px;
height: 465px;
width: 377px;
position:relative;
background: #fefefe;
border: 1px solid #361308;
text-align: center;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
behavior: url(PIE.htc);
zoom: 1;
}
*+html .full_size_img{
z-index: 9999;
}
.full_size_img .name{
background: #edeeec;
opacity:0.7;
color:#361308;
height:42px;
font-family: "Verdana", sans-serif;
font-size:14px;
font-weight: bold;
line-height: 3;
width: 321px;
position:absolute;
top:207px;
left: 27px;
}
.full_size_img .wrap-descript{
padding: 0 18px;
}
.full_size_img .wrap-descript>p{
padding: 0 5px;
}
.full_size_img .wrap-descript .price{
padding: 5px 0 0 34px;
}
.full_size_img .wrap-descript .price p span{
font-weight:bold;
font-size:18px;
}
.full_size_img a:hover{
text-decoration: none;
}
.full_size_img a{
font-size: 14px;
font-weight: bold;
color: #191919;
}
.full_size_img .will a{
display:block;
text-decoration:none;
/*background: #fff4e9;*/
background: #fff4e9 url(../img/will-btn.png) repeat-x center bottom;
height:53px;
border-radius: 10px;
font-family: "OfficinaSansBoldC", sans-serif;
font-size:27px;
line-height:52px;
text-align: center;
color:#fff;
width:322px;
margin-top:7px;
margin-bottom:4px;
font-weight:bold;
}
.full_size_img .detailer a{
font-family: "Verdana", sans-serif;
font-size: 11px;
color:#0195A9;
font-weight:normal;
}
.full_size_img p{
padding-right: 46px;
margin: 5px 0;
}
.items-wrap img.carousel-button-left {
position: absolute;
left: 198px;
bottom: 31px;
cursor:pointer;
}
.items-wrap img.carousel-button-right{
position: absolute;
bottom: 27px;
right:190px;
cursor:pointer;
}
.carousel-block {
float: left; /* выстраиваем все элементы карусели в ряд */
width: 156px; /* задаём ширину каждого элемента */
padding: 10px 10px; /* делаем оступы, чтобы элементы не сливались */
position:relative;
}
.carousel-block>img:hover{
width: 170px;
height:125px;
position:absolute;
margin:auto;
top:7px;
left:0;
right:0;
cursor:pointer;
}
/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a{
width: 25px;
height: 36px;
position: absolute;
top: 80px;
cursor: pointer;
text-decoration:none;
}
.carousel-button-left a{
float: left;
background: #105cb6 url(../images/carousel-left.png);
left: 152px;
top: 103px;
z-index: 100;
}
.carousel-button-right a{
float: right;
background: #105cb6 url(../images/carousel-right.png);
left: 58px;
top: 104px;
z-index: 100;
}

Making a image slider, that changes images every 6 seconds

I am attempting to make a image slider, using the design my client is already using. But I have never made an image slider that changes images every 6 seconds, and you can choose to go to image 1, 2, or 3. Right now I am using 3 <div>'s and each one has the image assigned to them with the background.
Please excuse my sad attempt of Javascript, I am very new with it, and only know a few ways to work with it and jQuery.
And yes, I do have jQuery included on my page.
Oh, and all the <div>'s are display:none;, so to make them visible, I am adding a class called .active.
Here's a jsFiddle to my current work - http://jsfiddle.net/377Ma/4/
And here's the code.
HTML
<div class="art-slider art-slidecontainerheader" data-width="800" data-height="250">
<div class="art-slider-inner">
<div class="art-slide-item art-slideheader0 active" style="" id="img1">
</div>
<div class="art-slide-item art-slideheader1 active" style="" id="img2">
</div>
<div class="art-slide-item art-slideheader2" style="" id="img3">
</div>
</div>
</div>
<div class="art-slidenavigator art-slidenavigatorheader" data-left="92">
</div>
<div class="art-shapes">
</div>
</header>
<nav class="art-nav desktop-nav">
<ul class="art-hmenu menu-3">
<li class="menu-item-45"><a title="shop" href="http://www.iamsotare.storenvy.com">shop</a>
</li>
<li class="menu-item-116"><a title="blog" href="http://iamsotare.com/blog/">blog</a>
</li>
<li class="menu-item-115"><a title="story" href="http://iamsotare.com/story/">story</a>
</li>
<li class="menu-item-114"><a title="connect" href="http://iamsotare.com/connect/">connect</a>
</li>
<li class="menu-item-113"><a title="FAQs" href="http://iamsotare.com/faqs/">FAQs</a>
</li>
</ul>
</nav>
</div>
CSS - sorry, I couldn't find the exact spots needed, it's a bit long.
#content{
margin-left:auto;
margin-right:auto;
width:100%;
max-width:800px;
}
.active{
display:block;
}
.a
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-hmenu a, .art-vmenu a, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
}
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position: inside;
}
html, body
{
height: 100%;
}
body
{
padding: 0;
margin:0;
color: #303F50;
}
.art-header:before, #art-header-bg:before, .art-layout-cell:before, .art-layout-wrapper:before, .art-footer:before, .art-nav:before, #art-hmenu-bg:before, .art-sheet:before
{
width: 100%;
content: " ";
display: table;
}
.art-header:after, #art-header-bg:after, .art-layout-cell:after, .art-layout-wrapper:after, .art-footer:after, .art-nav:after, #art-hmenu-bg:after, .art-sheet:after,
.cleared, .clearfix:after {
clear: both;
font: 0/0 serif;
display: block;
content: " ";
}
.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}
.art-slider-inner {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.art-slidenavigator > a {
display: inline-block;
vertical-align: middle;
outline-style: none;
font-size: 1px;
}
.art-slidenavigator > a:last-child {
margin-right: 0 !important;
}
.art-slidecontainerheader {
position: relative;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .art-slide-item {
-webkit-transition: 800ms ease-in-out opacity;
-moz-transition: 800ms ease-in-out opacity;
-ms-transition: 800ms ease-in-out opacity;
-o-transition: 800ms ease-in-out opacity;
transition: 800ms ease-in-out opacity;
position: absolute;
display: none;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .active, .art-slidecontainerheader .next, .art-slidecontainerheader .prev {
display: block;
}
.art-slidecontainerheader .active {
opacity: 1;
}
.art-slidecontainerheader .next, .art-slidecontainerheader .prev {
width: 100%;
}
.art-slidecontainerheader .next.forward, .art-slidecontainerheader .prev.back {
opacity: 1;
}
.art-slidecontainerheader .active.forward {
opacity: 0;
}
.art-slidecontainerheader .active.back {
opacity: 0;
}
.art-slideheader0 {
background-image: url('slideheader0.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader1 {
background-image: url('slideheader1.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader2 {
background-image: url('slideheader2.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slidenavigatorheader {
display: inline-block;
position: absolute;
direction: ltr !important;
top: 226px;
left: 92%;
z-index: 101;
line-height: 0 !important;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
}
.art-slidenavigatorheader
{
background: #B9C2CB;background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -webkit-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -moz-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -o-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -ms-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;-svg-background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
padding:7px;
}
.art-slidenavigatorheader > a
{
background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;-svg-background: #728597;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-slidenavigatorheader > a.active
{
background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;-svg-background: #FA681E;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-slidenavigatorheader > a:hover
{
background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;-svg-background: #455B73;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-sheet
{
background: #FFFFFF;
-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
margin:0 auto;
position:relative;
cursor:auto;
width: 800px;
z-index: auto !important;
}
.art-header
{
margin:0 auto;
height: 250px;
background-image: none;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
z-index: auto !important;
}
.responsive .art-header
{
background-image: none;
background-position: center center;
}
.art-header>.widget
{
position:absolute;
z-index:101;
}
.art-nav
{
margin:0 auto;
position: relative;
z-index: 499;
text-align: center;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul
{
min-height: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: bottom;
}
.art-nav:before
{
content:' ';
}
.art-hmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: auto;
background-position: center;
}
.art-menuitemcontainer
{
margin:0 auto;
}
ul.art-hmenu>li {
margin-left: 11px;
}
ul.art-hmenu>li:first-child {
margin-left: 5px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 5px;
}
ul.art-hmenu>li>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
position: relative;
display: block;
height: 55px;
cursor: pointer;
text-decoration: none;
color: #33ADFF;
line-height: 55px;
text-align: center;
}
.art-hmenu a,
.art-hmenu a:link,
.art-hmenu a:visited,
.art-hmenu a.active,
.art-hmenu a:hover
{
font-size: 28px;
font-family: KidTYPEPaintregular, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
}
ul.art-hmenu>li>a.active
{
background: #FFFFFF;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
color: #33ADFF;
text-decoration: none;
}
ul.art-hmenu>li>a:visited,
ul.art-hmenu>li>a:hover,
ul.art-hmenu>li:hover>a {
text-decoration: none;
}
ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop ul.art-hmenu>li:hover>a {
color: #FF05CD;
text-decoration: none;
}
ul.art-hmenu>li:before
{
position:absolute;
display: block;
content:' ';
top:0;
left: -11px;
width:11px;
height: 55px;
background: url('menuseparator.png') center center no-repeat;
}
ul.art-hmenu>li:first-child:before{
display:none;
}
ul.art-hmenu li li a
{
background: #B9C2CB;
background: transparent;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 10px;
margin:0 auto;
}
ul.art-hmenu li li
{
float: none;
width: auto;
margin-top: 2px;
margin-bottom: 2px;
}
.desktop ul.art-hmenu li li ul>li:first-child
{
margin-top: 0;
}
ul.art-hmenu li li ul>li:last-child
{
margin-bottom: 0;
}
.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 24px;
min-width: 7em;
border: 0 solid transparent;
text-align: left;
line-height: 24px;
color: #6A7D90;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}
.art-hmenu ul a:link,
.art-hmenu ul a:visited,
.art-hmenu ul a.active,
.art-hmenu ul a:hover
{
text-align: left;
line-height: 24px;
color: #6A7D90;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}
ul.art-hmenu li li:after
{
display: block;
position: absolute;
content: ' ';
height: 0;
top: -1px;
left: 0;
right: 0;
z-index: 1;
border-bottom: 1px dotted #C6D1DD;
}
.desktop ul.art-hmenu li li:first-child:before,
.desktop ul.art-hmenu li li:first-child:after
{
display: none;
}
ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a
{
background: #FFFFFF;
background: transparent;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:0 auto;
}
.art-hmenu ul a:hover
{
text-decoration: none;
}
.art-hmenu ul li a:hover
{
color: #F05305;
}
.desktop .art-hmenu ul li:hover>a
{
color: #F05305;
}
ul.art-hmenu ul:before
{
background: #EFF2F5;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px dotted rgba(207, 216, 226, 0.9);
margin:0 auto;
display: block;
position: absolute;
content: ' ';
z-index: 1;
}
/* Begin Additional CSS Styles */
#font-face {
font-family: 'kidtypepaintregular';
src: url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.eot');
src: url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.woff') format('woff'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.ttf') format('truetype'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.svg#kidtypepaintregular') format('svg');
font-weight: normal;
font-style: normal;
}
.BLUE {
font-family: 'KidTypepaintregular';
color: #0000FF;
font-weight: normal;
}
/* End Additional CSS Styles */
And my sad excuse of Javascript... Haha
var imgcount = 1;
if(imgcount = 1){
$('#img1').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 2;
}
else if(imgcount = 2){
$('#img1').removeClass("active")
$('#img2').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 3;
}
else if(imgcount = 3){
$('#img2').removeClass("active")
$('#img3').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 1;
}

This is not the edit of your posted fiddle.It is the fiddle that i created before and edited for this answer now.
Try this fiddle:
http://jsfiddle.net/kzQFQ/77/
var check=0;
var timer;
var Wwidth=$(window).width()-9;
$(document).ready(function () {
$('.contentContainer').css({'width':''+Wwidth+'px'});
$('.three').click(function () {
$('.container').animate({
'left': '-1120px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.one').click();}, 6000);
});
$('.two').click(function () {
$('.container').animate({
'left': '-560px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.three').click();}, 6000);
});
$('.one').click(function () {
$('.container').animate({
'left': ''+0+'px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.two').click();}, 6000);
});
timer=setTimeout(function () {$('.two').click();}, 6000);
});