Created
June 25, 2015 21:43
-
-
Save arturmamedov/882184747abdbe64b6c2 to your computer and use it in GitHub Desktop.
Scroll Collapse and Fix
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Scroll and collapse box on view-pages of item */ | |
var st = 51; | |
function updatePersistBox() { | |
$(".persist-area").each(function() { | |
var el = $(this), | |
offset = el.offset(), | |
scrollTop = $(window).scrollTop() + st, | |
floatingBox = $(".floatingBox", this) | |
// && (scrollTop < offset.top + el.height()) | |
if ((scrollTop > offset.top)) { | |
floatingBox.parent().next().css('visibility' , 'hidden'); | |
if(floatingBox.hasClass('not-isset')){ | |
st = st + floatingBox.height() + 10; | |
} | |
floatingBox.show().addClass("isset").removeClass('not-isset'); | |
} else { | |
console.info(st); | |
floatingBox.parent().next().css('visibility' , 'visible'); | |
if(floatingBox.hasClass('isset')){ | |
st = st - floatingBox.height() - 10; | |
} | |
floatingBox.hide().addClass('not-isset').removeClass('isset'); | |
}; | |
}); | |
} | |
// DOM Ready | |
$(function() { | |
var persistBox; | |
$(".persist-area").each(function() { | |
persistBox = $(".persist-box", this); | |
persistBox.css("width", persistBox.width()).addClass("floatingBox"); | |
}); | |
$(window).scroll(updatePersistBox).trigger("scroll"); | |
}); | |
/* eND Scroll and collapse box on view-pages of item */ | |
// function for collapse a panel that go to fixed position on page item viwe (similar function are in prof-plugins with price value) | |
$(".toggleConteiner").on("click", ".toggleSwitcher", function(){ | |
var thisBox = $(this).parent(), pboxHeight = parseInt(thisBox.height()); | |
$(".toggleBox", thisBox).toggle(); | |
$(".toggleBox", thisBox).promise().done(function(){ | |
var nextHeight, boxHeight = parseInt(thisBox.height()) - pboxHeight, tboxHeight = pboxHeight - parseInt(thisBox.height()); | |
if(thisBox.hasClass('toggled')){ | |
if(thisBox.hasClass('persist-desc')){ | |
nextHeight = parseInt($(".persist-juicy").css('top')); | |
$(".persist-juicy").css('top', nextHeight - tboxHeight); | |
nextHeight = parseInt($(".persist-buy").css('top')); | |
$(".persist-buy").css('top', nextHeight - tboxHeight); | |
nextHeight = parseInt($(".persist-rating").css('top')); | |
$(".persist-rating").css('top', nextHeight - tboxHeight); | |
nextHeight = parseInt($(".persist-purposes").css('top')); | |
$(".persist-purposes").css('top', nextHeight - tboxHeight); | |
nextHeight = parseInt($(".persist-require").css('top')); | |
$(".persist-require").css('top', nextHeight - tboxHeight); | |
} else if(thisBox.hasClass('persist-purposes')){ | |
nextHeight = parseInt($(".persist-require").css('top')); | |
$(".persist-require").css('top', nextHeight - tboxHeight); | |
} | |
} else { | |
if(thisBox.hasClass('persist-desc')){ | |
nextHeight = parseInt($(".persist-juicy").css('top')); | |
$(".persist-juicy").css('top', boxHeight + nextHeight); | |
nextHeight = parseInt($(".persist-buy").css('top')); | |
$(".persist-buy").css('top', nextHeight + boxHeight); | |
nextHeight = parseInt($(".persist-rating").css('top')); | |
$(".persist-rating").css('top', nextHeight + boxHeight); | |
nextHeight = parseInt($(".persist-purposes").css('top')); | |
$(".persist-purposes").css('top', nextHeight + boxHeight); | |
nextHeight = parseInt($(".persist-require").css('top')); | |
$(".persist-require").css('top', nextHeight + boxHeight); | |
} else if(thisBox.hasClass('persist-purposes')){ | |
nextHeight = parseInt($(".persist-require").css('top')); | |
$(".persist-require").css('top', nextHeight - tboxHeight); | |
} | |
} | |
if(thisBox.hasClass('toggled')) | |
thisBox.removeClass('toggled'); | |
else | |
thisBox.addClass('toggled'); | |
}); | |
}); | |
.persist-desc {position: fixed; top: 42px;} | |
.persist-juicy {position: fixed; top: 100px;} | |
.persist-buy {position: fixed; top: 160px;} | |
.persist-rating {position: fixed; top: 213px;} | |
.persist-purposes {position: fixed; top: 278px;} | |
.persist-require {position: fixed; top: 336px;} | |
<div class="persist-area"> | |
<div class="persist-box persist-desc view-box data-box bm10 toggleConteiner display-none"> | |
<span class="toggleSwitcher"> | |
<span class="data-icon rfloat"><img src="/public/img/site_icon/edit.png" alt="icon" /></span> | |
<h2>Descrizione</h2> | |
</span> | |
<div class="toggleBox display-none"> | |
<hr> | |
<p class="ww-bw">{$course->profile->description}</p> | |
</div> | |
<div class="clearfix"></div> | |
</div> | |
</div> | |
<div class="display-none">Help for insane</div> | |
<div class="persist-area"> | |
<div class="persist-box persist-juicy view-box data-box display-none not-isset"> | |
<span id="mindInteresting" title="A {$course->profile->interestings} persone interessa questo Video Corso{if $interesting}, compreso te √ {else}, mostra interesse anche te clicando il bottone :) {/if}" class="formToolTip lfloat action-button{if $interesting} big_interesting{else} big_interested{/if} {if $authenticated}greenA{/if}"> {if $interesting} Interessante{else} Mi interessa{/if}</span> | |
<a href="#" class="shareplus rfloat"><span class="action-button share">Condividi</span></a> | |
<div class="clearfix"></div> | |
</div> | |
</div> | |
<div class="view-box data-box bm10"> | |
<p id="headerInterestN" {if !$course->profile->interestings}style="font-size:45px !important;"{/if} class="centerText c-green thin-text bm10">{$course->profile->interestings|default:'Interessante?'}</p> | |
<span id="mindInteresting" title="A {$course->profile->interestings} persone interessa questo Video Corso{if $interesting}, compreso te √ {else}, mostra interesse anche te clicando il bottone :) {/if}" class="formToolTip lfloat action-button{if $interesting} big_interesting{else} big_interested{/if} {if $authenticated}greenA{/if}"> {if $interesting} Interessante{else} Mi interessa{/if}</span> | |
<a href="#" class="shareplus rfloat"><span class="action-button share">Condividi</span></a> | |
<div class="clearfix"></div> | |
</div> | |
<div class="persist-area"> | |
<div class="persist-box persist-buy view-box data-box display-none not-isset"> | |
{if !$isprof} | |
<a href="/course/buy?id={$course->id}" id="principalBuy" class="action-button principal-buy">Acquista</a> | |
{else} | |
<a href="/course/edit/{$course->id}" title="Guarda i dettagli relativi al corso {$course->profile->name} su MinSqueezer">Gestione VideoCorso</a> | |
{/if} | |
<div class="clearfix"></div> | |
</div> | |
</div> | |
<div class="view-box data-box bm10 centerText"> | |
{if !$isprof} | |
<p class="data-price thin-text ">{$course->price} {$course->profile->currency}</p> | |
<a href="/course/buy?id={$course->id}" id="principalBuy" class="action-button principal-buy">Acquista</a> | |
{else} | |
<a href="/course/edit/{$course->id}" title="Guarda i dettagli relativi al corso {$course->profile->name} su MinSqueezer">Gestione VideoCorso</a> | |
{/if} | |
<div class="clearfix"></div> | |
</div> | |
<div class="persist-area"> | |
<div class="persist-box persist-rating view-box data-box display-none not-isset"> | |
<a class="action-button brochure lfloat">Brochure</a> | |
<a href="#{$feedback_link}" title="Numero votanti: {$course->profile->voters}" class="formToolTip"> | |
<div class="itemRating rfloat no-phone"> | |
<input type="hidden" name="val" value="{$course->profile->vote}"/> | |
</div> <!-- Fine div|mcsciRating no-phone mind_puzzle --> | |
</a> | |
<div class="clearfix"></div> | |
</div> | |
</div> | |
<div class="view-box data-box bm10"> | |
<a class="action-button brochure lfloat">Brochure</a> | |
<a href="#{$feedback_link}" title="Numero votanti: {$course->profile->voters}" class="formToolTip"> | |
<div class="itemRating rfloat no-phone"> | |
<input type="hidden" name="val" value="{$course->profile->vote}"/> | |
</div> <!-- Fine div|mcsciRating no-phone mind_puzzle --> | |
</a> | |
<div class="clearfix"></div> | |
</div> | |
<div class="persist-area"> | |
<div class="persist-box persist-purposes view-box data-box toggleConteiner display-none not-isset"> | |
<span class="toggleSwitcher"> | |
<span class="data-icon rfloat"><img src="/public/img/site_icon/trophy.png" alt="icon" /></span> | |
<h2>Finalità</h2> | |
</span> | |
<div class="toggleBox display-none"> | |
<hr class="clearfix"> | |
<ul> | |
{foreach from=$purposes item=purpose} | |
<li><span>{$purpose['purpose']}</span></li> | |
{/foreach} | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="view-box data-box bm10"> | |
<span class="data-icon rfloat"><img src="/public/img/site_icon/trophy.png" alt="icon" /></span> | |
<h2 class="bm10">Finalità</h2> | |
<hr class="clearfix"> | |
<ul> | |
{foreach from=$purposes item=purpose} | |
<li><span>{$purpose['purpose']}</span></li> | |
{/foreach} | |
</ul> | |
</div> | |
{if $requirements|count > 0} | |
<div class="persist-area"> | |
<div class="persist-box persist-require view-box data-box toggleConteiner display-none not-isset"> | |
<span class="toggleSwitcher"> | |
<span class="data-icon rfloat"><img src="/public/img/site_icon/requirement.png" alt="icon" /></span> | |
<h2>Requisiti</h2> | |
</span> | |
<div class="toggleBox display-none"> | |
<hr class="clearfix"> | |
<ul> | |
{foreach from=$requirements item=requirement} | |
<li><span>{$requirement['requirement']}</span></li> | |
{/foreach} | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="view-box data-box bm10"> | |
<span class="data-icon rfloat"><img src="/public/img/site_icon/requirement.png" alt="icon" /></span> | |
<h2 class="bm10">Requisiti</h2> | |
<hr class="clearfix"> | |
<ul> | |
{foreach from=$requirements item=requirement} | |
<li><span>{$requirement['requirement']}</span></li> | |
{/foreach} | |
</ul> | |
</div> | |
{/if} | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment