Develop Reference

JS / CSS issue with Div Slider and Display:Table-Cell

I have a Div slider that rotates a set of Divs in and out of focus. Everything was working fine until I tried switching everything to (table / table-cell) in order to keep them all the Divs the same height in CSS. Now they still rotate out but one div remains visible with a reduced width off to the side of the stage. I get a sense that its position related but just can't figure out what's causing the issue.
Affected Page - https://www.harpercollege.edu/dev/blog-slider-test.php
JS Code:
$('.blog-posts').wrapInner('<div class="blog-posts-stage" />');
// Calculate Conditions & Set Vars
// var playTimer = 9,
slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
$(window).resize(function() {
var slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
});
$('.blog-posts-next').on('click', function(event) {
event.preventDefault();
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
});
$('.blog-posts-prev').on('click', function(event) {
event.preventDefault();
$('.well:last').prependTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: -(slideWidth)
});
$('.blog-posts-stage').animate({
left: '0px'
}, 500, function() {});
});
function moveForward() {
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
}
var timer = setInterval(moveForward, playTimer);
$('.blog-posts, .blog-posts-prev, .blog-posts-next').hover(function(ev) {
// clearInterval(timer);
}, function(ev) {
// timer = setInterval( moveForward, playTimer);
});
CSS Code:
<style>
.blog-posts {
width: 100%;
background: #eee;
font-size: 0;
position: relative;
}
.blog-posts-prev,
.blog-posts-next {
display: inline-block;
background: #eee;
color: #000;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-prev:hover,
.blog-posts-next:hover {
background: #ccc;
}
.blog-posts-prev-disabled,
.blog-posts-next-disabled {
display: inline-block;
background: #eee;
color: #ccc;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-stage {
position: relative;
white-space: normal;
width: 100%;
height: 100%;
float: none;
}
.well {
background: #ccc;
box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
width: 100%;
font-size: 12px;
text-align: left;
display: table-cell;
height: 100%;
width: 100%;
}
.well .row .col-sm-12.col-md-12 h2 {
float: left;
margin-top: 0px;
}
</style>

You could just use a lightbox library and save yourself the effort, but if you really want to do this why not try flex?
.blog-posts-stage {
display: flex;
flex-direction: row;
overflow: hidden;
}
.well-large {
flex-shrink: 0;
}

Javascript Dropdown Staying open

In my site I made a simple dropdown menu, but my problem is that it won't close if mouseleave happens on the <span> that triggers the dropdown.
Here is my code:
//Find the dropdown span
var header = document.getElementById('drop');
//Find the ul with the links
var ul = document.getElementById('nav-dropdown');
//Get the width and apply it to the dropdown items
var width = drop.getBoundingClientRect().width;
ul.style.minWidth = width + "px";
//Round the corners on the last link
var links = document.getElementsByClassName('dropdown-link');
links[links.length - 1].style.borderRadius = "0 0 7px 7px";
var open = 0;
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
//What I've tried to fix it:
/*
header.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
});
*/
/*Stylesheet for this stuff*/
* {
font-family: arial;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
text-decoration: none;
list-style: none;
}
a:visited {
color: white;
}
a,
#drop {
color: white;
}
a:hover {
color: coral;
}
.header-links-container {
position: relative;
top: 0;
background: rgb(63, 83, 95);
width: 100%;
height: 80px;
opacity: .8;
z-index: 999;
}
.title {
font-weight: bold;
font-size: 30px;
padding: 20px 50px;
position: relative;
float: left;
color: white;
}
.header-links {
position: relative;
float: right;
vertical-align: middle;
}
.nav-links {
margin: auto;
padding-top: 20px;
padding-right: 30px;
}
.nav-link {
position: relative;
float: right;
padding: 0 20px;
font-size: 23px;
padding: 5px 10px;
margin: 5px;
background: #4471ba;
border-radius: 7px;
}
.nav-link:hover {
background: #4480ba;
color: #d1d1d1;
}
#nav-dropdown {
display: none;
margin-top: 42px;
margin-left: 5px;
position: absolute;
}
.dropdown-link {
color: black;
background-color: #ccc;
padding: 5px 10px;
}
.dropdown-link:hover {
color: #000;
background-color: #a7a7a7;
}
.dropdown-link:active {
color: white;
background-color: #3b8cfa;
}
<div class="header-links-container">
<h2 class="title">Title</h2>
<div class="header-links">
<ul class="nav-links">
<li class="nav-link">Photo Gallery</li>
<li class="nav-link">SLAP</li>
<li id="drop" class="nav-link"><span>Dropdown</span></li>
<ul id="nav-dropdown" class="jim">
<a href="#">
<li class="dropdown-link">Link 1</li>
</a>
<a href="#">
<li class="dropdown-link">Link 2</li>
</a>
<a href="#">
<li class="dropdown-link">Longer Link</li>
</a>
<a href="#">
<li class="dropdown-link">Vacuum</li>
</a>
</ul>
</ul>
</div>
</div>
<p>
Relavent JS lines start at Line 16
</p>
And here is the fiddle that might make more sense: https://jsfiddle.net/dLw1hu5n/6/
I've tried closing the dropdown like in the last code block, but then it won't stay open when you go to hover over the links. I've also tried making the menu close when the mouse hovers over the navbar div, but no luck there either.
Can I fix this or do I need to start from square 1?

