CSS transition property is not working as expected in IE and Edge browsers. Here I have applied transition for span element, which is working properly in other browsers except for IE and Edge. Also tried -ms-transition property. Here are my code snippets. The switch-handle element transition not working in IE and Edge.
function handlers() {
var warpper = document.getElementsByClassName("switch-wrapper"),
child = warpper[0].children;
if (!child[1].classList.contains('active')) {
child[0].checked = true;
child[1].classList.add('active');
child[2].classList.add('active');
} else {
child[0].checked = false;
child[1].classList.remove('active');
child[2].classList.remove('active');
}
}
input[type=checkbox] {
width: 1px;
height: 1px;
opacity: 0;
position: absolute;
}
/*------------Wrapper CSS---------------*/
.switch-wrapper {
position: relative;
width: 70px;
cursor: pointer;
height: 22px;
}
/*------------Inner CSS---------------*/
.switch-inner {
height: 22px;
position: absolute;
transition: 0.6s;
border: 1px solid;
width: 70px;
overflow: hidden;
box-sizing: border-box;
}
/*------------ SwitchBar CSS---------------*/
.switch-on,
.switch-off {
position: absolute;
height: 20px;
width: 100%;
user-select: none;
transition: 0.6s;
line-height: 21px;
}
.switch-on {
left: -100%;
text-indent: 14px;
}
.switch-off {
text-indent: 30px;
left: 0;
}
/*------------ Handle CSS---------------*/
.switch-handle {
position: absolute;
height: 14px;
width: 14px;
margin: 3px;
background-color: #1b191e;
top: 1px;
left: 1px;
transition: 0.6s;
}
/*------------ Active CSS---------------*/
.switch-inner.active .switch-on {
background-color: aquamarine;
left: 0;
}
.switch-inner.active .switch-off {
left: 100%;
transition: 0.6s;
}
.switch-handle.active {
left: calc(100% - 21px);
transition: 0.6s;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body>
<h2>Switch</h2>
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<span class="switch-inner" onclick="handlers()">
<span class="switch-on">On</span>
<span class="switch-off">Off</span>
</span>
<span class="switch-handle" onclick="handlers()"></span>
</div>
</body>
</html>
This works in IE11 and Edge.
Only thing I noticed is in IE .switch-handle transition is not working. It is due to IE issues with calc and transition combination. Change calc() and it will work
Change
left: calc(100% - 21px);
to
left: 47px;
Related
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.
there is an api response in a website which can't be accessed outside this site requests. I want to access it response.
to do that I am trying iframe with code:-
html
<iframe id="myFrame" src="https://abrahamjuliot.github.io/creepjs" title="creepJS"></iframe>
css
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
Javascript
console.log(fingerprint);
it is basically behind a loading screen
:-
full html
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="loading.js"></script>
<link rel="stylesheet" href="loading.css" type="text/css" media="all" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Device Verification</title>
</head>
<body>
<iframe id="myFrame" src="https://abrahamjuliot.github.io/creepjs" title="creepJS"></iframe>
<div class="contents">
<div class="load-icon center">
<span></span>
<span></span>
<span></span>
</div>
<h3>Verifying your Device for Security Reasons before accessing your account</h3><div class="text-area">
<p>This process is automatic. Your browser will redirect you to your requested content shortly.
</div>
</p>
<div class="load-text-area">
<p> We request you to allow us upto 5 seconds.</p>
</div>
</div>
<div class ="last">
<p>Verification id is <mark class="purple-dark">41E78vF6
</mark></p></div>
</body>
</html>
Full css
body{
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
h3 {
padding-left: 2%;
padding-right: 2%;
padding-top: 8%;
color: black;
text-align: center;
font-family: roboto;
}
.contents {
margin-top: 30%;
}
.text-area {
text-align: center;
margin-left: 10%;
margin-right: 10%;
font-family: roboto;
margin-top: 4%;
}
.load-text-area{
margin-left: 3.5%;
font-family: roboto;
margin-top: 15%;
}
mark.purple-dark{
color: purple;
background-color: transparent;
}
.last{
margin-left: 3.5%;
font-family: roboto;
margin-top: 0.2%;
}
.load-icon {
height: 20px;
width: 100px;
}
.load-icon span {
position: absolute;
display: inline-block;
background: #222;
width: 20%;
height: 100%;
border-radius: 100px;
}
.load-icon span:nth-of-type(1) {
left: 0;
}
.load-icon span:nth-of-type(2) {
left: 40%;
}
.load-icon span:nth-of-type(3) {
right: 0;
}
/* Animation */
.load-icon span {
animation-name: loading;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.load-icon span:nth-of-type(2) {
animation-delay: .2s;
}
.load-icon span:nth-of-type(3) {
animation-delay: .4s;
}
/* Keyframes */
#keyframes loading {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* This isn't needed, just styling pen. */
.center {
position: absolute;
margin-left: 37%;
margin-top: 29%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
and full js
var fingerprint = document.getElementById('myFrame').contentWindow.document.body
console.log(fingerprint);
I am getting 2 error
which is :-
in the image Dom exception
and 2nd is
iframe logging error ' can't read property 'contentWindow' of null
my current goal is to get json api response:-
The api response I want to Capture and put it in a file
I was trying to create an animated hamburger nav menu. The functionality is simple. It will be in a fixed position & incorporate in a circle. When I click that circle the background will overlap the entire screen & nav links will be visible. I have used pseudo-class to create functionality. it works well, but a little mistake appeared. When I clicked the nav links the background should scale to 0. But it is nowhere can be done using CSS. So I used JS click event for it. It worked for the first try after that the menu keep scaled to 0 unit. I need to fix it so that the js click event functionality reset itself on every try. The link is given below.
codepen here
Code-
const navElement = document.querySelector('.navigation__nav');
const navBackground = document.querySelector('.navigation__background');
const navgationList = document.querySelectorAll('.navigation__item');
navgationList.forEach(function(items) {
let x = items;
items.addEventListener('click', closeNav);
function closeNav() {
navElement.style.transform = 'scale(0)';
navBackground.style.transform = 'scale(0)';
}
});
body {
background-color: cyan;
}
.navigation__checkbox {
display: none;
}
.navigation__button {
background-color: #fff;
height: 7rem;
width: 7rem;
position: fixed;
top: 6rem;
right: 6rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer;
}
#media only screen and (max-width: 56.25em) {
.navigation__button {
top: 4rem;
right: 4rem;
}
}
#media only screen and (max-width: 37.5em) {
.navigation__button {
top: 3rem;
right: 3rem;
}
}
.navigation__background {
height: 6rem;
width: 6rem;
border-radius: 50%;
position: fixed;
top: 6.5rem;
right: 6.5rem;
background-image: radial-gradient(#4ea5f7, #0400ff);
z-index: 1000;
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
#media only screen and (max-width: 56.25em) {
.navigation__background {
top: 4.5rem;
right: 4.5rem;
}
}
#media only screen and (max-width: 37.5em) {
.navigation__background {
top: 3.5rem;
right: 3.5rem;
}
}
.navigation__nav {
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1500;
opacity: 0;
width: 0;
transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navigation__list {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
width: 100%;
}
.navigation__item {
margin: 1rem;
}
.navigation__link:link,
.navigation__link:visited {
display: inline-block;
font-size: 3rem;
font-weight: 300;
padding: 1rem 2rem;
color: #fff;
text-decoration: none;
text-transform: uppercase;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
background-size: 220%;
transition: all .4s;
}
.navigation__link:link span,
.navigation__link:visited span {
margin-right: 1.5rem;
display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
background-position: 100%;
color: #0400ff;
transform: translateX(1rem);
}
.navigation__checkbox:checked~.navigation__background {
transform: scale(80);
}
.navigation__checkbox:checked~.navigation__nav {
opacity: 1;
width: 100%;
}
.navigation__icon {
position: relative;
margin-top: 3.5rem;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
width: 3rem;
height: 2px;
background-color: #333;
display: inline-block;
}
.navigation__icon::before,
.navigation__icon::after {
content: "";
position: absolute;
left: 0;
transition: all .2s;
}
.navigation__icon::before {
top: -.8rem;
}
.navigation__icon::after {
top: .8rem;
}
.navigation__button:hover .navigation__icon::before {
top: -1rem;
}
.navigation__button:hover .navigation__icon::after {
top: 1rem;
}
.navigation__checkbox:checked+.navigation__button .navigation__icon {
background-color: transparent;
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
top: 0;
transform: rotate(135deg);
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
top: 0;
transform: rotate(-135deg);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
</head>
<body>
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
<div class="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item"><span>01</span> Our Works</li>
<li class="navigation__item"><span>02</span> Features</li>
<li class="navigation__item"><span>03</span> Our Services</li>
<li class="navigation__item"><span>04</span> Blogs</li>
<li class="navigation__item"><span>05</span> Contact Us</li>
<li class="navigation__item"><span>06</span> Know About Author</li>
</ul>
</nav>
</div>
</body>
</html>
[p.s.- comment out the js code first to see the working CSS.]
Although this is for practices hence any help will be a big help for me to understand js and dom.
I reworked a bit your closeNav function in order to get what you want working.
function closeNav(){
navElement.style.transform = 'scale(0)';
navBackground.style.transform = 'scale(0)';
// setTimeout will be useful for resetting our elements once they
// reached scale(0)
setTimeout(() => {
// You can check or uncheck a checkbox in javascript using .checked,
// here in order to set the styles back to normal.
document.querySelector('.navigation__checkbox').checked = false;
// Wait a bit more that the elements have been reset to remove the
// styles given in JS above.
setTimeout(() => {
navElement.style = '';
navBackground.style = '';
}, 500);
}, 1000);
}
You'll need to rework the timeouts so that they exactly meet your transition duration !
The CSS already handles what happens when the checkbox isn't checked. This works fine for me.
function closeNav(){
document.querySelector('.navigation__checkbox').checked = false;
}
I have a nice list of CSS generated cards. They contain icons and text and have a nice animation to expand once you tap on them, to reveal more icons and options. I hard coded the list and got it looking and behaving exactly the way I wanted.
Now, I have some JSON data on a database and I want to use that data to populate the list dynamically.
Problem: It works great, except the CSS animations no longer apply.
How can I fix this? Here's my code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
<link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/customFitFunctions.js"></script>
</head>
<body>
<!--APPEND CARDS-->
<ul id="cardList" class="cards">
</ul>
</body>
</html>
JavaScript:
// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
var workouts = snap.val();
for (var i = 0, len = workouts.length; i < len; i++) // Populate list.
{
$("#cardList").append("<li><div class='card transform'>\n\
<div class='cardInfo'><h3>" + workouts[i].title + "</h3><p>10 min.</p><a class='startIt' href='timer.html'>\n\
<img src='images/playIcon.png' width='70' alt='' /></a><div class='infoIcons'>\n\
<img src='images/thorso.png' width='48' alt='' /><img src='images/legs.png' width='28' alt='' />\n\
<img src='images/cardio.png' width='48' alt='' /></div><div class='timeIcon'>\n\
<img src='images/tenMinutes.png' width='66' alt='' /></div></div>\n\
<div class='disappear'><div class='playIt'><a class='playButton' href='timer.html'>\n\
<img src='images/playButtonUp.png' width='100' alt='' /><img src='images/playButtonDown.png' width='95' alt='' /></a>\n\
</div><div class='deleteIt'><a class='deleteButton' href='#'>\n\
<img src='images/thrashButtonUp.png' width='60' alt='' />\n\
<img src='images/thrashButtonDown.png' width='55' alt='' /></a></div><div class='modifyIt'>\n\
<a class='modifyButton' href='#'><img src='images/cogButtonUp.png' width='100' alt=''/>\n\
<img src='images/cogButtonDown.png' width='95' alt='' /></a></div></div></div></li>");
}
});
jQuery:
// Triggers CSS animation for cards.
$(".card").click(function()
{
$(this).toggleClass("transformActive");
$(".disappear", this).toggleClass("appear");
});
CSS:
/**
* ROUTINE CARDS SECTION
*
*/
/* Style cards and content */
.cards
{
position: absolute;
width: 100%;
top: 60px;
list-style: none;
text-decoration: none;
text-align: center;
z-index: -1;
}
.cards li
{
position: relative;
width: 100%;
padding-bottom: 10px;
}
.card
{
position: relative;
background-color: #ffffff;
height: 150px;
width: 100%;
left: -6%;
border-radius: 8px;
box-shadow: 2px 2px 2px #686868;
}
.transform
{
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.transformActive
{
background-color: #ffffff;
height: 260px;
width: 100%;
box-shadow: 6px 6px 6px #888888;
}
/* CARD CONTENT SECTION */
.cardInfo
{
position: relative;
margin: auto;
width: 95%;
height: 130px;
text-align: left;
}
.cardInfo h3
{
position: relative;
top: 5px;
}
.cardInfo p
{
position: relative;
color: black;
text-align: right;
top: -40px;
}
.startIt
{
position: absolute;
bottom: 0px;
}
.timeIcon
{
position: absolute;
bottom: 0px;
left: 78%;
}
.infoIcons
{
position: relative;
margin: auto;
top: -20px;
width: 52%;
height: 100px;
}
.infoIcons img
{
margin-left: 6px;
}
#holder
{
position: relative;
width: 100%;
height: 80px;
}
/* CARD ANIMATION */
.disappear
{
position: relative;
width: 95%;
height: 40%;
top: 8%;
margin: auto;
opacity: 0;
}
.appear
{
-webkit-animation: appearFade 1.2s ease forwards;
-moz-animation: appearFade 1.2s ease forwards;
-o-animation: appearFade 1.2s ease forwards;
-ms-animation: appearFade 1.2s ease forwards;
animation: appearFade 1.2s ease forwards;
}
#keyframes appearFade
{
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
/* CARD OPTIONS ICONS */
.playIt
{
position: absolute;
left: 0px;
}
.playButton img:last-child
{
display: none;
}
.playButton:hover img:first-child
{
display: none;
}
.playButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 3px;
top: 3px;
}
.deleteIt
{
position: relative;
margin: auto;
top: 25px;
}
.deleteButton img:last-child
{
display: none;
}
.deleteButton:hover img:first-child
{
display: none;
}
.deleteButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 2px;
top: 2px;
}
.modifyIt
{
position: absolute;
right: 0px;
top: 0px;
}
.modifyButton img:last-child
{
display: none;
}
.modifyButton:hover img:first-child
{
display: none;
}
.modifyButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 0px;
top: 3px;
}
Check if removing the </div> close tag in the <div class="card transform"> works well. I don't know, how are you using your css classes but looks like that the childs elements are outside the parent div container.
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