PDA

Zobacz pełną wersję : Content Scroller (NIE SLIDER!) w componencie



szatanica
31-10-2012, 13:16
Szanowni koledzy i koleżanki :)

Takowy mam problem ze stroną - chcę umieścić pionowego scrolla i ograniczyć przestrzeń na głowny content w componencie joomlowym 2.5 (czyli tam gdzie wyświetlają się artykuły). Udało mi się skorzystać z takowego jquery'owego wynalazku (http://manos.malihu.gr/jquery-custom-content-scroller/), i w wersji nie joomlowej działa elegancko, natomiast po zmontowaniu strony z CMSem, niestety ten patent nie działa, a raczej działa częściowo - ogranicza przestrzeń diva, ale scroller się nie pokazuje, a nawet jak mu w firebugu zmienię display na block i go wtedy widać, to nie działa całość, nie da się scrollować.

To jest strona na której ma być scroller (tn biały box na środku strony to głowny content): 6037
No i teraz tak: zaincludowane mam wszystkie .js i .css ( sprawdzałam firebugiem i faktycznie zasysa wszystko).


$doc->addStyleSheet($tpath.'/css/jquery.mCustomScrollbar.css?b='.$bootstrap.'&v=1') ;

<script type="text/javascript" src="<?php echo $tpath.'/js/template.js.php?b='.$bootstrap.'&amp;v=1'; ?>"></script>
<script type="text/javascript" src="<?php echo $tpath.'/js/jquery-1.3.2.min.js?b='.$bootstrap.'&amp;v=1'; ?>"></script>
<script type="text/javascript" src="<?php echo $tpath.'/js/jquery-1.8.2.min.js?b='.$bootstrap.'&amp;v=1'; ?>"></script>
<script type="text/javascript" src="<?php echo $tpath.'/js/jquery.fullscreenr.js?b='.$bootstrap.'&amp;v=1'; ?>"></script>
<script type="text/javascript" src="<?php echo $tpath.'/js/jquery.mousewheel.min.js?b='.$bootstrap.'&amp;v=1'; ?>>"></script>
<script type="text/javascript" src="<?php echo $tpath.'/js/jquery.mCustomScrollbar.js?b='.$bootstrap.'&amp;v=1'; ?>"></script>
<script type="text/javascript" src="<?php echo $tpath.'/js/jquery-ui-1.9.1.custom.min.js?b='.$bootstrap.'&amp;v=1'; ?>"></script>

Wywołuję scollbar tak:


<scritp>
(function($){
$(window).load(function(){
$("#content").mCustomScrollbar({
scrollEasing:"easeOutCirc",
mouseWheel:"auto",
scrollButtons:{enable:true}
});
});
})(jQuery);
</script>


na takim kontencie (kod z szablonu):


<div id="right">
<?php if($pageclass != "hotel" && $pageclass != "restauracja") echo
'<div id="outerContainer">
<div id="content">
<div class="subcontent">
<jdoc:include type="component" />
</div><!-- /subcontent-->
</div><!--/content-->
</div><!-- /outerContainer -->'?>
</div><!-- /right -->

Odpowiednikiem na stronie jest taki kod:


<div id="right"> <div id="outerContainer"> <div id="content"> <div class="subcontent"> <div class="blogaktualnosci"> <h1>AKTUALNOŚCI </h1> <div class="items-leading"> <div class="leading-0"> <!--ARTYKUŁ1:--> <h2>Halloween 2012</h2> <dl class="article-info"> <dt class="article-info-term">Szczegóły</dt> <dd class="published">Opublikowano: czwartek, 25, październik 2012 20:08</dd> </dl><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p> <div class="item-separator"></div> </div><!-- /leading-0 --> <div class="item column-2"> <!--ARTYKUŁ2:--> <h2>Jakiśtam tutuł wpisu</h2> <dl class="article-info"> <dt class="article-info-term">Szczegóły</dt> <dd class="published">Opublikowano: środa, 24, październik 2012 20:33</dd> </dl> <p>Długa tresć artykułu</p> <div class="item-separator"></div> </div><!-- /item column-2 --> <span class="row-separator"></span> </div><!-- /items-leading--> </div><!-- /blogaktualnosci --> </div><!-- /subcontent--> </div><!--/content--> </div><!-- /outerContainer --> </div><!-- /right -->

I teraz z jakiegoś powodu mi nieznanego, cały element odpowiadający za pojawienie się i działanie scrolla jest w kodzie w firebuga wyszarzony. To jest ten kod ( na stronie z komponentem to kod znajdujący się pod treścią: The plugin will add all necessary markup for the scrollbars to each of your content blocks. The final markup of each content block after being processed by the plugin script, will be:

<div class="mCSB_scrollTools">
<aclass="mCSB_buttonLeft"></a><divclass="mCSB_draggerContainer"><divclass="mCSB_dragger ui-draggable"><divclass="mCSB_dragger_bar"></div></div><divclass="mCSB_draggerRail"></div></div><aclass="mCSB_buttonRight"></a> </div>
Jak w firebugu ustawię mCSB_scroolTools display:block, to się ładnie
Za diabła nie mogę namierzyć gdzie leży błąd...Czy w tym, że struktura wewnątrz #contentu jest za skomplikowana dla tego pluginu? Ze wywołanie jest złe? Może to kwestia ścieżek w joomli, które powodują, że coś się nie aktywuje jak trzeba...Jeśli nie przyjdzie Wam nic do głowy to może chociaż zasugerujecie jakieś rozszerzenie joomlowe które działa ?

Będę zobowiązana wielce za pomoc.

Jdwind
31-10-2012, 17:17
Trochę zmęczony jestem i może źle widzę, ale co - oprócz przewijania (??) treści - robi ten skrypt? Znaczy się oprócz góra/dół (co załatwia overflow:scroll w CSS).

szatanica
31-10-2012, 18:01
Oprócz przewijania nic - ale ma dostęp do jQuery UI i Easing functions co powoduje, że przewijanie jest bardzo płynne i ładne. Dwa, sam scroller wygląda sensownie, a nie jak taki oporny zwykły przeglądarkowy scroller...plus ma sporo fajnych opcji do modyfikowania. Pytanie czy da się przestyle'ować tego overflowowego scrollera...?

Jdwind
31-10-2012, 21:05
Nie wiem, czy się da - nigdy tego nie robiłem. Ale tu masz podobnie (http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm) zrobione.