Enjoy an ad free experience by logging in. Not a member yet?
Register .
03-12-2012, 05:03 AM
PM User |
#1
New Coder
Join Date: Jun 2010
Posts: 27
Thanks: 1
Thanked 0 Times in 0 Posts
please help need in javascript
hello
wj friends please help in javascript.
i figured out all problem and got solution but one i can't figure out please help me
the problem is see this link
http://www.sajeebgroup.com in this page see right side update news box. a slider is sliding but before one slider another slide is coming why this.
here is slide javascript code
PHP Code:
(function($) {
$. fn . easySlider = function( options ){
// default configuration properties
var defaults = {
prevId : 'prevBtn' ,
prevText : 'Previous' ,
nextId : 'nextBtn' ,
nextText : 'Next' ,
controlsShow : true ,
controlsBefore : '' ,
controlsAfter : '' ,
controlsFade : true ,
firstId : 'firstBtn' ,
firstText : 'First' ,
firstShow : false ,
lastId : 'lastBtn' ,
lastText : 'Last' ,
lastShow : false ,
vertical : false ,
speed : 800 ,
auto : false ,
pause : 2000 ,
continuous : false ,
numeric : false ,
numericId : 'controls'
};
var options = $. extend ( defaults , options );
this . each (function() {
var obj = $( this );
var s = $( "li" , obj ). length ;
var w = $( "li" , obj ). width ();
var h = $( "li" , obj ). height ();
var clickable = true ;
obj . width ( w );
obj . height ( h );
obj . css ( "overflow" , "hidden" );
var ts = s - 1 ;
var t = 0 ;
$( "ul" , obj ). css ( 'width' , s * w );
if( options . continuous ){
$( "ul" , obj ). prepend ($( "ul li:last-child" , obj ).clone(). css ( "margin-left" , "-" + w + "px" ));
$( "ul" , obj ). append ($( "ul li:nth-child(2)" , obj ).clone());
$( "ul" , obj ). css ( 'width' ,( s + 1 )* w );
};
if(! options . vertical ) $( "li" , obj ). css ( 'float' , 'left' );
if( options . controlsShow ){
var html = options . controlsBefore ;
if( options . numeric ){
html += '<ol id="' + options . numericId + '"></ol>' ;
} else {
if( options . firstShow ) html += '<span id="' + options . firstId + '"><a href=\"javascript :void(0);\">' + options . firstText + '</a></span>' ;
html += ' <span id="' + options . prevId + '"><a href=\"javascript :void(0);\">' + options . prevText + '</a></span>' ;
html += ' <span id="' + options . nextId + '"><a href=\"javascript :void(0);\">' + options . nextText + '</a></span>' ;
if( options . lastShow ) html += ' <span id="' + options . lastId + '"><a href=\"javascript :void(0);\">' + options . lastText + '</a></span>' ;
};
html += options . controlsAfter ;
$( obj ). after ( html );
};
if( options . numeric ){
for(var i = 0 ; i < s ; i ++){
$( document . createElement ( "li" ))
. attr ( 'id' , options . numericId + ( i + 1 ))
. html ( '<a rel=' + i + ' href=\"javascript :void(0);\">' + ( i + 1 ) + '</a>' )
. appendTo ($( "#" + options . numericId ))
. click (function(){
animate ($( "a" ,$( this )). attr ( 'rel' ), true );
});
};
} else {
$( "a" , "#" + options . nextId ). click (function(){
animate ( "next" , true );
});
$( "a" , "#" + options . prevId ). click (function(){
animate ( "prev" , true );
});
$( "a" , "#" + options . firstId ). click (function(){
animate ( "first" , true );
});
$( "a" , "#" + options . lastId ). click (function(){
animate ( "last" , true );
});
};
function setCurrent ( i ){
i = parseInt ( i )+ 1 ;
$( "li" , "#" + options . numericId ). removeClass ( "current" );
$( "li#" + options . numericId + i ). addClass ( "current" );
};
function adjust (){
if( t > ts ) t = 0 ;
if( t < 0 ) t = ts ;
if(! options . vertical ) {
$( "ul" , obj ). css ( "margin-left" ,( t * w *- 1 ));
} else {
$( "ul" , obj ). css ( "margin-left" ,( t * h *- 1 ));
}
clickable = true ;
if( options . numeric ) setCurrent ( t );
};
function animate ( dir , clicked ){
if ( clickable ){
clickable = false ;
var ot = t ;
switch( dir ){
case "next" :
t = ( ot >= ts ) ? ( options . continuous ? t + 1 : ts ) : t + 1 ;
break;
case "prev" :
t = ( t <= 0 ) ? ( options . continuous ? t - 1 : 0 ) : t - 1 ;
break;
case "first" :
t = 0 ;
break;
case "last" :
t = ts ;
break;
default:
t = dir ;
break;
};
var diff = Math . abs ( ot - t );
var speed = diff * options . speed ;
if(! options . vertical ) {
p = ( t * w *- 1 );
$( "ul" , obj ). animate (
{ marginLeft : p },
{ queue : false , duration : speed , complete : adjust }
);
} else {
p = ( t * h *- 1 );
$( "ul" , obj ). animate (
{ marginTop : p },
{ queue : false , duration : speed , complete : adjust }
);
};
if(! options . continuous && options . controlsFade ){
if( t == ts ){
$( "a" , "#" + options . nextId ). hide ();
$( "a" , "#" + options . lastId ). hide ();
} else {
$( "a" , "#" + options . nextId ). show ();
$( "a" , "#" + options . lastId ). show ();
};
if( t == 0 ){
$( "a" , "#" + options . prevId ). hide ();
$( "a" , "#" + options . firstId ). hide ();
} else {
$( "a" , "#" + options . prevId ). show ();
$( "a" , "#" + options . firstId ). show ();
};
};
if( clicked ) clearTimeout ( timeout );
if( options . auto && dir == "next" && ! clicked ){;
timeout = setTimeout (function(){
animate ( "next" , false );
}, diff * options . speed + options . pause );
};
};
};
// init
var timeout ;
if( options . auto ){;
timeout = setTimeout (function(){
animate ( "next" , false );
}, options . pause );
};
if( options . numeric ) setCurrent ( 0 );
if(! options . continuous && options . controlsFade ){
$( "a" , "#" + options . prevId ). hide ();
$( "a" , "#" + options . firstId ). hide ();
};
});
};
})( jQuery );
here is php to show slide
PHP Code:
<html.
<head>
<style type="text/css">
#ticker-container {
position:relative;
/*overflow:hidden;*/
width: 190px;
height: 200px;
padding-top:0px;
color:#000000;
margin-top:0px;
margin-bottom:1px;
}
#ticker {
position:relative;
overflow:hidden;
margin-left:50px;
margin-right:20px;
margin-top:25px;
width:155px;
padding:0px;
}
</style>
<!-- SLIDER START -->
<script type="text/javascript" src="robin/easyslider/js/jquery.js"></script>
<script type="text/javascript" src="robin/easyslider/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ticker").easySlider({
auto: true,
continuous: true
});
});
</script>
<link href="robin/easyslider/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
</script>
</head>
<body>
<div id="ticker-container">
<div id="ticker">
<ul>
<?php
include( "robin/notice/config.php" );
$query = "SELECT id, title,body,name FROM notice" ;
$result = mysql_query ( $query );
$num = mysql_num_rows ( $result );
while ( $row = mysql_fetch_assoc ( $result ))
{ $name = $row [ 'name' ];
echo '<li><a href="robin/notice/fullarticle.php?id=' . $row [ "id" ]. '" rel="popup standard 700 600 noicon"><img src="kcfinder/upload/.thumbs/images/' . $name . '" width="150px" height="150px" /></a></li>' ;
}
?>
</ul>
</div>
</div>
</body>
</html>
please help
Jump To Top of Thread
Thread Tools
Rate This Thread
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 09:46 AM .
Advertisement
Log in to turn off these ads.