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.