 |  |  |  |  |  |  |  |
Help modify some JavaScript/HTML
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
•
•
Join Date: Aug 2005
Posts: 279
Reputation: 
Solved Threads: 6
Posting Whiz in Training
JavaScripters,
This question is in regards to a JavaScript script within a PHP page. I included everything in case a complete understanding is required for a correct response.
Thanks in advance.
****INFO****
Rater.php has a JavaScript script, which displays an interactive rating tool. It allows a user to slide a bar up and down while it displays various images that represent various rating levels. We'll call this the “selector". For example, an image of 5 stars represents the rating value of 5. There is a submit button, which interestingly enough submits the chosen rating. And we'll cleverly call this the "submit button". There is only one "selector" and one submit button.
****QUESTION****
Is there any way to create two "selectors" and have only one submit button? Essentially, having each of the selectors for rating two items, but only having to press one submit button, rather than the obvious scenario of selecting twice and submitting twice.
PHEW, hope someone reads this.
Here’s the code:
[PHP]
<?php
$ID = $_POST["ID"];
$rate = $_POST["rate"];
if (!isset($_POST['rate'])) {
?>
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var set_action = "<?php echo $PHP_SELF;?>";
var set_id = "000000000"; ////Future:<?PHP echo $IMAGE_ID;?>, but 0X9 for now.
var set_path = "images/";
var set_spacer = "spacer.gif";
var set_scroll = "f0.gif";
var set_thumb = "f1.gif";
var set_rate1 = "1.gif";
var set_rate2 = "2.gif";
var set_rate3 = "3.gif";
var set_rate4 = "4.gif";
var set_rate5 = "5.gif";
var set_mark1 = "1";
var set_mark2 = "2";
var set_mark3 = "3";
var set_mark4 = "4";
var set_mark5 = "5";
var set_text = "set_text";
var set_submit = "Rate";
//SETTINGS END
var gotkl = 0;
var path = set_path;
var index = 0;
var firstTime = true;
var img_f = new Array();
img_f[0] = new Image();
img_f[1] = new Image();
img_f[0].src= path + set_scroll;
img_f[1].src= path + set_thumb;
//Files with images
var img_p = new Array();
img_p[1] = new Image();
img_p[2] = new Image();
img_p[3] = new Image();
img_p[4] = new Image();
img_p[5] = new Image();
set_spacer =path + set_spacer;
img_p[1].src=path + set_rate1
img_p[2].src=path + set_rate2
img_p[3].src=path + set_rate3
img_p[4].src=path + set_rate4
img_p[5].src=path + set_rate5
function imgonload()
{
document.id_pn.src = img_p[5].src;
}
flg = (document.all) ? 0 : 1;
var obj;
var dx,dy;
var flag = false;
function mousedown(ev)
{
if (flg)
{
X=ev.clientX;
Y=ev.clientY;
return false;
}
else
{
X=event.clientX;
Y=event.clientY;
}
}
function mousemove(ev)
{
if (flag)
{
if (flg)
{
X2=ev.clientX;
Y2=ev.clientY;
}
else
{
X2=event.clientX;
Y2=event.clientY;
}
dy=Y2-Y;
var dh=document.id_spacer.height+dy;
if (dh>-1 && document.id_spacer.height+dy<document.id_pn.height-7) {
document.id_spacer.height = document.id_spacer.height+(Y2-Y);
Y=Y2;
};
if (dh<=-1)
{
document.id_spacer.height=1;
}
if (dh>=document.id_pn.height-7)
{
document.id_spacer.height=document.id_pn.height-8;
}
var mark=Math.floor(document.id_spacer.height/(document.id_pn.height/5));
//alert(mark);
mark=5-mark;
document.id_pn.src = img_p[mark].src
document.post_form.rate.value=mark;
//window.status=mark;
num = mark;
return false;
}
}
function mouseup()
{
obj = null;
flag = false;
}
if (flg)
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
document.write(""+
"<table border='0' cellspacing='0' cellpadding='0' width='100px'>"+
" <tr>"+
" <td align='center'>"+
" <img align='middle' name='id_pn'>"+
" </td>"+
" <td id='scroll_cell' align='center' valign='top' width='20' background='"+img_f[0].src+"'>"+
"<table border=0 cellspacing='0' cellpadding='0'><tr><td><img border=0 name='id_spacer' width='20' height='0' src='"+set_spacer+"'></td></tr><tr><td><img width='20' height='8' border='0' id='id_pil' src='"+img_f[1].src+" 'style='cursor : hand;' onMouseDown='flag = true;' ></td></table>"+
" </td>"+
" </tr>"+
"<form action='"+set_action+"' method='post' name='post_form'>"+
" <tr>"+
" <td colspan='2' style='padding: 2px' align='left'>"+
" <input style='width:80%' type='submit' value='"+set_submit+"'>"+
" <input type='hidden' name='ID' value='"+set_id+"'><input type='hidden' name='rate' value='5'>"+
" </td>"+
" </tr></form></table>");
imgonload();
//-->")));
</script>
<?
} else {
echo "ID: ";
echo $ID;
echo "<br /><br />";
echo "Rate: ";
echo $rate;
}
?>
</body>
</html>
[/PHP]
This question is in regards to a JavaScript script within a PHP page. I included everything in case a complete understanding is required for a correct response.
Thanks in advance.
****INFO****
Rater.php has a JavaScript script, which displays an interactive rating tool. It allows a user to slide a bar up and down while it displays various images that represent various rating levels. We'll call this the “selector". For example, an image of 5 stars represents the rating value of 5. There is a submit button, which interestingly enough submits the chosen rating. And we'll cleverly call this the "submit button". There is only one "selector" and one submit button.
****QUESTION****
Is there any way to create two "selectors" and have only one submit button? Essentially, having each of the selectors for rating two items, but only having to press one submit button, rather than the obvious scenario of selecting twice and submitting twice.
PHEW, hope someone reads this.
Here’s the code:
[PHP]
<?php
$ID = $_POST["ID"];
$rate = $_POST["rate"];
if (!isset($_POST['rate'])) {
?>
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var set_action = "<?php echo $PHP_SELF;?>";
var set_id = "000000000"; ////Future:<?PHP echo $IMAGE_ID;?>, but 0X9 for now.
var set_path = "images/";
var set_spacer = "spacer.gif";
var set_scroll = "f0.gif";
var set_thumb = "f1.gif";
var set_rate1 = "1.gif";
var set_rate2 = "2.gif";
var set_rate3 = "3.gif";
var set_rate4 = "4.gif";
var set_rate5 = "5.gif";
var set_mark1 = "1";
var set_mark2 = "2";
var set_mark3 = "3";
var set_mark4 = "4";
var set_mark5 = "5";
var set_text = "set_text";
var set_submit = "Rate";
//SETTINGS END
var gotkl = 0;
var path = set_path;
var index = 0;
var firstTime = true;
var img_f = new Array();
img_f[0] = new Image();
img_f[1] = new Image();
img_f[0].src= path + set_scroll;
img_f[1].src= path + set_thumb;
//Files with images
var img_p = new Array();
img_p[1] = new Image();
img_p[2] = new Image();
img_p[3] = new Image();
img_p[4] = new Image();
img_p[5] = new Image();
set_spacer =path + set_spacer;
img_p[1].src=path + set_rate1
img_p[2].src=path + set_rate2
img_p[3].src=path + set_rate3
img_p[4].src=path + set_rate4
img_p[5].src=path + set_rate5
function imgonload()
{
document.id_pn.src = img_p[5].src;
}
flg = (document.all) ? 0 : 1;
var obj;
var dx,dy;
var flag = false;
function mousedown(ev)
{
if (flg)
{
X=ev.clientX;
Y=ev.clientY;
return false;
}
else
{
X=event.clientX;
Y=event.clientY;
}
}
function mousemove(ev)
{
if (flag)
{
if (flg)
{
X2=ev.clientX;
Y2=ev.clientY;
}
else
{
X2=event.clientX;
Y2=event.clientY;
}
dy=Y2-Y;
var dh=document.id_spacer.height+dy;
if (dh>-1 && document.id_spacer.height+dy<document.id_pn.height-7) {
document.id_spacer.height = document.id_spacer.height+(Y2-Y);
Y=Y2;
};
if (dh<=-1)
{
document.id_spacer.height=1;
}
if (dh>=document.id_pn.height-7)
{
document.id_spacer.height=document.id_pn.height-8;
}
var mark=Math.floor(document.id_spacer.height/(document.id_pn.height/5));
//alert(mark);
mark=5-mark;
document.id_pn.src = img_p[mark].src
document.post_form.rate.value=mark;
//window.status=mark;
num = mark;
return false;
}
}
function mouseup()
{
obj = null;
flag = false;
}
if (flg)
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
document.write(""+
"<table border='0' cellspacing='0' cellpadding='0' width='100px'>"+
" <tr>"+
" <td align='center'>"+
" <img align='middle' name='id_pn'>"+
" </td>"+
" <td id='scroll_cell' align='center' valign='top' width='20' background='"+img_f[0].src+"'>"+
"<table border=0 cellspacing='0' cellpadding='0'><tr><td><img border=0 name='id_spacer' width='20' height='0' src='"+set_spacer+"'></td></tr><tr><td><img width='20' height='8' border='0' id='id_pil' src='"+img_f[1].src+" 'style='cursor : hand;' onMouseDown='flag = true;' ></td></table>"+
" </td>"+
" </tr>"+
"<form action='"+set_action+"' method='post' name='post_form'>"+
" <tr>"+
" <td colspan='2' style='padding: 2px' align='left'>"+
" <input style='width:80%' type='submit' value='"+set_submit+"'>"+
" <input type='hidden' name='ID' value='"+set_id+"'><input type='hidden' name='rate' value='5'>"+
" </td>"+
" </tr></form></table>");
imgonload();
//-->")));
</script>
<?
} else {
echo "ID: ";
echo $ID;
echo "<br /><br />";
echo "Rate: ";
echo $rate;
}
?>
</body>
</html>
[/PHP]
j_
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
have you seen the yahoo 'launchcast' station music rating? it uses that crazy macromedia stuff to implement its ratings, but these days you can eliminate around 10% of your audience by using AJAX to do the same thing!
then the user selects their rating or selector or whatever and they never push any silly 'submit' button.
the simple answer is "YES" I am sure there is a way of doing what you ask... but all your code was in PHP... you should post the html output, then anyone can load it.
cheers.
then the user selects their rating or selector or whatever and they never push any silly 'submit' button.
the simple answer is "YES" I am sure there is a way of doing what you ask... but all your code was in PHP... you should post the html output, then anyone can load it.
cheers.
•
•
Join Date: Aug 2005
Posts: 279
Reputation:
Solved Threads: 6
Posting Whiz in Training
•
•
•
•
have you seen the yahoo 'launchcast' station music rating? it uses that crazy macromedia stuff to implement its ratings, but these days you can eliminate around 10% of your audience by using AJAX to do the same thing!
•
•
•
•
but all your code was in PHP... you should post the html output, then anyone can load it.
•
•
•
•
the simple answer is "YES" I am sure there is a way of doing what you ask.
I'm only concerned about the JavaScript and of course the html form. I included the php, albeit small amount, because I wanted the reader to have a complete understanding of the script.
I want to thank you for your post. However, I’d rather be helped with my current situation (modifying the JavaScript; see the title of this thread "Help modify some JavaScript/HTML") rather than fielding submitted alternatives. Unless, of course, there is no way to perform the task I would like with the current method.
Last edited by J_Search; Jun 19th, 2006 at 9:23 am.
j_
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
interesting... I guess I could remove the php code, load it in a web browser, take a look at your problem and find a solution for you.
•
•
Join Date: Aug 2005
Posts: 279
Reputation:
Solved Threads: 6
Posting Whiz in Training
No one said you had to do anything. If you know the answer, great. Otherwise, there is no reason for your to post on this thread.
j_
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
•
•
Join Date: Aug 2005
Posts: 279
Reputation:
Solved Threads: 6
Posting Whiz in Training
I've attached a working example with no PHP. There is currently one rater on the page. I need two. Have any ideas?
Thanks,
Thanks,
j_
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
Yes, It is pretty simple to put two elements in a form. You will have a little problem with your code, because you don't have a very 'object-oriented' structure. It is very procedural.
What I mean is that you have overriden the event listeners and then when you move the mouse on the slider you set a 'flag' variable, indicating you should redraw the slider and stars. The nasty way of putting in two sliders: add another complete set of variables into your code and duplicate your algorithm. I.e. use flag and flag1.
The nice way of implmenting the code would be to write functions that you could pass the image object to and manipulate the other objects accordingly, this could be extended past 2 sliders on a page.
You will also need to add the correct elements to your form, so you know what people select.
Now a design question, why use the slider? Why not implement the code on your stars and let the user drag the mouse over the stars, the algorithm is the same no?
What I mean is that you have overriden the event listeners and then when you move the mouse on the slider you set a 'flag' variable, indicating you should redraw the slider and stars. The nasty way of putting in two sliders: add another complete set of variables into your code and duplicate your algorithm. I.e. use flag and flag1.
The nice way of implmenting the code would be to write functions that you could pass the image object to and manipulate the other objects accordingly, this could be extended past 2 sliders on a page.
You will also need to add the correct elements to your form, so you know what people select.
Now a design question, why use the slider? Why not implement the code on your stars and let the user drag the mouse over the stars, the algorithm is the same no?
•
•
Join Date: Aug 2005
Posts: 279
Reputation:
Solved Threads: 6
Posting Whiz in Training
I like the slide bar, only because it allows me to use images. My purpose is to utilize icons vs numbers for the rating system. The icons are rather large and to boot, there are 10. Therefore, I can't just lay them out. So it would be beneficial if they appeared in the same place, one at a time, to save space. However, as you are pointing out, the code is inefficient. Unfortunately, I didn't write the code, and I wouldn't know how to make it efficient.
To fix the issue, I thought of using a very simple JavaScript function to mouseover hyperlinks to change the image, rather than the current, obviously overcomplicated method. Here is an example. Take a look at the top left menu. That's something I'm looking to do, on one condition. I know that the images are given values by the JS, so I was hoping I could tie the mouseover effect in with a submission form. Is there a way to post the mousover value using a form? This way, I could have users just mouse over one of the vertical links, then press a submit button. Of course I would need two sets of vertical links and one submit button, but I first need to know if this is even possible. Otherwise, I'll just have to see about re-writing the first, more complicated, version.
Thanks,
To fix the issue, I thought of using a very simple JavaScript function to mouseover hyperlinks to change the image, rather than the current, obviously overcomplicated method. Here is an example. Take a look at the top left menu. That's something I'm looking to do, on one condition. I know that the images are given values by the JS, so I was hoping I could tie the mouseover effect in with a submission form. Is there a way to post the mousover value using a form? This way, I could have users just mouse over one of the vertical links, then press a submit button. Of course I would need two sets of vertical links and one submit button, but I first need to know if this is even possible. Otherwise, I'll just have to see about re-writing the first, more complicated, version.
Thanks,
j_
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
Yes it is all possible (if I understand what your saying).
I think you are saying you were thinking about setting the value with a mouse over event? This is actually very similar to how it is now, you wouldn't have to change much to make it work as mouseover instead of mouse drag.
Also, you can now manipulate all objects in your html document using javascript. When the user alters the image dragging the mouse, just set the value of the hidden objects in the form. They will all have names, and can be accessed using these names.
Something like this can be called to set the value in the form.
I think you are saying you were thinking about setting the value with a mouse over event? This is actually very similar to how it is now, you wouldn't have to change much to make it work as mouseover instead of mouse drag.
Also, you can now manipulate all objects in your html document using javascript. When the user alters the image dragging the mouse, just set the value of the hidden objects in the form. They will all have names, and can be accessed using these names.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
Something like this can be called to set the value in the form.
•
•
Join Date: Aug 2005
Posts: 279
Reputation:
Solved Threads: 6
Posting Whiz in Training
•
•
•
•
This is actually very similar to how it is now, you wouldn't have to change much to make it work as mouseover instead of mouse drag.
My second idea was to completely forget about the first method (slide bar) and utilize a mouseover script to get a similar effect.
(In theory) Let say for example I have five links (#ed 1-5) and each link has a mousein value corresponding to the appropriate image. Most mouseover JS scripts have a mouseout image value to go to by default whenever your mouse leaves. I'll just ignore that. This way, the current variable will be the last variable chosen by the visitor. I'll just have to include both "raters" in one form. That way I can post both values (mounsein1 and mousein2) at once. So, do you think this is possible? If so, I think it will be a better alternative than the first method.
j_
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards
 |
Similar Threads
- Capturing data from txt file using JavaScript/HTML (JavaScript / DHTML / AJAX)
- Flash/Javascript/HTML code for gallery page (Web Development Job Offers)
- converting from javascript to HTML? (Java)
- Javascript/HTML problem!!! (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Compiler
- Next Thread: Unsolved dropdown menu
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Latest JavaScript / DHTML / AJAX Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser calendar captchaformproblem cart close codes column css date debugger decimal dependent design dom download dropdown element embed enter error events firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe image() index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onerror onmouseover paypal php player position post problem programming prototype rating redirect regex safari scale scriptlets search security select software sql starrating synchronous text textarea toggle unicode validation variables w3c webservice website window windowofwords windowsxp xml
