www.webdeveloper.com
Results 1 to 9 of 9

Thread: 11 Week Interface

  1. #1
    Join Date
    Jul 2006
    Posts
    657

    11 Week Interface

    Hi, i am developing a website and i am finding it difficult to come up with a suitable interface to capture 2 timeframes that they user needs to enter into a form.

    This is a difficult problem to explain, so apologies if i don't get the message across after one read.

    The user has 11 weeks (77 days) to carry out an overall task. Each task comprises of 2 sub tasks (task A and task B). When the user is building the task using the task creation form, they have to choose a timeframe for both task A and task B. The user does not have to use all of the 11 weeks, so they could choose to allocate 1 week to task A and 1 week to task B, however i need some way to show that the choice of one timeframe affects and reflects the choices available for the other timeframe.

    For example, if the user chooses a timeframe of 2 weeks for task A, then i need the UI to represent that only 1 - 9 weeks are left for task 2 BUT they do not have to choose all of the 9 weeks... OR if the user chose 5 weeks for task A, then the UI needs to show that only 1-6 weeks are now only available for task B.

    The UI must clearly illustrate that both of the timeframes are linked... i do not want to use 2 drop downs where the choice of one reflects the choices available in the other drop down as it will not be obvious to the user that these timeframes are dependent and linked to one another.

    Thanks in advance if you for reading this far ;-)

  2. #2
    Join Date
    Nov 2010
    Posts
    1,090
    one possibility?
    Code:
    <body>
    please choose a timeframe for task A: 
    <select id="taskA" onchange="getWeeks()">
    <option value="0">select number of weeks</option>
    <option value="7">one</option>
    <option value="14">two</option>
    <option value="21">three</option>
    <option value="28">four</option>
    <option value="35">five</option>
    <option value="42">six</option>
    <option value="49">seven</option>
    <option value="56">eight</option>
    <option value="63">nine</option>
    <option value="70">ten</option>
    <select><br>
    please choose a timeframe for task B: 
    <select id="taskB" onchange="getWeeks()">
    <option value="0">select number of weeks</option>
    <option value="7">one</option>
    <option value="14">two</option>
    <option value="21">three</option>
    <option value="28">four</option>
    <option value="35">five</option>
    <option value="42">six</option>
    <option value="49">seven</option>
    <option value="56">eight</option>
    <option value="63">nine</option>
    <option value="70">ten</option>
    <select>
    <div id="message"></div>
    <script type="text/javascript">
    function getWeeks(){
    var valA=document.getElementById("taskA").value;
    var valB=document.getElementById("taskB").value;
    document.getElementById("message").innerHTML="";
    var daysleft=77-valA-valB;
    if(daysleft<0){
    var mess="You can only choose a total of 11 weeks for both tasks"
    } else if (valA=="0"){
    var mess="Please choose a timeframe for task A. You have "+daysleft+" days available"
    } else if (valB=="0"){
    var mess="Please choose a timeframe for task B. You have "+daysleft+" days available"
    } else {
    var mess="Thank you. Your selections have been registered"
    }
    document.getElementById("message").innerHTML=mess;
    }
    </script>
    </body>
    </html>

  3. #3
    Join Date
    Jul 2006
    Posts
    657
    Excellent, that is great... i think that could work very well, thanks...

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    A variant with a demo
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    div {display:block;}
    input {float:right;}
    #pge {width:400px;margin:0 auto;}
    </style>
    </head>
    <body>
    <div id="pge">
    <div><fieldset><legend>Weeks</legend>
    	<ul id="wkb">
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    	</ul>
    </fieldset></div>
    <div><fieldset><legend>Task A</legend>
    	<input type="button" value="One more" onclick=more('tka')><input type="button" value="One less"  onclick=less('tka')>
    	<ul id="tka">
    	</ul>
    </fieldset></div>
    <div><fieldset><legend>Task B</legend>
    	<input type="button" value="One more"  onclick=more('tkb')><input type="button" value="One less"  onclick=less('tkb')>
    	<ul id="tkb">
    	</ul>
    </fieldset></div>
    </div>
    <script type="text/javascript">
    function more(t){var lstItm=document.getElementById(t),lstWeek=document.getElementById('wkb').childNodes;
    	var newItm=document.createElement('li'),okWeek=false;
    	for (i in lstWeek) if(lstWeek[i].nodeName=='LI') {okWeek=true;lstWeek[i].parentNode.removeChild(lstWeek[i]);break}
    	if (okWeek){
    		newItm.innerHTML='Week';
    	   lstItm.appendChild(newItm);
    	}
    }
    function less(t){var lstItm=document.getElementById('wkb'),lstWeek=document.getElementById(t).childNodes;
    	var newItm=document.createElement('li'),okWeek=false;
    	for (i in lstWeek) if(lstWeek[i].nodeName=='LI') {okWeek=true;lstWeek[i].parentNode.removeChild(lstWeek[i]);break}
    	if (okWeek){
    		newItm.innerHTML='Week';
    	   lstItm.appendChild(newItm);
    	}
    }
    </script>
    </body>
    </html>
    Last edited by 007Julien; 10-16-2012 at 12:11 PM.

  5. #5
    Join Date
    Jul 2006
    Posts
    657
    Wow, cool, that is excellent, thanks... great strategy...

  6. #6
    Join Date
    Nov 2010
    Posts
    1,090
    another approach...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #taskA,#keyA {background-color:blue; display:inline-block; height:20px}
    #taskB,#keyB {background-color:red; display:inline-block; height:20px}
    #free,#keyfree {background-color:green; display:inline-block; height:20px}
    #keyA,#keyB,#keyfree {width:20px}
    #free{width:550px}
    </style>
    </head>
    <body>
    <div id="display">
    <span style="width:0px" id="taskA"></span><span style="width:0px" id="taskB"></span><span style="width:550px" id="free"></span>
    </div>
    <div id="keyA"></div><span id="infoA"> Time Alloted for task A: 0 weeks <input type="button" value="-" onclick="getWeeks(this)"/><input type="button" value="+" onclick="getWeeks(this)"/></span><br>
    <div id="keyB"></div><span id="infoB"> Time Alloted for task B: 0 weeks <input type="button" value="-" onclick="getWeeks(this)"/><input type="button" value="+" onclick="getWeeks(this)"/></span><br>
    <div id="keyfree"></div><span id="infofree"> Remaining time Available for allotment: 11 weeks</span>
    <script type="text/javascript">
    var weeks={
    A:0,
    B:0,
    free:11
    };
    function getWeeks(btn){
    if(weeks.free==0&&btn.value=="+"){return;}
    var sp=btn.parentNode.id.substr(4)
    var act=document.getElementById("task"+sp);
    if(btn.value=="+"){
    act.style.width=parseFloat(act.style.width)+50+"px";
    document.getElementById("free").style.width=parseFloat(document.getElementById("free").style.width)-50+"px";
    btn.parentNode.innerHTML=btn.parentNode.innerHTML.replace(/(\d)+/,++weeks[sp])
    document.getElementById("infofree").innerHTML=document.getElementById("infofree").innerHTML.replace(/(\d)+/,--weeks.free);
    	} else if (btn.value=="-"&&act.style.width!="0px") {
    act.style.width=parseFloat(act.style.width)-50+"px";
    document.getElementById("free").style.width=parseFloat(document.getElementById("free").style.width)+50+"px";
    btn.parentNode.innerHTML=btn.parentNode.innerHTML.replace(/(\d)+/,--weeks[sp])
    document.getElementById("infofree").innerHTML=document.getElementById("infofree").innerHTML.replace(/(\d)+/,++weeks.free);
    		}			
    }
    </script>
    </body>
    </html>

  7. #7
    Join Date
    Jul 2006
    Posts
    657
    This is impressive stuff guys, thanks very much...

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    A simpler script
    Code:
    <body>
    <div id="pge">
    <div><fieldset><legend>Weeks</legend>
    	<ul id="wkb">
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    		<li>Week</li>
    	</ul>
    </fieldset></div>
    <div><fieldset><legend>Task A</legend>
    	<input type="button" value="One more" onclick=frmTo('wkb','tka')><input type="button" value="One less"  onclick=frmTo('tka','wkb')>
    	<ul id="tka">
    	</ul>
    </fieldset></div>
    <div><fieldset><legend>Task B</legend>
    	<input type="button" value="One more"  onclick=frmTo('wkb','tkb')><input type="button" value="One less"  onclick=frmTo('tkb','wkb')>
    	<ul id="tkb">
    	</ul>
    </fieldset></div>
    </div>
    <script type="text/javascript">
    function frmTo(f,t){var lstWeek=document.getElementById(f).childNodes,lstItm=document.getElementById(t);
    	for (i in lstWeek) if(lstWeek[i].nodeName=='LI') {
    		lstWeek[i].parentNode.removeChild(lstWeek[i]);
    	 	var newItm=document.createElement('li');
    		newItm.innerHTML='Week';
    	 	lstItm.appendChild(newItm);
    		break}
    }
    
    </script>
    </body>

  9. #9
    Join Date
    Jul 2006
    Posts
    657
    Thanks for the help guys... amazing help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles