topical media & game development 
  
 
 
 
 
  
    
    
  
 lib-jquery-plugin-easy-plus-newsplus.htm / htm
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <head>
  <meta http-equiv="Content-Language" content="en-us">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <title>Jquery</title>        
  <script type="text/javascript" src="lib-jquery-plugin-easy-plus-jquery-1.2.3.pack.js"></script>
  <script type="text/javascript" src="lib-jquery-plugin-easy-plus-jquery.easynews.plus.js"></script>
  
  <style>
  html
  {        background-color: #FFA928;
  font: normal 76% "Arial", "Lucida Grande",Verdana,  Sans-Serif;
          color:black;
          }
  a { text-decoration: none; font-weight: bold; }
  
  .news_style{
  display:none;
  }
  .news_show
  {
  position:absolute;
  background-color: white;
  color:black;
  font: normal 100% "Arial", "Lucida Grande",Verdana,  Sans-Serif;
  clip:rect(0px 350px 150px 0px);
  
  }
  .news_show1
  {
  position:absolute;
  background-color: white;
  color:black;
  font: normal 100% "Arial", "Lucida Grande",Verdana,  Sans-Serif;
  clip:rect(0px 350px 150px 0px);
  
  }
  .news_border
  {
  background-color: white;
  width:352px;
  height:152px;
  font: normal 100% "Arial", "Lucida Grande",Verdana,  Sans-Serif;
  border: 1px solid gray;
  padding: 5px 5px 5px 5px;
  
  /*overflow: auto;*/        
  
  }
  .news_mark{
  background-color:white ;
  font: normal 70% "Arial", "Lucida Grande",Verdana,  Sans-Serif;
  border: 0px solid gray;
  width:363px;
  height:35px;
  color:black;
  text-align:center;
  }
  .news_title{
  font: bold 120% "Arial", "Lucida Grande",Verdana,  Sans-Serif;
  border: 0px solid gray;
  padding: 5px 0px 9px 5px;
  color:black;
  }
  .news_show img{
  
  margin-left: 5px;
  margin-right: 5px;
  
  }
  .buttondiv
  {
  position: absolute;
  /*float: left;*/
  /*top: 169px;*/
  padding: 5px 5px 5px 5px;
  background-color:white ;
  border: 1px solid gray;
  /*border-top-color: white;*/
  border-top:none;
  height:20px;
  }
    .news_move {
   position: relative;
  
    }
  .mytable
  {
  width:350px;
  height:150px;
  vertical-align: top; 
  }
  </style>
  <script>
  document.ready(function(){
  var newsoption = {
    firstname: "mynews",
    secondname: "showhere",
    thirdname:"news_display",
    fourthname:"news_button" 
  }
  .init_plus(newsoption1);
  
  var myoffset=$('#news_button').offset();
  var myoffset1=$('#news_button1').offset();
  var mytop=myoffset.top-1;
  var mytop1=myoffset1.top-1;
  
  $('#news_button').css({top:mytop});
  $('#news_button1').css({top:mytop1});
  
  });
  </script>
  </head>
  <body>
  
  <!--This is the left side 1st news html style-->
  
  <b><font color=white size=2>Easy News Plus 1.0.1</font></b>
  <div align=left id=mynewsdis><div class=news_border>
  <div id=showhere class=news_show></div>
  </div>
  <div class=buttondiv id=news_button>
  <img src=lib-jquery-plugin-easy-plus-prev.gif align="absmiddle" id=news_prev><img src=lib-jquery-plugin-easy-plus-pause.gif align="absmiddle" id=news_pause><img src=lib-jquery-plugin-easy-plus-next.gif align="absmiddle" id=news_next >
  </div>
  <div class=news_mark><div id=news_display class=news_title></div>
  </div></div>
  <!--This is the left side 2nd news html style-->
  
  <br>
  <div align=left id=mynewsdis1><div class=news_border>
  <div id=showhere1 class=news_show></div>
  </div>
  <div class=buttondiv id=news_button1>
  <img src=lib-jquery-plugin-easy-plus-prev.gif align="absmiddle" id=news_prev><img src=lib-jquery-plugin-easy-plus-pause.gif align="absmiddle" id=news_pause><img src=lib-jquery-plugin-easy-plus-next.gif align="absmiddle" id=news_next >
  </div>
  <div class=news_mark><div id=news_display1 class=news_title></div>
  </div></div>
  <br>
  <br>
  
  <h1>Plugins</h1>
  <a href=http://jquery.000webhost.info>Home</a>
  <ul>
          <li>Easy News Plus 1.0.1</li>        
  </ul>
   <div id=pp1 ><a name="easyslide"></a>E<b>asy News Plus 1.0.1</b><div id=pp2 >Here is a jQuery plugins that 
          lets you create JavaScript News Slide as fly.<p>Easy News Plus 1.0.1  has function as following</p>
          <ul>
                  <li>Cross browser( Tested with IE7 and Firefox 2.0)</li>
                  <li>Both <b>PREV</b> and <b>NEXT</b> auto play </li>
                  <li>No extra setup</li>
                  <li>No other plugins needed</li>
                  <li>Any Html content accept (Even Flash)</li>
                  <li>Display effect support slide  left to right and right to left  
                  very smooth (Tested with IE7 and Firefox 2.0)</li>
                  <li>Display speed adjustment  </li>
                  <li>You can edit css change any 
                  layout color you like</li>
          </ul>
          
          <p> </p>
          
          <div  style="width:450px;background:black;color:white;font:90%;padding:10px 30px 10px 30px;" id=showhow>
                                                  Starting with <abbr>HTML</abbr> the plugin as following 
                                                  :<p> </p>
                                                  <p>example:</p>
                                                  <p><b><font size="3" color="#99FF66">STEP 1: setup where 
                                                  is your news  </font></b><br>
                                                  // Your news container</p>
                                                  <p><b><font color="#FFFF99"><div 
                                                  </font><font color="#66CCFF">id</font><font color="#FFFF99">=</font><font color="#99FF66">orgnews </font><font color="#FFFF99">
                                                   </font><font color="#66CCFF">style</font><font color="#FFFF99">=</font><font color="#99FF66">"display:none"</font><font color="#FFFF99">>
                                                  </font> <br>
                                                  <div class=news_style>.......</div><br>
                                                  <div class=news_style>.......</div><br>
                                                  .................................</b><font color="#FFFF99"><b><br>
                                                  </div></b></font></p>
                                                  <p><b><font size="3" color="#99FF66">STEP 2: setup where 
                                                  to display  </font></b></p>
                                                  <p><b>//Where your news display</b></p>
                                                  <p><b><font color="#FFFF99"><div</font>
                                                  <font color="#66CCFF">id</font><font color="#FFFF99">=</font><font color="#99FF66">showhere</font><font color="#FFFF99">></div>// 
                                                  for news content display</font></b></p>
                                                  <p><b><font size="3" color="#99FF66">STEP 3: insert 
                                                  button images  </font></b></p>
                                                  <p><b>//Where image button</b></p>
                                                  <p><b><font color="#FFFF99"><br>
                                                  <div  </font><font color="#66CCFF">id</font><font color="#FFFF99">=</font><font color="#99FF66">news_button</font><font color="#FFFF99">></font>// 
                                                  for Prev . Pause. Next . image button<br>
                                                  <img src=lib-jquery-plugin-easy-plus-prev.gif align="absmiddle" ><img src=lib-jquery-plugin-easy-plus-pause.gif 
                                                  align="absmiddle" ><img src=lib-jquery-plugin-easy-plus-next.gif align="absmiddle" ><font color="#FFFF99"><br>
                                                  </div></font></b></p>
                                                  <p><b><font size="3" color="#99FF66">STEP4: setup where
                                                  </font></b><font size="3" color="#99FF66"><b>to display 
                                                  news title</b></font></p>
                                                  <p><b>// Where news title display</b></p>
                                                  <p><font color="#FFFF99"><b><div</font><font color="#66CCFF"> 
                                                  id</font><font color="#FFFF99">=</font><font color="#99FF66">news_display</font><font color="#FFFF99"> 
                                                  ></div></font></b></p>
                                                  <p> </p>
                                                  <p><font color="#FF9900"><b>****Easy News Plus 1.0.1 
                                                  Change Initializers (init methods) and add 3 variable 
                                                  names (playingtitle,nexttitle,prevtitle)*******</b></font></p>
                                                  <p><b><font color="#FFFF99"><script type="text/javascript"
                                                  </font><font color="#00FF00">src="/path/to/jquery-1.2.1.pack.js"</font><font color="#FFFF99">></script><br>
                                                  <script type="text/javascript" </font>
                                                  <font color="#00FF00">src="jquery.easynews.plus.js"</font><font color="#FFFF99">></script><br>
   </font></b></p>
                                                  <p><font color="#FFFF99"><b><script></b></font><b><font color="#FFFF99"><br>
                                                  document.ready(function(){<br>
                                                  </font></b><font color="#FFFF99"><b>var newsoption = {<br>
                                                  </font><font color="#FFA928">firstname:</font><font color="#FFFF99">
                                                  </font><font color="#00FF00">"mynews",</font><font color="#FFFF99"><br>
                                                  </font><font color="#FFA928">secondname:</font><font color="#FFFF99">
                                                  </font><font color="#00FF00">"showhere",</font><font color="#FFFF99"><br>
                                                  </font><font color="#FFA928">thirdname:</font><font color="#00FF00">"news_display</font><font color="#00FF00">",</font><font color="#FFFF99"><br>
                                                  </font><font color="#FFA928">fourthname:</font><font color="#00FF00">"news_button</font><font color="#00FF00">" 
                                                  ,</font><font color="#FFFF99"><br>
                                                  </font><font color="#FFA928">playingtitle:</font><font color="#00FF00">"Now</font><font color="#00FF00"> 
                                                  Playing:",</font><font color="#FFFF99"><br>
                                                  </font><font color="#FFA928">nexttitle:</font><font color="#00FF00">"Next</font><font color="#00FF00"> 
                                                  News:",</font><font color="#FFFF99"><br>
                                                  </font><font color="#FFA928">prevtitle:</font><font color="#00FF00">"prev</font><font color="#00FF00"> 
                                                  News:",</font><font color="#FFFF99"><br>
                                                  </font><font color="#FFA928">newsspeed:</font><font color="#00FF00">'8000',</font><font color="#FFFF99"><br>
                                                  </font><font color="#FFA928">isauto:</font><font color="#00FF00">'1'</font><font color="#FFFF99"><br>
                                                  }<br>
                                                  
  
  
(C) Æliens 
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. 
In case of other copyright issues, contact the author.