Develop Reference

How to set focus with javaScript?

My problem is that after I opend a modal image in the carousel, the carousel is not in focus. So I can not use the left & right keys to change images right away. Is there a solution for this? With $('.carousel').flickity().focus(); I can only set the focus to the second (last) carousel. Thanks! Kind Regards, August
//carousel and image captions
$('.carousel-container').each( function( i, container ) {
var $container = $( container );
var $carousel = $container.find('.carousel').flickity({
// cellSelector: 'img',
// fullscreen: true,
wrapAround: true,
imagesLoaded: true,
percentPosition: false
});
var $captionTitle = $container.find('.captionTitle');
var $caption = $container.find('.caption');
// Flickity instance
var flkty = $carousel.data('flickity');
$carousel.on( 'select.flickity', function() {
// set image caption using img's alt
$captionTitle.text($(flkty.selectedElement).find('img').attr('title'))
$caption.text($(flkty.selectedElement).find('img').attr('alt'))
});
});
//modal
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByTagName('img');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
// var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
//??
$('.carousel').flickity().focus();
}
}
//close
var span = document.getElementsByClassName("modal")[0];
span.onclick = function() {
modal.style.display = "none";
modal.focus();
}
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
text-decoration: none;
}
.carousel-headline {
text-align: center;
width: 100%;
margin-bottom:10px;
}
hr {
margin-top: 50px;
width: 0px;
}
main {
max-width: 1080px;
width:100%;
margin: auto;
}
.carousel-cell {
width: 100%;
padding-left: 10px;
padding-right: 10px;
/* center images in cells with flexbox */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
.carousel-cell img {
max-width: 100%;
max-height: 500px;
}
.flickity-button {
color: #bbb !important;
}
.flickity-button:hover {
color: #333 !important;
}
.zoom-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.caption, .captionTitle {
padding-left: 10px;
padding-right: 10px;
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
white-space:pre-wrap;
}
.captionTitle {
margin-top: 30px;
font-weight: bold;
}
.flickity-page-dots {
scale: 0.75;
}
/* Modal */
#modalImg {
cursor: pointer;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
/* padding-top: 100px; */
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: white;
/* Fallback color */
background-color: white;
/* Black w/ opacity */
cursor: pointer;
}
.modal-content {
max-height: 1200px;
width: auto;
margin: 0 auto;
display: block;
}
.close {
text-transform: uppercase;
color: #000;
background-color: #fff;
border: 0;
padding: 4px 6px;
line-height: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.close:hover,
.close:focus {
color: #bbb;
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<div class="carousel-container">
<p class='carousel-headline'>Carousel 1</p>
<div class="carousel">
<div class="carousel-cell">
<img id="modalImg" src="https://picsum.photos/720/540/?image=517" title="Titel 1" alt="Text 1" />
</div>
<div class="carousel-cell">
<img id="modalImg" src="https://picsum.photos/540/720/?image=696" title="Titel 1.1" alt="Text 1.1" />
</div>
</div>
<p class="captionTitle"></p>
<p class="caption"></p>
</div>
<hr>
<div class="carousel-container">
<p class='carousel-headline'>Carousel 2</p>
<div class="carousel">
<div class="carousel-cell">
<img id="modalImg" src="https://picsum.photos/720/540/?image=517" title="Titel 2" alt="Text 2" />
</div>
<div class="carousel-cell">
<img id="modalImg" src="https://picsum.photos/540/720/?image=696" title="Titel 2.1" alt="Text 2.1" />
</div>
</div>
<p class="captionTitle"></p>
<p class="caption"></p>
</div>
<div id="myModal" class="modal">
<span class="close">close</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>

Prior to anything, here are the "undirectly relevant" changes:
You used multiple times the id modalImg... Was used to set cursor:pointer on the carousel images.
An id must be unique. So I renamed it sliderImg as a class.
I changed the #img01 for a more meaningful name: #modalImage.
Then saddly, this plugin documentation would need an update... Many of the events I tried do not provide all the arguments stated.
And the accessible properties of this, in the scope of the events handlers, are not well documented.
I came up with those two useful ones in this case:
this.element: is the slider element
this.selectedElement: is the active or "selected" slide
So I used the on object to set the event callbacks you need.
Only the modal "close" span needs a separate handler.
So now, on staticClick, the modal opens and surprisingly, the focus on the slider is not lost. You can use the keyboard arrows. On change, you just need to get the "selected image" src to update the modal image.
Now if there is a click on the modal image... The focus on the slider is lost... But have a look at the $("#myModal").on("click", ...) to keep that focus. ;)
See comments below for more specific details of the solution.
$(".carousel-container").each(function (i, container) {
$(container)
.find(".carousel")
.flickity({
// cellSelector: 'img',
// fullscreen: true,
wrapAround: true,
imagesLoaded: true,
percentPosition: false,
// Event handlers
on: {
select: function (index) {
let $container = $(this.element).parent();
let $captionTitle = $container.find(".captionTitle");
let $caption = $container.find(".caption");
let $currentImage = $(this.selectedElement).find("img");
// Set the captions
$captionTitle.text($currentImage.attr("title"));
$caption.text($currentImage.attr("alt"));
},
change: function (index) {
if ($("#myModal").is(":visible")) {
let $selectedEl = $(this.selectedElement).find("img");
$("#modalImage").attr("src", $selectedEl.attr("src"));
}
},
staticClick: function (event, eventAgain, selectedCell) {
// On click on a slider image, open the modal with the right image
// Also save the slider element to a data attribute of the modal
// so that on modal close, the slider will be focussed
var $activeImage = $(selectedCell).find("img");
$("#modalImage").attr("src", $activeImage.attr("src"));
$("#myModal").data("sliderEl", this.element).show();
}
}
});
// Modal close
$("span.close").on("click", function () {
// Close the modal
$("#myModal").hide();
// Focus the slider from which the modal open was triggered
$($("#myModal").data("sliderEl")).focus();
});
// Keep the focus on the slider
// if a click is made on the modal image
$("#myModal").on("click", function(e){
if($(e.target).is(".close")){return}
$($(this).data("sliderEl")).focus();
})
});
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
text-decoration: none;
}
.carousel-headline {
text-align: center;
width: 100%;
margin-bottom: 10px;
}
hr {
margin-top: 50px;
width: 0px;
}
main {
max-width: 1080px;
width: 100%;
margin: auto;
}
.carousel-cell {
width: 100%;
padding-left: 10px;
padding-right: 10px;
/* center images in cells with flexbox */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
.carousel-cell img {
max-width: 100%;
max-height: 500px;
}
.flickity-button {
color: #bbb !important;
}
.flickity-button:hover {
color: #333 !important;
}
.zoom-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.caption,
.captionTitle {
padding-left: 10px;
padding-right: 10px;
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
white-space: pre-wrap;
}
.captionTitle {
margin-top: 30px;
font-weight: bold;
}
.flickity-page-dots {
scale: 0.75;
}
/* Modal */
.sliderImg { /* CHANGED */
cursor: pointer;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
/* padding-top: 100px; */
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: white;
/* Fallback color */
background-color: white;
/* Black w/ opacity */
cursor: pointer;
}
.modal-content {
max-height: 1200px;
width: auto;
margin: 0 auto;
display: block;
}
.close {
text-transform: uppercase;
color: #000;
background-color: #fff;
border: 0;
padding: 4px 6px;
line-height: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.close:hover,
.close:focus {
color: #bbb;
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<div class="carousel-container">
<p class='carousel-headline'>Carousel 1</p>
<div class="carousel">
<div class="carousel-cell">
<img class="sliderImg" src="https://picsum.photos/720/540/?image=517" title="Titel 1" alt="Text 1" />
</div>
<div class="carousel-cell">
<img class="sliderImg" src="https://picsum.photos/540/720/?image=696" title="Titel 1.1" alt="Text 1.1" />
</div>
</div>
<p class="captionTitle"></p>
<p class="caption"></p>
</div>
<hr>
<div class="carousel-container">
<p class='carousel-headline'>Carousel 2</p>
<div class="carousel">
<div class="carousel-cell">
<img class="sliderImg" src="https://picsum.photos/720/540/?image=517" title="Titel 2" alt="Text 2" />
</div>
<div class="carousel-cell">
<img class="sliderImg" src="https://picsum.photos/540/720/?image=696" title="Titel 2.1" alt="Text 2.1" />
</div>
</div>
<p class="captionTitle"></p>
<p class="caption"></p>
</div>
<div id="myModal" class="modal">
<span class="close">close</span>
<img class="modal-content" id="modalImage">
<div id="caption"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
CodePen

Why is my image taking up more height in the background space than the image itself?

I have inserted an image into a website and now want to write a paragraph in a new div below it. I noticed that there was extra white space and colored each background of the elements pink & red to understand which was causing a problem. The pink is attributed to div of id="parent", and the red is only attributed to the id="hero_image" contained in the parent div. If it's in the parent, why is the red extending beyond the pink? I'm still trying to grasp position in CSS and what the computer "sees".
Here is an image of what I am seeing.
Here is my html & CSS (the nav styling is missing from CSS bc I checked and removed it to make sure it wasn't the issue)
*{
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'Noto Sans HK', sans-serif;
}
#parent {
position: relative;
width: 100%;
background-color: violet;
height: 70vw;
}
.hero-text {
position: absolute;
text-align: center;
right: 10vw;
top: 28vw;
z-index: 9;
font-size: 3.5vw;
float: right;
color: white;
}
#logo_png {
max-width: 25vw;
position: absolute;
z-index: 100;
}
#hero_img {
max-width: 85vw;
float: right;
top: 0;
z-index: 100;
background-color: tomato;
}
<div id="parent">
<h1>
<a href='THIS WILL BE LINK TO HOME PAGE'>
<img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists"/>
</a>
</h1>
<h1>
<img id="hero_img" src="Images/circle_hands_lbsphoto.png" alt="Little Big Scientists"/>
</h1>
<div class="hero-text">
<p>We’re on a mission to teach,
<br>guide, and empower the next
<br> generation of scientists
</p>
</div>
<!-- Div for Nav Bar-->
<div id="container">
<nav>
<ul>
<li>Mission</li>
<li>About</li>
<li>Events</li>
<li>Donate</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div id="test">
<h2 class="p1">Inspiring Education</h2>
</div>

Your style properties have wrong values !
vh is for height and vw is for width !
anyways , your #hero_img has height : 85vw which is greater than #parent 's height of 70vw.
this should fix the overflow !
#hero_img {
max-width: 25vh;
float: right;
top: 0;
z-index: 100;
background-color: tomato;
}
#parent {
position: relative;
width: 100%;
background-color: violet;
height: 35vh;
}
vh and vw are relative units used to style the element according to the size of the view port !
this article covers more about them and other units too !

