SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2005
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why this textbox doesn't work inline?

    Hi

    I have been joining a project which has a page that needs calendar.

    So I added CaldendarDateInput.js from
    http://www.dynamicdrive.com/dynamici...oncalendar.htm
    which looks good.

    Then they want me not to use table to arrange select boxes, text field and the calendar icon.

    So I got rid of <table>..<td>.. and so on,
    then each widget displayed on each line.

    month select box
    day select box
    year input
    calendar icon

    And I found they were using
    Code:
    select
    {
    	display: block;
    
    }
    in their .css

    So I added class=calendarDateInput in the .js code
    like

    Code:
    write('<select class="calendarDateInput" id="' + DateName + '_Month_ID" onChange="' + DateName + '_Object.changeMonth(this)">');
             if (!Required) {
                var NoneSelected = (DefaultDate == '') ? ' selected' : '';
                writeln('<option value=""' + NoneSelected + '>' + UnselectedMonthText + '</option>');
             }
             for (var i=0;i<12;i++) {
                MonthSelected = ((DefaultDate != '') && (eval(DateName + '_Object.picked.monthIndex') == i)) ? ' selected' : '';
                writeln('<option value="' + i + '"' + MonthSelected + '>' + MonthNames[i].substr(0,3) + '</option>');
             }
             write('</select>' + String.fromCharCode(13)+'<select' + InitialStatus + ' class="calendarDateInput" id="' + DateName + '_Day_ID" onChange="' + DateName + '_Object.changeDay(this)">');
             for (var j=1;j<=eval(DateName + '_Object.picked.dayCount');j++) {
                DaySelected = ((DefaultDate != '') && (eval(DateName + '_Object.picked.day') == j)) ? ' selected' : '';
                writeln('<option' + DaySelected + '>' + j + '</option>');
             }
             write('</select>' + String.fromCharCode(13)+'<input' + InitialStatus + ' class="calendarDateInput" type="text" id="' + DateName + '_Year_ID" size="' + eval(DateName + '_Object.picked.yearPad.length') + '" maxlength="' + eval(DateName + '_Object.picked.yearPad.length') + '" title="Year" value="' + eval(DateName + '_Object.picked.yearPad') + '" onKeyPress="return YearDigitsOnly(window.event)" onKeyUp="' + DateName + '_Object.checkYear(this)" onBlur="' + DateName + '_Object.fixYear(this)"></input>');
             write(String.fromCharCode(13) + '<a' + InitialStatus + ' id="' + DateName + '_ID_Link" href="javascript:' + DateName + '_Object.show()" onMouseOver="return ' + DateName + '_Object.iconHover(true)" onMouseOut="return ' + DateName + '_Object.iconHover(false)"><img src="' + ImageURL + '" align="baseline" title="Calendar" border="0"></a>&nbsp;');
             write('<span id="' + DateName + '_ID" style="position:absolute;visibility:hidden;width:' + (CellWidth * 7) + 'px;background-color:' + CalBGColor + ';border:1px solid dimgray;" onMouseOver="' + DateName + '_Object.handleTimer(true)" onMouseOut="' + DateName + '_Object.handleTimer(false)">');
             write('<table class="calendarDateInput" width="' + (CellWidth * 7) + '" cellspacing="0" cellpadding="1">' + String.fromCharCode(13) + '<tr style="background-color:' + TopRowBGColor + ';">');
             writeln('<td id="' + DateName + '_Previous_ID" style="cursor:default" align="center" class="calendarDateInput" style="height:' + CellHeight + '" onClick="' + DateName + '_Object.previous.go()" onMouseDown="VirtualButton(this,true)" onMouseUp="VirtualButton(this,false)" onMouseOver="return ' + DateName + '_Object.previous.hover(this,true)" onMouseOut="return ' + DateName + '_Object.previous.hover(this,false)" title="' + eval(DateName + '_Object.previous.monthName') + '"><img src="' + PrevURL + '"></td>');
             writeln('<td id="' + DateName + '_Current_ID" style="cursor:pointer" align="center" class="calendarDateInput" style="height:' + CellHeight + '" colspan="5" onClick="' + DateName + '_Object.displayed.goCurrent()" onMouseOver="self.status=\'Click to view ' + CurrentDate.fullName + '\';return true;" onMouseOut="self.status=\'\';return true;" title="Show Current Month">' + eval(DateName + '_Object.displayed.fullName') + '</td>');
             writeln('<td id="' + DateName + '_Next_ID" style="cursor:default" align="center" class="calendarDateInput" style="height:' + CellHeight + '" onClick="' + DateName + '_Object.next.go()" onMouseDown="VirtualButton(this,true)" onMouseUp="VirtualButton(this,false)" onMouseOver="return ' + DateName + '_Object.next.hover(this,true)" onMouseOut="return ' + DateName + '_Object.next.hover(this,false)" title="' + eval(DateName + '_Object.next.monthName') + '"><img src="' + NextURL + '"></td></tr>' + String.fromCharCode(13) + '<tr>');
             for (var w=0;w<7;w++) writeln('<td width="' + CellWidth + '" align="center" class="calendarDateInput" style="height:' + CellHeight + ';width:' + CellWidth + ';font-weight:bold;border-top:1px solid dimgray;border-bottom:1px solid dimgray;">' + WeekDays[w] + '</td>');
             writeln('</tr>' + String.fromCharCode(13) + '</table>' + String.fromCharCode(13) + '<span id="' + DateName + '_DayTable_ID">' + eval(DateName + '_Object.buildCalendar()') + '</span>' + String.fromCharCode(13) + '</span>');
          }
    And add the class in the .css like this

    Code:
    .calendarDateInput
    {
        display:inline;
    }
    But the result is

    month select box day select box
    year input
    calendar icon

    as you see in the attachment.

    I'm not sure what is wrong.
    As I modified

    Code:
    .calendarDateInput
    {
        display:inline;
        border: thin solid red
    }
    The year text box is picking up the border as thin solid red, but why it is not displaying inline beside the month select box,
    and why calendar icon is also displayed in separate line?

    I really appreciate your help,


    Thanks,
    Attached Images Attached Images


Bookmarks

Posting Permissions

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