lars-m of PartnersCreative
12/4/2017 - 6:29 PM
Double Drawer Button Activated
This code is on www.skidiscovery.com used in thew header weather drawer. It has two drawers that push down the page and swap when one is open and the other is clicked.
jQuery
$(function() {
$('.push-down, .webcam-push-down').hide();
var weatherState = 'closed';
var webcamState = 'closed';
$("#mtn-stats").on("click", function(){
if(weatherState === 'closed'){
weatherState = 'open'
} else {
weatherState = 'closed'
}
$(this).toggleClass('active');
$( ".push-down" ).insertAfter("#masthead");
$( ".push-down" ).slideToggle( "slow", function() {});
if(webcamState === 'open') {
webcamState = 'closed';
console.log('webcamState should equal closed ->',webcamState);
$( ".webcam-push-down" ).slideToggle( "slow", function() {});
// $('.webcam-push-down').hide();
}
// console.log('webcamState->',webcamState);
});
$(".webcam").on("click", function(){
if(webcamState === 'closed'){
webcamState = 'open'
} else {
webcamState = 'closed'
}
$(this).toggleClass('active');
$( ".webcam-push-down" ).insertAfter("#masthead");
$( ".webcam-push-down" ).slideToggle( "slow", function() {});
if(weatherState === 'open') {
weatherState = 'closed';
console.log('weatherState should equal closed ->',weatherState);
$( ".push-down" ).slideToggle( "slow", function() {});
// $('.push-down').hide();
}
// console.log('weatherState->',weatherState);
});
$('#close-dropdown').on("click", function(){
$(this).toggleClass('active');
$( ".push-down" ).slideToggle( "slow", function() {
});
});
$('#webcam-close-dropdown').on("click", function(){
$(this).toggleClass('active');
$( ".webcam-push-down" ).slideToggle( "slow", function() {
});
});
});
</script>
<div class="push-down hiddenOnPageLoad">
<div class="push-down-wrapper">
<a id="close-dropdown"><i class="fa fa-lg fa-close"></i></a>
<h3 class="forecast-header">3-DAY FORECAST</h3>
<div id="forecast-row">
<div class="forecast-container">
<div id="day1" class="day">
<div id="day-name1" class="day-name">TODAY</div>
<div class="icon-temp">
<div id="day1-weather-logo" class="weather-logo"></div>
<div id="day1-highLow" class="highLow">
<div id="todays-high2" class="todays-high"></div>
<div id="todays-low2" class="todays-low"></div>
</div>
</div>
<div id="day1-description" class="day-desc"></div>
</div>
<div id="day2" class="day">
<div id="day-name2" class="day-name"></div>
<div class="icon-temp">
<div id="day2-weather-logo" class="weather-logo"></div>
<div id="day2-highLow" class="highLow">
<div id="day2-high" class="todays-high"></div>
<div id="day2-low" class="todays-low"></div>
</div>
</div>
<div id="day2-description" class="day-desc"></div>
</div>
<div id="day3" class="day">
<div id="day-name3" class="day-name"></div>
<div class="icon-temp">
<div id="day3-weather-logo" class="weather-logo"></div>
<div id="day3-highLow" class="highLow">
<div id="day3-high" class="todays-high"></div>
<div id="day3-low" class="todays-low"></div>
</div>
</div>
<div id="day3-description" class="day-desc"></div>
</div>
</div>
<a target="_blank" href="http://forecast.weather.gov/MapClick.php?lon=-113.2484329467772&lat=46.26245287038168#.WdPHjBNSxgc"><button class="main-button weather-button">FULL REPORT</button></a>
</div>
<hr class="dark" />
<?php
query_posts(array(
'post_type' => 'snow-report',
'showposts' => 1
) );
?>
<?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<div class="report-row">
<div class="icon-report">
<img src="/wp-content/uploads/2017/10/snowflake.png"/>
<h3>SNOW REPORT</h3>
</div>
<div id="report-figures-row">
<div class="report-figures">
<div class="figures inch"><?= get_field('new_snow'); ?></div>
<span>NEW SNOW</span>
</div>
<div class="report-figures">
<div class="figures inch"><?= get_field('24_hours'); ?></div>
<span>24 HOURS</span>
</div>
<div class="report-figures">
<div class="figures inch"><?= get_field('48_hours'); ?></div>
<span>48 HOURS</span>
</div>
<div class="report-figures no-show-mobile">
<div class="figures inch"><?= get_field('72_hours'); ?></div>
<span>72 HOURS</span>
</div>
<div class="report-figures no-show-mobile">
<div class="figures inch"><?= get_field('ytd_snowfall'); ?></div>
<span>SEASON</span>
</div>
</div>
<a class="snow-terrain-button" href="/snow-report/"><button class="main-button weather-button">FULL REPORT</button></a>
</div>
<hr class="dark" />
<div class="report-row">
<div class="icon-report">
<img src="/wp-content/uploads/2017/10/mountain-snow.png"/>
<h3>TERRAIN REPORT</h3>
</div>
<div id="report-figures-row">
<div class="report-figures">
<div class="figures"><?= get_field('number_of_runs_open'); ?></div>
<span>TRAILS OPEN</span>
</div>
<div class="report-figures no-show-mobile">
<div class="figures"><?= get_field('number_of_lifts_open'); ?><span class="lift-total">/6</span></div>
<span>LIFTS OPEN</span>
</div>
<div class="report-figures no-show-mobile">
<div class="figures percentage"><?= get_field('terrain_open'); ?></div>
<span>TERRAIN OPEN</span>
</div>
<div class="report-figures">
<div class="figures inch"><?= get_field('base_depth_bottom'); ?></div>
<span>BASE DEPTH</span>
</div>
<div class="report-figures">
<div class="figures inch"><?= get_field('top'); ?></div>
<span>SUMMIT DEPTH</span>
</div>
</div>
<a class="snow-terrain-button" href="/trail-report/"><button class="main-button weather-button">FULL REPORT</button></a>
</div>
<?php endwhile; endif; wp_reset_query(); ?>
</div class="figures">
</div>
<div class="webcam-push-down hiddenOnPageLoad">
<div class="webcam-content">
<a id="webcam-close-dropdown"><i class="fa fa-lg fa-close"></i></a>
<img src="/wp-content/uploads/2017/09/webcam.png"/>
<h3>WEBCAMS</h3>
<div><?= get_field('webcam_content', '14'); ?></div>
</div>
<a target="_blank" href="https://www.fairmontmontana.com/"><img class="banner-ad centering margining" src="/wp-content/uploads/2017/10/DIS-1832_FairmontBanner_v2_700px.jpg" /></a>
<div class="webcam-wrapper">
<div class="wecam-col-1">
<img src="https://webcam.skidiscovery.com/camimages/current.jpg" alt="cam image" width="320" height="240" />
<img src="https://webcam.skidiscovery.com/camimages/current-prior.jpg" alt="cam image" width="320" height="240" />
</div>
<div class="wecam-col-2">
<img src="https://webcam.skidiscovery.com/camimages/cam.jpg" alt="cam image" width="320" height="240" />
<img src="https://webcam.skidiscovery.com/camimages/cam-prior.jpg" alt="cam image" width="320" height="240" />
</div>
</div>
</div>