Widget Followers & Follow pasek boczny Twitter

IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie wysuwanego paska bocznego osadzonego w dowolnej przeglądarce internetowej z TWARZAMI TWITTER.
Pasek boczny można wykorzystać w dowolny sposób!

Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.



PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj



NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.



KOD HTML 5 i jQuery: 
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
    
<body bgcolor="#0000FF">
<script type="text/javascript">
  //<[!CDATA[
  jQuery.noConflict();
  
  jQuery(document).ready(function() {   
   
   jQuery("#twitter2_3").hover(function(){    
   jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#twitter2_3").stop(true,false).animate({right: "-304px"}, 500 );   
   });  

  });  
  //]]>
</script>

<!--WIDGET TWITTER-->
<div id='twitter2_3' style='right: -300px; z-index: 9998; background: #ffffff; padding: 0px; width: 300px; height: 437px; position: fixed; top: 157px; border: 0px solid #FFFFFF'>
  <a href='#'/><img src='https://www.katmpbsoft.pl/BLOG/Twitter/twitter.png' style='position: absolute; left:-33px; top:3px'/> 
  <div style='background-color:#809EFF;'>  
  <!-- Required HTML -->
   <div id="twitter-box"></div>
<script>
var tw_user = 'KatMPBSoft';
var tw_width = 300;
var tw_height = 440;
var no_face = 20;
var tw_color='dark';
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = '//50.63.179.86/twitter/tw.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script>
  <!-- Required HTML -->
  </div>
</div>
<!--KONIEC WIDGET TWITTER-->
</body>
</html>
 



OPIS:

1. W części HEAD jest dołączony skrypt: jQuery;
2. W części BODY mamy skrypt napisany w jQuery, który służy do wysuwania paska bocznego z TWARZAMI TWITTER;
3. W części BODY mamy także kod HTML z warstwą [div id="twitter2_3"], która przechowuje TWARZE TWITTER.



Więcej o bibliotece: FAN BOX TWITTER poniżej:
Patrz i pobierz (język ang.)



Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej



Brak komentarzy: