We Keep Coding

Horizontal scroll loop in Cargo Collective

I'm trying to add an horizontal loop to my page but when I try to add the javascript cargo tells me that the script has been disabled. Why does that happen? Is there a way to implement that java without having problems? Is it right to add the javascript in the tag script at the end? This is where I've took the code from: https://codepen.io/lemmin/pen/bqNBpK
HTML:
<div id="page">
<div class="pane"><div>Looping Horizontal Scroll</div></div>
<div class="pane"><div>2</div></div>
<div class="pane"><div>3</div></div>
<div class="pane"><div>4</div></div>
<div class="pane"><div>5</div></div>
<div class="pane"><div>Last</div></div>
<div class="pane"><div>Looping Horizontal Scroll</div></div>
</div>
CSS:
body{
overflow-x:hidden;
color:#FFF;
font-family:Helvetica;
font-size:200%;
}
#page {
overflow:hidden;
white-space:nowrap;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#CCC;
display:flex;
flex-wrap:no-wrap;
}
.pane {
flex:0 0 100vw;
height:100vh;
display:flex;
position:relative;
align-items:center;
justify-content:center;
background-color: #45CCFF;
}
.pane:nth-child(4n+2) {
background-color: #49E83E;
}
.pane:nth-child(4n+3) {
background-color: #EDDE05;
}
.pane:nth-child(4n+4) {
background-color: #E84B30;
}
.pane:last-child {
background-color: #45CCFF;
}
JS:
<script>
var page = document.getElementById('page');
var last_pane = page.getElementsByClassName('pane');
last_pane = last_pane[last_pane.length-1];
var dummy_x = null;
window.onscroll = function () {
var y = document.body.getBoundingClientRect().top;
page.scrollLeft = -y;
var diff = window.scrollY - dummy_x;
if (diff > 0) {
window.scrollTo(0, diff);
}
else if (window.scrollY == 0) {
window.scrollTo(0, dummy_x);
}
}
// Adjust the body height if the window resizes.
window.onresize = resize;
// Initial resize.
resize();
// Reset window-based vars
function resize() {
var w = page.scrollWidth-window.innerWidth+window.innerHeight;
document.body.style.height = w + 'px';
dummy_x = last_pane.getBoundingClientRect().left+window.scrollY;
}
</script>

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;
}

hover state not remain fixed when a drop down menu opens?

I am creating a menubar ,here when I hover on element color change to orange, and also when I hover on first and second element of the menu bar a drop down div will be open (menuForHeader).I want when I roll over on this div the color of the first element of the menu bar remain orange.
jquery used
<script>
$(document).ready(function(){
var lastScrollTop = 0
var currentScrollTop = 0
$(window).scroll(function (event) {
lastScrollTop = currentScrollTop
currentScrollTop = $(document).scrollTop()
if (currentScrollTop > lastScrollTop)
{
$('.menuWrap1').css("background-color","black");
}
else
{
if(currentScrollTop==0){
$('.menuWrap1').css("background","linear-gradient(black, transparent)");
$('.menuWrap1').css("background","-o-linear-gradient(black, transparent)");
$('.menuWrap1').css("background","-moz-linear-gradient(black, transparent)");}
}
});
$('#menu2 li:nth-child(2)').mouseover(function(){
$('.menuWrap1').css("height","163px");
});
$('.menuForHeader').mouseover(function(){
$('.menuWrap1').css("height","163px");
});
$('.menuForHeader').mouseout(function(){
$('.menuWrap1').css("height","60px");
});
$('menuForHeader').mouseover(function(){
$('#menu2 li:nth-child(2) a').css("color","orange");
});
$('#menu2 li:nth-child(2)').mouseout(function(){
$('.menuWrap1').css("height","60px");
});
// $('#menu2 li:nth-child(2)').addClass('onHovermenu');
});
</script>
<script type="text/javascript">
var showStaticMenuBar = false;
$(window).scroll(function () {
if (showStaticMenuBar == false) {
//if I scroll more than 200px, I show it
if ($(window).scrollTop() >= 160) {
//showing the static menu
$('.menu').addClass('show');
showStaticMenuBar = true;
}
}
else {
if ($(window).scrollTop() < 200) {
$('.menu').removeClass('show');
showStaticMenuBar = false;
}
}
});
</script>
Html code
<div class="menuWrap1">
<?php echo $this->element('Menus/menuHeader');?>
<div class="menuForHeader">
<?php echo $this->element('Menus/headerServices');?>
</div>
</div>
Css Used
.menuWrap1 {
position:fixed;
right:-21px;
/*margin-left:372px;*/
line-height: 35px;
font-family: 'Oxygen', sans-serif;
letter-spacing: 2px;
height: 60px;
margin-top: -135px;
background: -webkit-linear-gradient(black, transparent);
background: linear-gradient(black, transparent);
background:-o-linear-gradient(black, transparent);
background:-moz-linear-gradient(black, transparent);
transition: height 0.5s ease-in-out;
overflow:hidden;
}
#menu2{
float: right;
margin-right: 200px;
margin-top:-19px;
}
#menu2 li{
display:inline-block;
width:auto;
height:60px;
margin-top:-37px;
padding-right:20px;
}
#menu2 li.menu7{
padding:0;
}
#menu2 li a{
color:white;text-decoration: none;
}
#menu2 li a:active{
color:orange;
}
#menu2 li:nth-child(2) a:hover{
color:orange;
}

Wow this is a toughy. Let's have a try at it:
var innerHeader = $('.menuForHeader');
var menuWrap1 = $('.menuWrap1');
menuWrap1.mouseover(function() {
this.css('color', 'orange');
});
innerHeader.mouseover(function() {
this.css('color', 'orange');
});
innerHeader.mouseout(function() {
this.css('color', 'green');
});
menuWrap1.mouseout(function() {
if (innerHeader.style.color === 'green') {
this.css('color', 'green');
}
});
Using old fashioned DOM properties intermixed with jQuery. LIKE A BAWSS!

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

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 ;)