We Keep Coding

Remove height of Div with Height: Auto? JS/CSS

So I have finished building the .JS for my video player and somehow my positioning is making my div stretch (See here: http://prntscr.com/8tsl4m)
I want to remove that part but I am using six-columns class width from skeleton framework, so the div width dynamically changes. Therefore I cannot just define a height because it has to be auto.
Can I remove this with a line of JS or some CSS attribute that I am missing?
Keep in mind that I am just starting to figure out what JS is even used for, and and intermediate in CSS and HTML.
If you need my code then here it is:
$(document).ready(function(){
//INITIALIZE
var video = $('#myVideo');
//remove default control when JS loaded
video[0].removeAttribute("controls");
$('.control').show().css({'bottom':45});
$('.loading').fadeIn(500);
$('.caption').fadeIn(500);
//before everything get started
video.on('loadedmetadata', function() {
$('.caption').animate({'top':-380},300);
//set video properties
$('.current').text(timeFormat(0));
$('.duration').text(timeFormat(video[0].duration));
updateVolume(0, 0.7);
//start to get video buffering data
setTimeout(startBuffer, 150);
//bind video events
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function() {
$('.control').stop().animate({'bottom':45}, 500);
$('.caption').stop().animate({'top':-360}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().animate({'bottom':45}, 500);
$('.caption').stop().animate({'top':-380}, 500);
}
})
.on('click', function() {
$('#init').remove();
$('.btnPlay').addClass('paused');
$(this).unbind('click');
video[0].play();
});
$('#init').fadeIn(200);
});
//display video buffering bar
var startBuffer = function() {
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width',perc+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
//display current video play time
video.on('timeupdate', function() {
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100 * currentPos / maxduration;
$('.timeBar').css('width',perc+'%');
$('.current').text(timeFormat(currentPos));
});
//CONTROLS EVENTS
//video screen and play button clicked
video.on('click', function() { playpause(); } );
$('.btnPlay').on('click', function() { playpause(); } );
var playpause = function() {
if(video[0].paused || video[0].ended) {
$('.btnPlay').addClass('paused');
video[0].play();
}
else {
$('.btnPlay').removeClass('paused');
video[0].pause();
}
};
//speed text clicked
$('.btnx1').on('click', function() { fastfowrd(this, 1); });
$('.btnx3').on('click', function() { fastfowrd(this, 3); });
var fastfowrd = function(obj, spd) {
$('.text').removeClass('selected');
$(obj).addClass('selected');
video[0].playbackRate = spd;
video[0].play();
};
//stop button clicked
$('.btnStop').on('click', function() {
$('.btnPlay').removeClass('paused');
updatebar($('.progress').offset().left);
video[0].pause();
});
//fullscreen button clicked
$('.btnFS').on('click', function() {
if($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
}
else {
alert('Your browsers doesn\'t support fullscreen');
}
});
//light bulb button clicked
$('.btnLight').click(function() {
$(this).toggleClass('lighton');
//if lightoff, create an overlay
if(!$(this).hasClass('lighton')) {
$('body').append('<div class="overlay"></div>');
$('.overlay').css({
'position':'absolute',
'width':100+'%',
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
});
$('.videoContainer').css({
'z-index':1000
});
}
//if lighton, remove overlay
else {
$('.overlay').remove();
}
});
//sound button clicked
$('.sound').click(function() {
video[0].muted = !video[0].muted;
$(this).toggleClass('muted');
if(video[0].muted) {
$('.volumeBar').css('width',0);
}
else{
$('.volumeBar').css('width', video[0].volume*100+'%');
}
});
//VIDEO EVENTS
//video canplay event
video.on('canplay', function() {
$('.loading').fadeOut(100);
});
//video canplaythrough event
//solve Chrome cache issue
var completeloaded = false;
video.on('canplaythrough', function() {
completeloaded = true;
});
//video ended event
video.on('ended', function() {
$('.btnPlay').removeClass('paused');
video[0].pause();
});
//video seeking event
video.on('seeking', function() {
//if video fully loaded, ignore loading screen
if(!completeloaded) {
$('.loading').fadeIn(200);
}
});
//video seeked event
video.on('seeked', function() { });
//video waiting for more data event
video.on('waiting', function() {
$('.loading').fadeIn(200);
});
//VIDEO PROGRESS BAR
//when video timebar clicked
var timeDrag = false; /* check for drag event */
$('.progress').on('mousedown', function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).on('mouseup', function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x) {
var progress = $('.progress');
//calculate drag position
//and update video currenttime
//as well as progress bar
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100 * position / progress.width();
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
$('.timeBar').css('width',percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};
//VOLUME BAR
//volume bar event
var volumeDrag = false;
$('.volume').on('mousedown', function(e) {
volumeDrag = true;
video[0].muted = false;
$('.sound').removeClass('muted');
updateVolume(e.pageX);
});
$(document).on('mouseup', function(e) {
if(volumeDrag) {
volumeDrag = false;
updateVolume(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(volumeDrag) {
updateVolume(e.pageX);
}
});
var updateVolume = function(x, vol) {
var volume = $('.volume');
var percentage;
//if only volume have specificed
//then direct update volume
if(vol) {
percentage = vol * 100;
}
else {
var position = x - volume.offset().left;
percentage = 100 * position / volume.width();
}
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//update volume bar and video volume
$('.volumeBar').css('width',percentage+'%');
video[0].volume = percentage / 100;
//change sound icon based on volume
if(video[0].volume == 0){
$('.sound').removeClass('sound2').addClass('muted');
}
else if(video[0].volume > 0.5){
$('.sound').removeClass('muted').addClass('sound2');
}
else{
$('.sound').removeClass('muted').removeClass('sound2');
}
};
//Time format converter - 00:00
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
return m+":"+s;
};
});
/* video container */
.videoContainer{
width: 100%;
height:auto;
position:relative;
overflow:hidden;
background-color: #f2f5f8;
color: #383737;
border: 0px solid #f2f5f8;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;}
/* video caption css */
.caption{
display:none;
position: relative;
top: -100%;
background-color: #f2f5f8;
font-size:20px;
font-weight:bold;
background-color: #f2f5f8;
}
/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
background-color: #f2f5f8;
font-family: Cabin;
color: #383737;
position:relative;
bottom: 75px;
left:0;
width:100%;
z-index:5;
display:none;
height: 40px;
}
/* control top part */
.topControl{
height:11px;
border-bottom:1px solid #404040;
padding:1px 5px;
}
/* control bottom part */
.btmControl{
clear:both;
height: 6px;
opacity: 0.5;
background-color: #eef2f6;
}
.control div.btn {
float:left;
width:34px;
height:30px;
padding:0 5px;
border-right:1px solid #404040;
cursor:pointer;
}
.control div.text{
font-size:12px;
font-weight:bold;
line-height:30px;
text-align:center;
font-family:verdana;
width:20px;
border:none;
color: #383737;
}
.control div.btnPlay{
background:url(images/play.png) no-repeat 0 0;
border-left:1px solid #404040;
}
.control div.paused{
background:url(images/pause.png) no-repeat 0 0px;
}
.control div.btnStop{
background:url(control.png) no-repeat 0 -60px;
}
.control div.spdText{
border:none;
font-size:14px;
line-height:30px;
font-style:italic;
}
.control div.selected{
font-size:15px;
color: #383737;
}
.control div.sound{
background:url(control.png) no-repeat -88px -30px;
border:none;
float:right;
}
.control div.sound2{
background:url(control.png) no-repeat -88px -60px !important;
}
.control div.muted{
background:url(control.png) no-repeat -88px 0 !important;
}
.control div.btnFS{
background:url(control.png) no-repeat -44px 0;
float:right;
}
.control div.btnLight{
background:url(control.png) no-repeat -44px -60px;
border-left:1px solid #404040;
float:right;
}
.control div.lighton{
background:url(control.png) no-repeat -44px -30px !important;
}
/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
width:85%;
position:relative;
float:left;
cursor:pointer;
height: 6px;
background-color: #eef2f6;
}
.progress span {
height:100%;
position:absolute;
top:0;
left:0;
display:block;
}
.timeBar{
z-index:10;
width:0;
height: 6px;
background-color: #db7560;
}
.bufferBar{
z-index:5;
width:0;
height: 6px;
opacity: 0.5;
background-color: #eef2f6;
}
/* time and duration */
.time{
width:15%;
float:right;
text-align:center;
font-size:11px;
line-height:12px;
}
/* VOLUME BAR CSS */
/* volume bar */
.volume{
position:relative;
cursor:pointer;
width:70px;
height:10px;
float:right;
margin-top:10px;
margin-right:10px;
}
.volumeBar{
display:block;
height:100%;
position:absolute;
top:0;
left:0;
background-color:#eee;
z-index:10;
}
/* OTHERS CSS */
/* video screen cover */
.loading, #init{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/loading.gif) no-repeat 50% 50%;
z-index:2;
display:none;
z-index: 100;
}
#init{
background:url(images/bigplay.png) no-repeat 50% 50% !important;
cursor:pointer;
z-index: 50;
}
<div class="six columns">
<div class="videoContainer">
<video id="myVideo" controls preload="auto" poster="images/1-thm.png" width="600" height="350" >
<source src="video.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
<div class="caption">Screamer 2015 Intro</div>
<div class="control">
<div class="topControl">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="time">
<span class="current"></span> /
<span class="duration"></span>
</div>
</div>
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">Speed: </div>
<div class="btnx1 btn text selected" title="Normal speed">x1</div>
<div class="btnx3 btn text" title="Fast forward x3">x3</div>
<div class="btnFS btn" title="Switch to full screen"></div>
<div class="btnLight lighton btn" title="Turn on/off light"></div>
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
<div class="sound sound2 btn" title="Mute/Unmute sound"></div>
</div>
</div>
<div class="loading"></div>
</div>
</div>

