So I'm having trouble toggling this switch to change the background color. Im not sure how to get it to remove the CSS that it applies to the document. I want it to toggle between to different colored backgrounds.
Here's my code:
<!Doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<label class="switch"><input id="input" type="checkbox" /><div></div></label>
</div>
<footer>
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script type="text/javascript" src="js.js"></script>
</footer>
</body>
</html>
The Styles:
html {
background: #878476;
}
.container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
height: 40px;
margin: auto;
text-align: center;
}
.switch input {
position: absolute;
opacity: 0;
}
.switch {
display: inline-block;
font-size: 20px; /* 1 */
height: 1em;
width: 2em;
background: #BDB9A6;
border-radius: 1em;
}
.switch div {
height: 1em;
width: 1em;
border-radius: 1em;
background: #FFF;
box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
transition: all 300ms;
transition: all 300ms;
transition: all 300ms;
}
.switch input:checked + div {
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
And the JS:
$(document).ready(function() {
console.log( "Coffee Isn't strong enough for me to remember how to toggle the OnClick" );
$(".switch").on("click", function() {
$("html").css("background", "blue");
});
});
You can use toggle class here is link for more information http://api.jquery.com/toggleclass/
$("#input").on("click", function() {
$("html").toggleClass("bck-change");
});
And also i've modified your code pls refer: https://jsfiddle.net/eLgqe2ya/
Related
I have question, I wanted reverse animation showMenuList (this is pink background), but this not working, where is the mistake? I tried paused, and so many method but this not working, please help
I know that this is mostly code but I don't know what else to write. Find my code below and here a Codepen link.
const menuToggler = document.querySelector(".toggler");
const menuTogglerHamburger = document.querySelector(".toggler .hamburger");
menuToggler.addEventListener("click", function () {
//checking if there is a class animationToggler
if (menuTogglerHamburger.classList.contains("animationToggler")) {
//restart animation rotate
menuTogglerHamburger.classList.remove("animationToggler");
void menuTogglerHamburger.offsetWidth;
menuTogglerHamburger.classList.add("animationToggler");
}
menuTogglerHamburger.classList.add("animationToggler");
menuToggler.classList.toggle("show");
menuToggler.classList.contains("show")
? showMenuList(true)
: showMenuList(false);
setTimeout(() => {
//animation line on the cross
menuTogglerHamburger.classList.toggle("active");
}, 200);
});
//---------------------- Show menu list ----------------------//
const showMenuList = (e) => {
console.log(e);
const showMenuTl = gsap.timeline({ pause: true });
e ? showMenuTl.play() : showMenuTl.reverse();
showMenuTl
.to(".nav-menu", 0.8, { css: { top: "50%" } })
.to(".nav-menu", 0.4, { css: { width: "140vw", height: "140vw" } });
};
body {
overflow: hidden;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: space-around;
padding-top: 1em;
}
.toggler {
display: flex;
align-items: center;
cursor: pointer;
}
.animationToggler {
animation: animationTogglerMenu .8s ease;
}
.toggler p {
margin: 0;
text-transform: uppercase;
font-size: 1.65rem;
margin: 0 0 0 10px;
z-index: 3;
}
.hamburger {
z-index: 3;
}
.hamburger .line {
height: 4px;
width: 2.5em;
background: #000;
margin: .45em 0;
border-radius: 50px;
transition: .3s;
}
.active .one {
transform: rotate(45deg) translateY(15px);
}
.active .two {
background-color: transparent;
transition: none;
}
.active .three {
transform: rotate(-45deg) translateY(-15px);
}
.nav-menu {
position: absolute;
top: -100%;
left: 50%;
transform: translate(-50%, -50%);
width: 3em;
height: 3em;
background-color: rgb(255, 117, 117);
border-radius: 50%;
/* opacity: 0.4; */
z-index: 2;
}
.nav-menu ul {
display: none;
}
#keyframes animationTogglerMenu {
100% {
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="toggler">
<div class="hamburger">
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
</div>
<p>Menu</p>
</div>
<div class="nav-menu">
<ul>
<li>Home</li>
<li>Projekty</li>
<li>O nas</li>
<li>Kontakt</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
One issue with your code is you need to pass paused: true instead of pause:true to the timeline function.
One way you could improve your code (in my opinion) is to move the creation of your timeline object to the top level of your code block. Like so...
const menuToggler = document.querySelector(".toggler");
const menuTogglerHamburger = document.querySelector(".toggler .hamburger");
// Add it here -----------------------
const showMenuTl = gsap.timeline({ paused: true });
showMenuTl
.to(".nav-menu", 0.8, { css: { top: "50%" } })
.to(".nav-menu", 0.4, { css: { width: "140vw", height: "140vw" } });
Then you can get rid of the showMenuList function and call play and reverse directly.
menuToggler.classList.toggle("show");
menuToggler.classList.contains("show")
? showMenuTl.play()
: showMenuTl.reverse()
First, it should be { paused: true }, not { pause: true }, as #jessegavin said. Second, at the point where the click happens, you should have already set up the animation, which means the timeline definition should be at the top, outside of showMenuList. Third, you could simplify your code (See the JavaScript part, it's way more short, I slightly modified the CSS). Like so:
const menuToggler = document.querySelector(".toggler");
const showMenuTl = gsap.timeline({ paused: true });
showMenuTl
.to(".nav-menu", 0.8, { css: { top: "50%" } })
.to(".nav-menu", 0.4, { css: { width: "140vw", height: "140vw" } });
menuToggler.addEventListener("click", function () {
if (menuToggler.classList.contains("active")) {
menuToggler.classList.remove("active");
showMenuTl.reverse();
} else {
menuToggler.classList.add("active");
showMenuTl.play();
}
});
body {
overflow: hidden;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: space-around;
padding-top: 1em;
}
.toggler {
display: flex;
align-items: center;
cursor: pointer;
}
.toggler p {
margin: 0;
text-transform: uppercase;
font-size: 1.65rem;
margin: 0 0 0 10px;
z-index: 3;
}
.hamburger {
z-index: 3;
}
.hamburger .line {
height: 4px;
width: 2.5em;
background: #000;
margin: 0.45em 0;
border-radius: 50px;
transition: 0.3s;
}
.active .hamburger {
animation: animationTogglerMenu 0.8s ease;
}
.active .one {
transform: rotate(45deg) translateY(15px);
}
.active .two {
background-color: transparent;
transition: none;
}
.active .three {
transform: rotate(-45deg) translateY(-15px);
}
.nav-menu {
position: absolute;
top: -100%;
left: 50%;
transform: translate(-50%, -50%);
width: 3em;
height: 3em;
background-color: rgb(255, 117, 117);
border-radius: 50%;
/* opacity: 0.4; */
z-index: 2;
}
.nav-menu ul {
display: none;
}
#keyframes animationTogglerMenu {
100% {
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="toggler">
<div class="hamburger">
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
</div>
<p>Menu</p>
</div>
<div class="nav-menu">
<ul>
<li>Home</li>
<li>Projekty</li>
<li>O nas</li>
<li>Kontakt</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
One way you could approach this is creating another timeline. Which would be annoying to deal with if you added more keyframes. Another way you could do this is by adding a starting keyframe and then everything should run smoothly as shown below.
showMenuTl
.to(".nav-menu", 1, { css: { width: "3rem", height: "3rem", top: "-100%" } })
.to(".nav-menu", 0.8, { css: { width: "3rem", height: "3rem", top: "50%" } })
.to(".nav-menu", 0.4, { css: { width: "140vw", height: "140vw", top: "50%" } });
e ? showMenuTl.play() : showMenuTl.reverse(0);
So i have this animation where there is this a h1 and when i scroll down the image zoom out and the h1 follow the image animation, my problem is that when im on mobile or i resize the screen to tablet or mobile i want the animation on scroll to not activate.
i already tried to use the resize function or if screen is > than but it doesn't work i'm using scrollMagic cdn.
animation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="contenet">
<div class="overflow-wrap">
<header id="header">
<img src="./Asset/Img/1.png" loading="lazy" alt="" id="hero-ui">
<div class="container container--hero">
<div class="hero__header">
<h1 class="hero-heading">The Webflow Expert.</h1>
</div>
</div>
</header>
</div>
<section class="section section--manifest">
<div class="section-header section-header--intro">
<h2 class="fluid-gradient-heading fluid-gradient-heading--hero cc-en">World-class Webflow<br>sites for ambitious<br>companies.</h2>
</div>
</section>
<script src="./JS/app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
*::-webkit-scrollbar {
display: none;
}
body {
background-color: #1d1d1f;
color: white;
font-family: Inter, sans-serif;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
#header {
display: flex;
height: 100vh;
align-items: center;
position: sticky;
backface-visibility: hidden;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform-style: preserve-3d;
}
.overflow-wrap {
overflow: hidden;
height: 100%;
}
#hero-ui {
position: relative;
left: 50%;
z-index: 1;
width: 16.9em;
max-width: none;
margin-top: 3.2em;
margin-left: -8.45em;
font-size: 10vw;
opacity: 0;
}
.hero-heading {
will-change: transform, opacity;
animation: fadeIn 0.8s ease;
animation-iteration-count: 1;
animation-fill-mode: backwards;
animation-delay: 0.5s;
font-size: 92px;
}
.container.container--hero {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: auto;
display: flex;
height: 100vh;
max-width: none;
padding-top: 100px;
padding-bottom: 100px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 2;
}
.section.section--manifest {
padding-top: 100px;
padding-bottom: 160px;
}
.section-header.section-header--intro {
position: relative;
max-width: 1050px;
margin-bottom: 0;
}
.section-header {
width: 90%;
max-width: 980px;
margin-right: auto;
margin-bottom: 142px;
margin-left: auto;
text-align: left;
}
.fluid-gradient-heading.fluid-gradient-heading--hero.cc-en {
font-size: 103px;
}
.fluid-gradient-heading.fluid-gradient-heading--hero {
margin-right: auto;
margin-left: auto;
line-height: 1.05;
text-align: center;
}
.fluid-gradient-heading {
background: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-animation: intro-gradient 10s infinite ease both;
-moz-animation: intro-gradient 10s infinite ease both;
animation: intro-gradient 10s infinite ease both;
}
.fluid-gradient-heading {
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 92px;
line-height: 1.1;
letter-spacing: -.045em;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 32px;
line-height: 36px;
font-weight: 600;
}
JAVASCRIPT
/*==================== zoom out image ====================*/
let controller = new ScrollMagic.Controller();
let zoomHeader = TweenMax.to("#header", 0.9, { opacity: 1, scale: 0.35, ease: Circ.EaseIn });
let headerZoom = new ScrollMagic.Scene({
triggerElement: "#header",
triggerHook: 0,
duration: "3000ms"
})
.setPin('#header')
.setClassToggle('#header')
.setTween(zoomHeader)
.addTo(controller);
/*==================== smooth link scrooling====================*/
let $root = $('html, body');
$('a[href^="#"]').click(function() {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
/*==================== Change opacity image ====================*/
$(window).scroll(function() {
let scrollTop = $(this).scrollTop();
$('#hero-ui').css({
opacity: function() {
let elementHeight = $(this).height();
return 1 - (elementHeight - scrollTop) / elementHeight;
}
});
});
In your scroll event listener you may check actual device width.
Then you can disable animation when it is mobile.
Smth like
$(window).scroll(function() {
if($(window).width() < 500) return
.....
}
You can apply the same check for click event.
Also it will be good if you handle resize/load events as well.
I'm working on a project for computer science where I have to make a website. For this, me and my partner wanted a modal with information about us. One of the requirements is that we make the site work on different platforms. This is where the problem lies. Opening the modal on my phone while having the phone standing up works fine, but when transitioning to landscape it breaks and it does not return to normal when I turn it back.
Here is a snippet of the html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Machine Learning</title>
<script src="scripts/embedHTML.js"></script>
<script src="scripts/popUp.js"></script>
<script src="scripts/underline.js"></script>
<script src="scripts/modal.js"></script>
<link rel="stylesheet" href="stylesheets/main.css" />
<link rel="stylesheet" href="stylesheets/about-us.css" />
<link rel="stylesheet" href="stylesheets/popup.css" />
<link rel="stylesheet" href="stylesheets/modal.css" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img id="logo" src="images/logo.png" alt="logo image"></img>
<h1 id="title">Machine Learning</h1>
</header>
<article id="about-tijmen" class="modal-data" embed-html="pages/Tijmen.html"></article>
<article id="about-marijn" class="modal-data" embed-html="pages/Marijn.html"></article>
<div id="glass-pane" class="glass-pane"></div>
<article id="modal" class="modal">
<button id="closeModalButton" onclick="toggleModal()">x</button>
<article id="modal-dialogue"></article>
</article>
<script>
embedHTML();
</script>
</body>
</html>
The CSS:
.modal-data
{
display: none;
}
.modal {
pointer-events: none;
opacity: 0;
position: fixed;
z-index: 1000;
background: red;
border-radius: 20px;
border: 2px solid black;
margin-top: 0px;
padding-bottom: 20px;
left: 50%;
top: 50%;
transition: opacity .25s linear, display .25s linear;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
box-shadow: 0 0 100px 10px black inset;
width: 80vw;
}
.modal.open
{
pointer-events: all;
opacity: 100;
}
.glass-pane
{
pointer-events: none;
transition: opacity .25s linear;
background: rgba(0, 102, 255, 0.5);
z-index: 110;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0;
}
.glass-pane.shown
{
pointer-events: all;
opacity: 1;
}
#closeModalButton {
position: absolute;
top: 0;
right: 0;
width: 40px;
line-height: 20px;
margin: 0;
border: 2px solid black;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-left-radius: 20px;
cursor: pointer;
font-size: 15px;
}
#modal-dialogue p {
color: rgb(250, 232, 235);
width: 90%;
margin: auto;
margin-top: 2%;
}
ol{
color: rgb(250, 232, 235);
display: table;
margin: 0 auto;
}
The javascript:
function toggleModal()
{
let modal = document.getElementById("modal");
let glass = document.getElementById("glass-pane")
if(modal.classList.contains("open"))
{
modal.classList.remove("open");
glass.classList.remove("shown");
}
else
{
modal.classList.add("open");
glass.classList.add("shown");
}
}
function setModalContent(id)
{
let dialogue = document.getElementById("modal-dialogue");
let data = document.getElementById(id);
dialogue.innerHTML = data.innerHTML;
}
and, of course, a video showing the problem.
https://youtu.be/s3bsN72-qYE
You can add css max-height and overflow-y to your modal content to give the content a scrollbar inside the modal and ensure the modal doesn't go outside the page.
This may need an #media query, eg
article {
overflow-y: auto;
}
#media screen (height:300px) {
article {
max-height: 200px;
}
}
#media screen (height:600px) {
article {
max-height: 400px;
}
}
or may be set better using relative height such as % or vh (reference)
article {
max-height: 75vh;
overflow-y: auto;
}
I have a switch icon purely designed in CSS. I got the design for switch from this page https://www.w3schools.com/howto/howto_css_switch.asp and some added modifications on the switch from this answer in stack overflow https://stackoverflow.com/a/39846603/5550284 .
This is how it looks like so far
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
Now I actually want to change the state of the switch using JavaScript based on the flag given by the back-end.
So this is what I do
if(response.data == "t"){
$('.switch-off').remove();
$('.switch-on').remove();
$('.toggle-slider').append('<span class="switch-on"></span>');
console.log("Prompt ON")
}
else if (response.data == "f") {
$('.switch-on').remove();
$('.switch-off').remove();
$('.toggle-slider').append('<span class="switch-off"></span>');
console.log("Prompt OFF")
}
Assume here response is an object sent by the back-end which has a field called data which contains the flag value t or f.
But it doesn't seem to do anything and using inspector in Firefox, I see the span elements randomly appearing and disappearing on toggle without any fixed behaviour. I suspect the CSS for the switch is somehow interfering with the state of the slider on the switch.
Can someone help me out with this problem?
Actually, I was just doing this last night on the same slider that you are.
the way to do it is
checked = ...; //boolean
$(slider).children("input").prop("checked",checked);
To check slider on/off, use
$(slider).children("input").is(":checked");
You have a hidden checkbox which toggles the switch.
So doing this will toggle it on:
$('#togBtn').prop('checked', true);
and off:
$('#togBtn').prop('checked', false);
EDIT: Added full code
So your full code would be:
if (response.data == "t") {
$('#togBtn').prop('checked', true);
}
else if (response.data == "f") {
$('#togBtn').prop('checked', false);
}
Please someone help me out on this I got stuck in my code. I'm putting my code complete below please have a look and please try to provide better solution.
<!DOCTYPE html>
<!--[if lte IE 7]><html id="ie" class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 8]><html id="ie8" class="no-js lt-ie10 lt-ie9" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 9]><html id="ie9" class="no-js lt-ie10" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<!-- <link rel="stylesheet" href="css/site.css" /> -->
<link href='https://fonts.googleapis.com/css?family=Exo:400,100,200,300,500,600,700,800,900|Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
body.ticketDetail {
margin: 0;
padding: 0;
color: #292929;
font: 400 14px "Exo",sans-serif;
}
.fixed-container {
position: fixed;
top: 0;
}
.main-container {
padding: 85px 30px 100px;
background: none;
}
.toggle-wrap {
position: fixed;
z-index: 9;
box-shadow: 3px 0px 5px #000;
height: 59px;
}
.toggle-wrap {
width: 100%;
background: #f3f3f3;
background: rgba(243,243,243,0.8);
filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
}
.container-right>div {
height: 175px;
border-left: 13px solid #bbc3c6;
background: #f4f4f4;
margin: 0 0 8px;
-webkit-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-moz-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-ms-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-o-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
transition: transform .35s ease-in-out, background 0.8s ease-in-out;
}
.e-stand-b {
border-left: 13px solid #f39c11 !important;
}
.e-stand-a {
border-left: 13px solid #f1c40f !important;
}
.n-stand-a {
border-left: 13px solid #3497db !important;
}
.n-stand-b {
border-left: 13px solid #297fb8 !important;
}
.s-stand-a {
border-left: 13px solid #dae0e0 !important;
}
.w-stand-a {
border-left: 13px solid #e74b3c !important;
}
.w-stand-b {
border-left: 13px solid #c1392b !important;
}
.container-right>div:before {
content: '';
display: table;
}
.container-right>div:after {
content: '';
display: table;
clear: both;
}
.container-right>div:hover {
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-ms-transform: scale(1.03);
-o-transform: scale(1.03);
transform: scale(1.03);
background: #000;
background: rgba(0,0,0,0.5);
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}
.main-container .container-fluid {
padding: 0;
position: relative;
}
.container-right-column {
float: right;
width: 100%;
}
.container-right {
margin-left: 650px;
position: relative;
}
.container-left {
position: relative;
float: left;
background: #f4f4f4;
text-align: center;
width: 630px;
margin-right: -100%;
height: 635px;
}
.container-left h2 {
color: #9C9A9A;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 35px 0 34px;
}
.container-left img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.container-left a {
position: absolute;
opacity: 0;
transition: opacity .5s ease-in;
outline: none;
}
a.e-stand-b {
top: 14%;
left: 12%;
z-index: 2;
width: 76%;
height: 8%;
}
a.e-stand-a {
top: 22%;
left: 20%;
z-index: 2;
width: 60%;
height: 8%;
}
a.n-stand-b {
top: 21%;
left: 4%;
z-index: 2;
width: 9%;
height: 60%;
}
a.n-stand-a {
top: 28%;
left: 13%;
z-index: 2;
width: 8%;
height: 47%;
}
a.s-stand-b {
top: 21%;
right: 4%;
z-index: 2;
width: 9%;
height: 60%;
}
a.s-stand-a {
top: 28%;
right: 13%;
z-index: 2;
width: 8%;
height: 47%;
}
a.w-stand-b {
bottom: 10%;
left: 12%;
z-index: 2;
width: 76%;
height: 8%;
}
a.w-stand-a {
bottom: 18%;
left: 18%;
z-index: 2;
width: 63%;
height: 8%;
}
</style>
</head>
<body class="ticketDetail">
<div class="toggle-wrap">
</div>
<div class="main-container">
<div class="container-fluid">
<div class="container-right-column">
<div class="container-right">
<div class="e-stand-a">
</div>
<div class="s-stand-a">
</div>
<div class="w-stand-a">
</div>
<div class="n-stand-a">
</div>
<div class="e-stand-b">
</div>
<div class="s-stand-b">
</div>
<div class="w-stand-b">
</div>
<div class="n-stand-b">
</div>
</div>
</div>
<div id="fixed-container">
<div class="container-left">
<h2>Stadium Name</h2>
<img src="images/goan-stadium-img.png" alt="stadium" usemap="#Stadium" id="#Stadium" />
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 765) {
$('#fixed-container').css('position', 'initial');
}
if (windowSize > 765) {
// ----------***********Ticket Detail Prepend method***********---------------
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
$('[class*="b-"]').removeClass(function(index, className) {
return (className.match(/(^|\s)b-\S+/g) || []).join(' ');
});
var stand_class= $(this).attr('class');
$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
$('div.'+stand_class).addClass('b-'+stand_class);
});
// ----------***********Ticket Detail Hover method***********---------------
$("div.e-stand-a, div.e-stand-b, div.s-stand-a, div.s-stand-b, div.w-stand-a, div.w-stand-b, div.n-stand-a, div.n-stand-b").mouseenter(function() {
var stand_class= $(this).attr('class');
stand_class = stand_class.split(' ');
$(this).addClass('b-'+stand_class[0]);
}).mouseleave(function() {
var stand_class= $(this).attr('class');
stand_class = stand_class.split(' ');
$(this).removeClass('b-'+stand_class[0]);
});
/*$('#floatingElement').followMe({ container: '.container-column-main' });*/
}
if (windowSize <= 765) {
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').attr('href', '#to-top');
// ----------***********Ticket Detail Prepend method***********---------------
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
$('[class*="bm-"]').removeClass(function(index, className) {
return (className.match(/(^|\s)bm-\S+/g) || []).join(' ');
});
var stand_class= $(this).attr('class');
$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
$('div.'+stand_class).addClass('bm-'+stand_class);
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
var sliderTop = $('.container-right').height(); // header size
console.log(sliderTop);
$(window).scroll(function () {
//var notAnimated = true;
var scrollTop = $(window).scrollTop();
//console.log(sliderTop + " " + scrollTop);
if (scrollTop > 300) {
$('#fixed-container').addClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '300px');
}
if (scrollTop > sliderTop) {
$('#fixed-container').removeClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '50px');
}
if (scrollTop < 300) {
$('#fixed-container').removeClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '50px');
}
});
</script>
</body>
</html>
Right now when I click on the left side stadium anyone of block so accordingly in the right side column it is sliding down at the top of the right container.
And after scrolling down the page I make the left container position fixed and right container scroll-able. And clicking on any stadium block the right container blocks showing on top of container only.
But what I really want that when I scroll down and then click on the left container stadium block, the right container blocks should be shown in visible window not at the top of the right container.
Please someone help me out it's really needy... And please let me know.
Thanks