Custom card component not responsive when text and icon aligned on the same line

I have made my own custom card component to learn CSS and HTML from scratch.
This is my code for HTML:
<div class="col-12">
<div>
<div class="search-event-block">
<div class="search-event-icon-left">
<i class="icon-horse search-event-icon-left-size"></i>
</div>
<div class="search-event-block-inner">
<div class="search-event-block-title">
<label class="search-event-block-padding ">Title</label>
</div>
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle<i class="icon-basket search-event-icon-right-size"></i></label>
</div>
<div class="search-event-block-links ">
<label class="search-event-block-padding">Go block | Delete block</label>
</div>
</div>
</div>
</div>
</div>
And this is my code for css styling for the card component:
.search-event-block {
height: 87px;
margin-top: 10px;
background-color: #fff;
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-title {
font-size: 1.1rem;
font-weight: bold;
margin-top: 11px;
}
.search-event-block-subtitle {
font-size: 0.8rem;
}
.search-event-block-links {
color: #2E85DE;
cursor: pointer;
padding-top: 6px;
font-size: 0.8rem;
}
.search-event-icon-left {
background-color: #F2F3F7;
height: 87px;
width: 74px;
padding-top: 18px;
padding-left: 13px;
}
.search-event-icon-right {
font-size: 18px;
display: inline-block;
padding-top: 30px;
padding-right: 5px;
overflow: hidden;
}
.search-event-icon-left-size {
font-size: 33px;
color: #214A96;
}
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
padding-left: 84px;
}
.search-event-block-padding {
padding-left: 20px;
margin-bottom: 0px;
}
The problem is in the class: search-event-block-subtitle. I want the subtitle and the icon on the same line. The icon must align to the end of the card. This is working fine, but when I resize the window the icon goes under the subtitle. When the screen goes smaller I want that the icon still remains on the same line as the subtitle.
I used bootstrap only for the cols and rows. I have tried to something like this:
<div class="row">
//col6
label
//col6
icon
</div>
This didn't work for me
How can I align the subtitle and icon on the same line when the screen goes smaller?
I also have problems with the height it doesn't auto scale. How can I fix this problem?
I have made a jsfiddle:
https://jsfiddle.net/ptyagcdq/1/