In your div btmControl, there is the code
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
for which I cannot see the use right now.
Try changing the corresponding height value in the css part (.volume and .volumeBar) or consider removing it (if it really is not useful)
Because it is set to
display:block;
it should create a new line and not fill in a row along with the other divs.
So display:inline; will also provide a possible solution
Furthermore, the following divs will also be aligned in a new line. I propose this is the line break you do not want to have...
(For an example of display:block effect click here)
But anyway, a fiddle version for this problem would be of great help!

How to have a clickable text box appear over an image on hover

I have an image inside of a DIV. When a user hovers over the image I would like a white box with 65% opacity to come up from the bottom of the image that would only cover a about 30% of the bottom of the image. In that box would be text that say something like "+ Order Sample" and when the user clicks on that box it would be added to the cart.
Easy enough to handle the adding to cart part it's the css and possibly javascript necessary to make this happen that I'm struggling with. Can someone get me started? Here's what I have so far. This includes edits from first answer.
foreach($array as $key => $value) {
$imgsrc = $value['option_value']. ".jpg" ;
$option_name = $value['option_name'] ;
$fullname = $value['quality'] . " " . $value['color'] ;
$cbpg = $value['cbpg'] ;
$space = $value['space'] ;
print "<div class='colorbook-color-guide-div' onmouseover='showOrderSample();'>" ;
print "<img class='colorbook-color-guide-image js-color-option js-tooltip' nopin='nopin' data-tooltip-content='$option_name' src='/images/uploads/colors/$imgsrc' alt='$option_name' >" ;
print "<div id='orderSample' onclick='hideOrderSample();alert(\"order sample\");' ><b>+ Order Sample</b></div>" ;
print "<p class='colorbook-color-subtitle'>$fullname</p>" ;
//print "<p class='colorbook-color-subtitle'>$cbpg $space</p>" ;
print "</div>" ;
}
And here's the CSS I have.
.colorbook-color-guide-div {
width: 176px;
min-height: 107px;
margin-bottom: 2px;
margin-right: 21px;
cursor: pointer;
float:left;
text-align:center;
}
.colorbook-color-guide-image {
width: 176px;
min-height: 86px;
}
.colorbook-color-subtitle {
font-family: HelveticaNeueLT-Light, Museo-500, Helvetica, Arial, sans-serif;
font-style: normal ;
font-weight:600 ;
font-size: 13px ;
font-size: 1.3rem ;
color: #929496 ;
margin-top: -3px;
}
#orderSample {
height:0px;
top:100px;
width:176px;
display:block;
overflow:hidden;
background:white;
opacity:.65;
}
And the JavaScript
function showOrderSample() {
var element = document.getElementById("orderSample");
element.style.height = "30px";
element.style.top = "70px";
}
function hideOrderSample() {
setTimeout(function () {
document.getElementById("orderSample").style.height = "0px";
}, 500);
}

