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>
I'm not sure if I'm unable to find the right term to search or if there isn't much out there relating to this, but I was wondering if someone could help me figure out how to wrap or align images/elements around a circular shape.
I'm not sure if it's possible to do it purely with HTML and CSS or if JS is needed, but I'm open to all suggestions.
Here's an example in photoshop of what I'm looking for. I only show 4 here, but I will need the ability to add more circles as needed and still remain consistent. It could go onto another column though, if necessary.
for context, this is going to be some type of navigation menu.
Here's what I have code wise:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap');
/*Colours:*/
:root {
--dark: #16161a;
--off-dark: #242629;
--off-white: #fffffe;
--purple: #7f5af0;
--off-blue: #94a1b2;
}
body {
color: var(--off-white);
font-family: 'Roboto', sans-serif;
}
.create-icon-size {
font-size: 1.5rem;
}
.circle-wrap {
position: relative;
top: 50%;
left: 50%;
width: 320px;
height: 320px;
border: 5px solid var(--off-dark);
border-radius: 160px;
transform: translate(-50%, -50%);
}
.icon-background {
background-color: var(--purple);
color: var(--off-dark);
position: relative;
border-radius: 25px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
<html lang="en" class="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://kit.fontawesome.com/fcb91982ab.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="circle-wrap">
<div id="head" class="icon-background">
<span class="fas fa-meh-blank create-icon-size"></span>
</div>
<div id="body" class="icon-background">
<span class="fas fa-child create-icon-size"></span>
</div>
<div id="legs" class="icon-background">
<span class="fas fa-capsules create-icon-size"></span>
</div>
<div id="feet" class="icon-background">
<span class="fas fa-shoe-prints create-icon-size"></span>
</div>
</div>
</body>
</html>
make .icon-background to absolute, and set it with top bottom right left values.
.main {
position: relative;
width: 400px;
}
.big-img {
height: 400px;
width: 400px;
border-radius: 100%;
}
.sm-img {
position: absolute;
height: 80px;
width: 80px;
border-radius: 100%;
border: 5px solid #fff;
}
.one {
top: 0;
right: 0;
}
.two {
top: 100px;
right: -50px;
}
.three {
bottom: 100px;
right: -50px;
}
.four {
bottom: 0;
right: 0;
}
<div class="main">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="big-img" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img one" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img two" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img three" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img four" alt="image-1">
</div>
/*Colours:*/
:root {
--dark: #16161a;
--off-dark: #242629;
--off-white: #fffffe;
--purple: #7f5af0;
--off-blue: #94a1b2;
}
body {
color: var(--off-white);
font-family: 'Roboto', sans-serif;
}
.main{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.create-icon-size {
font-size: 1.5rem;
}
.circle-wrap {
position: relative;
width: 320px;
height: 320px;
border: 5px solid var(--off-dark);
border-radius: 160px;
}
.icon-background {
background-color: var(--purple);
color: var(--off-dark);
position: absolute;
border-radius: 25px;
width: 50px;
height: 50px;
}
#head{
top:0;
right: 25px;
}
#body{
top: 80px;
right: -25px;
}
#legs{
bottom: 80px;
right: -25px;
}
#feet{
bottom:0;
right: 25px;
<div class="main"><div class="circle-wrap">
<div id="head" class="icon-background">
<span class="fas fa-meh-blank create-icon-size"></span>
</div>
<div id="body" class="icon-background">
<span class="fas fa-child create-icon-size"></span>
</div>
<div id="legs" class="icon-background">
<span class="fas fa-capsules create-icon-size"></span>
</div>
<div id="feet" class="icon-background">
<span class="fas fa-shoe-prints create-icon-size"></span>
</div>
</div></div>
I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!
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 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.