Click and set parameters

@steinergroundJun 11.2014

Hello.

I’m new here, and I would like to thank you all for the opportunity of solving my problem here.

I’m developing a website where I’ll have to provide a selection tool (a tier) with 2 positions and the user will have to click on them one at a time and then select an option from a list at the bottom.

Something like this:
~~[URL=”http://s4.postimg.org/hyn4jcph9/web_app.png”]~~http://s4.postimg.org/hyn4jcph9/web_app.png[/URL]

Step by step, this is what I need to happen:

1 – User click at position “1”.
2 – User looks down for an option and chooses “A”.
3 – The position “1” gets filled with that info (I mean, gets background and string “A”).
4 – Option “A” gets “disable” (user can’t click there anymore).
5 – If the user clicks on the first position (that is already filled) he/she is prompted about removing that selection and doing it again.

I know that I’m asking for a lot of code. It is not that simple. But I’m really lost about where to start, because I’m a Java developer not familiar with JavaScript (that I think will be necessary to handle that).

Thanks for the support!

Have a nice day!

to post a comment

JavaScript

11 Comments(s) _↴

@JMRKERJun 11.2014 — #For clarification ...

The user can toggle between enabled/disabled for top position 1. True?

Same for top position 2?

Do the bottom choices A, B, C change between top 1 and 2?

Where does the "background" information come from? Is it a value of the elements of the selections?

Can you provide a link to the images you plan to use for the top and bottom positions.

@steinergroundauthorJun 11.2014 — #For clarification ...

The use can toggle between enabled/disabled for top position 1. True?

Same for top position 2?

Do the bottom choices A, B, C change between top 1 and 2?

Where does the "background" information come from? Is it a value of the elements of the selections?

Can you provide a link to the images you plan to use for the top and bottom positions.[/QUOTE]

Thanks for the reply!

I believe that explaining my goal could help us solving that. Well, I'm developing and TOP5 web application, where the users will select 5 cities among many others.

When the user starts using the webpage, all the positions above will be available for selection. When the user selects one of them, it gets a new color to show that it is selected and all the other positions change colors to a "disabled-like" state. But only the colors, because the positions should still be available to be clicked, in case the user wants to change the selected position without choosing a city (option) first.

The options below will not change at all, except when they get selected: in that case, they have to be disabled. There's just one option for the entire selection (in short, the user cannot pick a city twice).

Every option will have a string and a background. Something like "New York City" and some related photo. That data must be acquired by the selected position. For instance: user clicks position 1, then clicks "New York City", then that option gets disabled and "New York City" and the background goes to position 1.

And what about when the user clicks at a position that has already been filled with one city? The user is asked about removing that selection and, upon agreement, that position gets available again and that city (option) enabled again.

I don't know the best place to keep the background image information (HTML, CSS). I would go with the your suggestion.

@xelawhoJun 11.2014 — #I'm not suggesting that you need jQuery to do this, but I would suggest an interface more like jQuery's sortable as it seems to be more intuitive than what you are describing, requires less clicks, makes it easier for the user to edit selections, etc...

@steinergroundauthorJun 12.2014 — #I'm not suggesting that you need jQuery to do this, but I would suggest an interface more like jQuery's sortable as it seems to be more intuitive than what you are describing, requires less clicks, makes it easier for the user to edit selections, etc...[/QUOTE]

It's a great alternative, but I don't think it will fit, because I'm going to list 32 cities. It's a lot of scrolling and drag and drop. ?

@xelawhoJun 12.2014 — #I'm not sure that I understand all the ins and outs, but maybe this is a start....

[CODE]
 <!DOCTYPE html> 
 <html> 
 <head> 
 <title></title> 
 <style>
 .city{
 margin:5px;
 border:solid;
 padding:2px;
 background-color:LightGreen;
 cursor:pointer;
 }
 
 </style>
 </head> 
 <body> 
 <div id="wrap">
 Choose position:
 1: <input type="radio" name="pos" value ="1"/>
 2: <input type="radio" name="pos" value ="2"/>
 3: <input type="radio" name="pos" value ="3"/>
 4: <input type="radio" name="pos" value ="4"/>
 5: <input type="radio" name="pos" value ="5"/>
 <span id="mess"> </span>
 </div>
 
 <ol id="prefs">
 <li class ="pref"></li>
 <li class ="pref"></li>
 <li class ="pref"></li>
 <li class ="pref"></li>
 <li class ="pref"></li>
 </ol>
 <div id="cities">
 <span class="city">New York</span><span class="city">Paris</span><span class="city">London</span><span class="city">Tokyo</span>
 <span class="city">Barcelona</span><span class="city">Sydney</span><span class="city">Berlin</span><span class="city">Buenos Aires</span>
 </div>
 <script> 
 (function (){
 var taken = [];
 var canchoose=false;
 var active;
 var rads = document.getElementById("wrap").getElementsByTagName("input");
 var opts = document.getElementById("cities").getElementsByTagName("span");
 var pos = document.getElementById("prefs").getElementsByTagName("li");
 
 for (var i = 0; i<rads.length; i++){
 rads[i].onchange=f;
 }
 
 function f () {
 var num = this.value;
 document.getElementById("mess").innerHTML="";
 if(taken.indexOf(num)!=-1){
 var conf = confirm("that spot is taken. replace?");
 if (!conf){
 this.checked=false;
 return;
 } else {
 var txt = pos[num-1].innerHTML;
 for (var j = 0; j<opts.length; j++){
 if (opts[j].innerHTML==txt){
 opts[j].style.backgroundColor="LightGreen";
 break;
 }
 }
 pos[num-1].innerHTML="";
 }
 
 }
 document.getElementById("mess").innerHTML="choose city for position "+num;
 taken.push(num);
 active=num;
 canchoose=true;
 }
 
 
 for (var a = 0; a<opts.length; a++){
 opts[a].onclick=g;
 }
 
 function g (){
 if(canchoose){
 if (this.style.backgroundColor=="red"){
 alert("cannot choose the same city twice");
 return;
 }
 
 pos[active-1].innerHTML=this.innerHTML;
 rads[active-1].checked=false;
 this.style.backgroundColor="red";
 canchoose=false;
 document.getElementById("mess").innerHTML="";
 } else {
 alert("please choose a position first");
 }
 }
 })();
 </script> 
 </body> 
 </html>
 [/CODE]

@steinergroundauthorJun 12.2014 — #xelawho,

Thank you! That's exactly the kind of functionality that I'm looking for.

I just like to know if you could take a look at this: http://youtu.be/Vk_voyjXU6g

It's a video (slideshow) that I've made showing step by step some situations of the "engine" that I'm looking for.

I know that it's a lot of code (and I'm not expecting you to do it for me)... But maybe you can guide me on where to start and if that is doable.