My example uses just JavaScript, html and fixed sizes but it does what was asked for.
Look at the Fiddle here:
https://jsfiddle.net/ag7to93q/9/
<script>
function showOrderSample(element) {
element.children[1].style.height = "30px"; // access the second child of the div element
element.children[1].style.top = "70px";
}
function hideOrderSample(element, event) {
if (event && event.target.classList.contains("hoverDiv")) {
alert("buy buy buy!");
setTimeout(function () {
element.children[1].style.height = "0px";
}, 200);
}
else {
// do something here
}
}
</script>
<div style="position:absolute;top:50px;left:50px;width:200px;height:100px;background:green;" onmouseenter="showOrderSample(this);" onclick="hideOrderSample(this, event);" onmouseleave="hideOrderSample(this, event);" >
<img style="position:absolute;height:100px;width:200px;" src="https://jsfiddle.net/img/logo.png" ></img>
<div id="orderSample" class="hoverDiv" style="position:absolute;height:0px;top:100px;width:200px;display:block;overflow:hidden;background:white;opacity:.65;"><b>+ Order Sample<b>
</div>
</div>

Look at the following jsFiddle. Keep in mind accurate answers require more detail, so based on your question I came up with an approximate (hopefully as accurate as possible) response. Let me know if it helped in getting you closer to where you want to be, we can work on something closer if needed.
HTML:
<div class="popup-overlay--gray">a</div>
<a class="popup-btn__open" href="#">Open Popup</a>
<div>
<a class="popup-btn__close" href="#">Close Popup</a>
<img class="popup" src="http://placehold.it/300x300"/>
</div>
CSS
[class*="popup-btn"] { text-decoration: none; color: white; background-color: gray; }
.popup-btn__close { top: 0; right: 0; }
.popup { display: none; }
.popup-overlay--gray { position: absolute: width: 100%; height: 100%; background-color: #333; opacity: 0.7; z-index: 1000; }
jQuery 2.1.3
var timer,
delay = 500;
$(".show-popup").hover(function(){
// on mouse in, start a timeout
timer = setTimeout(function(){
// showing the popup
$('.popup').fadeIn(500);
}, delay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(timer);
});

Fiddle
Jquery solution
$('document').ready(function () {
$('#myimage').hover(
//hover in
function () {
$("#backgroundDIv").css('z-index', 101);
},
//hover out
function () {
$("#backgroundDIv").css('z-index', 99);
});
});
HTML
<div id="mainDiv">
<img id="myimage" src="http://i48.fastpic.ru/big/2013/0606/5c/aa5f8d03b34f8e79f18c07343573bc5c.jpg" />
<input type="text" value="add me" id="backgroundDIv"/>
</div>
CSS
#myimage {
z-index:100;
position: absolute;
}
#backgroundDIv {
z-index=99;
position: absolute;
top:200px;
background-color:#fff200;
opacity:0.4;
}

