Too many posts and much confusion (My Fault), Help with settling on one idea and refining it Options

[Zugfrig]

Hi Guys (especially Christian J, Pandy and Fredrick)

Firstly I must apologize for all the posts, I have asked a series of questions about a number of scrips, where in hindsight I should have just detailed my basic problem and asked for a solution.

I will do that now.



PROBLEM - I in the past used some easy build scripts from Jotform.com (eg forms for dummies) to add pages to my fantasy football website which I run for 10 friends hosted by Weebly.com (eg website building for dummies)

Each year a "coach" has a team consisting of 45 players. Now each week, a coach goes to the website and selects 24 of the 45 names to represent his fantasy side for that week. The first 18 represent the starting lineup and the further 6 are backups in case of injury ect

In an ideal world id like to be able to drag and drop them, but through the many scripts I've been finding (and posting on here) in the last few days, there seems to be various options that hadnt considered which might be simpler for a novice like me.


the must haves i need to consider are

* A coach can only choose 24 names each week (comprising of the 18 and 6 above) no more, no less

* Upon submission I need the list of 24 names emailed to me as a vertical row so I can cut and paste into excel
* A thank-you screen

* Must work on a desktop PC and a mobile device (ipad/iphone/andriod)

the prefer to haves

* The ability for the coach to see the order he has chosen the names before he/she submits it to me


I then should have just said, How do you suggest i do this........ Which still might be a legitimate question.....



Having said all that and trying to tie all my other posts into one......

my favorite so far is http://tpctestsite.weebly.com/9000.html i think this is great because you can rank you whole team and the obviously the top 18 would be the starting 18, the next 6 the backups, and it would not be possible to select the same name twice. Im waiting on a reply from Fredrick to help me finalize (show me where to insert the script) for the idea of coloring the top 18 names (see post at http://forums.htmlhelp.com/index.php?showt...amp;#entry80084 ) while a secondary issue with getting it to work on mobile devices is still in discussion at ( http://forums.htmlhelp.com/index.php?showt...amp;#entry80083 ) which im hoping is similarly close to a solution.


Christian J spoke to me about my original concept here http://forums.htmlhelp.com/index.php?showt...amp;#entry80054
while other ideas were http://tpctestsite.weebly.com/ discussed at http://forums.htmlhelp.com/index.php?showt...amp;#entry80082


again I apologizes if I ask silly questions... i can seem to stumble through it when given some help but especially need to know where to paste new parts of script to make the work...

appreciate all of you help already.

[Zugfrig]

Just and update (setback)

got the following as a reply when questioning the source website about adding colour to the script (my favourite script) as per this http://www.jotform.com/answers/304806-orde...age=10732640770

[Frederiek]

