Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread Poll:
Author: Subject: slider manipulation tutorial 1 of ?
j_search
Member

Posts: 10
Registered: 2/5/2007
Member Is Offline
posted on 2/15/2007 at 12:37 PM Reply With Quote
slider manipulation tutorial 1 of ?


Tutorial 1 a??how to change stuff when I move the bar thingya??
By: j_search

TABLE OF CONTENTS
-WHAT YOUa??LL NEED
-WHERE DO I START?
-WHAT DOES THIS ALL MEAN?
-OUR FIRST EXAMPLE
-OUR SECOND EXAMPLE
-OUR THIRD EXAMPLE
-CONCLUSION

WHAT YOUa??LL NEED

These files: http://www.softcomplex.com/cgi-bin/download.pl?product_id=32
A text editor: wordpad, vim, or whatever you want. (NOT NOTEPAD)
Probably some other stuff too. I never pack right, and always leave stuff behind.

WHERE DO I START?

Extract the zip file tigra_slider_control.zip to a new folder on your computer. You wona??t need server access to test this script, just a browser.

I can't predict what you'll be using this script for, but I can imagine that even the most inexperienced people would want to jump right into making changes without very much learning. While this is usually impossible, I would like you to start (at the least) with this:

http://www.softcomplex.com/products/tigra_slider_control/docs/

That is the documentation page of the slider bar. It's not long, and you'll need to know those basics before you can truly understand how to manipulate this script. So dona??t even bother going forward if you havena??t read or dona??t understand that page. Now, leta??s get our hands dirty.

WHAT DOES THIS ALL MEAN?

To make significant changes to this script, you need to modify the slider.js file. I wona??t point out everything thata??s inside this file, only the areas that require manipulation to achieve our desired effect, which is to a??change stuff when I move the bar thingya??.

NOTE: Please note that some browsers cache (or keep local copies of) javascript files. Therefore when you make changes to linked javascript files, they are NOT always updated right away. So make sure if youa??re going to make changes to the slider.js file, please clear your browsera??s cache after every change.

Open slider.js in a text editor and find this function:

function f_sliderSetValue (just do a word search)

This function is responsible for calculating the position of the slider. So when your mouse moves the slider over the 3 value, and the number 3 appears in the text box on the original script, this is where it calculates that number 3.

Now wea??re concerned with one line:

n_value = Math.round(n_value * 1e5) / 1e5;

This is the slidera??s value in its final form. Above that line, but still inside that function, there is a bit going on, I know. Thata??s because the slider doesna??t originally give values in whole number format. Instead of 3, for example, it gives 3.6843438438. Since most people dona??t give a rata??s bottom about that huge number, the code conveniently truncates the decimals and wea??re left with the n_value, which is the whole number wea??re looking for, 3. Sweet.

So, any time we want to change something when the slider moves over a particular number, wea??ll place it after this special line and user the n_value variable.

OUR FIRST EXAMPLE

For example, lets say every time we move the slider we would like it to tell the user the slidera??s value. There isna??t a real world use for this because ita??s freaking annoying, but just for example purposes herea??s how to do it.

Open slider.js in your text editor and directly below the line:

n_value = Math.round(n_value * 1e5) / 1e5;

Insert this:

alert(n_value);

Save the file and open single_slider_demo.html in a browser. When the first open it, youa??ll get an alert, and then if you move the slider bar, youa??ll get like fifty million in a row and youa??ll have to attend to all of the alert windows before you can move the slider again. Like I said, not a real world example, but at the least it was a simple example, right? Undo all of the changes youa??ve made thus far, or just start over with fresh files.

OUR SECOND EXAMPLE

Ok, now what if you wanted to alert a user only when the slider moved over the value 3 (assuming 3 is within the slidera??s range). Directly below the line:

n_value = Math.round(n_value * 1e5) / 1e5;

Insert this:

If (n_value == 3){
alert(n_value);
}

Save the file and open single_slider_demo.html in a browser. When you first open it, youa??ll see the slider, but no alert. Now, move the slider down to the bottom. When the slider moves over the value 3, youa??ll get an alert. See, now youa??re getting the hang of it. Otherwise youa??re extremely pissed I just spend 10 minutes explaining this. Sorry, moving on. Undo all of the changes you made so far, or start over with fresh files.

OUR THIRD EXAMPLE

Now, lets say you wanted to change something on the web page, some text for example. To do this, you need to tell javascript where the text is, so wea??ll create a container to put the text in and give it an id:

<div id=a??mydiva??></div>

Note: alternatively you could use something like <p id=a??mydiva??></p>, however, I chose div, so deal.

Lets pre-fill this div (container) with some text.

<div id=a??mydiva??>Original Data</div>

The phrase a??Original Dataa?? being the, ehemmm original data.

Ok, now we need to place it inside of our web page. To do this, open the single_slider_demo.html in your text editor, because wea??ll need to make some changes to the source.

Directly below the line:

<body>

Add the following:

<div id="mydiv">Original Content</div>

