using jquery to create equal height in weather widget and map
authorAnthony Talarico <talarico@gaslightmedia.com>
Wed, 23 Mar 2016 16:00:30 +0000 (12:00 -0400)
committerAnthony Talarico <talarico@gaslightmedia.com>
Wed, 23 Mar 2016 16:00:30 +0000 (12:00 -0400)
footer.php
js/app.js
js/custom/pageSetup.js
scss/_main.scss

index 14e3427..fa3e38a 100644 (file)
@@ -1,12 +1,12 @@
-                        <div class="row" data-equalizer>
-                            <div id="weatherWidget" class="text-center small-12 medium-6 columns" data-equalizer-watch>
+                        <div class="row">
+                            <div id="weatherWidget" class="text-center small-12 medium-6 columns">
                                 <h2>Local Weather</h2>
                                 <?php echo do_shortcode('[wunderground location="KPLN" measurement="f" layout="simple" numdays="2" class="local-weather text-center" showdata="alerts,daynames,pop,icon,text,conditions,date,highlow"]'); ?>
                             </div>
-                            <div id="mapContainer" class="text-center small-12 medium-6 columns" data-equalizer-watch>
+                            <div id="mapContainer" class="text-center small-12 medium-6 columns">
                                 <h2>Getting Here</h2>
 <!--                                <img src="<?php echo esc_url( get_template_directory_uri() ) ;?>/assets/map-fpo.jpg">-->
-                                <div data-equalizer-watch style="width:360px;overflow:hidden;min-height:250px;max-width:100%;margin:0px auto;"><div data-equalizer-watch id="embedded-map-display" style="min-height:250px; width:100%;max-width:100%;"><iframe data-equalizer-watch style="min-height:250px;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Pellston+Regional+Airport,+U.S.+31,+Pellston,+MI,+United+States&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe></div><a class="google-code" href="https://www.hostingreviews.website/compare/siteground-vs-namecheap" id="authorize-map-data">siteground namecheap</a><style>#embedded-map-display .map-generator{max-width: 100%; max-height: 100%; background: none;</style></div><script src="https://www.hostingreviews.website/google-maps-authorization.js?id=d39797a3-0916-f790-27e2-c4f8b39f290f&c=google-code&u=1458225500" defer="defer" async="async"></script>
+                                <div style="width:360px;overflow:hidden;min-height:250px;max-width:100%;margin:0px auto;"><div id="embedded-map-display" style="min-height:250px; width:100%;max-width:100%;"><iframe style="min-height:250px;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Pellston+Regional+Airport,+U.S.+31,+Pellston,+MI,+United+States&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe></div><a class="google-code" href="https://www.hostingreviews.website/compare/siteground-vs-namecheap" id="authorize-map-data">siteground namecheap</a><style>#embedded-map-display .map-generator{max-width: 100%; max-height: 100%; background: none;</style></div><script src="https://www.hostingreviews.website/google-maps-authorization.js?id=d39797a3-0916-f790-27e2-c4f8b39f290f&c=google-code&u=1458225500" defer="defer" async="async"></script>
                             </div>
                         </div>
                         <div id="connect" class="row show-for-medium-up">
index d7fd0dc..0aee2dc 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -167,4 +167,6 @@ $(document).ready(function () {
                 });
             }
         });
+    $("#embedded-map-display").height($(".wu-wrapper").outerHeight());
+    $("#embedded-map-display").find("iframe").height($(".wu-wrapper").outerHeight());
 });
index aa5ab8d..1ccf9db 100644 (file)
@@ -42,4 +42,6 @@ $(document).ready(function () {
                 });
             }
         });
+    $("#embedded-map-display").height($(".wu-wrapper").outerHeight());
+    $("#embedded-map-display").find("iframe").height($(".wu-wrapper").outerHeight());
 });
index 4ad4303..a2ee9e2 100644 (file)
@@ -58,3 +58,4 @@ main {
 #weatherWidget{
     min-height: 250px;
 }
+