As you can see i used the intersection observer to change the background when the specific div comes in middle of the screen.
The issue i'm facing here is that i want to add other sections too outside of .main on top and bottom of the .main section. Stand alone the .main section is working okay. But when i add the other divs outside the main section. They don't take take height and width. I want main section works stand alone with others divs in my website page.
const bgEl = document.querySelector(".BG");
function createObserver(el) {
let observer;
let options = {
root: null,
rootMargin: "0px",
};
function handleIntersect(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const url = entry.target.getAttribute("BGurl");
bgEl.style.backgroundImage = `url(${url})`;
}
});
}
observer = new IntersectionObserver(handleIntersect, options);
observer.observe(el);
return observer;
}
(function () {
const sections = document.querySelectorAll(".main .section");
const observers = Array.from(sections).map(function (section) {
createObserver(section);
});
})();
* {
margin: 0px;
padding: 0px;
}
.section {
height: 100vh;
top: -611px;
width: 100%;
display: flex;
z-index: 1;
position: relative;
background-size: 100% 100% !important;
}
.text {
margin: auto;
}
.text p {
font-family: "Lato";
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 149%;
color: #263244;
}
.text h1 {
margin-bottom: 20px;
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 0px;
color: #ffffff;
margin-bottom: 50px;
}
.text .story-detail {
width: 300px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.text .story-description {
width: 321px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.BG {
position: fixed;
height: 100%;
width: 100%;
z-index: 0;
opacity: 1;
top: 0px;
transition: opacity 10s ease-in-out;
background-size: cover;
background-repeat: no-repeat;
}
.main {
width: 100%;
height: 100vh;
}
<div style="height: 700px; width: 100%"></div>
<div class="main">
<div class="BG"></div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<h1>Our Story</h1>
<div class="story-detail">
<p>
We saw a gap between what people need and what banks offer. It
means millions of us aren't getting the banking experience we
deserve for different reasons.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
Traditional banks don’t focus on customers' experience, their
systems may be slow and outdated, they may prioritize a specific
group of people, or perhaps they lack the ability to innovate,
and so on.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/cLPLS8xW/mobile-desert.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
So since we're passionate about solving problems and bridging
gaps, we looked into and identified the challenges and
capabilities we'll need to build a bank here in the Kingdom.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/mZnqV38T/mobile-birds.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
With the best local and international expertise, we began
building an innovative digital bank designed by and for the
people. We believe that the most effective way to build a bank
for people is to do it with them. This is our philosophy. So, we
started building it with the help of people like you.
</p>
</div>
</div>
</div>
</div>
<div class="section" BGurl="https://i.postimg.cc/k513m0Fb/mountain.png">
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
At D360, innovation starts with someone’s passion for improving
financial services. To that person, we say: Never stop offering
solutions to your needs. These solutions will not only benefit
you, but will significantly impact the lives of millions.
</p>
</div>
</div>
</div>
</div>
</div>
<div style="height: 700px; width: 100%"></div>
<footer style="height: 800px ;width: 100%" >
</footer>
Related
Alright so I am making an elevator simulator. The buisness logic of everything is fine, I am using queues. The problem I am having is moving the elevator from one floor to the next in the queue. I am using HTML, CSS, and JavaScript / Jquery. So far the two approaches I have been trying is Jquery's animate method and CSS translate. I have not yet been able to find a decent answer. My most recent attempt has to do with using invisible elements in the DOM in order to have coordinates to move the elevator to. I will provide code snippets for further explanation.
That is a picture of the webpage, as you can see I need to be able to move the elevator to any given floor at any given time.
// Called when user selects the Start button
$('#btn-start').click(function() {
// Start the Simulation
let destination = $('#second-floor').offset();
$("#elevator").animate( {right: destination.left, bottom: destination.top}, 4000, "linear", function(){console.log("Elevator finished moving")} );
//});
});
.elevator-visual {
width: 55%;
}
.elevator {
position: relative;
max-width: 10vw;
margin-left: 6vw;
}
.floor {
position: relative;
}
.hidden-destination {
position: absolute;
bottom: 10vw;
left: 11vw;
background: none;
height: 5px;
width: 5px;
}
.floor-bound {
width: 75%;
margin-bottom: 15vw;
}
#first-floor,
#second-floor {
margin-bottom: 0;
}
.floor-title {
margin: 0;
padding: 0;
text-align: right;
color: #777;
margin-right: 6vw;
}
#floor-four-lable {
margin-top: 15vw;
}
.btn-start{
position: static;
border: none;
padding: 8px 21px;
vertical-align: middle;
text-align: center;
cursor: pointer;
border-radius: 5%;
font-size: 24px;
background-color: #b77110;
color: white;
margin-left: 15px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Elevator Diagram -->
<div class="elevator-visual">
<div class="floor">
<div class="hidden-destination"></div>
<p id="floor-four-lable" class="floor-title">Floor 4</p>
<hr id="forth-floor" class="floor-bound" />
</div>
<div class="floor">
<div class="hidden-destination"></div>
<p class="floor-title">Floor 3</p>
<hr id="third-floor" class="floor-bound" />
</div>
<div class="floor">
<div class="hidden-destination"></div>
<p class="floor-title">Floor 2</p>
<hr id="second-floor" class="floor-bound" />
</div>
<img id="elevator" class="elevator" src="https://via.placeholder.com/150" alt="" />
<div class="floor">
<div class="hidden-destination"></div>
<p class="floor-title">Floor 1</p>
<hr id="first-floor" class="floor-bound" />
</div>
<button id="btn-start" class="btn-start">Start</button>
</div>
As you can see in the JS, I toggle some classes when the start button is pressed, then I grab the info for the destination from the top of the queue, and right now I am stuck on animating the elevator (my most recent attempt looks dumb lol) to be able to go to any floor I want.
Here is also a link to the repository if you would like to clone and open with live-server: https://github.com/Amalazing/Elevator-Simulator
Thanks for your time and help.
Something like this?
Just animate the bottom to wherever you want it to go.
I used fixed px values for height here so that it is easier to understand what's happening (At least I hope it is easier)
I get the offset (just the top value) from the element I want to animate to. Then I set the top value of the elevator to match with the top value of the destination.
// Called when user selects the Start button
$('#btn-start').click(function() {
// Start the Simulation
let destination = $('#second-floor').offset().top;
$("#elevator").animate( {top: destination}, 200, "linear" );
//});
});
$('.btn-to-floor').on('click', function() {
let floor = $(this).data('floor');
let floors = $('.floor').length;
// eq(floors - floor) needed to so some magic calculations (you could also just use some hardcoded id here based on data attribute.
let destination = $('.floor').eq(floors - floor ).find('.floor-bound').eq(0).offset().top;
$("#elevator").animate( {top: destination}, 200, "linear");
});
.elevator-visual {
width: 55%;
position: relative;
}
.elevator {
position: absolute;
margin-left: 6vw;
bottom: 0;
}
.floor {
height: 180px; /* height of elevator + text + line */
}
.floor-bound {
width: 75%;
}
.floor-title {
margin: 0;
padding: 0;
text-align: right;
color: #777;
margin-right: 6vw;
}
.btn-start{
position: static;
border: none;
padding: 8px 21px;
vertical-align: middle;
text-align: center;
cursor: pointer;
border-radius: 5%;
font-size: 24px;
background-color: #b77110;
color: white;
margin-left: 15px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Elevator Diagram -->
<div class="elevator-visual">
<div class="floor">
<p id="floor-four-lable" class="floor-title">Floor 4</p>
<hr id="forth-floor" class="floor-bound" />
</div>
<div class="floor">
<p class="floor-title">Floor 3</p>
<hr id="third-floor" class="floor-bound" />
</div>
<div class="floor">
<p class="floor-title">Floor 2</p>
<hr id="second-floor" class="floor-bound" />
</div>
<div class="floor">
<p class="floor-title">Floor 1</p>
<hr id="first-floor" class="floor-bound" />
</div>
<img id="elevator" class="elevator" src="https://via.placeholder.com/150" alt="" />
</div>
<button id="btn-start" class="btn-start">Start</button>
<button class="btn-to-floor" data-floor="1">1</button>
<button class="btn-to-floor" data-floor="2">2</button>
<button class="btn-to-floor" data-floor="3">3</button>
<button class="btn-to-floor" data-floor="4">4</button>
Using css' transition and minor javascript you can animate your object (whether it be an img or what have you, I've used text based span for my demo) to a part of your page via inline javascript calls from your button's onclick - I've written a quick and dirty demo at the bottom of this post for you.
More on css transitions: https://www.w3schools.com/css/css3_transitions.asp
Note: I've not included your queue list mechanism because this wasn't a part of your question... but it shouldn't be too tough to implement my example into your project - good luck.
.lift {
position: absolute;
transform: rotate(90deg);
bottom: 10%;
left: 30%;
transition-duration: 2s;
}
.flrfour {
position: absolute;
bottom: 85%;
left: 5%;
}
.flrthree {
position: absolute;
bottom: 60%;
left: 5%;
}
.flrtwo {
position: absolute;
bottom: 35%;
left: 5%;
}
.flrone {
position: absolute;
bottom: 10%;
left: 5%;
}
.buttons {
position: absolute;
bottom: 5px;
left: 50%;
}
<span class="flrfour"> floor 4 </span>
<span class="flrthree"> floor 3 </span>
<span class="flrtwo"> floor 2 </span>
<span class="flrone"> floor 1 </span>
<span id="lft" class="lift">lift</span>
<div class="buttons"><button onclick="document.getElementById('lft').style.bottom = '10%';">1</button><button onclick="document.getElementById('lft').style.bottom = '35%';">2</button><button onclick="document.getElementById('lft').style.bottom = '60%';">3</button><button
onclick="document.getElementById('lft').style.bottom = '85%';">4</button>
</div>
I created a div element called main-middle-column-container in my HTML and styled it with CSS. Basically, main-middle-column-container will create a twitter-like message box that will have a name, date/time, and the message.
I want to reuse main-middle-column-container and all the code inside of it with jQuery so that when new data comes in, it will use a fresh main-middle-column-container as a template to add in the new values (like how twitter would work). When new data comes in, #username, date/time, and This is a random message. #random will be replaced with the incoming data or leave the elements empty and have the new data fill it in.
I thought about using $('.main-middle-column-container').clone().appendTo('.main-middle-column-wrapper'); but that will keep double cloning it (1 box -> 2 box -> 4 box -> 8 box...) instead of cloning it once. I also have an issue of getting rid of main-middle-column-container before I receive any data because I don't want an empty box on the website I am trying to create. I want main-middle-column-container to be created right when I get some kind of data/message.
CSS and HTML (message box)
.main-middle-column-wrapper{
display: flex;
flex-direction: column;
width: 49%;
}
.main-middle-column-container{
width: 100%;
}
.main-middle-column{
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
height: auto;
width: 100%;
background-color: white;
padding: 9px 12px;
z-index: -2;
box-shadow: 0 0 2px 0 lightgray;
position: relative;
}
.main-middle-column:hover{
background-color: hsl(200, 23%, 96%);
}
.tweet-pic-wrapper{
position: absolute;
top: 5px;
}
.tweet-pic-container{
position: relative;
height: 48px;
width: 48px;
border: 3px solid transparent;
border-radius: 100%;
overflow: hidden;
z-index: 1;
display: inline-block;
}
.tweet-pic{
position: absolute;
margin: 0 auto;
height: 100%;
left: -6px;
width: auto;
}
.title-account-time{
margin-left: 55px;
}
.msg-title{
font-weight: bold;
}
.msg-acc-name{
color: #657786;
}
.msg-acc-name:hover{
cursor: pointer;
}
.msg-date{
color: #657786;
margin-top: 1px;
}
.tweet-msg{
margin-left: 55px;
margin-top: 5px;
}
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">My Twitter</span>
<span class="msg-acc-name">#username</span>
<div class="msg-date">date/time</div>
</div>
<div class="tweet-msg">
This is a random message. #random
</div>
</div>
</div>
</div>
I think i have a solution for you, you can create a 'template' and retrieve that template with jquery.
If you put this in your main html file
<script id="hidden-template" type="text/x-custom-template">
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">My Twitter</span>
<span class="msg-acc-name">#username</span>
<div class="msg-date">date/time</div>
</div>
<div class="tweet-msg">
this is a story all about how my life got flipped turned upside down and id like to take a minute and just sit right there id like to tell you how i became a prince in a town called belair.
</div>
</div>
</div>
</div>
</script>
You can get the content with jquery like this
var template = $('#hidden-template').html();
Now you have your html 'template' in your javascipt, now your can create more than one of these elements.
$('#target').append(template);
Or you can use a better/simpler method with plain javascript
const card = ({ img_alt, img_src, title, username, date, msg }) => `
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="${img_src}" class="tweet-pic" alt="${img_alt}">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">${title}</span>
<span class="msg-acc-name">#${username}</span>
<div class="msg-date">${date}</div>
</div>
<div class="tweet-msg">${msg}</div>
</div>
</div>
</div>
`;
You can use this as a function to create your elements dynamically with all kinds of data.
Create a function that returns a Template Literal with the desired HTML markup structure. Map your tweets and insert them into a target parent:
const tweets = [
{
_id: 321,
pic: "https://placehold.it/80x80/0bf",
title: "My Twitter",
name: "#username",
date: "2020-01-18",
msg: "this is a story"
},
{
_id: 231,
pic: "https://placehold.it/80x80/f0b",
title: "My alter Twitter",
name: "#user",
date: "2020-01-19",
msg: "Again, another story"
}
];
const newTweet = tweet => `<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="${tweet.pic}" class="tweet-pic" alt="${tweet.title}">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">${tweet.title}</span>
<span class="msg-acc-name">${tweet.name}</span>
<div class="msg-date">${tweet.date}</div>
</div>
<div class="tweet-msg">${tweet.msg}</div>
</div>`;
const populateNewTweets = (tweets, parent) => {
if (!tweets.length) return;
$('<div>', {
class: 'main-middle-column-container',
appendTo: parent,
append: tweets.map(newTweet)
});
};
populateNewTweets(tweets, '.main-middle-column-wrapper');
.main-middle-column-wrapper{
display: flex;
flex-direction: column;
width: 49%;
}
.main-middle-column-container{
width: 100%;
}
.main-middle-column{
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
height: auto;
width: 100%;
background-color: white;
padding: 9px 12px;
z-index: -2;
box-shadow: 0 0 2px 0 lightgray;
position: relative;
}
.main-middle-column:hover{
background-color: hsl(200, 23%, 96%);
}
.tweet-pic-wrapper{
position: absolute;
top: 5px;
}
.tweet-pic-container{
position: relative;
height: 48px;
width: 48px;
border: 3px solid transparent;
border-radius: 100%;
overflow: hidden;
z-index: 1;
display: inline-block;
}
.tweet-pic{
position: absolute;
margin: 0 auto;
height: 100%;
left: -6px;
width: auto;
}
.title-account-time{
margin-left: 55px;
}
.msg-title{
font-weight: bold;
}
.msg-acc-name{
color: #657786;
}
.msg-acc-name:hover{
cursor: pointer;
}
.msg-date{
color: #657786;
margin-top: 1px;
}
.tweet-msg{
margin-left: 55px;
margin-top: 5px;
}
<div class="main-middle-column-wrapper"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
The best solution to this would be to use some kind of templating engine, for example Mustache. If that however is out of the question, the solution to your problem would be something like this:
jQuery(document).ready(function() {
/* this should store the container templates clone in a variable */
mainMiddleContainerTemplate = jQuery(".main-middle-column-container").get(0).clone();
/* this should remove every main middle container from the view, in case
you have multiple containers that are not templates, consider adding
an additional class to your template container */
jQuery(".main-middle-column-container").remove();
});
function addNewContainer(containerData) {
var newContainer = mainMiddleContainerTemplate.clone();
/** add and replace all the data needed on the newContainer **/
newContainer.find('.message-title').html(containerData.title);
newContainer.find('.msg-acc-name').html(containerData.accountName);
....
jQuery(".main-middle-container-wrapper").append(newContainer);
}
But still, I would advice you, to use a templating engine for these kinds of stuff.
$('.main-middle-column-container').first().clone().appendTo('.main-middle-column-wrapper');
The key is to select only one element to be cloned. First is as good as any other.
I am trying to make the home div disappear and the about page appear but for some reason I can't get it to work. it is for a navigation bar and if I can get one working I can get them all so pleas help. I need home to disappear when I press the about paragraph and make the about div appear. I hope someone can help me I have googled a lot and it just won't work.
// page movement
function goA() {
document.getElementsByClassName("home").style.display = "none";
document.getElementsByClassName("about").style.display = "block";
}
.home {
background: #4f4f4f;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
}
.backgroundpic {
background-image: url("http://cdn.wallpapersafari.com/58/58/hlVdYW.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 93.7%;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
}
.about {
font-family: Open sans;
color: #fff;
font-size: 150%;
text-align: left;
display: inline-block;
cursor: default;
}
.about a {
text-decoration: none;
color: #fff;
border-bottom: 2px solid rgba(225, 225, 225, .7);
}
.about {
font-family: Open sans;
color: #fff;
font-size: 150%;
cursor: default;
position: relative;
padding: 0;
margin-left: 50%;
margin-right: 10%;
margin-top: 18.4%;
text-align: left;
display: none;
}
<!-- home div -->
<div class="home">
<div class="backgroundpic">
<div class="picgradiant">
<!-- navigation button -->
<div class="navigation">
<div class="navloc">
<p class="loc" onclick="goW()">WebDesign</p>
<p class="loc" onclick="goGr()">Photography</p>
<p class="loc" onclick="goS()">SketchUp</p>
<p class="loc" onclick="goSh()">Photoshop</p>
<p class="loc" onclick="goA()">About</p>
<p class="loc" onclick="goH()">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!-- text about myself -->
<div class="totalheader">
<div class="headtext">
<p class="header1">Sup, I'm Lars.</p>
<p class="text1">I do things!</p>
</div>
<p class="buttonhead">click to lear more</p>
</div>
</div>
</div>
</div>
<!-- about div -->
<div class="about">
<p>I like to explore different programs and try out as many things as I can. I do this so I can make an informed, good and fun career choice! A lot of projects start with me and my friend talking and getting an idea. Eventually we try to make it happen,
but sometimes help altogether and sometimes us work together. my goal at the moment is the become a game developer, but I am also interested in game design and internet security. I am not sure what the future holds for me, but in the end, I hope that
I'll have a fun job. If you want more info you can contact me at: Larsmulleneers#hotmail.nl </p>
Using
document.getElementsByClassName
returns an array not element so you can't change the element without the index number
try this
document.getElementsByClassName('home')[0].style.display = 'none';
document.getElementsByClassName('about')[0].style.display = 'block'
There can be more than one element using the same className and document.getElementsByClassName return more than one results which is an array.
Either you can access the very first element or use id to make them unique.
Check the example below which I created for you:
#home {
background: #4f4f4f;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
}
.backgroundpic {
background-image: url("http://cdn.wallpapersafari.com/58/58/hlVdYW.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 93.7%;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
}
<body>
<li onclick="aoG()">Home</li>
<li onclick="goA()">About</li>
<!-- home div -->
<div id="home">
<div class="backgroundpic">
<div class="picgradiant">
<!-- navigation button -->
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc" onclick="goW()">WebDesign</p>
<p class="loc" onclick="goGr()">Photography</p>
<p class="loc" onclick="goS()">SketchUp</p>
<p class="loc" onclick="goSh()">Photoshop</p>
<p class="loc" onclick="goA()">About</p>
<p class="loc" onclick="goH()">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!-- text about myself -->
<div class="totalheader">
<div class="headtext">
<p class="header1">Sup, I'm Lars.</p>
<p class="text1">I do things!</p>
</div>
<p class="buttonhead">click to lear more</p>
</div>
</div>
</div>
</div>
<!-- about div -->
<div id="about">
<p>I like to explore different programs and try out as many things as I can. I do this so I can make an informed, good and fun career choice! A lot of projects start with me and my friend talking and getting an idea. Eventually we try to make it happen,
but sometimes help altogether and sometimes us work together. my goal at the moment is the become a game developer, but I am also interested in game design and internet security. I am not sure what the future holds for me, but in the end, I hope
that I'll have a fun job. If you want more info you can contact me at: Larsmulleneers#hotmail.nl </p>
</div>
<script>
function goA(){
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "block";
}
function aoG(){
document.getElementById("home").style.display = "block";
document.getElementById("about").style.display = "none";
}
</script>
</body>
I am trying to use links to scroll the content within a div.
HTML is here:
<header>
<div class="wrapper">
<img src="/img/header.jpg" alt="Ace Land Surveying">
</div>
<nav>
<div class="wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Types of Surveys</li>
<li>About Us</li>
<li>Links</li>
<li>Request a Survey</li>
<li>Past Projects</li>
<li>Contact</li>
<li>SOQ</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper">
<div class="content">
<div class="column left">
<ul class="survey-type-list">
<li><h2>CLICK HERE</h2></li>
<li><h2>CLICK HERE</h2></li>
<li><h2>CLICK HERE</h2></li>
</ul>
</div>
<div class="column right" id="survey-column">
<div class="survey-type" id="type1">
<p> ... long text ... </p>
</div>
<div class="survey-type" id="type2">
<p> ... long text ... </p>
</div>
<div class="survey-type" id="type3">
<p> ... long text ... </p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-top">
<div class="wrapper"></div>
</div>
</footer>
and the CSS:
header {
float: left;
width: 100%;
height: 200px;
}
.wrapper {
width: 90%;
margin: auto;
}
.content {
float: left;
width: 100%;
padding: 20px;
background: #02274b;
}
.column {
min-height: 500px;
padding: 20px;
border-radius: 20px;
color: #fff;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), transparent);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
}
.column.left {
float: left;
width: 20%;
}
.column.right {
float: right;
width: 60%;
}
.survey-type-list li {
margin: 0 0 4px 0;
list-style: none;
}
.survey-type-list h2 {
font-size: 13px;
}
#survey-column {
overflow: hidden;
height: 460px;
}
.survey-type {
float: left;
width: 100%;
height: 460px;
}
The problem is that the entire page moves with the content inside the div.
Here is a fiddle:
http://jsfiddle.net/q8a1s5wj/8/
I tried several other threads here but none could solve my problem.
How can I prevent the whole page from scrolling and just scroll inside the right column with my anchor links?
I want to be able to click the link in the left column and see the right column scroll but not the move the entire page.
Fiddle
Some minor adaptations to the CSS - not doing this gave the wrong element offset :
#survey-column {
position: relative;
}
This one's just so the last div can scroll to the top completely :
.survey-type {
height: 520px;
}
And a bit of script to make it work :
$(function() {
$('.column.left a').click(function() {
var goal = $(this.hash).position().top-20,
aim = goal+$('#survey-column').scrollTop();
$('#survey-column').scrollTop(aim);
return false;
});
});
The 20 pixels deduction of goal is just done to keep the same top padding as was started with...
you can add position as fixed on top div element, i have checked your code on jsfiddle and added position style attribute in wrapper div element
<div class="wrapper" style="position:fixed; margin-top:10px">
just add this
.stop-scrolling {
height: 100%;
overflow: hidden;
}
this class to your body tag.
Reference: How to disable scrolling temporarily?
Updated Fiddle: http://jsfiddle.net/q8a1s5wj/2/
I'm trying to create a design with small clickable div boxes, that once clicked they flip by 180° and show content. Content which you can interact with: like clicking links, copy text or change the content with the use of more buttons.
I've managed to accomplish this, but my question follows: Is there a better way for this?
Found this website of a basic example
But being CSS based the content on the other side isn't interactable.
This is the code:
HTML
<div id="saos">
<div id="pg1" style="display:none;">
<blockquote>Page1</blockquote><br>
Yay content.
</div>
<div id="pg2" style="display:none;">
<blockquote>Page2</blockquote><br>
More content.
</div>
<div class="x" style="display:none;" onclick="closePage()">
<p>X</p>
</div>
<div id="2" class="an2 start startbak" onclick="openPage()">
<p class="sp">Click!</p>
</div>
<div id="cont" style="display:none;">
<p class="sp">Click!</p>
</div>
</div>
CSS
.write {
position: absolute;
width: 100px;
height: 50px;
background: #0055ff;
-webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
left: 10px;
text-align: center;
font-family: Verdana;
}
.write:hover {
-webkit-transform: perspective(600px)scale(1.2);
-moz-transform: perspective(600px)scale(1.2);
}
.write p {
color: #002164;
text-align: center;
margin-top: 10px;
font-size: 22px;
}
.an {
-webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
}
.an2 {
-webkit-transition: all .5s ease;
}
.page {
background-color: rgba(17, 17, 17, .8);
position: absolute;
left: 120px;
border: 2px solid #252525;
height: 330px;
width: 530px;
overflow: auto;
font-size: 14px;
color: #818181;
}
.start {
text-align: center;
font-family: Verdana;
position: absolute;
top: 150px;
left: 290px;
height: 120px;
width: 120px;
-webkit-transform: perspective(600px)rotateY(180deg)translateZ(-10px);
-moz-transform: perspective(600px)rotateY(180deg);
}
.start:hover {
background-color: #0055ff;
cursor: pointer;
}
.startbak {
background-color: #0036a3;
}
.mainbak {
background: #252525;
}
.sp {
color: #002164;
margin-top: 43px;
font-size: 30px;
-webkit-transform: rotateY(180deg)rotateZ(-45deg)translateZ(-10px);
-moz-transform: rotateY(180deg)rotateZ(-45deg);
}
.frame {
top: 0px;
left: 0px;
position: absolute;
width: 751px;
height: 452px;
-webkit-transform: perspective(600px)rotateY(0deg);
-moz-transform: perspective(600px)rotateY(0deg);
}
.x {
position: absolute;
left: 700px;
height: 18px;
width: 45px;
background-color: #c75050;
color: #fff;
display: table;
text-align: center;
font-size: 10px;
font-family: Verdana;
z-index: 2;
}
.x:hover {
background-color: #e04343;
cursor: default;
}
.x:active {
background-color: #993d3d;
}
.x p {
display: table-cell;
vertical-align: middle;
}
JavaScript
var htmlString = '<div class="f an write" style="top: 10px;" name="Home" onClick="openTab(\'pg1\',\'0\')"><p>Home</p></div>\n'
htmlString += '<div class="f an write" style="top: 65px;" name="About" onClick="openTab(\'pg2\',\'1\')"><p>About</p></div>\n'
function openTab(id, n){
for (var i=0;i<write.length;i++){
write[i].className = 'f an write';
write[i].style.top = i*55+10+'px';
name = write[i].getAttribute('name');
write[i].innerHTML = '<p>'+name+'</p>';
}
write[n].className = 'f an page';
write[n].style.top = '10px';
write[n].innerHTML= '<div class="ins">'+document.getElementById(id).innerHTML+'</div>';
}
var id2 = document.getElementById('2'),
x = document.getElementsByClassName('x')[0];
function openPage(){
id2.className = 'an2 frame mainbak';
setTimeout(function() {
id2.className = 'an2 frame mainbak'
id2.setAttribute('onclick','')
document.getElementById('2').innerHTML=htmlString
}, 150);
setTimeout(function() {
x.style.display='';
}, 600);
}
function closePage(){
id2.className = 'an2 start mainbak';
setTimeout(function() {
id2.className = 'an2 start startbak'
id2.setAttribute('onclick','openPage()')
document.getElementById('2').innerHTML=document.getElementById('cont2').innerHTML
}, 150);
x.style.display='none';
}
Also made a JSFiddle but it doesn't seem to work..
While on my browser does.
It should be possible to do this with only a couple of lines of Javascript. Rich Bradshaw's example that you posted was an excellent starting point.
Rather than starting the flip on hover (via css selectors) I added a couple of lines of Javascript - actually jQuery, but plain JS would work - to add the relevant class on click. It works really nicely...
See jsFiddle Demo
I also managed to get the back face clickable (as in that demo) so it should meet all of your needs.
By that method the HTML is reduced to:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://lorempixel.com/450/281/" />
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
<p>Including interactive HTML like
links</p>
</div>
</div>
</div>
And the Javascript is just:
$('#f1_container').click(function() {
$('#f1_container').addClass('clicked');
});