Now, save and then open single_slider_demo.html in a browser. When the first open it, youa??ll see the line of text a??Original Contenta?? and the slider directly below it. If not, then cry.

Ok, great, but when you move the slider, nothing happens. Well thata??s because we didna??t tell the javascript to do anything. Remember, we undid everythinga??unless you didna??t undo anything and youa??re stuck with fifty-five thousand more of those alerts. If so, just start over with this example with fresh files.

So now, we want something to happen when we move the slider. So lets get to it. Directly below the line:

n_value = Math.round(n_value * 1e5) / 1e5;

Add the following:

if(n_value == 1){
document.getElementById('mydiv').innerHTML = "Content 1"
}

Save slider.js and then open single_slider_demo.html in a browser. Dona??t forget you may have to clear the cache. Move the slider all the way down till the text box has a number 1 in it. The text above the slider should MORPH (cool word) from a??Original Contenta?? to a??Content 1a??.

I know, ita??s like magic.

Little exercise in coding I want you to try. Open the single_slider_demo.html in your text editor. Locate the line:

<div id="mydiv">Original Content</div>

Cut and paste this line directly below the following line:

</form>

Save and then open single_slider_demo.html in a browser. Woops. Where did the slidera??s button go? You cana??t move the slider huh? No, Ia??m not a ninja. The problem is that when you opened the web page, the javascript ran before the div html did. So when the javascript tried to find the <div id=a??mydiva??> it wasna??t there, so it crapped out. Or something like that. Either way, dona??t put your content below your slider.

So youa??re thinking, Ia??m sure, what if I want my content below my slider; great question. There are a lot of ways to accomplish this. Herea??s one:

Open slider.js in a text editor. Find the lines:

// generate the control's HTML
document.write(

This is where the javascript writes out the slider bar to the web page. If you wanted to put the content to the right or even directly below the slider, you could use the document.write function to accomplish this with no error. However, the limitation is that if you wanted anything in between the slider and the content (if the content is to come after the slider), well then it must also be in this document.write. That may or may not be applicable to you, and you may want to consult a javascript friend (because we all have these) on how to get around this limitation. I havena??t researched any other way because fortunately for me, my slider is right next to my content.

CONCLUSION

Ok, so as you can see, with these 3 examples, you could pretty much do anything. There are a lot of things you can do with javascript and manipulation of objects on web pages including text, images, and fonts. Hopefully with this, you can get a head start on manipulating the slider bar script to achieve what ever result your little heart desires.

On the other hand, you could just pay for the Pro version and give Tigra some much needed funds for his/her/their hard work.

Anyway, Ia??m out.

J_search.
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 2/15/2007 at 03:27 PM Reply With Quote

wow, nice tutorial. your contribution is very much appreciated.
View User's Profile View All Posts By User U2U Member
para1
Newbie

Posts: 1
Registered: 3/19/2007
Member Is Offline
posted on 3/19/2007 at 12:23 PM Reply With Quote

hi, i hope you can help.

in your first example you show how to display back n_value but it brings back an alert lots of times. i want to be able to return a value in a popup alert (just the once) so that it displays the value of the final position of the slider.

how would i do this?

Thanks a lot guys
View User's Profile View All Posts By User U2U Member
Stev-O
Junior Member

Posts: 4
Registered: 4/19/2007
Location: Italy (Northern)
Member Is Offline
posted on 4/21/2007 at 10:57 AM Reply With Quote

how can I simply avoid cursor movement on slide ???

for example: when a checkbox is disabled slide can't either move & change value, when enabled it can.
View User's Profile View All Posts By User U2U Member
j_search
Member

Posts: 10
Registered: 2/5/2007
Member Is Offline
posted on 4/23/2007 at 03:45 PM Reply With Quote

Quote:
Originally posted by para1
hi, i hope you can help.

in your first example you show how to display back n_value but it brings back an alert lots of times. i want to be able to return a value in a popup alert (just the once) so that it displays the value of the final position of the slider.

how would i do this?

Thanks a lot guys


para1,

I haven't bothered to figure out why, but it appears the variable n_value isn't a Global variable (can be used outside of the originating function). So you can just declare your own.

Open the JS file, and word search for "e_input.value = n_value;" Create a new line and paste the following w/out quotes.

"rater_number = n_value;"

That sets the variable rater_number as a global variable with the slider value. Now for the output.

You'll only need the last number, so to trigger this effect, we need to alert when the user lets go of the mouse button. This is called the MouseUp event. So lets go find that event in the code, and put an alert there.

Word Search for "function f_sliderMouseUp"

This is the MouseUP function that runs whenever a user lets go of the mouse button. Go to the end of this function, and insert the alert.

Find: "return window.f_savedMouseUp(e_event);"

Create a new line and paste the following w/out quotes.

"alert(rater_number);"

If you want to get fancy, you can add text to your alert. Here's an example:

alert("You chose the number "+ rater_number);

Here's the catch. Now when a user clicks ANYWHERE on the page, it will cause the alert to go off. So we need to set up a little flag so that the alert only goes off when the slider is in use.

Locate the line "f_sliderMouseUp(e_event, 1);". Create a new line and add the following text w/out qotes.

"slider_in_use = true;"

This line will set this global variable to true whenever the slider is being used. Duh.

Ok, so now, we need to make it so the alert appears only when this value is true. So here's how we do that.

Locate the line you previously added "alert(rater_number);". Delete this line and replace it with the following text w/out quotes.

if (slider_in_use == true){
alert(rater_number);
slider_in_use = false;
}

So, whenever a user lets go of the mouse button anywhere on the page, the code first checks if slider_in_use is true, if not, then no alert, If so, then it will alert the user of the value as it did before. Then it resets the variable to false to indicate the user is no longer clicking the slider.

Hope this helps,

_J
View User's Profile View All Posts By User U2U Member
j_search
Member

Posts: 10
Registered: 2/5/2007
Member Is Offline
posted on 4/23/2007 at 03:59 PM Reply With Quote

Quote:
Originally posted by Stev-O
how can I simply avoid cursor movement on slide ???

for example: when a checkbox is disabled slide can't either move & change value, when enabled it can.

Stev-O,

First, add an input checkbox in the form. In the HTML code, find the line "<input name="Submit" type="Submit" value="Submit">".

Create a new line above the line you just found, and paste the following text w/out quotes.

"<INPUT TYPE=checkbox ID=disable> Disable Slider <br/>"

Nice.

Now, you'll need to have the JS code check to see if this field is checked or not before it moves the slider. In the JS file, locate the line "function f_sliderMouseMove (e_event)".

Create a new line below this text and paste the following text w/out quotes.

"if(document.demoForm.disable.checked == true){
return 0;
}"

