943,722 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Jun 14th, 2006
0

Help modify some JavaScript/HTML

Expand Post »
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]
Similar Threads
Reputation Points: 27
Solved Threads: 6
Posting Whiz in Training
J_Search is offline Offline
284 posts
since Aug 2005
Jun 19th, 2006
0

Re: Help modify some JavaScript/HTML

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.
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Jun 19th, 2006
0

Re: Help modify some JavaScript/HTML

Quote ...
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!
No, I haven’t seen launchcast ratings. But nonetheless, I know even less “macromedia stuff” aka flash, therefore that’s of no help. AJAX is also not a relevant alternative. There will be two items per page to vote for. I want the user to be able to do one of three things. Vote twice, vote once, or not at all. Hence the need for the “silly submit button”.

Quote ...
but all your code was in PHP... you should post the html output, then anyone can load it.
There are only 9 lines of php code. The majority of the code is in JavaScript, followed by HTML, then PHP. The output is 2 lines. I didn't think it was necessary to post the output, and I doubt anyone who has the ability to answer the question would disagree.

Quote ...
the simple answer is "YES" I am sure there is a way of doing what you ask.
As you finally realized the point of my post…if the answer is "yes" then how do I do it?

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.
Reputation Points: 27
Solved Threads: 6
Posting Whiz in Training
J_Search is offline Offline
284 posts
since Aug 2005
Jun 19th, 2006
0

Re: Help modify some JavaScript/HTML

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.
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Jun 19th, 2006
0

Re: Help modify some JavaScript/HTML

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.
Reputation Points: 27
Solved Threads: 6
Posting Whiz in Training
J_Search is offline Offline
284 posts
since Aug 2005
Jun 21st, 2006
0

Re: Help modify some JavaScript/HTML

I've attached a working example with no PHP. There is currently one rater on the page. I need two. Have any ideas?

Thanks,
Attached Files
File Type: zip rater.zip (45.6 KB, 28 views)
Reputation Points: 27
Solved Threads: 6
Posting Whiz in Training
J_Search is offline Offline
284 posts
since Aug 2005
Jun 22nd, 2006
0

Re: Help modify some JavaScript/HTML

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?
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Jun 22nd, 2006
0

Re: Help modify some JavaScript/HTML

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,
Reputation Points: 27
Solved Threads: 6
Posting Whiz in Training
J_Search is offline Offline
284 posts
since Aug 2005
Jun 22nd, 2006
0

Re: Help modify some JavaScript/HTML

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. document.ID.value = "whatever";

Something like this can be called to set the value in the form.
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Jun 22nd, 2006
0

Re: Help modify some JavaScript/HTML

Quote ...
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.
Remember, the code works fine now. The only reason to change the code is to be able to put 2 raters on the same page with one submit button. But I don't know how. It's certainly not a matter of copying and pasting, because I've already tried that, haha.

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.
Reputation Points: 27
Solved Threads: 6
Posting Whiz in Training
J_Search is offline Offline
284 posts
since Aug 2005

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Compiler
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Unsolved dropdown menu





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC