瀏覽代碼

tatonnements pour sidebar sticky et ouverture menus

Sevajol Bastien 11 年之前
父節點
當前提交
2ae028d964

+ 5 - 3
src/Muzich/CoreBundle/Resources/public/css/main.css 查看文件

38
   background-repeat: repeat-x;
38
   background-repeat: repeat-x;
39
   border-bottom: 3px solid #e51936;
39
   border-bottom: 3px solid #e51936;
40
   
40
   
41
-  margin-bottom: 25px;
42
 }
41
 }
43
 
42
 
44
 div#header div#hgroup
43
 div#header div#hgroup
241
   padding-right: 30px;
240
   padding-right: 30px;
242
   float: left;
241
   float: left;
243
   position: relative;
242
   position: relative;
243
+  margin-top: 25px;
244
 }
244
 }
245
 
245
 
246
 aside#sidebar
246
 aside#sidebar
254
 aside#sidebar .sidebar
254
 aside#sidebar .sidebar
255
 {
255
 {
256
   width: 300px;
256
   width: 300px;
257
+  padding-bottom: 25px;
258
+  padding-top: 25px;
257
 /* height: 800px;
259
 /* height: 800px;
258
  background-color: blue;*/
260
  background-color: blue;*/
259
 }
261
 }
260
 
262
 
261
 .top-fixed {
263
 .top-fixed {
262
     position: fixed;
264
     position: fixed;
263
-    top: 25px;
265
+    top: 0;
264
 }
266
 }
265
 
267
 
266
 .bottom-fixed {
268
 .bottom-fixed {
267
     position:fixed;
269
     position:fixed;
268
-    bottom: 25px;
270
+    bottom: 0;
269
 }
271
 }
270
 
272
 
271
 #mainbox
273
 #mainbox

+ 58 - 22
src/Muzich/CoreBundle/Resources/public/js/muzich.js 查看文件

588
    var last_id = null;
588
    var last_id = null;
589
    $('a.elements_more').click(function(){
589
    $('a.elements_more').click(function(){
590
     
590
     
591
+    sidebar_fix_to_bottom_prepare();
591
     $('img.elements_more_loader').show();
592
     $('img.elements_more_loader').show();
592
     // On fait un cas isolé (pour l'instant!!)
593
     // On fait un cas isolé (pour l'instant!!)
593
     if (!$(this).hasClass('event_view'))
594
     if (!$(this).hasClass('event_view'))
616
       var data = {};
617
       var data = {};
617
       var type = 'GET';
618
       var type = 'GET';
618
     }
619
     }
620
+    
621
+    $('.sidebar').css('bottom', $('#footer').outerHeight());
619
          
622
          
620
      $.ajax({
623
      $.ajax({
621
        type: type,
624
        type: type,
638
             {
641
             {
639
               link.attr('href', response.data.more_link_href);
642
               link.attr('href', response.data.more_link_href);
640
             }
643
             }
644
+            
645
+            sidebar_fix_to_bottom_finish();
646
+          
641
           }
647
           }
642
           
648
           
643
           if (response.end || response.count < 1)
649
           if (response.end || response.count < 1)
2589
   /* Ouverture des menus deroulants */
2595
   /* Ouverture des menus deroulants */
2590
   $('ul.secondarymenu a.top_menu_link').click(function(){
2596
   $('ul.secondarymenu a.top_menu_link').click(function(){
2591
     
2597
     
2598
+    //sidebar_fix_to_bottom_prepare();
2599
+    var sidebar_height = $('.sidebar').height();
2600
+    
2592
     if ($(this).parents('li.top_menu_element').hasClass('close'))
2601
     if ($(this).parents('li.top_menu_element').hasClass('close'))
2593
     {
2602
     {
2594
       $(this).parents('li.top_menu_element').find('ul.submenu').hide();
2603
       $(this).parents('li.top_menu_element').find('ul.submenu').hide();
2595
       $(this).parents('li.top_menu_element').removeClass('close');
2604
       $(this).parents('li.top_menu_element').removeClass('close');
2596
       $(this).parents('li.top_menu_element').addClass('open');
2605
       $(this).parents('li.top_menu_element').addClass('open');
2597
-      $(this).parents('li.top_menu_element').find('ul.submenu').slideDown('500', function(){
2598
-        if ($('.sidebar').css('position') == 'absolute')
2599
-        {
2600
-          contentHeight = $('.content').height();
2601
-          sidebarHeight = $('.sidebar').outerHeight();
2602
-          //$('.sidebar').css('top', contentHeight - sidebarHeight);
2603
-          $(".sidebar").animate({ 
2604
-            top: contentHeight - sidebarHeight,
2605
-          }, 500 );
2606
-        }
2607
-      });
2606
+      $(this).parents('li.top_menu_element').find('ul.submenu').show();
2607
+        
2608
+      //sidebar_fix_to_bottom_finish();
2609
+      if ($('.sidebar').css('position') == 'absolute' || $('.sidebar').position().top < 1)
2610
+      {
2611
+        var top = $('.sidebar').position().top;
2612
+        var top_recalculated =  top - ($('.sidebar').height() - sidebar_height);
2613
+        $(".sidebar").animate({
2614
+          top: top_recalculated
2615
+        }, 500);
2616
+        
2617
+      }
2608
     }
2618
     }
2609
     else
2619
     else
2610
     {
2620
     {
2611
       $(this).parents('li.top_menu_element').removeClass('open');
2621
       $(this).parents('li.top_menu_element').removeClass('open');
2612
       $(this).parents('li.top_menu_element').addClass('close');
2622
       $(this).parents('li.top_menu_element').addClass('close');
2613
       
2623
       
2614
-      if ($('.sidebar').css('position') == 'absolute')
2615
-        {
2616
-          contentHeight = $('.content').height();
2617
-          sidebarHeight = $('.sidebar').outerHeight();
2618
-          //$('.sidebar').css('top', contentHeight - sidebarHeight);
2619
-          $(".sidebar").animate({ 
2620
-            top: contentHeight - sidebarHeight,
2621
-          }, 500 );
2622
-        }
2624
+      //sidebar_fix_to_bottom_finish();
2625
+      if ($('.sidebar').css('position') == 'absolute' || $('.sidebar').position().top < 1)
2626
+      {
2627
+        var top = $('.sidebar').position().top;
2628
+        var diff = $('.sidebar').height() - sidebar_height;
2629
+        var top_recalculated =  top - diff;
2630
+        $(".sidebar").animate({
2631
+          top: top_recalculated
2632
+        }, 500);
2633
+        
2634
+      }
2623
     }
2635
     }
2624
     
2636
     
2625
     return false;
2637
     return false;
3293
    * STICK SIDEBAR
3305
    * STICK SIDEBAR
3294
    */
3306
    */
3295
   
3307
   
3308
+  window.sidebar_topsticked = false;
3309
+  window.sidebar_sticked = false;
3296
   if ($('#sidebar .sidebar').height() < $('#content .content').height() &&
3310
   if ($('#sidebar .sidebar').height() < $('#content .content').height() &&
3297
     $('#sidebar .sidebar').height() > $(window).height())
3311
     $('#sidebar .sidebar').height() > $(window).height())
3298
   {
3312
   {
3299
     $('#content').stickySidebar();
3313
     $('#content').stickySidebar();
3314
+    window.sidebar_sticked = true;
3300
   }
3315
   }
3301
   else
3316
   else
3302
   {
3317
   {
3303
     $('#sidebar .sidebar').css('padding-bottom', '155px');
3318
     $('#sidebar .sidebar').css('padding-bottom', '155px');
3304
     $("#sidebar .sidebar").sticky({topSpacing:25});
3319
     $("#sidebar .sidebar").sticky({topSpacing:25});
3320
+    window.sidebar_topsticked = true;
3305
   }
3321
   }
3306
   
3322
   
3307
-  
3308
-   
3309
 });
3323
 });
3310
 
3324
 
3311
 function open_ajax_popin(url, callback, data)
3325
 function open_ajax_popin(url, callback, data)
3408
   $('#helpbox').remove();
3422
   $('#helpbox').remove();
3409
   popin_opened = false;
3423
   popin_opened = false;
3410
 }
3424
 }
3425
+
3426
+function sidebar_fix_to_bottom_prepare()
3427
+{
3428
+  if (window.sidebar_sticked)
3429
+  {
3430
+    $('.sidebar').css('top', '');
3431
+    $('.sidebar').css('position', '');
3432
+    $('.sidebar').addClass('bottom-fixed');
3433
+  }
3434
+}
3435
+
3436
+function sidebar_fix_to_bottom_finish()
3437
+{
3438
+  if (window.sidebar_sticked)
3439
+  {
3440
+    $(".sidebar").animate({
3441
+      bottom: '0'
3442
+    }, 500 , "swing", function(){
3443
+      $('.sidebar').css('bottom', '')
3444
+    });
3445
+  }
3446
+}

+ 1 - 1
web/js/jquery.stickysidebar.js 查看文件

9
         defaults = {
9
         defaults = {
10
             sidebar: '.sidebar',
10
             sidebar: '.sidebar',
11
             content: '.content',
11
             content: '.content',
12
-            tolerance: 110
12
+            tolerance: -25
13
         },
13
         },
14
         clearPosition = {
14
         clearPosition = {
15
             position: '',
15
             position: '',