z-index issue whilst using scrollmagic

z-index issue whilst using scrollmagic - javascript

I'm using scrollmagic to display content in a project I'm currently working on. The design I have uses 'wedges' at the top and bottom of the containers. I have managed to achieve the result that I want using an svg for the 'wedge' and by sticking the first one to the top of the page with a z-index: 1;
As a result this layer overlays the rest of the content that subsequently follows. Please see the codepen below.
http://codepen.io/oliver_randell/pen/MyLNON
I really need to be able to click the buttons in the promo boxes!
Any help would be greatly appreciated.
<section id="intro" class="intro">
<div class="content">
<div class="row">
<div class="medium-10 medium-offset-1 large-8 large-offset-2 columns">
<div class="fade-trigger"></div>
<h2>Intro title</h2>
<h3>Intro Subtitle</h3>
<p>Some extract text</p>
</div>
</div>
</div>
</section>
<section class="promo-boxes">
<!-- THIS IS WHERE THE TOP WEDGE NEEDS TO SIT -->
<div id="pinned-trigger1">
<div id="pinned-element1">
<div class="top-wedge"></div>
</div>
</div>
<!-- BOX 1 -->
<div id="pinned-trigger2" class="promo box1 full-screen">
<div id="pinned-element2">
<div class="wrapper">
<div class="content">
<div class="img-container">
<div class="img" style="background-image: url('https://unsplash.it/800/800');"></div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-trigger4" class="promo box3">
<div class="content">
<div class="img-container">
<div class="img" style="backgroundimage:url('img-link.png');">
</div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button 2
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-element4">
<div class="bottom-wedge show-for-large"></div>
</div>
</div>
</section>
<section class="next-section full-screen">
<h2>this is the next section</h2>
</section>

So... I just added:
#pinned-trigger1 {
position-events: none;
}
And voila!!

Related

How to center a div with varying screen sizes?

I have a set of <div>s lineup horizontally in my container and I'm looking to center my Outer-Container <div> class with the rest of the code on my web page (Squarespace).
I've made a CodePen re-creating the page and I still can't seem to center my outer-container within the Main-content section with varying screen sizes.
Any help is greatly appreciated!
<section class="Main-content" data-content-field="main-content" id="yui_3_17_2_2_1507859188217_558">
<div class="sqs-layout sqs-grid-12 columns-12 sqs-frontend-overlay-editor-widget-host" data-type="page" data-updated-on="1507857777989" id="page-59cab354bebafb4216478596">
<div class="row sqs-row" id="yui_3_17_2_2_1507859188217_669">
<div class="col sqs-col-12 span-12" id="yui_3_17_2_2_1507859188217_668">
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_22_1507595367220_25824">
<div class="sqs-block-content">
<h1 align="center">Choose your subscription plan</h1>
</div>
</div>
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_12_1507852892558_4858">
<div class="sqs-block-content">
<h3 style="text-align:center;color:#0083f5;">Have a MyDietGoal Promotion Code?</h3>
</div>
</div>
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1507522278297_5479">
<div class="sqs-block-content">
<div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content; padding: 100px;">
<div class="container container1">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-green">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Novice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$4.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container2">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-blue">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Apprentice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$9.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" id="btn2" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container3">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-orange">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Advanced</font></h2>
</div>
<div class="w-price" style="cursor:default">
$14.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" id="btn3" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I visited your web page and inspected the page source. It seems like the padding: 100px in .outer-container is breaking the display. You have to add negative left margin like margin-left: -100px to reposition your div.
Anyway, you may want to refactor your code and move the image to a bigger parent div then apply the padding there.

jQuery show/hide methods arent working

Here is my codepen for you guys to play with.... CodePen.io
I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().
Any thoughts on this???
Update Added raw html link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="banner">
<p>tic-tac-toe</p>
<button id="play-again"> <i class="fa fa-repeat"></i></button>
</div>
<div class="board">
<div class="row" id="row-1">
<div class="col" id="col-1-1">
<div class="content"></div>
</div>
<div class="col" id="col-1-2">
<div class="content"></div>
</div>
<div class="col" id="col-1-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-2">
<div class="col" id="col-2-1">
<div class="content"></div>
</div>
<div class="col" id="col-2-2">
<div class="content"></div>
</div>
<div class="col" id="col-2-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-3">
<div class="col" id="col-3-1">
<div class="content"></div>
</div>
<div class="col" id="col-3-2">
<div class="content"></div>
</div>
<div class="col" id="col-3-3">
<div class="content"></div>
</div>
</div>
</div>
</div>
The issue is that you must place the button#play-again outside the p when i changed, it is working for me

Find out how many pixels between the start of two elements?

Consider the following HTML:
<div id="members" class="main">
<section class="top">
<!-- Other Content -->
</section>
<section class="listing">
<div class="holder container">
<div class="row">
<div class="members-main col-sm-12">
<div class="members-head row">
</div>
</div>
</div>
</div>
</section>
</div>
Is there a way in JavaScript or jQuery that I can find out the amount of pixels between the start of the #members element and the start of the .members-head element?

offset().top gives you the top position of elements.
var distance = $('.members-head').offset().top - $('#members').offset().top;
alert("Distance is : " + distance)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="members" class="main">
<section class="top">
Other Content
</section>
<section class="listing">
<div class="holder container">
<div class="row">
<div class="members-main col-sm-12">
<div class="members-head row">
fdgfdgfdgdfgdfs
</div>
</div>
</div>
</div>
</section>
</div>

Try
$('.members-head').offset().top - $('#members').offset().top
Jquery offset
If you have multiple .members-head elements inside the #members one (as I suspect), you could try $('.members-head:first'), or loop through them with .each and do $(this).offset().top - $('#members').offset().top

try this
you will get.
$('#members').offset().top - $('.members-head').offset().top

How do I prevent two divs from jumping around my webpage when it first loads?

Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>

If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}

How to wrap all next elements until?

I have following html:
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
What I am trying to achieve, is wrap each .menuItem and all next .submenuItem with .menuSet. Unhappily, the following js wraps the whole snippet instead of the set defined above.
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
For make my intention more understandable, below I post the desired result:
$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuSet">
<div class="menuItem">Domů</div>
</div>
<div class="menuSet">
<div class="menuItem">O nás</div>
</div>
<div class="menuSet">
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Projekční činnost</div>
</div>
<div class="menuSet">
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Kontakty</div>
</div>

As you are selecting all the menuItem's with class and than filtering from there, wrapAll will wrap your whole collection.
To solve this, one way would to be use $.each() and iterate through the menuItems and than wrap them.
$(".menuItem").each(function (index) {
$(this).nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
});
JSFiddle Demo.

Develop Reference

JavaScript is the programming language of the Web.

z-index issue whilst using scrollmagic - javascript

So... I just added: #pinned-trigger1 { position-events: none; } And voila!!

Related

How to center a div with varying screen sizes?

jQuery show/hide methods arent working

Find out how many pixels between the start of two elements?

How do I prevent two divs from jumping around my webpage when it first loads?

How to wrap all next elements until?

Categories

Resources