[HTML & CSS] Wysuwany likebox facebooka po prawej stronie.

0

Witam.
Znalazłem fajny poradnik jak zrobić wysuwanego likeboxa. Wszystko działa tylko że ja potrzebuję aby wysuwał mi się on z prawej stronie nie z lewej. Próbuję go przerobić i mi nie wychodzi. W związku z tym chciałem bardzo serdecznie prosić Was o pomoc. Oto cały kod:

<head>
(...)
  <!-- Zalaczenie biblioteki jquery do obslugi wysuwanego likebox'a -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
  <!-- Obsluga wysuwania i chowania likebox'a -->
  <script type='text/javascript'>
   $(function(){
    $('#fb_rozwin').css('left','-205px');
    $('#fb_rozwin').hover(
     function () {
      $('#fb_rozwin').animate({left: '0px'}, 800 ); // szybkosc wysuwania
      $(this).addClass('zwin');
     },
     function () {
      $('#fb_rozwin').animate({left: '-205px'}, 700 ); // szybkosc ukrywania
      $(this).removeClass('zwin');
     }
    );
   });
  </script>
</head>
<body>
.......
<div id='fb_rozwin'><!-- Facebook -->
 <div id='fb_zawartosc'>
  <script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script>
  <fb:like-box href="http://www.facebook.com/apps/application.php?id=444351772241962"
  width="182" height="340" colorscheme="dark" show_faces="true" stream="false" header="false"></fb:like-box>
  <!-- Tego nie wolno usuwac -->
  <div style="text-align:center; font-size:xx-small">
  <a target="_blank" title="Wysuwany likebox" href="http://skrypt.uni.me/news.php?readmore=6">likebox</a>
  </div>
  <!-- Tego nie wolno usuwac -->
 </div>
</div>
</body>

/* Styl dla wysuwanego likebox'a */
#fb_rozwin	{
   height: 402px;
   width: 235px;
   top: 50%;
   left: 0px;	
   position: fixed;
   margin-top: -201px; /* = wysokosc panelu / 2 (polozenie panelu w pionie) */	
   padding: 10px;
   /****************************************************************************
 
    Wybierz lokalizacje pliku tla. Pozostale niepotrzebne wiersze mozesz usunac.
 
   *****************************************************************************/
   /* url pliku tla na dysku hosta - zalecane */	
   /* podaj url pliku na twoim hoscie */ background: url("images/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent; 
   /* url pliku tla na odleglym serwerze udostepniajacym pliki obrazow  */
   /* tlo pierwsze */ background: url("http://img841.imageshack.us/img841/5074/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent;
   /* tlo drugie */ background: url("http://img17.imageshack.us/img17/5074/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent;
}
 
.zwin	{background-position: 0px 0px -242px 0px;}
 
#fb_zawartosc	{
   height: 357px; 
   width: 182px;
   display: block; 
   float: left;
   background-color: #FFFFFF;
}

Liczę na Waszą pomoc.
Pozdrawiam.

1

Ok, czyli znalazłeś gotowca i chcesz go przerobić. Gdzie tutaj jest jakaś Twoja własna inicjatywa? Bo my jesteśmy od pomocy, a nie odwalania roboty

0

dzek69 już nie bądź taki niemiły. Piter mógłbyś podać mi link do wersji online? Byłoby mi znacznie prościej :)

0

Nie no spoko, ja przecież nikogo do pomocy nie zmuszam. Próbuję cały czas to poprawić bo zapewne to kwestia css'a. A jeśli chodzi o skrypt to brałem go z tej strony: http://to.proste.info.pl/index.php?title=Jak_zrobi%C4%87_wysuwany_likebox_na_Wiki&oldid=2060

Oczywiście z tej strony do pobrania jest ta wysuwana ramka przystosowana do lewej strony natomiast ja sobie zrobiłem inną, swoją ramkę dla strony prawej.

0

Chodziło mi o stronę online na której to implementujesz ;).

0

A to ze stroną online będzie problem bo ona póki co jest jest jeszcze w fazie tworzenia i mam ją na kompie. W sieci jej jeszcze póki co nie ma :)

0

Nieświadomie pomogłeś, na tej www co pokazałeś mają to zaimplementowane. Więc tak, ogólnie wszystko sprowadza się do zmiany w .css z left:0px na right:0px oraz w js:

<script type="text/javascript"> $(function(){ $('#fb_rozwin').css('right','-205px'); $('#fb_rozwin').hover( function () { $('#fb_rozwin').animate({right: '0px'}, 800 ); // szybkosc wysuwania $(this).addClass('zwin'); }, function () { $('#fb_rozwin').animate({right: '-205px'}, 700 ); // szybkosc ukrywania $(this).removeClass('zwin'); } ); }); </script>

Teoretycznie teraz powinno być ok, pozostaną zmiany kosmetyczne jak np przesunięcie tego małego guziczka FB na nową stronę.

0

Dzięki serdeczne. Bardzo mi pomogłeś. Już wiem gdzie popełniałem błąd. Zmieniałem na right w stylach a nie zmieniłem w skrypcie i przez to nie chciało działać. Byłem przekonany że to tylko w pliku ze stylami ustawia się pozycję tego wysuwanego elementu, zupełnie nie zwracając uwagi na skrypt. Jeszcze raz wielkie dzięki. Oczywiście wszystko działa.

1 użytkowników online, w tym zalogowanych: 0, gości: 1