I would prefere to solve this via css. However, in your case you can try the following:
function displayDropdown() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
}
function hideDropdown() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
}
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
displayDropdown();
});
ul.addEventListener("mouseover", function() {
displayDropdown();
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
hideDropdown();
});
header.addEventListener("mouseleave", function() {
hideDropdown();
});

Your JS is fine but your event listener for mouseleave needs to be on the enclosing div. This way your element stays open until you hover outside of the header
t.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
What is t?
var t = document.getElementById(t);
What element has id T?
Try this fiddle to find out https://jsfiddle.net/dLw1hu5n/12/

ResponsiveSlides Navigation Buttons

I am using ResponsiveSlides for a photo slideshow on a page, and I cannot make the navigation button show up as they do on the website. Currently, the Previous and Next links appear below the slider as simple hypertext links. Here is how this is showing on the website:
website-slideshow. See the Previous/Next buttons below image. Here is how I would like for this to look: navigation-buttons-centered. I've tried so many different things and nothing is working, so any help would be appreciated.
Here is the code that is being used:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="/wp/wp-content/themes/Avada-Child-Theme/responsiveslides.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 500,
namespace: "rslides",
});
});
</script>
<link href="/wp/wp-content/themes/Avada-Child-Theme/css/responsiveslides.css" rel="stylesheet" type="text/css" />
<div class="rslides_container">
<ul class="rslides rslides1 centered-btns centered-btns1">
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
</ul>
</div>
JS:
(function($, window, i) {
$.fn.responsiveSlides = function(options) {
// Default settings
var settings = $.extend({
"auto": true, // Boolean: Animate automatically, true or false
"speed": 500, // Integer: Speed of the transition, in milliseconds
"timeout": 4000, // Integer: Time between slide transitions, in milliseconds
"pager": true, // Boolean: Show pager, true or false
"nav": true, // Boolean: Show navigation, true or false
"random": false, // Boolean: Randomize the order of the slides, true or false
"pause": false, // Boolean: Pause on hover, true or false
"pauseControls": true, // Boolean: Pause when hovering controls, true or false
"prevText": "Previous", // String: Text for the "previous" button
"nextText": "Next", // String: Text for the "next" button
"maxwidth": "", // Integer: Max-width of the slideshow, in pixels
"navContainer": "", // Selector: Where auto generated controls should be appended to, default is after the <ul>
"manualControls": "", // Selector: Declare custom pager navigation
"namespace": "rslides", // String: change the default namespace used
"before": $.noop, // Function: Before callback
"after": $.noop // Function: After callback
}, options);
return this.each(function() {
// Index for namespacing
i++;
var $this = $(this),
// Local variables
vendor,
selectTab,
startCycle,
restartCycle,
rotate,
$tabs,
// Helpers
index = 0,
$slide = $this.children(),
length = $slide.length,
fadeTime = parseFloat(settings.speed),
waitTime = parseFloat(settings.timeout),
maxw = parseFloat(settings.maxwidth),
// Namespacing
namespace = settings.namespace,
namespaceIdx = namespace + i,
// Classes
navClass = namespace + "_nav " + namespaceIdx + "_nav",
activeClass = namespace + "_here",
visibleClass = namespaceIdx + "_on",
slideClassPrefix = namespaceIdx + "_s",
// Pager
$pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
// Styles for visible and hidden slides
visible = {
"float": "left",
"position": "relative",
"opacity": 1,
"zIndex": 2
},
hidden = {
"float": "none",
"position": "absolute",
"opacity": 0,
"zIndex": 1
},
// Detect transition support
supportsTransitions = (function() {
var docBody = document.body || document.documentElement;
var styles = docBody.style;
var prop = "transition";
if (typeof styles[prop] === "string") {
return true;
}
// Tests for vendor specific prop
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
prop = prop.charAt(0).toUpperCase() + prop.substr(1);
var i;
for (i = 0; i < vendor.length; i++) {
if (typeof styles[vendor[i] + prop] === "string") {
return true;
}
}
return false;
})(),
// Fading animation
slideTo = function(idx) {
settings.before(idx);
// If CSS3 transitions are supported
if (supportsTransitions) {
$slide
.removeClass(visibleClass)
.css(hidden)
.eq(idx)
.addClass(visibleClass)
.css(visible);
index = idx;
setTimeout(function() {
settings.after(idx);
}, fadeTime);
// If not, use jQuery fallback
} else {
$slide
.stop()
.fadeOut(fadeTime, function() {
$(this)
.removeClass(visibleClass)
.css(hidden)
.css("opacity", 1);
})
.eq(idx)
.fadeIn(fadeTime, function() {
$(this)
.addClass(visibleClass)
.css(visible);
settings.after(idx);
index = idx;
});
}
};
// Random order
if (settings.random) {
$slide.sort(function() {
return (Math.round(Math.random()) - 0.5);
});
$this
.empty()
.append($slide);
}
// Add ID's to each slide
$slide.each(function(i) {
this.id = slideClassPrefix + i;
});
// Add max-width and classes
$this.addClass(namespace + " " + namespaceIdx);
if (options && options.maxwidth) {
$this.css("max-width", maxw);
}
// Hide all slides, then show first one
$slide
.hide()
.css(hidden)
.eq(0)
.addClass(visibleClass)
.css(visible)
.show();
// CSS transitions
if (supportsTransitions) {
$slide
.show()
.css({
// -ms prefix isn't needed as IE10 uses prefix free version
"-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
"-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
"-o-transition": "opacity " + fadeTime + "ms ease-in-out",
"transition": "opacity " + fadeTime + "ms ease-in-out"
});
}
// Only run if there's more than one slide
if ($slide.length > 1) {
// Make sure the timeout is at least 100ms longer than the fade
if (waitTime < fadeTime + 100) {
return;
}
// Pager
if (settings.pager && !settings.manualControls) {
var tabMarkup = [];
$slide.each(function(i) {
var n = i + 1;
tabMarkup +=
"<li>" +
"<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
"</li>";
});
$pager.append(tabMarkup);
// Inject pager
if (options.navContainer) {
$(settings.navContainer).append($pager);
} else {
$this.after($pager);
}
}
// Manual pager controls
if (settings.manualControls) {
$pager = $(settings.manualControls);
$pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
}
// Add pager slide class prefixes
if (settings.pager || settings.manualControls) {
$pager.find('li').each(function(i) {
$(this).addClass(slideClassPrefix + (i + 1));
});
}
// If we have a pager, we need to set up the selectTab function
if (settings.pager || settings.manualControls) {
$tabs = $pager.find('a');
// Select pager item
selectTab = function(idx) {
$tabs
.closest("li")
.removeClass(activeClass)
.eq(idx)
.addClass(activeClass);
};
}
// Auto cycle
if (settings.auto) {
startCycle = function() {
rotate = setInterval(function() {
// Clear the event queue
$slide.stop(true, true);
var idx = index + 1 < length ? index + 1 : 0;
// Remove active state and set new if pager is set
if (settings.pager || settings.manualControls) {
selectTab(idx);
}
slideTo(idx);
}, waitTime);
};
// Init cycle
startCycle();
}
// Restarting cycle
restartCycle = function() {
if (settings.auto) {
// Stop
clearInterval(rotate);
// Restart
startCycle();
}
};
// Pause on hover
if (settings.pause) {
$this.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
// Pager click event handler
if (settings.pager || settings.manualControls) {
$tabs.bind("click", function(e) {
e.preventDefault();
if (!settings.pauseControls) {
restartCycle();
}
// Get index of clicked tab
var idx = $tabs.index(this);
// Break if element is already active or currently animated
if (index === idx || $("." + visibleClass).queue('fx').length) {
return;
}
// Remove active state from old tab and set new one
selectTab(idx);
// Do the animation
slideTo(idx);
})
.eq(0)
.closest("li")
.addClass(activeClass);
// Pause when hovering pager
if (settings.pauseControls) {
$tabs.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
}
// Navigation
if (settings.nav) {
var navMarkup =
"<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
"<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
// Inject navigation
if (options.navContainer) {
$(settings.navContainer).append(navMarkup);
} else {
$this.after(navMarkup);
}
var $trigger = $("." + namespaceIdx + "_nav"),
$prev = $trigger.filter(".prev");
// Click event handler
$trigger.bind("click", function(e) {
e.preventDefault();
var $visibleClass = $("." + visibleClass);
// Prevent clicking if currently animated
if ($visibleClass.queue('fx').length) {
return;
}
// Adds active class during slide animation
// $(this)
// .addClass(namespace + "_active")
// .delay(fadeTime)
// .queue(function (next) {
// $(this).removeClass(namespace + "_active");
// next();
// });
// Determine where to slide
var idx = $slide.index($visibleClass),
prevIdx = idx - 1,
nextIdx = idx + 1 < length ? index + 1 : 0;
// Go to slide
slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
if (settings.pager || settings.manualControls) {
selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
}
if (!settings.pauseControls) {
restartCycle();
}
});
// Pause when hovering navigation
if (settings.pauseControls) {
$trigger.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
}
}
// Max-width fallback
if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
var widthSupport = function() {
$this.css("width", "100%");
if ($this.width() > maxw) {
$this.css("width", maxw);
}
};
// Init fallback
widthSupport();
$(window).bind("resize", function() {
widthSupport();
});
}
});
};
})(jQuery, this, 0);
CSS:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides1_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
z-index: 99;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.rslides1_nav:active {
opacity: 1.0;
}
.rslides1_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.rslides1_nav:focus {
outline: none;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
a {
color: #fff;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 10;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 0;
left: 0;
display: block;
background: #fff;
/* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0, 0, 0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0, 0, 0, .8);
}

I believe your problem is in this line under .rslides1_nav:
background: transparent url("themes.gif") no-repeat left top;
Try:
background: transparent url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left top;
Or copy that image to your local and use whatever link would be appropriate. I've been messing around with a fiddle, but it doesn't look quire right yet. Hopefully, this can at least get you started

You need to add the responsiveslides.css and theme.css. After that you can download the image with the arrows from here. Or you can just change the background images path of .centered-btns_nav with the path from this link.
You can get the responsiveslides.css file from here.
You can get the theme.css file from here.
You also have to change the namespace property value from the plugin initialization to be:
namespace: "centered-btns"
See the working snippet below:
$(function() {
$(".rslides").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 500,
namespace: "centered-btns"
});
});
http://responsiveslides.com/themes/themes.gif
/*! http://responsiveslides.com v1.54 by #viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
* {
margin: 0;
padding: 0;
}
html {
background: #fff;
}
body {
color: #333;
font: 14px/24px sans-serif;
margin: 0 auto;
max-width: 700px;
_width: 700px;
padding: 0 30px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
#wrapper {
float: left;
width: 100%;
margin-bottom: 50px;
}
h1 {
font: 600 28px/36px sans-serif;
margin: 50px 0;
}
h3 {
font: 600 18px/24px sans-serif;
color: #999;
margin: 0 0 20px;
}
a {
color: #222;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("http://responsiveslides.com/themes/themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 0;
left: 0;
display: block;
background: #fff; /* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("http://responsiveslides.com/themes/themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0,0,0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0,0,0, .8);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
<div class="rslides_container">
<ul class="rslides rslides1 centered-btns centered-btns1">
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
</ul>
</div>

Dynamic div dimensions: lightbox gallery

I'm creating a website where I have a series of images with different dimensions that are being placed in a lightbox gallery.
Sorry for the long read in advance.... the code is as follows:
http://jsfiddle.net/djtiii/Sas94/1/
HTML
<div id="wrapper">
<h1>simple lightbox w/ slideshow (images only)</h1>
<p>those image links i was talking about:</p>
<ul id="paintings">
<li> <a title="The Hills" href="http://www.artmajeur.com/files/oksana-veber/images/artworks/100x100/6683281_the-hils-100-100-cm-acrilic-on-canvas-1998-thumb.jpg" class="lightboxTrigger">
on
</a>
</li>
<li> <a title="Pixelisa" href="http://piq.codeus.net/static/media/userpics/piq_2313_400x400.png" class="lightboxTrigger">
two
</a>
</li>
<li> <a title="Vase" href="http://andyinoman.files.wordpress.com/2013/01/story-no-5-the-loosing-battle.jpg?w=500" class="lightboxTrigger">
three
</a>
</li>
</ul>
</div>
CSS
/* page styles */
body {
margin: 0;
padding: 0;
background: #efefef;
}
#wrapper {
width: 600px;
margin: 0 auto;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
background: #fff;
border: 1px solid #ccc;
padding: 25px;
border-top: none;
box-shadow: 0 0 5px #ccc;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
text-align: left;
}
/* lightbox styles */
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#lightbox p {
text-align: right;
color: #fff;
margin-right: 20px;
font-size: 12px;
}
#lightbox img {
max-width: 940px;
}
/* slideshow styles */
#slideshow {
position: relative;
z-index: 100;
width: 600px;
height: 350px;
margin: 0 auto;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow ul > li {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
list-style: none;
}
.nav {
display: none;
}
.prev, .next {
position: absolute;
top: 50%;
background: rgba(100, 100, 100, .5);
padding: .25em .5em;
color: #fff;
text-decoration: none;
}
.next {
right: 10px;
}
.prev {
left: 10px;
}
JavaScript
jQuery(document).ready(function ($) {
var current, size;
$('.lightboxTrigger').click(function (e) {
e.preventDefault();
var slideNum = $('.lightboxTrigger').index(this);
if ($('#lightbox').length > 0) {
$('#lightbox').fadeIn(300);
$('#content').html('<img src="' + href + '" />');
} else {
var hgt = $(this).attr('height');
var wid = $(this).attr('width');
var lightbox =
'<div id="lightbox">' +
'<p>X</p>' +
'<div id="slideshow">' +
'<ul></ul>' +
'<div class="nav">' +
'<' +
'>' +
'</div>' +
'</div>' +
'</div>';
$('body').append(lightbox);
$('#paintings').find('.lightboxTrigger').each(function () {
var href = $(this).attr('href');
var title = $(this).attr('title');
$('#slideshow ul').append(
'<li>' +
'<img src="' + href + '">' +
'<h5>' + title + '</h5>' +
'</li>');
});
$('#lightbox').hide().fadeIn(300);
}
size = $('#slideshow ul > li').length;
$('#slideshow ul > li').hide();
$('#slideshow ul > li:eq(' + slideNum + ')').show();
current = slideNum;
});
$('body').on('click', '#lightbox', function () {
$('#lightbox').fadeOut(300);
});
$('body').on({
mouseenter: function () {
$('.nav').fadeIn(300);
},
mouseleave: function () {
$('.nav').fadeOut(300);
}
}, '#slideshow');
$('body').on('click', '.slide-nav', function (e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var dest;
if ($this.hasClass('prev')) {
dest = current - 1;
if (dest < 0) {
dest = size - 1;
}
} else {
dest = current + 1;
if (dest > size - 1) {
dest = 0;
}
}
$('#slideshow ul > li:eq(' + current + ')').fadeOut(750);
$('#slideshow ul > li:eq(' + dest + ')').fadeIn(750);
current = dest;
});
});
The issue with this code is that the div id=slideshow's dimensions are not dynamic to the dimensions of the images. I'm fairly certain that I need some sort of Javascript that stores the dimensions of each image piece as it loads, then adjusts the dimensions of the div to those dimensions. I'm not experienced enough in Javascript to achieve this, however.
Thank you to all who take a crack at this!

To adjust the dimension of lightbox you can use additional function to find the height, width of the image being displayed and can apply these to the lightbox window.
I have created a fiddle for this, please see here:
function to calculate and apply dimensions:
function adjustDimensions(current){
var H = $('img','#slideshow ul > li:eq(' + current + ')').height();
var W = $('img','#slideshow ul > li:eq(' + current + ')').width();
if($('h5','#slideshow ul > li:eq(' + current + ')').length>0){
H = H+20;
}
$('#slideshow').animate({width:W+'px',height:H+'PX'},1000);
}
http://jsfiddle.net/lokeshpahal/yX4NP/2/

How to know mouseLeave on two element

Im trying to create a drop down menu when hovering, something like the the following.
Under the header of a website.
Im doing so with jQuery, Im using the events mouseEnter and mouse leave.
with the following code.
var LastThis = null;
$(".divOpener, #floatingNewNav")
.mouseleave(function(event)
{
console.log(event);
if($(event.toElement).attr("id") != "floatingNewNav") // do not close since we leaved the element but we got on the floating nav.
{
$("#floatingNewNav").hide(0);
if(LastThis.attr("id") == "ShopByBrand")
{
LastThis.removeClass("NavSelected");
$("#"+LastThis.attr("id")+"_Nav").css("display","none");
}
if(LastThis.attr("id") == "ShopByCategory")
{
LastThis.removeClass("NavSelected");
$("#"+LastThis.attr("id")+"_Nav").css("display","none");
}
if(LastThis.attr("id") == "ShopByPrice")
{
LastThis.removeClass("NavSelected");
$("#"+LastThis.attr("id")+"_Nav").css("display","none");
}
}
});
$(".divOpener")
.mouseenter(function()
{
LastThis = $(this);
if($(this).attr("id") == "ShopByBrand")
{
$("#"+$(this).attr("id")+"_Nav").css("display","block");
$(this).addClass('NavSelected');
}
if($(this).attr("id") == "ShopByCategory")
{
$("#"+$(this).attr("id")+"_Nav").css("display","block");
$(this).addClass('NavSelected');
}
if($(this).attr("id") == "ShopByPrice")
{
$("#"+$(this).attr("id")+"_Nav").css("display","block");
$(this).addClass('NavSelected');
}
var DivPosition = $(this).parent().position();
var Position = $(this).position();
var curTop = DivPosition.top;
var curLeft = Position.left;
var curWidth = $(this).width();
var curHeight = $(this).parent().height();
var DivWidth = $(this).parent().width();
var WidthOfNav = 400;
var OffSetLeft = (curLeft+(curWidth/2)-(WidthOfNav/2)+WidthOfNav)-(DivPosition.left+DivWidth);
var OffSetLeft = (OffSetLeft>0?OffSetLeft:0);
$("#floatingNewNav").css("position","absolute");
$("#floatingNewNav").css("height","100px");
$("#floatingNewNav").css("top",(curTop+curHeight)+"px");
$("#floatingNewNav").css("left",((curLeft+(curWidth/2))-(WidthOfNav/2))-OffSetLeft+"px");
$("#floatingNewNav").css("width",WidthOfNav+"px");
$("#floatingNewNav").show(0);
});
Html
<div id="newNavDiv">
<span><form style="display: inline-block;" action="search.php" method="get"><input id="SearchBar" name="q" type="text"></form></span>
<div class="SearchButtonDiv"><input id="SearchButton" type="button" value="SEARCH"></div>
<span class="NewNavSeparator"></span>
<div id="Special" style="color: red;">
SPECIALS
</div>
<span class="NewNavSeparator"></span>
<div id="ShopByBrand" class="divOpener">
SHOP BY<br/>BRAND
</div>
<span class="NewNavSeparator"></span>
<div id="ShopByCategory" class="divOpener">
SHOP BY<br/>CATEGORY
</div>
<span class="NewNavSeparator"></span>
<div id="ShopByPrice" class="divOpener">
SHOP BY<br/>PRICE
</div>
</div>
<div id="floatingNewNav">
<div id="ShopByBrand_Nav"></div>
<div id="ShopByCategory_Nav"></div>
<div id="ShopByPrice_Nav"></div>
</div>
css
#WebsiteHeader
{
height: 170px;
background: url("Photo/header.png") no-repeat top;
background-size:100%;
}
#NewNavBar
{
height: 42px;
background: url("Photo/newNavigator.png") no-repeat top;
background-size:100%;
padding: 4px;
text-align: center;
}
#newNavDiv
{
display: inline-block;
width: 960px;
text-align: right;
}
#SearchBar
{
font-size: 16px;
color: grey;
width: 245px;
height: 24px;
padding-left: 5px;
background-color: #ffffff;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border: 1px solid #c7c7c7;
}
.SearchButtonDiv
{
display: inline-block;
}
#SearchButton
{
color:#ffffff;
font-size: 13px;
height: 30px;
background-color: red;
padding: 8px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border: 0px solid;
}
#Special
{
vertical-align: middle;
width: 130px;
display: inline-block;
text-align: center;
color: #ffffff;
font-family: "Arial";/* for firefox*/
font-family: "Arial Black";/* if browser have the font it will overide arial*/
font-weight:900;/* for firefox*/
font-size: 13px;
font-style: italic;
}
.divOpener
{
vertical-align: middle;
width: 140px;
display: inline-block;
text-align: center;
color: #ffffff;
font-family: "Arial";/* for firefox*/
font-family: "Arial Black";/* if browser have the font it will overide arial*/
font-weight:900;/* for firefox*/
font-size: 13px;
font-style: italic;
}
.NewNavSeparator
{
border-right: 1px rgba(245, 245, 245, 0.70) solid;
margin-right: 5px;
margin-left: 6px;
height: 30px;
}
#MainPagesLinks
{
padding-bottom: 0;
}
#MainPagesLinks a
{
text-align: center;
color:#ffffff;
text-decoration: none;
font-size: 13px;
width: 75px;
display: inline-block;
background-color: red;
padding-left: 4px;
padding-right: 4px;
border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-top: 1px solid rgba(255,240,240,0.4);
border-right: 1px solid rgba(255,240,240,0.4);
border-left: 1px solid rgba(255,240,240,0.4);
box-shadow:
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
/*border: 1px solid #000000;*/
}
#floatingNewNav
{
background-color: #aaaac6;
margin-top: 0px;
border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
-webkit-border-radius: 0px 0px 6px 6px;
}
.NavSelected
{
color:black;
background-color: #aaaac6;
border-bottom: 0px #aaaac6 solid;
border-radius: 6px 6px 0px 0px;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
}
.divOpener class is the <a> Shop by category</a> and others links
#floatingNewNav
Here is the live example.
https://www.newyorkpowertools.com/Template/headerTemplate.html
You will see in that example that it works in chrome,Ie,safari But on firefox it doesn't work. beacause for some reason firefox dont return the object toElement in the event object..
My question
Is there a way I could create an event mouseEnter and mouseLeave with two element and fake that it is ONLY one element so I dont need to
if($(event.toElement).attr("id") != "floatingNewNav")
Thanks for the help, And Sorry for the confusing question,.

To create a drop-down menu that appears on hover, like the one in your example, I would use CSS. See example below:
HTML
<ul id="menu">
<li>Menu 1</li>
<li>Menu 2
<ul class="sub-menu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
</ul>
</li>
<li>Menu 3</li>
</ul>
CSS
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
}