Infinite gallery with multiple visible images

I'm looking to create something like the following has on top of their site.
http://www.vogue.com/
The auto-scrolling slideshow that has multiple images shown. (1, 2, 3) then (2, 3, 4). It cycles through them eventually depending on how many there are. Each image is also in a separate div, where I believe the overlay is being placed for the two outside images that aren't being focused.
I'm not that well versed in javascript to create something like this myself from scratch, and haven't found a jquery slideshow that allows for the multiple images to be seen at a given time. The closest I've found is a plugin that scrolls through 3 images at a time, and didn't auto-scroll.
Does anyone know how this would be easily accomplished with the given specs? I need it to perform pretty much how it does on the vogue site. Thanks in advance.

jsBin demo
jQuery:
// infinite Gallery - script by roXon, design idea by "Vogue(R)"
$(function(){
var c = 0; // COUNTER // SET HERE DESIRED START SLIDE NUMBER (zero based)
var speed = 300; // ANIMATION SPEED
var pause = 3500; // ANIMATION PAUSE
var $slider = $('.carousel-slider');
var $sli = $slider.find('.carousel-content');
var $btns = $('#btn-left, #btn-right');
/* DO NOT EDIT BELOW */
var sliN = $sli.length;
$('.carousel').clone().appendTo( $('.carousel:gt(0)') ); /*CLONE SLIDERS*/
var m = 0;
var w = $slider.closest('div').width();
var intv;
$slider = $('.carousel-slider'); // all
$slider.width(w*2);
// rearrange
$slider.eq(0).find('.carousel-content:lt('+(c)+')').appendTo( $slider.eq(0) );
$slider.eq(1).find('.carousel-content:lt('+(c-1)+')').appendTo( $slider.eq(1) );
$slider.eq(2).find('.carousel-content:gt('+(c)+')').prependTo( $slider.eq(2) );
// POPULATE WITH NAVIGATION BUTTONS
for(i=0;i<sliN;i++){
$('#nav-btns p').append(' '+ (i+1) +' ');
}
// TOGGLE ACTIVE CLASS TO NAV BUTTON
function navBtnsActive(){
c = c===-1 ? sliN-1 : c%sliN ; // counter resets
$('#nav-btns a').removeClass('btn-active').eq(c).addClass('btn-active'); // nav buttons actives
}
navBtnsActive();
var $lastCont;
function anim(){
if(c>m){ // right btn
$slider.animate({left:-w}, speed, 'linear', function(){
$(this).css({left:0}).find('.carousel-content:first').appendTo( $(this) );
});
m++;
}else if(c<m){ // left btn
$slider.animate({left:-w},0,function(){
$lastCont = $(this).find('.carousel-content:last');
$(this).find('.carousel-content:last').prependTo( $(this) );
}).animate({left:0}, speed, 'linear');
m--;
}
if(c!=m){anim();} // loop until match
}
// LEFT-RIGHT BUTTONS //
$btns.on('click',function(){
if(!$slider.is(':animated')){
var btnID = this.id=='btn-right' ? c++ : c-- ;
anim();
navBtnsActive();
m=c;
}
});
// NAV BUTTONS //
$('#nav-btns a').on('click',function(e){
e.preventDefault();
c = $(this).index();
anim();
navBtnsActive();
});
// AUTO SLIDE
function auto(){
clearInterval(intv);
intv = setInterval(function(){
$('#btn-right').click();
}, pause);
}
auto(); // start!
// PAUSE ON HOVER //
$('#gallery').on('mouseenter mouseleave',function( e ){
var mEnt = e.type=='mouseenter',
aSli = mEnt?clearInterval(intv):auto();
$btns.stop().fadeTo(300,mEnt?1:0);
});
});
HTML:
<div id="document_wrapper">
<div id="container">
<h1 class="title">BLOGUE</h1>
<div id="top-nav"></div>
<div id="gallery"> <!-- OUR PRECIOUS :) -->
<div class="carousel carousel-center">
<div class="carousel-slider">
<div class="carousel-content">
<!-- organize your content here -->
</div>
<!-- use more .carousel-content here -->
</div>
</div>
<div class="carousel carousel-left"></div>
<div class="carousel carousel-right"></div>
<div id="btn-left"></div>
<div id="btn-right"></div>
<div id="nav-btns"><p></p></div>
</div>
<!-- document content here -->
</div>
</div>
CSS:
*{margin:0;padding:0;} /* UGLY RESET */
body{
font:14px/24px "Myriad Pro","Trebuchet MS",sans-serif;
background:#F2EFED;
color:#555;
}
#document_wrapper{
position:relative;
overflow:hidden;
}
h1.title{
font-family:"Times New Roman",Times,serif;
font-size:14.16em;
line-height:0.6em;
font-weight:normal;
letter-spacing:10px;
color:#000;
position:relative;
z-index:1;
top:70px;
}
#container{
position:relative;
margin:0px auto;
width:980px;
padding-bottom:70px;
height:1000px;
background:#fff;
}
#top-nav{
border-top:1px solid #000;
position:relative;
z-index:2;
background:#fff;
height:36px;
width:100%;
}
/* GALLERY */
#gallery{
height:400px;
width:100%;
position:relative;
left:0px;
padding-bottom:36px; /* FOR NAV BUTTONS HEIGHT */
}
.carousel{
background:#147;
position:absolute;
margin-left:-10px;
width:850px;
height:400px;
border-left:10px solid #fff;
border-right:10px solid #fff;
overflow:hidden;
}
.carousel-left, .carousel-right{
opacity:0.2;
}
.carousel-left{
left:-860px;
}
.carousel-right{
left:860px;
}
.carousel-slider{
height:400px;
position:absolute;
left:0;
}
.carousel-content{
position:relative;
margin-left:-10px;
float:left;
width:850px;
height:400px;
border-left:10px solid #fff;
border-right:10px solid #fff;
}
/* BUTTONS */
#btn-left, #btn-right{
position:absolute;
background:#fff;
width:25px;
height:150px;
top:125px;
display:none;
cursor:pointer;
}
#btn-right{
right:130px;
}
/**/
#nav-btns{
position:relative;
top:400px;
height:30px;
width:850px;
}
#nav-btns{
text-align:right;
}
#nav-btns a{
font-style:italic;
text-decoration:none;
color:#888;
padding:0 8px;
margin:0 !important;
}
#nav-btns a.btn-active{
border-top:10px solid #fff;
text-decoration:none;
color:#000;
}
#nav-btns a:hover{
color:#000;
}