I think this is all way over your head, as it's just for a friends fantasy football site.
(My company usually gets well paid to do this kind of job, without using any third party scripts. But I think that's out of the question for you, which I understand.)

Anyway, it's clear that you don't have to expect that the features you asked for will be implemented in jotform any time soon. I wouldn't dive in to untangle and/or add those features either.

The CSS3 I provided, should go inside a CSS file inside the widget's iframe (e.g. ordePicker.css). But I'm afraid you don't have access to that, as it is on another domain, not owned by you. And putting it in the weebly page won't work.

Can't you download all you need and put everything on your hosting space? That might simplify things. And you should find scripts that do what you want, outside dependency of jotform or its widgets.

[Zugfrig]

G'day.

Yes, my skills in this area are not up to scratch.

I can definitely abandon Jotform, not an issue.

Weebly allows any custom script, but I need to find it. That's why if I could find an alternative along the lines of having a long list and having the user changer the order as they wish and them submitting then I'd be more than happy.

A script like that would already be unlocked and you color code to show the first 18 would likely work.

My two favourites are

http://tpctestsite.weebly.com/9000.html (the one we've been discussing)

http://tpctestsite.weebly.com (would not need the color idea, and works on mobile devices, but unfortunately ranks the users choices alphabetically)

And both are currently Jotform built and weebly hosted, but as I said, I can bypass Jotform if I can find an alternative that's not widget or locked

[Frederiek]

There are "drag and drop sort" scripts (I just googled for this very same string).
The ones I found are jQuery plugins, like the one on the 9000.html. See http://jqueryui.com/sortable/ and http://farhadi.ir/projects/html5sortable/ . Only, the numbers don't change upon drag&drop in either of these scripts.

Searching for "drag and drop sort from one list to another" also returned the jQuery Sortable plugin, this time on jQuery API at http://api.jqueryui.com/sortable/ as an option (connectWith).

As for mobile devices, look into media queries : http://www.d.umn.edu/itss/support/Training...ign/css.html#mq .

It's a start and it's all in how and what you search for to put together the needed components. Since all this is jQuery dependent, you could continue on it, as there are many plugins for all kind of functions available, thus making full profit of it, if you start using jQuery in the first place.

Maybe, I already told you, but I'm not very into jQuery. I have no need for that, as my husband writes his own js. php scripts, while I create the HTML/CSS. That's how we make up good team.

[Zugfrig]

G'day.

I had a look at the first link you suggested and had a play.... I loaded it here http://tpctestsite.weebly.com/2000.html

The number not changing is not an issue because later on they will actually be players names not numbers.... I tried to add the colour 18 string script you gave me but that didn't seem to work for me (although its very likely im pastign it in the wrong spot) and I still have the iphone or andriod problem (unless i can work out hammer.js or media queries)

your second option runs into the same issues as does the third.........



moving on to the media quires......I'm still looking through there to find if something in there may solve this issue, but as you have probably guess im a novice so a lot of it is confusing to the untrained eye......





Having thought long and hard about this, and considering all the suggestions in the last few days, I might need to concede the fact that I should not be trying to bite off more than I can chew in regards to difficulty, given people like yourself and your husband obviously do this regularly and as such are really quite skilled through you many experiences...


I'm kind of now leaning towards these two options http://tpctestsite.weebly.com/ and http://tpctestsite.weebly.com/5678.html because the issue surrounding the mobile devices does not exist as I'm able to make them work my end which eliminates that issue......


The challenge of diverting to a click and move, 2 column style form like these is finding a script (java, jquery ect) that is not bound by the iframe/widget rules that these ones are.... this will then allow some of the suggestions (like the adding color idea) to be applied to the scripts......


Can you suggest what key words to Google to find version of this iframe/widget in other script format (eg HTML, CSS, Jquery ect ) as you did above.



I used key words like sortable, pick a name, build a list, transfer from list to list...... but I cant seem to find anything similar, where as your findings above for the drag and drop style have found three almost identical to my original...

[Frederiek]

G'day.

I had a look at the first link you suggested and had a play.... I loaded it here http://tpctestsite.weebly.com/2000.html

The number not changing is not an issue because later on they will actually be players names not numbers.... I tried to add the colour 18 string script you gave me but that didn't seem to work for me (although its very likely im pastign it in the wrong spot) and I still have the iphone or andriod problem (unless i can work out hammer.js or media queries)

your second option runs into the same issues as does the third.........

I figured you didn't need the numbers (though the one we saw had a nice touch).
On the 2000 page, the style.css is missing (404). Did you put my CSS snippet (btw, it's not a script!) there, as I couldn't find it anywhere? I tried pasting it in myself, but it did nothing and I don't know why. Maybe it has to do with the page setup.

moving on to the media quires......I'm still looking through there to find if something in there may solve this issue, but as you have probably guess im a novice so a lot of it is confusing to the untrained eye......

All the hype about media queries started in 2010 with an article by Ethan Marcotte at A List Apart (explanation and demo). Since then, discussions have started all over the web, pro and con. But, it's a good start and the demo is really nice.

Having thought long and hard about this, and considering all the suggestions in the last few days, I might need to concede the fact that I should not be trying to bite off more than I can chew in regards to difficulty, given people like yourself and your husband obviously do this regularly and as such are really quite skilled through you many experiences…

It's not because we have a lot more experience that you won't be able to achieve this. But it's good to know what you can or can not do, but you're never too old to learn.

I'm kind of now leaning towards these two options http://tpctestsite.weebly.com/ and http://tpctestsite.weebly.com/5678.html because the issue surrounding the mobile devices does not exist as I'm able to make them work my end which eliminates that issue......

Oh, but there are issues. If I resize my browser window on any of your pages, they don't adapt as they should. The navigation goes half off screen and a horizontal scrollbar appears.
Use the bookmarklet by Benjamin Keen to see what the pages do on different screen sizes, http://www.benjaminkeen.com/open-source-pr...gn-bookmarklet/ .

The challenge of diverting to a click and move, 2 column style form like these is finding a script (java, jquery ect) that is not bound by the iframe/widget rules that these ones are.... this will then allow some of the suggestions (like the adding color idea) to be applied to the scripts......

Can you suggest what key words to Google to find version of this iframe/widget in other script format (eg HTML, CSS, Jquery ect ) as you did above.

I used key words like sortable, pick a name, build a list, transfer from list to list...... but I cant seem to find anything similar, where as your findings above for the drag and drop style have found three almost identical to my original...

I already gave you some ideas. Google's algorithms are quite sophisticated. Use search strings that are condense but accurate enough. Sometimes, it helps to add e.g. jquery: to the front of the mix.

But, I had another try with "drag and drop items from one list to another list using jquery". I started to type the first part and Google offered similar suggestions, which one of those I took. That gave me this: http://www.swartzfager.org/thoughts/post.c...list-to-another . Besides, I overlooked other demos at http://jqueryui.com/sortable/ . Have a look at http://jqueryui.com/resources/demos/sortab...mpty-lists.html .

Anyway, lets take it one step at a time.
I suggest you start a clean test page, with a proper structure and everything in the right place (use the W3C validator for that, since your pages are HTML5). Simplify the structure too, as there seem to be many unnecessary DIVs.