a possible global function from local

[imarkdesigns]

hello to all masters,

just wrote a code from my pre-made javascript slider though i have to add function on the same settings with play/pause and stop button.

here's the current site: Slider


here's my Play and Stop code link

<span><a href="#" id="play" onclick="speed('500')">Play</a>  <a href="#" id="stop" onclick="speed('500000')">Stop</a></span>
 

and here's the code for value that i want to overwrite when i press Play or Stop button.

//Play button: 500;
//Stop button: 5000000;
var speed = 1000; //default speed
 
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*speed, //<-- code that will apply from buttons.
 ar:true,
}
 

advance thanks for the great suggestion and idea.

[johny10151981]

<a href="#" id="play" onclick="speed('500')">Play</a> 

please take a look in the above code. On onclick action you called a function name speed, i want to know is there any function name speed. In my quick search i have not got any function name speed. In your script you have declared a variable name speed and assigned 1000. But its not a function.

speed is not a function and it not doing anything, if you want do something like that :
if a user press the play link then and and action will happen.
Then declare a function that will actually do action, the "what ever it is". and call the function from onClick event.

Best Regards
johny

[imarkdesigns]

ah yes sir actually i removed the previous code since i already misunderstood the correct and proper coding of the function in where i get the codes over internet. however, the speed is still my current selected variable for the value of buttons when it clicked.

[johny10151981]

Try to understand the demo below

<SCRIPT>
 
 
   //Play button: 500;
   //Stop button: 5000000;
   var speed = 1000; //default speed
   var slider={
   num:-1,
   cur:0,
   cr:[],
   al:null,
   at:10*speed, //<-- code that will apply from buttons.
   ar:true,
  }
 
  function set_speed(value)
  {
   speed=value;
  }
 
</SCRIPT>
 
 
 
  <span><a href="#" id="play" onclick="set_speed('500')">Play</a>  <a href="#" id="stop" onclick="set_speed('500000')">Stop</a></span>
 

Simplest code, try to understand, it may help you

[imarkdesigns]

ok sir, thanks for the idea. i will try this right away.

[imarkdesigns]

@johny10151981

hmmm.. still no luck for the actual codes. :(

anyway, here's the full codes from the javascript and html


HTML

        <div id="slide-holder">
          <div id="slide-runner">
            <a href="page.php?name=financial"><img src="assets/media/ajax/frame1.png" width="1000" height="310" id="slide-img-1" class="slide" alt=""></a>
            <a href="page.php?name=plan"><img src="assets/media/ajax/frame2.png" width="1000" height="310" id="slide-img-2" class="slide" alt=""></a>
            <a href="page.php?name=affinity"><img src="assets/media/ajax/frame3.png" width="1000" height="310" id="slide-img-3" class="slide" alt=""></a>
            <div id="slide-controls">
                <a href="#" id="play" onclick="set_speed('10')">Play</a>  <a href="#" id="stop" onclick="set_speed('500000')">Stop</a>
              <p id="slide-nav"></p>
            </div>
          </div>
        </div>            
 

JavaScript

//Default Value
var speed = 1000; //default speed
 
//Slider
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*speed, //Current Value is 1000
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;
 
  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({bottom:((i-pos)*310)});
   $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }
 
  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;
 
  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;
 
  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);
 
  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({bottom:((i-pos)*310)},1000);
 
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;
 
  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);
 
  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
 
//Button to change the Speed Value
function set_speed(value){
 speed = value;
};
 

@johny10151981,
i already included your current given codes here.
i tried to lowest the value of play so i can check if it is changing the speed value of 1000 inside the javascript file. but it isn't changing.. this is my main problem. @_@ i have been searching through the net for the guidelines but i am almost near to get frustrated to find a correct codes.

[johny10151981]

@imarkdesigns
Can you please send the whole page, or page link where i can directly access

[johny10151981]

My bad,
You took the code its true but you didnt modify properly.

var slider={
  num:-1,
  cur:0,
  cr:[],
  al:null,
  at:10*speed, //Current Value is 1000
  ar:true,
  init:function(){
  if(!slider.data || !slider.data.length)
  return false;
 
  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
  $('#'+d[i].id).css({bottom:((i-pos)*310)});
  $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }
 

take a look at the above variable.
you are setting speed variable. but it is not effecting the code at all. Because you set
at:10*speed, //Current Value is 1000 in global
you are setting speed but it is not effecting your object. Do some more action in the set_speed function so that the speed value work

[imarkdesigns]

here's the link where you can see and download the files.

Demo:
http://gadgetinspiration.com/blog/wp...ers/index.html

File:
http://www.dreamcss.com/2009/04/crea...y-sliders.html

Site:
http://unfm.com/new2/

[imarkdesigns]

yeah that was my current problem on how to code the button functionally inside the JavaScript. :(

[johny10151981]

@imarkdesigns
Well here I am stuck. This does not look like Javascript to me. I only can tell you what you are missing. Dont know the codes. Sorry mate hope some one else can help you with code.
Really sorry

[imarkdesigns]

yeah.. i understand that. though the script is already made for the current slider. that is how i just wanted to check if i can still add some navigation through the codes. honestly, took me 7 hours today just to figure it out this Ajax slider.

anyway, thanks for the time and effort sir i appreciate it.

[imarkdesigns]

up for the topic...