I want to add CSS to the select box of the Time/Date Origination dropdown to make it look slick. In order to do so I need to be able to add a class to the select box. How can I do this when its in javascript? I'm referring to itemedititem.tpl
{capture name=originationTimestampField}{strip}
{g->formVar var="form[originationTimestampSplit]"}
{/strip}{/capture}
{capture name=htmlSelectDate}
{html_select_date time=$form.originationTimestamp
field_array=$smarty.capture.originationTimestampField start_year="2000" end_year="+0"}
{/capture}
{$smarty.capture.htmlSelectDate|utf8}
{if !empty($ItemEditItem.originationTimestamp)}
<script type="text/javascript">
// <![CDATA[
function setOriginationTimestamp() {ldelim}
var frm = document.getElementById('itemAdminForm');
frm.elements['{$smarty.capture.originationTimestampField}[Date_Month]'].value = '{$ItemEditItem.originationTimestamp.Date_Month}';
frm.elements['{$smarty.capture.originationTimestampField}[Date_Day]'].value = '{$ItemEditItem.originationTimestamp.Date_Day}';
frm.elements['{$smarty.capture.originationTimestampField}[Date_Year]'].value = '{$ItemEditItem.originationTimestamp.Date_Year}';
frm.elements['{$smarty.capture.originationTimestampField}[Time_Hour]'].value = '{$ItemEditItem.originationTimestamp.Time_Hour}';
frm.elements['{$smarty.capture.originationTimestampField}[Time_Minute]'].value = '{$ItemEditItem.originationTimestamp.Time_Minute}';
frm.elements['{$smarty.capture.originationTimestampField}[Time_Second]'].value = '{$ItemEditItem.originationTimestamp.Time_Second}';
{rdelim}
// ]]>
</script>
so where and how do I set the class for this code? or am I looking in the wrong place? thanks appreciate your help guys.
Posts: 1642
That bit of code uses the native smarty "html_select_date" function and for some reason, it doesn't have an "id" param. Not sure about smarty 3 but it doesn't in smarty 2.
Best bet is to try to use JS to shim the id in.
Not tested but try changing ...
to ...
** EDIT **
Checked the actual G2 source
You will be better off using a single CSS class for all the drop downs (".CLASSNAME" instead of "#CLASSNAME" in your css file)
Modified the code above. Note change in area where edits start.
If you do want ids for some reason, that should give you a jump off point to complete it but remember that each id has to be unique on a page.
--
dakanji.com
Posts: 63
That didn't seem to work. Thank you for trying though.
Posts: 1642
No reason why it shouldn't really.
Post the html source from your browser (using "View Source" or similar) of the select boxes and let's have a look.
Also, what id, probably better as a class actually, do you want to assign to the select boxes?
--
dakanji.com
Posts: 8339
use
document.getElementById("MyElement").className += " MyClass";
instead <- note the necessary space if you are concatenating-s
All New jQuery Minislideshow for G2/G3
Posts: 63
I tried all the solutions above. Still not getting class on those select boxes. I was hoping to use this jquery script but I need to have classes for it work. http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
If this can't be figured out I did come across an alternative albeit is not as pretty as jquery would have made the select boxes though. Since g2 does name the form select boxes... g2_form[originationTimestampSplit][Date_Month],g2_form[originationTimestampSplit][Date_Day], etc.
I have figured out I can direct CSS to the attribute "name" using...
Posts: 1642
You're right. Tested and can't shim in the class.
Your take seems valid enough. maybe something like
can also work
--
dakanji.com
Posts: 63
thanks for your help Dayo and suprsidr.
very much appreciated.