Can someone pls assist me with a means of performing the following
using jQuery?
Currently, I have some images in a div container, and as for a specific background I have to use the position: absolute. My goal is to implement an according menu where the user clicks the "Menu+" image button, the image
button then toggles back to "Menu-".
Here what I have done:
body{
background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
.openmenu{
position:fixed;
margin:0 auto;
width:300px;
overflow-y:auto;
overflow-x: hidden;
}
.img1 {
position: absolute;
top: 0px;
left: 18px;
z-index: -1;
}
.img2 {
position: absolute;
top: 102px;
left: 18px;
}
.img3 {
position: absolute;
top: 217px;
left: 18px;
}
#pic-wrapper{
margin:2em auto;
position:absolute;
cursor:pointer
}
#pic{
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
position:absolute;
z-index:1;
opacity:1
}
#pic-inner{
z-index:0;
position:absolute;
}
#pic:hover{
opacity:0
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<body>
<div id="pic-wrapper">
<div class="img1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/home_on.png" id="pic-inner">
</div>
<div class="img2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_on.png" id="pic-inner">
</div>
<div class="img3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_on.png" id="pic-inner">
</div>
</div>
Here the result I would like to create:
Example
Any help/direction would be much appreciated.
Thanks.
$('.accordion-section-title').click(function(e) {
var currentAttrvalue = $(this).attr('href');
if ($(e.target).is('.active')) {
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
.accordion {
overflow: hidden;
border-radius: 4px;
background: transparent;
}
.accordion-section-title {
width: 100%;
padding: 15px;
}
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
background: transparent;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration: none;
}
.accordion-section-title.active {
background-color: #4c4c4c;
text-decoration: none;
}
.accordion-section-title:hover {
background-color: grey;
text-decoration: none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
.accordion-section-content {
padding: 15px;
display: none;
color: white;
}
.accordion-section {
background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.accordion {
overflow: hidden;
border-radius: 4px;
background: transparent;
}
.accordion-section-title {
width: 100%;
padding: 15px;
}
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
background: transparent;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration: none;
}
.accordion-section-title.active {
background-color: #4c4c4c;
text-decoration: none;
}
.accordion-section-title:hover {
background-color: grey;
text-decoration: none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
.accordion-section-content {
padding: 15px;
display: none;
color: white;
}
.accordion-section {
background-image:url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
</style>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
<script>
$('.accordion-section-content').hide();
$('.accordion-section-title').click(function(e) {
$('.accordion-section-content').hide();
var currentAttrvalue = $(this).attr('href');
if($(this).hasClass('active'))
{
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
$(currentAttrvalue).slideToggle();
});
</script>
Related
I'm trying to have a paragraph of text appear next to each image after I pick it. Currently, all I have is the image showing up after I click it. I don't know how to add text next to the image that only shows up when it is clicked on. I'm new to programming so anything could help. If you guys need more information, let me know. Thanks.
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
#font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width:50%;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.row{
position: absolute;
top:600px;
}
.testtext{
color:black;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/styleprojects.css" />
<script src='../Javascript/script.js'></script>
<title>Projects</title>
</head>
<body>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p>Click on the images below:</p>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
</div>
<div class="row">
<div class="column">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897" alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
</div>
</body>
</html>
I made a few changes and additions. Here's the expanded image with the paragraph section next to it:
The new expanded image block with side paragraph:
<div id="expanded-wrapper">
<div class="container">
<span onclick="this.parentElement.style.display='none'"
class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<div id="img-paragraph">
<p>image paragraph content goes here</p>
</div>
</div>
Plus some changes and additions to the CSS.
See the snippet for complete details.
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
var imgParagraph = document.getElementById('img-paragraph');
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
// use 'display:table-cell' to keep elements side-by-side
expandImg.parentElement.style.display = "table-cell";
imgParagraph.style.display = 'table-cell';
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* image paragraph */
#img-paragraph {
display: none;
width: 30%;
outline: 1px solid red;
padding: 0.5rem;
vertical-align: top;
text-align: left;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.row {
position: absolute;
top: 600px;
}
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p>Click on the images below:</p>
<div id="expanded-wrapper">
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<div id="img-paragraph">
<p>image paragraph content goes here</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897"
alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
</div>
First make sure the image is not taking up all the space inside the container by removing its width 100%:
<img id="expandedImg" style="width:100%">
change to:
<img id="expandedImg">
Then you can set a different width for your image inside the css and remove the absolute positioning from the text.
You have loads of options here to make them appear side by side but for wrapping text around pictures you can use floats.
Also don't forget to change the text color as it won't be visible when white on this white background.
Final css for the image and the text:
#imgtext {
color: black;
font-size: 20px;
float:left;
}
#expandedImg{
float:left;
width:50%;
}
I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>
I have been trying to make my slider stay in the same place when the side-menu of my page comes in from the left on the page. I have been searching for answers and there seems to be some people who have encountered the same problem in various situations.
I have tried to change the position properties of elements on the page without any success. Is there anyone who might be able to help me with this problem?
JSFiddle: https://jsfiddle.net/nekgunru/2/
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<title>Practice</title>
<!--Links to main Stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!--Links to "Oswald"-font-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Links to Javascript-file-->
<script type="text/javascript" src="app.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
The issue is that you are fading out .icon-menu which causes it to be set to display: none; when the fading animation has completed. This means that it no longer effects the position of the elements around it and so in this case they move up.
none
Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
display - (https://developer.mozilla.org/en-US/docs/Web/CSS/display)
One way to navigate around this problem would be to use fadeOuts callback to set visibility: hidden; instead as it makes the element invisible while still affecting the position of the elements around it.
hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
visibility (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
Alternative method
You could instead use animate and set the opacity to 0 as this will simply modify the transparency of the element, it will still effect the position of the elements around it.
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').animate({opacity: 0}, 100);
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').animate({opacity: 0}, 100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
I have a large image of an L-shaped painting on one page. I created divs over parts of the painting I want to explain. When the page loads, I want it to scroll down the length of the image, and then move to the left of the image, stopping at each div for a few seconds. I understand how to get the page to scroll down on load, but I do not understand how to continue scrolling once it has reached the first div. Should I target the data-box and not the class, so it will continue to move through each div box?
$(document).ready(function(){
$('html, body').animate({
scrollTop: $(".bird1").offset().top
}, 5000);
});
/*font*/
#import url(http://fonts.googleapis.com/css?family=Yellowtail|Calligraffitti|Courgette);
#import url(http://fonts.googleapis.com/css?family=Ubuntu:400,300italic);
body {
/*background-color: #fbf2e0;*/
background-color: #fcf5e9;
/*background-color: #fdfbf5;*/
/*background-color: #fefcf8;*/
font-family: Ubuntu, sans-serif;
}
/************************************
HOME PAGE
************************************/
.jumbotronOne {
background:
linear-gradient(
rgba(50,50,50, 0.8),
rgba(50,50,50, 0.8)
),
url(https://scontent-ord1-1.xx.fbcdn.net/hphotos-xft1/v/t1.0-9/11150883_878883265488069_6626923622401519037_n.jpg?oh=d5636fb2a9b2e8365a8c951037d70895&oe=55FDD666);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-top:3.6em;
/*-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
}
.words {
color: #fdf8ef;
padding-top: 9%;
background:linear-gradient;
}
.red {
color:lightcoral;
}
#title {
font-family: Courgette;
text-align: center;
}
#text {
text-align: center;
width: 95%;
padding-top: 5%;
line-height: 150%;
font-size: 25px;
}
/************************************
NAV TRANSPARENT
************************************/
#nav {
padding: 0;
margin: 0;
}
/*** ACTIVE COLOR ***/
.navbar ,.active,.sr-only{
background-color: transparent;
background: transparent;
border-bottom-color: lightcoral;
border-bottom-width: 5px;
border-top: none;
overflow: hidden;
}
.navbar li a {
color: #fff;
}
/*nav color*/
.navbar-header,.collapse, .navbar-collapse , .navbar-toggle, .navbar-right, .dropdown, .dropdown-menu, .navbar-brand,.navbar-brand, .dropdown-toggle, .button {
background-color: rgba(251,251,253, .5);
}
/*IMG SIZING*/
#header img {
width:100%;
height: 100%;
right:100%;
}
.slideIn {
top:-100px;
}
.navbar-fixed-top {
transition:all 1s ease-in-out
}
/*nav font color*/
.navbar-default .navbar-nav>li>a {
/*color: black; */
}
/*hover class text color */
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: inherit;
}
li #activeColor.active {
background-color:red;
}
/************************************
ARTIST PAGE
************************************/
/*profile*/
#noPadding{
padding: 0;
margin: 0;
}
.noPadding {
padding: 0;
margin:0;
}
.profile img {
object-fit:cover;
display: block;
height: 300px;
width: 400px;
margin-top: 15%;
top: 5%;
}
.artistHeader {
/*color: black;*/
margin-top: 7%;
}
.longName {
font-size: 20px;
}
/************************************
MEANING
************************************/
.redBox {
position: absolute;
height: 100%;
/*left:-75px;*/
top:5px;
}
.redBox div {
border-style: solid;
border-color: red;
position: relative;
}
/*.totem .ganesh .bird1 .bird2 .katy .fredia .saar .parks .james .anna .ai .friends1 .friends2 .friends3 .kids .parents .quote{
display: none;
}*/
.meaningImg img {
margin-top: 1.1%;
max-height:1000px;
max-width:1000em;
margin-bottom: 0;
}
.totem {
height: 160px;
width: 60px;
top: 412px;
left: 220px;
display: inline-block;
}
.ganesh {
top: 420px;
left: 210px;
height:140px;
width:80px;
}
.bird1{
top: 287px;
left: 310px;
height:40px;
width:250px;
}
.katy{
top: 160px;
left: 635px;
height:200px;
width:244px;
}
.fredia{
top: 125px;
left: 960px;
height:194px;
width:158px;
}
.saar{
top: -215px;
left: 1150px;
height:194px;
width:158px;
}
.parks{
top: -255px;
left: 1350px;
height:168px;
width:122px;
}
.james{
top: -505px;
left: 1690px;
height:358px;
width:122px;
}
.anna{
top: -780px;
left: 2005px;
height:290px;
width:146px;
}
.andy{
top: -1030px;
left: 2305px;
height:255px;
width:140px;
}
.ai{
top: -1315px;
right: -2500px;
height:249px;
width:514px;
/*508 & 243 */
}
.friends1{
top:-1450px;
right:-3175px;
height:109px;
width:264px;
}
.friends2{
top:-1550px;
right:-3855px;
height:103px;
width:200px;
}
.friends3{
top:-1800px;
right:-3685px;
height:97px;
width:164px;
}
.kids{
top:-1870px;
right:-3185px;
height:109px;
width:295px;
}
.parents{
top:-1890px;
right:-3475px;
height:203px;
width:358px;
}
.quote{
top:-2250px;
right:-4200px;
height:230px;
width:250px;
}
.bird2{
top:-2550px;
right:-3950px;
height:250px;
width:240px;
}
.totem, .ganesh, .bird1, .bird2, .katy, .fredia, .saar, .parks, .james, .anna, .andy, .ai, .friends1, .friends2, .friends3, .kids, .parents, .quote {
opacity:0;
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
-ms-transition:.5s;
transition:.5s;
}
.totem:hover, .ganesh:hover, .bird1:hover, .bird2:hover, .katy:hover, .fredia:hover, .saar:hover, .parks:hover, .james:hover, .andy:hover, .anna:hover, .ai:hover, .friends1:hover, .friends2:hover, .friends3:hover, .kids:hover, .parents:hover, .quote:hover {
opacity:1;
}
.background {
background:
linear-gradient(
rgba(219,253,244, 0.7),
rgba(219,253,244, 0.7)
),
url(http://wallpoper.com/images/00/43/13/34/forest-sunrise-wallpaper-landscape-nature_00431334.jpg);
/*background-size: length;*/
width: 4892px;
/* SINGLE TREE url(http://wallpoper.com/images/00/42/56/25/forest-summer_00425625.jpg);*/
/* TRESS LIGHT GREEN url(http://wallpaperlepi.com/wp-content/uploads/2014/09/Awesome-Nature-Ray-of-Light-Wallpaper.jpg);*/
/* TREES LIGHT GREEN url(http://orig12.deviantart.net/ddf1/f/2012/303/0/0/forest_stock_by_dl_stockandresources-d5jffdv.jpg);*/
/* RED TINT url(http://wallpoper.com/images/00/43/13/34/forest-sunrise-wallpaper-landscape-nature_00431334.jpg);*/
/*
LIGHT GREEN COLOR */
/* rgba(216,74,74, 0.1),
rgba(216,74,74, 0.1)
RED COLOR */
height:50%;
margin-top: 0;
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
/*background-attachment: fixed;*/
}
/************************************
FOOTER
************************************/
#footer {
color: #ED5565;
background-color: #fbf2e0;
/*background-color: #fcf5e9;*/
text-align: center;
/*margin-top: 20em;*/
/*max-height: 1%;*/
/*height:10%;*/
/*padding-bottom: 15;*/
margin-bottom: 0;
}
/*****************************
PIC GALLERY
*****************************/
.fullDrawing {
margin: 0;
padding-left: 0px;
padding-right: 0px;
padding-top: 50px;
max-height:200.750em;/*18.750em;/*height: 300px;*/
max-width:1000em; /*91.500em;*/ /*120px*/
min-height: 13em;
width: 100%;
}
.bottomFullDrawing {
margin: 0;
padding-left: 0px;
padding-right: 0px;
padding-top: 50px;
max-height:200.750em;/*18.750em;/*height: 300px;*/
max-width:1000em; /*91.500em;*/ /*120px*/
min-height: 13em;
width: 100%;
padding-bottom: 2.5em ;
}
.galleryContainer {
width: 90%;
overflow-x:scroll;
overflow-y:hidden;
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
}
.profile {
margin-top: 5%;
}
.galleryContainer img {
/*height: 171px;*/
/*width: 180px;*/
/*margin-top: 100%;*/
/*padding-bottom: 0px;*/
/*height: 515px;*/
}
.galleryContainer img {
height: 300px;
width: 400px;
object-fit:cover;
}
.fullDrawing img{
height: 217.273px;
width:1440px;
}
.list-inline {
white-space:nowrap;
}
.galleryContainer > .row [class*="col-lg"], .galleryContainer > .row [class*="col-md"], .galleryContainer > .row [class*="col-md"] {
float:none;
display:inline-block;
white-space:normal;
vertical-align:top;
}
#main-content > .row {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- totem pole -->
<div class="redBox">
<div class=" box totem">
<span class="hoverTotem" data-box="totem" ></span>
</div>
<!-- ganesh -->
<div class="focus box ganesh">
<span data-box="ganesh" ></span>
</div>
<!-- BIRD 1 -->
<div class="box bird1">
<span data-box="bird1" ></span>
</div>
<!-- KATY -->
<div class="box katy">
<span data-box="katy" ></span>
</div>
<!-- FREDIA -->
<div class="box fredia">
<span data-box="fredia" ></span>
</div>
<!-- sarry -->
<div class="box saar">
<span data-box="saar" ></span>
</div>
<!-- parks -->
<div class="box parks">
<span data-box="parks" ></span>
</div>
<!-- james -->
<div class="box james">
<span data-box="james" ></span>
</div>
<!-- ANNA -->
<div class="box anna">
<span data-box="anna" ></span>
</div>
<!-- ANDY -->
<div class="box andy">
<span data-box="andy" ></span>
</div>
<!-- AI -->
<div class="box ai">
<span data-box="ai" ></span>
</div>
<!-- FRIENDS -->
<div class="box friends1">
<span data-box="friends1" ></span>
</div>
<div class="friends2">
<span data-box="friends2" ></span>
</div>
<div class="box friends3">
<span data-box="friends3" ></span>
</div>
<!-- KIDS -->
<div class="box kids">
<span data-box="kids" ></span>
</div>
<!-- PARENTS -->
<div class="box parents">
<span data-box="parents" ></span>
</div>
<!-- QUOTE -->
<div class="box quote">
<span data-box="quote" ></span>
</div>
<!-- BIRD 2 -->
<div class="box bird2">
<span data-box="box bird2" ></span>
</div>
</div>
<div class="container-fluid">
<div id="" class="row meaningImg">
<div class="background">
<a href="../public/img/TALLPART1.png">
<img class="" src="http://arttreeoflife.com/public/img/TALLPART1.png" class="meaningImg">
</a>
</div>
</div>
</div>
Ok, I got my code to work.
I kept my HTML the same but made a few changes to my jQuery.
$(document).ready(function(){
$('html, body').animate({
scrollTop: $(".ganesh").offset().top,
}, 5000).animate({
scrollLeft: $(".bird1").offset().left,
}, 5000).animate({
scrollLeft: $(".saar").offset().left,
}, 5000).animate({
scrollLeft: $(".anna").offset().left,
}, 5000).animate({
scrollLeft: $(".friends1").offset().left,
}, 5000).animate({
scrollLeft: $(".quote").offset().left,
}, 5000);
});
I think I just needed to fix my syntax a bit, and I was able to scroll to both parts of the screen from the first few lines of code, but it scrolled diagonally. To make it stop between each scroll I had to make a new animation. And this is why I think it worked.
If someone could explain this to me better please do I'm am not sure if I follow what is going on here or not.
I have been trying to find some sample code or help on a way to have a vertical menu bar down the left hand side of the page that displays an icon and on hover of the image the menu will expand and overlay the background of the body and display what the icon represents.
I have a little demo here that I found and I like alot, but this is abit more advanced but the basic idea can be seen.
http://codecanyon.net/item/jquery-wahmenu/full_screen_preview/5533383
As you can see when you hover over some of the icons a small box will overlay the body and this is what I am trying to achieve.
check out the code at this url http://jsbin.com/yiyenadi/1/ .
As you can see I did not animate it because this would take more time but it can be done.
Please message me back if you need more help. And please comment your views back.
[EDIT]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>side bar</title>
<script type="text/javascript">
<style type="text/css">
body {
margin:0px;
background-color: rgb(255, 0, 214);
}
#side_bar_container {
width:50px;
background-color: #555C66;
height: 100%;
position:absolute;
transition:.5s;
}
.line_container{
height:50px;
background-color: #555C66;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 2px solid rgba(0, 0, 0, 0.18);
overflow: hidden;
position: relative;
}
#line_container1{
border-top: 2px solid rgba(0, 0, 0, 0.18)
}
.line_image{
width: 50px;
height: 50px;
float: left;
border-radius: 16px;
color: white;
}
.line_text{
margin-top: 16px;/*depends on other values*/
font-size:18px;
width:300px;
height:50px;
float: left;
color: black;
font-family: sans-serif;
position: relative;
z-index: -3px;
}
#logo {
width:50px;
height:50px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50%;
}
.sidebar_loader{
width: 300px;
height: 100%;
display: ; /*very very important*/
z-index: -3;
position: absolute; /*works with fixed - absolute is experimantal*/
left: 50px;
top: 0px;
background-color: rgb(69,75,83);
display: none;
transition: .5s;
}
#texter {
font-family: sans-serif;
color: white;
padding: 10px;
}
/*the power starts here*/
#line_container1:hover{
background-color: rgb(69,75,83);
}
#line_container2:hover{
background-color: rgb(69,75,83);
}
#line_container3:hover{
background-color: rgb(69,75,83);
}
#line_container4:hover{
background-color: rgb(69,75,83);
}
#sidebar_loader1:hover < #line_container1 {
background-color: red;
}
/*more*/
#line_container1:hover ~ #sidebar_loader1 {
z-index: -2;
}
#line_container2:hover ~ #sidebar_loader2 {
z-index: -2;
}
#line_container3:hover ~ #sidebar_loader3 {
z-index: 2;
}
#line_container4:hover ~ #sidebar_loader3 {
z-index: 2;
}
</style>
</head>
<body>
<div id="side_bar_container">
<div style="width:50px;height:50px;margin-left:auto;margin-right:auto;background-color:black;" id="logo" onmouseover="document.getElementById('sidebar_loader1').style.display='none';"></div>
<div class="line_container" id="line_container1" onmouseover="document.getElementById('sidebar_loader1').style.display='block';document.getElementById('sidebar_loader2').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.maxwellmcmahon.com/img/source.png" alt="IMAGE" class="line_image">
<span class="line_text">
HTML5/JAVASCRIPT CODES
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader1" onmouseover="document.getElementById('line_container1').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader1').style.display='none';document.getElementById('line_container1').style.background=''">
<span id="texter">TEST for 1</span>
</div>
<div class="line_container" id="line_container2" onmouseover="document.getElementById('sidebar_loader2').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader1').style.display='none';" onmouseout="">
<img src="1.png" alt="IMAGE" class="line_image" id="line_image">
<span class="line_text">
VIDEOS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader2" onmouseover="document.getElementById('line_container2').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader2').style.display='none';document.getElementById('line_container2').style.background=''">
<span id="texter">TEST for 2</span>
</div>
<div class="line_container" id="line_container3" onmouseover="document.getElementById('sidebar_loader3').style.display='block';document.getElementById('sidebar_loader4').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.ejprescott.com/media/icons/tools-equipment.png" alt="IMAGE" class="line_image">
<span class="line_text">
SETTINGS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader3" onmouseover="document.getElementById('line_container3').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader3').style.display='none';document.getElementById('line_container3').style.background=''">
<span id="texter">TEST for 3</span>
</div>
<div class="line_container" id="line_container4" onmouseover="document.getElementById('sidebar_loader4').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader3').style.display='none';" onmouseout="">
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519591-089_Speechbubble2-128.png" alt="IMAGE" class="line_image">
<span class="line_text">
Forum
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader4" onmouseover="document.getElementById('line_container4').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader4').style.display='none';document.getElementById('line_container4').style.background='';">
<span id="texter">TEST for 4</span>
</div>
<button onclick="document.getElementById('side_bar_container').style.display='none';" onmouseover="document.getElementById('sidebar_loader4').style.display='none';" title="close this navigation pane" style="width:50px;">X</button>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>side bar</title>
<script type="text/javascript">
<style type="text/css">
body {
margin:0px;
background-color: rgb(255, 0, 214);
}
#side_bar_container {
width:50px;
background-color: #555C66;
height: 100%;
position:absolute;
transition:.5s;
}
.line_container{
height:50px;
background-color: #555C66;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 2px solid rgba(0, 0, 0, 0.18);
overflow: hidden;
position: relative;
}
#line_container1{
border-top: 2px solid rgba(0, 0, 0, 0.18)
}
.line_image{
width: 50px;
height: 50px;
float: left;
border-radius: 16px;
color: white;
}
.line_text{
margin-top: 16px;/*depends on other values*/
font-size:18px;
width:300px;
height:50px;
float: left;
color: black;
font-family: sans-serif;
position: relative;
z-index: -3px;
}
#logo {
width:50px;
height:50px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50%;
}
.sidebar_loader{
width: 300px;
height: 100%;
display: ; /*very very important*/
z-index: -3;
position: absolute; /*works with fixed - absolute is experimantal*/
left: 50px;
top: 0px;
background-color: rgb(69,75,83);
display: none;
transition: .5s;
}
#texter {
font-family: sans-serif;
color: white;
padding: 10px;
}
/*the power starts here*/
#line_container1:hover{
background-color: rgb(69,75,83);
}
#line_container2:hover{
background-color: rgb(69,75,83);
}
#line_container3:hover{
background-color: rgb(69,75,83);
}
#line_container4:hover{
background-color: rgb(69,75,83);
}
#sidebar_loader1:hover < #line_container1 {
background-color: red;
}
/*more*/
#line_container1:hover ~ #sidebar_loader1 {
z-index: -2;
}
#line_container2:hover ~ #sidebar_loader2 {
z-index: -2;
}
#line_container3:hover ~ #sidebar_loader3 {
z-index: 2;
}
#line_container4:hover ~ #sidebar_loader3 {
z-index: 2;
}
</style>
</head>
<body>
<div id="side_bar_container">
<div style="width:50px;height:50px;margin-left:auto;margin-right:auto;background-color:black;" id="logo" onmouseover="document.getElementById('sidebar_loader1').style.display='none';"></div>
<div class="line_container" id="line_container1" onmouseover="document.getElementById('sidebar_loader1').style.display='block';document.getElementById('sidebar_loader2').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.maxwellmcmahon.com/img/source.png" alt="IMAGE" class="line_image">
<span class="line_text">
HTML5/JAVASCRIPT CODES
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader1" onmouseover="document.getElementById('line_container1').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader1').style.display='none';document.getElementById('line_container1').style.background=''">
<span id="texter">TEST for 1</span>
</div>
<div class="line_container" id="line_container2" onmouseover="document.getElementById('sidebar_loader2').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader1').style.display='none';" onmouseout="">
<img src="1.png" alt="IMAGE" class="line_image" id="line_image">
<span class="line_text">
VIDEOS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader2" onmouseover="document.getElementById('line_container2').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader2').style.display='none';document.getElementById('line_container2').style.background=''">
<span id="texter">TEST for 2</span>
</div>
<div class="line_container" id="line_container3" onmouseover="document.getElementById('sidebar_loader3').style.display='block';document.getElementById('sidebar_loader4').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.ejprescott.com/media/icons/tools-equipment.png" alt="IMAGE" class="line_image">
<span class="line_text">
SETTINGS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader3" onmouseover="document.getElementById('line_container3').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader3').style.display='none';document.getElementById('line_container3').style.background=''">
<span id="texter">TEST for 3</span>
</div>
<div class="line_container" id="line_container4" onmouseover="document.getElementById('sidebar_loader4').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader3').style.display='none';" onmouseout="">
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519591-089_Speechbubble2-128.png" alt="IMAGE" class="line_image">
<span class="line_text">
Forum
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader4" onmouseover="document.getElementById('line_container4').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader4').style.display='none';document.getElementById('line_container4').style.background='';">
<span id="texter">TEST for 4</span>
</div>
<button onclick="document.getElementById('side_bar_container').style.display='none';" onmouseover="document.getElementById('sidebar_loader4').style.display='none';" title="close this navigation pane" style="width:50px;">X</button>
You can see a demo here: http://jsbin.com/zoguqezu/1. Click the edit button in the top right hand corner to see the code and edit it.