fiddle attached,
Minor code refactoring and optimisations can be done but the general idea is the same.
(function($) {
var $slider = $('#slider'),
finalOffset = '-' + $slider.children().last().offset().left + 'px';
slideSpeed = 5000,
timer = -1;
function startSlide() {
$slider.children().first().animate({
'margin-left' : finalOffset
}, slideSpeed, function() {
$slider.children().first().animate({'margin-left' : '0px'}, slideSpeed, function() {
startSlide();
});
});
}
startSlide();
}(jQuery));​
cheers

Javascript running onload instead of onclick

I need my code to run onclick instead of onload. I think I have to set var Delay = to -1;, but what else? I've seen this code: 
Click here 
But I have no idea how to use it, or where it goes.
<!-- This goes in the head -->
<style>
A.yourlinkclass {
font-family: Arial;
color: #CCCCCC;
text-decoration: none;
font-size: 13px;
font-weight:;
}
A.yourlinkclass:hover {
font-family: Arial;
color: #CCCCCC;
text-decoration: underline;
font-size: 13px;
font-weight:;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var Delay = 10;//Seconds after them clicking the link, the gateway vanishes.
function setupgateway()
{
var Left = $(window).width() /2;
Left = Left - $('#gatewaydiv').width()/2;
var Top = $(window).height() /2;
Top = Top - $('#gatewaydiv').height()/2;
$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
$('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css({display:'block', position:'fixed'});
}
function removegateway()
{
$('#gatewaydiv').css('display', 'none');
$('#gatewayDimmer').css('display','none');
}
$(document).ready(function()
{
$('.offerlink').click(function()
{
setTimeout('removegateway()', Delay*1000);
});
setupgateway();
});
</script>
<style type="text/css">
body
{
background-image:url('http://');
background-repeat:repeat;
height:100%;
margin:0;
}
#mainContent
{
background-color:white;
margin-left:auto;
margin-right:auto;
margin-top:130px;
width:370px;
border:3px solid #CDCDCD;
text-align:center;
}
#gatewaydiv
{
background-image:url("http://");
background-repeat:no-repeat;
width:370px;
height:546px;
padding:px;
position:absolute;
display:none;
background-color:;
border:solid px ;
text-align:center;
font-family:tahoma;
}
#gatewaydiv h1
{
font-size:24px;
color:#FFFFFF;
}
#gatewayMessage
{
font-size:18px;
}
.offerlink
{
color:#CC9999;
font-weight:bold;
font-size:14px;
}
#OfferList
{
margin:0;
padding:0;
}
#OfferList
{
list-style:none;
}
#gatewayDimmer
{
background-color:#000000;
opacity:0.8;
filter: alpha(opacity = 50);
display:none;
position:absolute;
top:0;
}
</style>
//**this goes in the body**//
<div id="gatewaydimmer">
</div>
<div id="gatewaydiv">
<ul id="blah">
<br>
<br>
<br>
<br>
<h1></h1>
<br /><br />
<li></li>
</ul>
<br /><br />
</div>

You mean, something like this?
$('#my-link').click(function(e){
e.preventDefault();
// Do something here...
});
Plus:
Click Me!
This way, when you click on the link, instead of getting redirected to somewhere else, the code in //Do something here... will be executed.
BTW, you have to wrap it in:
$(document).ready(function(){
//...
});
(or just $(function(){ ... });)
in order to have it executed after the DOM element for the <a> is created.

Show / Hide / Toggle - Javascript / jQuery

I'm very new with Javascript.
I'm trying to do something with Show/Hide functions.
html:
<html>
<head>
<title> New Document </title>
<style>
#button01 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button01:hover {
background-color:#ffcccc;
}
#button01 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button01.png")
}
#button01 a:hover {
width:40px;
height:40px;
background:url("button01-hover.png")
}
#hidden01 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #ffcccc;
}
#button02 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button02:hover {
background-color:#cccccc;
}
#button02 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button02.png")
}
#button02 a:hover {
width:40px;
height:40px;
background:url("button02-hover.png")
}
#hidden02 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #cccccc;
}
</style>
</head>
<body>
<div style="width:300px;">
<div id="button01"></div>
<div id="button02"></div>
</div>
<div id="hidden01"> </div>
<div id="hidden02"> </div>
</body>
</html>
script:
function toggle(offset){
var i, x;
var stuff = Array('hidden01', 'hidden02'); //put all the id's of the divs here in order
for (i = 0; i < stuff.length; i++){ //hide all the divs
x = document.getElementById(stuff[i]);
x.style.display = "none";
}
// now make the target div visible
x = document.getElementById(stuff[offset]);
x.style.display = "block";
window.onload = function(){toggle(0);}
}
That's working, but I want to fix 2 things:
1- Close/Hide hidden divs if I click on it's corresponding button;
2- After clicking a button, fix hover button image. If click again unfix;
I've tried almost all the scripts posted and can not find a solution. I don't want to open the divs at same time.
If opens one, close the others.