Hope this helps,

_J
View User's Profile View All Posts By User U2U Member
Stev-O
Junior Member

Posts: 4
Registered: 4/19/2007
Location: Italy (Northern)
Member Is Offline
posted on 4/24/2007 at 11:01 AM Reply With Quote

thanks for the quick answer

unfortunately, it seems not working here maybecause I've to post in a form more than a slider so the control is passed anyway
View User's Profile View All Posts By User U2U Member
j_search
Member

Posts: 10
Registered: 2/5/2007
Member Is Offline
posted on 4/24/2007 at 10:38 PM Reply With Quote

Quote:
Originally posted by Stev-O
thanks for the quick answer

unfortunately, it seems not working here maybecause I've to post in a form more than a slider so the control is passed anyway

Stev-O,

I do not understand. If you post your code, I can try to fix it for you.

_J
View User's Profile View All Posts By User U2U Member
ThatPhilBrettGuy
Junior Member

Posts: 3
Registered: 10/2/2007
Member Is Offline
posted on 10/2/2007 at 03:30 PM Reply With Quote

Some good info here and it got me in the mood for playing with the java. I thought I'd try to set the backbround on the slider to a different image, dependant on the value, so in f_sliderSetValue I did this :-

// set the background
e_base = get_element('sl' + this.n_id + 'base');
if (n_value == 0)
e_base.style.backgroundimage = "url('img/sldr2h_bg.gif')";
else
e_base.style.backgroundimage = "url('img/blueh_bg.gif')";


But the image never changes. Sorry if it's a simple error but it's my first day with javascript!

Using this.e_base didn't work either...

Many thanks

Phil
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 10/2/2007 at 08:27 PM Reply With Quote

Scripting Syntax: object.style.backgroundImage="url(filename.gif)"

Image with capital I
View User's Profile View All Posts By User U2U Member
ThatPhilBrettGuy
Junior Member

Posts: 3
Registered: 10/2/2007
Member Is Offline
posted on 10/2/2007 at 10:21 PM Reply With Quote

Quote:
Originally posted by tigra
Scripting Syntax: object.style.backgroundImage="url(filename.gif)"

Image with capital I
Thanks for the suggestion, but that still doesn't work (in fact it actually makes the slider graphic disappear. I've got it to work by giving the div a class and setting the image in the css.

I'm just interested to know why what I've tried doesn't work.

Cheers

Phil
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 10/2/2007 at 10:31 PM Reply With Quote

most likely there was a path issue, but assigning class should work just fine.
View User's Profile View All Posts By User U2U Member
ThatPhilBrettGuy
Junior Member

Posts: 3
Registered: 10/2/2007
Member Is Offline
posted on 10/2/2007 at 10:38 PM Reply With Quote

Quote:
Originally posted by tigra
most likely there was a path issue, but assigning class should work just fine.
Ha. Spot on! A silly path error. I was doing the usual developer 'trick' of looking for a complex error when the simple one was right in front of me.

Many thanks, and keep up the good work! A company worth spending money with!
View User's Profile View All Posts By User U2U Member
Post new thread Poll:

Related Links:
Product Page
Product Demonstrations Live Demos
Multiple Designs
Equalizer
Free Download Free Download
Product Documentation Documentation:
Documentation Page
Change Log
Support Forum Support Forum

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004