@xelawhoJun 12.2014 — #The first place to start for me is always with the html (and just enough css for it to make sense). You will need two versions of your "options" images - one color, one grayscale. I would suggest stating out with a mini version of the layout - maybe 5 options and 3 positions.

Once you have the basic html you can start looking at the javascript. I guess you know that there's a ton of hypothetical situations going on in that video, but being that you know java alot of the logic will be familiar to you - if/else's, boolean flags, but it's the syntax that will bog you down. Unless you actually want to learn javascript it may be worth your time/money paying someone to do this.

Have a go at it, anyway, and feel free to post your code here as you go when you get stuck. Google is your friend, as is the error console of your browser. MDN is about the best, most modern reference imho.

@steinergroundauthorJun 12.2014 — #The first place to start for me is always with the html (and just enough css for it to make sense). You will need two versions of your "options" images - one color, one grayscale. I would suggest stating out with a mini version of the layout - maybe 5 options and 3 positions.

Once you have the basic html you can start looking at the javascript. I guess you know that there's a ton of hypothetical situations going on in that video, but being that you know java alot of the logic will be familiar to you - if/else's, boolean flags, but it's the syntax that will bog you down. Unless you actually want to learn javascript it may be worth your time/money paying someone to do this.

Have a go at it, anyway, and feel free to post your code here as you go when you get stuck. Google is your friend, as is the error console of your browser. MDN is about the best, most modern reference imho.[/QUOTE]

xelawho,

Thanks a lot! I was planning on learning Dart Language and I think that this is the right moment to do that, haha! I'll take a look at it.

@xelawhoJun 12.2014 — #I was planning on learning Dart Language[/QUOTE]

Interesting. Can I ask why?

@steinergroundauthorJun 13.2014 — #Interesting. Can I ask why?[/QUOTE]

It seems that Dart can deliver all the tools that I need to do that. It's like an alternative to JavaScript and I'm liking the language so far (well, just started reading the tutorials). Do you think that this is the wrong way?

@xelawhoJun 13.2014 — #I don't think it's necessarily wrong, I just think it's an odd choice. Javascript is everywhere, in and out of the browser, it's cross-platform, cross-browser. IE is slowly coming to the party and conforming to standards which is saving alot of dev headaches. Coupled with html5, the latest iterations of ecma script (along with server-side js like node.js) make it look like the no-brainer choice for web development. Throw html5's offline capabilities into the mix and there's a fair chunk of people who are looking at it as the way forward for OS-agnostic mobile app development. And even js as it was 10 years ago has all the tools you need to make the sort of app you are thinking about.

Dart on the other hand is Chrome-specific, but will work in other browsers with the inclusion of a VM. It's not so much an alternative to js as another way to create js. It seems to me like a very strange move on google's behalf - the trend is towards unifying and standardising the web, not fragmenting it again, but then maybe I don't understand the real underlying motive of Dart. There are certainly still frustrations with javascript, but to me the logical move would be to learn what js can do and if you do find it coming up short, look around for alternate solutions.

Also in #JavaScript _↴

move back/next links from below galley image to on each side?A Form validator object called: gen_validatorv2 Change the drop down border style in IE7?

Success!

Help @steinerground spread the word by sharing this article on Twitter...

Tweet This

Click and set parameters

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Click and set parameters

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