j_search
Member
Posts: 10
Registered: 2/5/2007
Member Is Offline |
| posted on 2/15/2007 at 12:37 PM |
|
|
slider manipulation tutorial 1 of ?
Tutorial 1 “how to change stuff when I move the bar thingy”
By: j_search
TABLE OF CONTENTS
-WHAT YOU’LL NEED
-WHERE DO I START?
-WHAT DOES THIS ALL MEAN?
-OUR FIRST EXAMPLE
-OUR SECOND EXAMPLE
-OUR THIRD EXAMPLE
-CONCLUSION
WHAT YOU’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 won’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 don’t even bother going forward if you haven’t read or don’t understand that page. Now, let’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 won’t point out everything that’s inside this file, only the
areas that require manipulation to achieve our desired effect, which is to “change stuff when I move the bar thingy”.
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 you’re going to make changes to the slider.js file, please clear your browser’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 we’re concerned with one line:
n_value = Math.round(n_value * 1e5) / 1e5;
This is the slider’s value in its final form. Above that line, but still inside that function, there is a bit going on, I know. That’s because the
slider doesn’t originally give values in whole number format. Instead of 3, for example, it gives 3.6843438438. Since most people don’t give a
rat’s bottom about that huge number, the code conveniently truncates the decimals and we’re left with the n_value, which is the whole
number we’re looking for, 3. Sweet.
So, any time we want to change something when the slider moves over a particular number, we’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 slider’s value. There isn’t a real world use for this
because it’s freaking annoying, but just for example purposes here’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, you’ll get an alert, and then if you move the slider bar,
you’ll get like fifty million in a row and you’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 you’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 slider’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, you’ll see the slider, but no alert. Now, move the slider down
to the bottom. When the slider moves over the value 3, you’ll get an alert. See, now you’re getting the hang of it. Otherwise you’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
we’ll create a container to put the text in and give it an id:
<div id=”mydiv”></div>
Note: alternatively you could use something like <p id=”mydiv”></p>, however, I chose div, so deal.
Lets pre-fill this div (container) with some text.
<div id=”mydiv”>Original Data</div>
The phrase “Original Data” 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 we’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, you’ll see the line of text “Original Content” and the
slider directly below it. If not, then cry.
Ok, great, but when you move the slider, nothing happens. Well that’s because we didn’t tell the javascript to do anything. Remember, we undid
everything…unless you didn’t undo anything and you’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. Don’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 “Original Content” to “Content 1”.
I know, it’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 slider’s button go? You can’t move the slider huh? No, I’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=”mydiv”> it wasn’t there, so it crapped out. Or something like that. Either way, don’t put your content below your slider.
So you’re thinking, I’m sure, what if I want my content below my slider; great question. There are a lot of ways to accomplish this. Here’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 haven’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, I’m out.
J_search.
|
|
|
tigra
Administrator
Posts: 1982
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 2/15/2007 at 03:27 PM |
|
|
wow, nice tutorial. your contribution is very much appreciated.
|
|
|
para1
Newbie
Posts: 1
Registered: 3/19/2007
Member Is Offline |
| posted on 3/19/2007 at 12:23 PM |
|
|
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
|
|
|
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 |
|
|
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.
|
|
|
j_search
Member
Posts: 10
Registered: 2/5/2007
Member Is Offline |
| posted on 4/23/2007 at 03:45 PM |
|
|
| 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
|
|
|
j_search
Member
Posts: 10
Registered: 2/5/2007
Member Is Offline |
| posted on 4/23/2007 at 03:59 PM |
|
|
| 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
|
|
|
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 |
|
|
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
|
|
|
j_search
Member
Posts: 10
Registered: 2/5/2007
Member Is Offline |
| posted on 4/24/2007 at 10:38 PM |
|
|
| 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
|
|
|
ThatPhilBrettGuy
Junior Member
Posts: 3
Registered: 10/2/2007
Member Is Offline |
| posted on 10/2/2007 at 03:30 PM |
|
|
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
|
|
|
tigra
Administrator
Posts: 1982
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 10/2/2007 at 08:27 PM |
|
|
Scripting Syntax: object.style.backgroundImage="url(filename.gif)"
Image with capital I
|
|
|
ThatPhilBrettGuy
Junior Member
Posts: 3
Registered: 10/2/2007
Member Is Offline |
| posted on 10/2/2007 at 10:21 PM |
|
|
| 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
|
|
|
tigra
Administrator
Posts: 1982
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 10/2/2007 at 10:31 PM |
|
|
most likely there was a path issue, but assigning class should work just fine.
|
|
|
ThatPhilBrettGuy
Junior Member
Posts: 3
Registered: 10/2/2007
Member Is Offline |
| posted on 10/2/2007 at 10:38 PM |
|
|
| 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!
|
|
|
|
|
Product Page
Live Demos
Free Download
Documentation:
Support Forum