First step is to update your subtitle layer to this:
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle</label>
<i class="icon-basket search-event-icon-right-size"></i>
</div>
This will keep the subtitle text separate from the icon and will give you better control over it. Then in your css add this class:
.search-event-block-subtitle label {
width: calc(100% - 84px);
display: inline-block;
}
And update the "search-event-icon-right-size" class to:
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
width: 60px;
display: inline-block;
vertical-align: top;
}
The width calculation in your search-event-block-subtitle label is 100% - 84px because you should subtract the icon's width and the search-event-block-subtitle label padding. You should adjust these numbers to the actual size of the icon you are going to use.
I hope this helps.

Why isn't this style value changing as expected?

I created a system in a website I'm making that uses a single HTML file, with the user clicking buttons on either side of the page to scroll the content. Of course, I want to hide the buttons when the user reaches either end of the content (i.e. disable the left arrow when on the leftmost page). I'm using console.log() to print the left value of the <div> containing the content, which is what I .animate() with jQuery to create the effect. However, when I scroll once using the buttons, the value changes to 0px, which is already the default CSS value of the <div>. Scrolling again, the value changes to -99.9999px, which is also the value when I scroll back to the first page. This means that my button disappears as soon as I scroll to the third page, hampering further navigation. The inline style attribute always contains the expected value, however. What is the reason for these discrepancies?
Be forewarned, the Snippet is very messed up. You might need to copy and paste into some local files. Sorry about that. The #box is the <div> you should paying attention to. Thanks!
Snippet:
body {
background-image: url("images/pinecones.JPG");
min-height: 100%;
margin: 0px;
background-repeat: no-repeat;
max-width: 100%;
overflow-x: hidden;
}
::selection {
background-color: green;
}
::-moz-selection {
background-color: green;
}
footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
width: 100%;
padding: 5px;
padding-right: 0px;
padding-left: 0px;
font-family: monospace;
}
p {
font-family: 'Cambria', sans-serif;
margin: 10px;
margin-bottom: 20px;
text-indent: 20px;
}
div.page:hover {
font-size: 120%;
}
h1 {
font-family: sans-serif;
}
#box {
position: relative;
left: 0%;
}
.banner-text {
text-indent: 0px;
font-family: sans-serif;
font-size: 30px;
letter-spacing: 3px;
color: white;
margin: 0px;
margin-top: 20px;
margin-right: 35px;
display: inline-block;
float: right;
cursor: pointer;
}
.banner-text:hover {
font-size: 30px;
}
#media screen and (max-width: 1200px) {
.banner-text {
font-size: 25px;
}
}
#media screen and (max-width: 1100px) {
.banner-text {
font-size: 20px;
}
}
/* I'll need to add more progressions of this, sizing down the margin and eventually getting rid of this to go mobile. */
#banner {
background-color: #000000;
opacity: 0.8;
width: 100%;
height: 150px;
position: absolute;
top: 0px;
right: 0px;
display: block;
z-index: -1;
}
#banner-text {
display: block;
position: absolute;
left: 340px;
}
#navbar {
position: absolute;
left: 340px;
top: 50px;
color: white;
}
.nav-text {
text-indent: 0px;
float: left;
margin: 0px;
margin-right: 30px;
margin-top: 30px;
font-family: sans-serif;
letter-spacing: 2px;
font-style: italic;
cursor: pointer;
}
.nav-text:hover {
font-size: 120%;
margin-right: 15px;
}
#media-box {
position: absolute;
right: 0px;
z-index: 1;
margin: 20px;
width: 200px;
}
.media {
float: right;
cursor: pointer;
}
.contact-info {
position: absolute;
right: 0px;
margin-top: 10px;
margin-right: 5px;
font-size: 14px;
color: white;
font-family: sans-serif;
letter-spacing: 1px;
}
.phone {
cursor: default;
top: 50px;
}
.email {
top: 80px;
cursor: pointer;
}
#logo {
position: absolute;
top: 0px;
left: 0px;
display: block;
}
.page {
display: block;
background-color: black;
opacity: 0.8;
color: white;
}
.box {
position: absolute;
top: 500px;
width: 100%;
}
#title {
position: relative;
width: 50%;
font-style: italic;
font-size: 24px;
font-family: sans-serif; /* Redundant if decide to use sans-serif elsewhere */
letter-spacing: 2px;
}
#title-text:hover {
font-size: 100%;
}
.arrow {
position: fixed;
margin: 10px;
cursor: pointer;
z-index: 100;
}
.left {
left: 0px;
visibility: hidden;
}
.right {
right: 0px;
}
.main {
width: 50%;
margin: auto;
position: relative;
height: 300px;
}
.intro { /* Need to fix this thing not scrolling right */
width: 50%;
margin-left: 20px;
}
#left {
position: relative;
margin-left: 68px;
width: 25%;
height: 355px;
right: 0px;
}
#bottom {
width: 50%;
position: relative;
}
/* The pages position values below */
.second {
position: absolute;
left: 62.5%;
}
.third {
position: absolute;
left: 112.5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<link href="simple-scrollbar.css" rel="stylesheet"/>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Bud, Branch & Blossom Landscaping, LLC</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://buzinas.github.io/simple-scrollbar/simple-scrollbar.min.js"></script>
</head>
<body>
<div id="media-box">
<img id="linkedin" class="media" src="images/linkedin.png" title="Linkedin"/>
<img id="houzz" class="media" src="images/houzz.png" title="Houzz"/>
<img id="instagram" class="media" src="images/instagram.png" title="Instagram"/>
<img id="facebook" class="media" src="images/facebook.png" title="Facebook"/>
<a class="contact-info phone" href="tel:+15175151723">(517)-515-1723</a>
<a class="contact-info email" href="#">Contact us today!</a>
</div>
<div id="banner">
<div id="banner-text">
<p id="maintenance" class="banner-text">MAINTENANCE.</p>
<p id="installation" class="banner-text">INSTALLATION.</p>
<p id="design" class="banner-text">DESIGN.</p>
</div>
<div id="navbar">
<p id="about" class="nav-text">About Us</p>
<p id="gallery" class="nav-text">Our Work</p> <!-- Whichever one Tommy likes better. -->
</div>
</div>
<!-- Everything on top of the banner -->
<div id="logo"><img src="images/whitelogo.png"/></div>
<!-- Content -->
<div id="box">
<div class="first box">
<img class="left arrow" src="images/left_arrow.png"/>
<img class="right arrow" src="images/right_arrow.png"/>
<div class="first page intro">
<p>Bud, Branch & Blossom Landscaping is a small, independent landscaping firm that serves the Greater Lansing area.</p>
<p>We perform a variety of landscaping services, including landscape design, plant installation and removal, hardscaping, and lawn maintenance.</p>
<p>Bud, Branch & Blossom is also an active member of the Michigan Nursery and Landscape Association (MNLA), and is approved by the Michigan Department of Agriculture and Natural Resources (MDANR).</p>
</div>
<div class="first page intro">
<p>Tommy we need another testimonial yo.</p>
</div>
</div>
<!-- Second page -->
<div class="second box">
<div id="title" class="second page">
<p id="title-text">About Us</p>
</div>
<div class="second page main" ss-container>
<p>Bud, Branch & Blossom owner Tommy Morgan has spent years researching plants, shrubs, and trees. Before forming the company, he redesigned spaces in his own yard, honing his understanding of how textures and colors fit beside each other in garden beds. That appreciation for landscape composition serves his customers well. He enjoys making connections with his clients and getting to spend time outdoors doing what he loves.</p>
<p>The business started with a few small design projects, supplemented by several lawn mowing jobs. A year after forming the company, Tommy hired his first employees – people who, as he says, “understand that all of the work we do is in service to our customers.” He’s invested in top-of-the-line equipment, with brands like Exmark, Stihl, and Redmax lining our equipment racks.</p>
</div>
</div>
<!-- Third page -->
<div class="third box">
<div id="left" class="third page" ss-container>
<p>Design work allows us to share our creativity with our customers. Owner Tommy Morgan enjoys creating artwork with natural components. When designing a garden, many important factors must be considered, such as light, soil conditions, water, drainage conditions, and location. </p>
<p>The first step of the design process involves a free initial consultation. This allows us to understand your needs, and gives us an opportunity to see and understand the space. Following this, a design will be presented to you, along with pictures of plants/materials being used, and an estimate of the cost.</p>
</div>
</div>
</div>
<footer class="page">Copyright © Bud, Branch & Blossom Landscaping, LLC. All rights reserved.</footer>
<script type="text/javascript"> // Hover effects
// Elements
var fb = document.getElementById('facebook');
var ig = document.getElementById('instagram');
var hz = document.getElementById('houzz');
var li = document.getElementById('linkedin');
// Social media
fb.addEventListener('mouseover', function() {
fb.src = "images/facebook_hover.png";
});
fb.addEventListener('mouseleave', function() {
fb.src = "images/facebook.png";
});
ig.addEventListener('mouseover', function() {
ig.src = "images/instagram_hover.png";
});
ig.addEventListener('mouseleave', function() {
ig.src = "images/instagram.png";
});
hz.addEventListener('mouseover', function() {
hz.src = "images/houzz_hover.png";
});
hz.addEventListener('mouseleave', function() {
hz.src = "images/houzz.png";
});
li.addEventListener('mouseover', function() {
li.src = "images/linkedin_hover.png";
});
li.addEventListener('mouseleave', function() {
li.src = "images/linkedin.png";
});
</script>
<script type="text/javascript"> // PAGE SCRIPT
function test() {
xleft = document.getElementById('box').style.left;
console.log(xleft);
if(xleft == '-500%') {
$('.right').css('visibility', 'hidden');
} else {
$('.right').css('visibility', 'visible');
}
}
$('.right').click(function() {
$('#box').animate({
left: '-=100%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('.left').click(function() {
$('#box').animate({
left: '+=100%'
}, 400);
if(xleft == '-200%') {
$('.left').css('visibility', 'hidden');
} else {
$('.left').css('visibility', 'visible');
}
});
$('#about').click(function() {
$('#box').animate({
left: '-100%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#design').click(function() {
$('#box').animate({
left: '-200%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#installation').click(function() {
$('#box').animate({
left: '-300%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#maintenance').click(function() {
$('#box').animate({
left: '-400%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#gallery').click(function() {
$('#box').animate({
left: '-500%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('.email').click(function() {
$('#box').animate({
left: '-600%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
</script>
</body>
</html>

Slideshow using background images with navigation and captions

I have a div which currently has a static background image, and I need to create a slideshow of background images and text for this div. I would like to fade the background images and the caption text in and out. Does anyone know of a good way to do this using jQuery? My knowledge of JavaScript and jQuery is very limited. I tried to use some ready-made plugins as the Backstretch, Responsiveslides but I could not understand them enough and edit them for my use.
Here is my current code: http://jsfiddle.net/1zdyh3wo/
HTML
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
<div class="nav-wrapper">
<div class="nav-arrows prev"></div>
<div class="nav-dots">
<div class="current"></div>
<div class=""></div>
<div class=""></div>
</div>
<div class="nav-arrows next"></div>
</div>
</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* -- COMMON -- */
body {
font: 400 14px 'Montserrat', Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
}
.separator {
width: 24px;
height: 4px;
}
.separator.white {
background-color: white;
}
.separator.black {
background-color: black;
}
/* -- MENU -- */
/* -- CANVAS -- */
.content {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
right: 0;
bottom: 100px;
left: 0;
width: 33.333333333%;
margin: 0 auto;
}
.sectionTitle {
font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
line-height: 24px;
margin-bottom: 24px;
letter-spacing: 4px;
}
.sectionDescription {
font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;
margin-top: 24px;
}
/* -- SLIDER -- */
.bg-slider {
background: url(../img/slides/image1.jpg) no-repeat center center fixed;
background-color: red; /* demo purpose only */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* -- SLIDER - NAVEGATION -- */
.nav-wrapper {
display: inline-block;
min-width: 250px;
margin-top: 24px;
padding: 4px;
}
/* -- SLIDER - NAVEGATION ARROWS -- */
.nav-arrows {
float: left;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: 4px solid white;
}
.nav-arrows.prev {
border-top: none;
border-right: none;
}
.nav-arrows.next {
border-bottom: none;
border-left: none;
}
/* -- SLIDER - NAVEGATION DOTS -- */
.nav-dots {
margin: 0px 8px;
float: left;
}
.nav-dots div{
float: left;
width: 12px;
height: 12px;
margin: 4px 18px;
cursor: pointer;
border-radius: 50%;
background: rgba(255,255,255,.5);
}
.nav-dots .current:after {
float: left;
width: 12px;
height: 12px;
content: '';
border-radius: 50%;
background: white;
}
Here a visual aid, how I would like the result to be:
Desktop version:
Mobile version:

To keep things really simple:
Make a "wrapper" div for the entire slider
Make an individual "wrapper" div for each individual slide
Put the slider navigation outside of of the individual slides (I put it outside of the slider altogether, but that's your choice based on your desired positioning).
Make a function that will do all the transitions
Here's an example HTML structure, based on yours
<div id="slider">
<div class="content bg-slider active">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 2</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 3</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
</div>
</div>
</div>
Here's the functional JavaScript, with comments.
$(document).ready(function(){
// Hide all slides, re-show first:
$(".bg-slider").hide()
$(".bg-slider:first-child").show();
// Prev button click
$(".nav-arrows.prev").click(function(){
slidePrev();
})
// Next button click
$(".nav-arrows.next").click(function(){
slideNext();
})
// "Dots" click
$(".nav-dots div").click(function(){
slideTo($(this).index());
})
});
// "Previous" function must conclude if we are at the FIRST slide
function slidePrev() {
if ($("#slider .active").index() == 0) {
slideTo($("#slider .bg-slider").length - 1);
}
else {
slideTo($("#slider .active").index() - 1);
}
}
// "Next" function must conclude if we are at the LAST slide
function slideNext() {
if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
slideTo(0);
}
else {
slideTo($("#slider .active").index() + 1);
}
}
// Slide To will be called for every slide change. This makes it easy to change the animation, or do what you want during the transition.
function slideTo(slide) {
$("#slider .active").fadeOut().removeClass("active");
$("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
$(".nav-dots .current").removeClass("current");
$(".nav-dots div").eq(slide).addClass("current");
}
Finally, here's the updated Fiddle to demonstrate: http://jsfiddle.net/1zdyh3wo/1/