Nivo caption wrapping, slideshow resizing

Considering the way we are (not) resizing the images with the window,
quite a few hoops needed to be jumped through to get the caption to
resize appropriately. Slideshow also wasn't properly resizing veritcally
when in mobile view.

diff --git a/Toolkit/RotatingImages/templates/rotatingImages.html b/Toolkit/RotatingImages/templates/rotatingImages.html
index d383f94..e2c393a 100644 (file)
--- a/Toolkit/RotatingImages/templates/rotatingImages.html
+++ b/Toolkit/RotatingImages/templates/rotatingImages.html
@@ -12,7 +12,7 @@
     bottom: 10px;
     z-index: 990;
     /*top: -10px;*/
-    left: 270px;
+    left: 260px !important;
     }
 #slider-wrapper {
     width: 587px;
@@ -35,4 +35,5 @@
     {if:image.getTitle()}<strong>{image.getTitle()}</strong>{end:}
     {if:image.getDescr()}<span>{image.getDescr()}</span>{end:}
 </div>
+
 {end:}

diff --git a/styles.css b/styles.css
index 1083fb3..8fa7f44 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -429,6 +429,18 @@ nav.top-bar .top-bar-section > ul > li .dropdown li a#active {
 nav.top-bar .top-bar-section > ul > li .dropdown li:last-child a {
   border-bottom: none;
 }
+.top-bar-section .left li .dropdown li .dropdown {
+    left: auto;
+    border: 1px solid #b1b3b6;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    border-color: -moz-use-text-color #b1b3b6 #b1b3b6;
+    border-style: none solid solid;
+    border-width: medium 1px 1px;
+}
+.top-bar-section .left li .dropdown li .dropdown li {
+/*    left: -100px;*/
+}
 nav.top-bar .toggle-topbar.menu-icon > a {
   font-size: 20px;
   font-weight: 400;
@@ -565,6 +577,25 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
     position: static;
     margin-bottom: -2px;
   }
+  #slider,
+  #slider-wrapper {
+      height: 330px !important;
+      
+  }
+}
+
+@media (min-width: 800px) {
+    .nivo-caption {
+        left: 15% !important;
+        width: 70% !important;
+    }
+}
+
+@media (min-width: 980px) {
+    .nivo-caption {
+        left: 5% !important;
+        width: 90% !important;
+    }
 }
 
 /*#interior .header-content .header-image {
@@ -586,6 +617,10 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
   margin: 0 auto;
   min-height: 370px;
 }
+.nivo-caption {
+    left: 25%;
+    width: 50%;
+}
 
 .container#home #main {
   background-color: #f5ad1a;

diff --git a/templates/template.html b/templates/template.html
index 418537e..f8690f8 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -79,6 +79,7 @@
                   <div class="center-image">
                     {if:isHomePage}
                       {rotatingImages:h}
+                      
                     {else:}
                       {if:headlines[0][img2]}
                       <img src="<?php echo HEADLINE_MAIN;?>{headlines[0][img2]:h}" />
@@ -205,5 +206,26 @@
       </div>
     </div>
     {bottomScripts:h}
+    <script>
+        
+//        $(document).ready(function(){
+//            var width2 = $(".header-image").width();
+//            
+//            console.log(width2);
+//            console.log($(".header-image").width());
+//            var width3 = $(".nivo-caption").width();
+//            console.log(width3);
+//            $(".nivo-caption").width(width2);
+//            console.log($(".nivo-caption").width());
+//        });
+
+        $( ".nivo-main-image" ).resize(function() {
+            console.log($('.nivo-caption').parent().parent().parent().parent().width());
+        });
+//        $( ".nivo-main-image" ).resize(function() {
+//            $( ".nivo-caption" ).width( $(".header-image").width());
+            console.log("ding");
+//        });
+    </script>
   </body>
 </html>