You're using jQuery, so use jQuery.
$(function() {
function toggle(offset) {
$('div[id^=hidden]').hide().eq(offset).show();
}
toggle(0);
});
I don't know what you mean by the two things you want to fix, however. Please clarify.
Edit
Okay, I see what you're going for now. I've cleaned up your code a lot.
HTML
<div style="width:300px;">
<div id="button1"><a></a></div>
<div id="button2"><a></a></div>
</div>
<div id="hidden1"> </div>
<div id="hidden2"> </div>
CSS
#button1, #button2 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button1:hover {
background-color:#fcc;
}
#button2:hover {
background-color:#ccc;
}
#button1 a, #button2 a {
display:block;
width:40px;
height:40px;
margin:auto;
}
#button1 a {
background:url(http://lorempixum.com/40/40?1)
}
#button2 a {
background:url(http://lorempixum.com/40/40?3)
}
#button1 a:hover, #button1.hover a {
background:url(http://lorempixum.com/40/40?2)
}
#button2 a:hover, #button2.hover a {
background:url(http://lorempixum.com/40/40?4)
}
#hidden1, #hidden2 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #fcc;
}
JavaScript
var $buttons = $('div[id^=button]'),
$hiddenDivs = $('div[id^=hidden]'),
HOVER_CLASS = 'hover';
$buttons.live('click', function() {
var $this = $(this),
i = $this.index();
$buttons.removeClass(HOVER_CLASS);
$this.addClass(HOVER_CLASS);
$hiddenDivs.hide().eq(i).show();
}).first().click();
Demo
Last edit
Changed JavaScript and CSS. http://jsfiddle.net/mattball/bNCNQ/
CSS
#button1:hover a, #button1.hover a {
background:url(...)
}
#button2:hover a, #button2.hover a {
background:url(...)
}
JS
$buttons.live('click', function () {
var $this = $(this),
i = $this.index(),
show = !$this.hasClass(HOVER_CLASS);
$buttons.removeClass(HOVER_CLASS);
$this.toggleClass(HOVER_CLASS, show);
$hiddenDivs.hide().eq(i).toggle(show);
});

Here's a working demo: http://jsfiddle.net/R6vQ4/33/.
All of your JavaScript code can be condensed into this little block (and this isn't even as small as it can get):
$(document).ready(function()
{
$('div[id^=button]').click(function()
{
var element = $('#hidden' + $(this).attr('id').substr(6));
$('div[id^=button]').css('cssText', 'background-color: none');
if (element.is(':visible'))
{
$(this).css('cssText', 'background-color: none');
$('div[id^=hidden]').hide();
} else {
$('div[id^=hidden]').hide();
element.show();
$(this).css('cssText', 'background-color: ' + $(this).css('background-color') + ' !important');
}
});
});
The state of the button "sticks" when you press it, but my technique is a bit hacky, so feel free to change it.
When you use jQuery, you actually use it ;)