You can simply do this http://jsfiddle.net/aheLv/1/
$(".divOpener, #floatingNewNav").mouseenter(function () {
if (!$(this).is('#floatingNewNav')) {
LastThis = $(this);
}
$("#" + LastThis.attr("id") + "_Nav").css("display", "block");
LastThis.addClass('NavSelected');
var DivPosition = LastThis.parent().position();
var Position = LastThis.position();
var curTop = DivPosition.top;
var curLeft = Position.left;
var curWidth = LastThis.width();
var curHeight = LastThis.parent().height();
var DivWidth = LastThis.parent().width();
var WidthOfNav = 400;
var OffSetLeft = (curLeft + (curWidth / 2) - (WidthOfNav / 2) + WidthOfNav) - (DivPosition.left + DivWidth);
var OffSetLeft = (OffSetLeft > 0 ? OffSetLeft : 0);
$("#floatingNewNav").css("position", "absolute");
$("#floatingNewNav").css("height", "100px");
$("#floatingNewNav").css("top", (curTop + curHeight) + "px");
$("#floatingNewNav").css("left", ((curLeft + (curWidth / 2)) - (WidthOfNav / 2)) - OffSetLeft + "px");
$("#floatingNewNav").css("width", WidthOfNav + "px");
$("#floatingNewNav").show(0);
});
There are lot of things you can do to refactor this code. Actually there are some extra stuff in the fiddle that I am taking them out now, I will update soon
UPDATE:
here is the final code
var LastThis = null;
var openers = $(".divOpener, #floatingNewNav");
openers.mouseleave(function (event) {
$("#floatingNewNav").hide();
LastThis.removeClass("NavSelected");
$("#" + LastThis.attr("id") + "_Nav").hide();
});
openers.mouseenter(function () {
if (!$(this).is('#floatingNewNav')) {
LastThis = $(this);
}
$("#" + LastThis.attr("id") + "_Nav").show();
LastThis.addClass('NavSelected');
var DivPosition = LastThis.parent().position();
var Position = LastThis.position();
var curTop = DivPosition.top;
var curLeft = Position.left;
var curWidth = LastThis.width();
var curHeight = LastThis.parent().height();
var DivWidth = LastThis.parent().width();
var WidthOfNav = 400;
var OffSetLeft = (curLeft + (curWidth / 2) - (WidthOfNav / 2) + WidthOfNav) - (DivPosition.left + DivWidth);
var OffSetLeft = (OffSetLeft > 0 ? OffSetLeft : 0);
$("#floatingNewNav").css({
'position': 'absolute',
'height': '100px',
'top': (curTop + curHeight) + 'px',
'left': ((curLeft + (curWidth / 2)) - (WidthOfNav / 2)) - OffSetLeft + 'px',
'width': WidthOfNav + 'px'
}).show();
});
http://jsfiddle.net/aheLv/2/
As a suggestion, menus like these can be done in css only if you structure your html the right way. See Kevin's answer for the structure

Just to throw out a different concept, your picture screams "jQuery tabs" :-), so I used simple tabs, and created a jQuery trigger event for each one.
FIDDLE
JS
$('.charts').tabs();
$('#firstone').mouseover(function(){
$(this).trigger('click');
});
$('#secondone').mouseover(function(){
$(this).trigger('click');
});
$('#thirdone').mouseover(function(){
$(this).trigger('click');
});
Not elegant, but I'll play with it some more and see if it can be 'elegantized'.

Seems like you're overcomplicating things..
How about just tracking the direction of the mouse, and if its headed downward, don't hide the menuitems below..
Check this fiddle..
http://jsfiddle.net/ReVLN/2/
Checked its working in Mozilla and chrome/etc..
var mY = 0;
$('div.menuItems').mousemove(function(e){
// moving upward
if (e.pageY < mY) {
flag = "upward";
} else {
flag = "downward";
}
// set new mY after doing test above
mY = e.pageY;
});
Thanks,
jf_it