Problems with dynamic link creation
in [JavaScript]
|
Prev: FAQ Topic - My element is named myselect[], how do I access it? (2010-04-09)
Next: FAQ Topic - My element is named myselect[], how do I access it?(2010-04-09)
From: kangax on 9 Apr 2010 01:33 On 4/9/10 12:58 AM, RobG wrote: > On Apr 9, 10:32 am, Garrett Smith<dhtmlkitc...(a)gmail.com> wrote: >> GIAM wrote: >>> On Apr 9, 11:33 am, GIAM<gordon.is.a.mo...(a)gmail.com> wrote: >>>> Hi, >> >>>> I'm trying to create a dynamic link with javascript. However, I can't >>>> seem to add the link onto the page (at least I assume that is the >>>> problem). Here is the function I use: > [...] >> There is no good reason to use javascript:; URIs. > > Yes, and where there is no good reason to have a URI, there is no good > reason to be using an A element at all. In these cases, the usual > reason an A element is used is because the presence of an href > attribute hints that the browser should style it as a link, which > encourages users to click on it. > > As the href attribute is superfluous to requirements, it should not be > there at all. The OP should use an appropriate element - say a span, > div or button - and style to look like something that should be > clicked on. But A element can receive focus, which is usually important for UI controls. SPAN can not receive focus (unless, IIRC, assigned tabIndex property, in a non-standard manner). -- kangax
From: kangax on 9 Apr 2010 01:49 On 4/9/10 1:31 AM, Garrett Smith wrote: > RobG wrote: [...] >> As the href attribute is superfluous to requirements, it should not be >> there at all. The OP should use an appropriate element - say a span, >> div or button - and style to look like something that should be >> clicked on. >> > > Using a span with a `tabIndex ` will allow the element to be fully > focusable in most recent browsers[MSDN][MDC]. > > Older browsers, such as Safari 2, for example, do not support `tabIndex` > on arbitrary elements. Actually, I see that Safari up to as late as 3.2.1 (last in 3.x series) doesn't support tabbing to arbitrary element with tabIndex=0 attribute. Ditto for Opera < 9.5. [...] -- kangax
From: RobG on 9 Apr 2010 01:51 On Apr 9, 3:33 pm, kangax <kan...(a)gmail.com> wrote: > On 4/9/10 12:58 AM, RobG wrote: > > > > > On Apr 9, 10:32 am, Garrett Smith<dhtmlkitc...(a)gmail.com> wrote: > >> GIAM wrote: > >>> On Apr 9, 11:33 am, GIAM<gordon.is.a.mo...(a)gmail.com> wrote: > >>>> Hi, > > >>>> I'm trying to create a dynamic link with javascript. However, I can't > >>>> seem to add the link onto the page (at least I assume that is the > >>>> problem). Here is the function I use: > > [...] > >> There is no good reason to use javascript:; URIs. > > > Yes, and where there is no good reason to have a URI, there is no good > > reason to be using an A element at all. In these cases, the usual > > reason an A element is used is because the presence of an href > > attribute hints that the browser should style it as a link, which > > encourages users to click on it. > > > As the href attribute is superfluous to requirements, it should not be > > there at all. The OP should use an appropriate element - say a span, > > div or button - and style to look like something that should be > > clicked on. > > But A element can receive focus, which is usually important for UI > controls. SPAN can not receive focus (unless, IIRC, assigned tabIndex > property, in a non-standard manner). Then, as suggested, a button element can be used, which has default styling to encourage clicking, more closely represents the functionality the OP seems to want, allows focus and tabindex and can (in most modern browsers) can have its appearance styled to match a UI theme. -- Rob
From: kangax on 9 Apr 2010 02:02 On 4/9/10 1:51 AM, RobG wrote: > On Apr 9, 3:33 pm, kangax<kan...(a)gmail.com> wrote: >> On 4/9/10 12:58 AM, RobG wrote: >> >> >> >>> On Apr 9, 10:32 am, Garrett Smith<dhtmlkitc...(a)gmail.com> wrote: >>>> GIAM wrote: >>>>> On Apr 9, 11:33 am, GIAM<gordon.is.a.mo...(a)gmail.com> wrote: >>>>>> Hi, >> >>>>>> I'm trying to create a dynamic link with javascript. However, I can't >>>>>> seem to add the link onto the page (at least I assume that is the >>>>>> problem). Here is the function I use: >>> [...] >>>> There is no good reason to use javascript:; URIs. >> >>> Yes, and where there is no good reason to have a URI, there is no good >>> reason to be using an A element at all. In these cases, the usual >>> reason an A element is used is because the presence of an href >>> attribute hints that the browser should style it as a link, which >>> encourages users to click on it. >> >>> As the href attribute is superfluous to requirements, it should not be >>> there at all. The OP should use an appropriate element - say a span, >>> div or button - and style to look like something that should be >>> clicked on. >> >> But A element can receive focus, which is usually important for UI >> controls. SPAN can not receive focus (unless, IIRC, assigned tabIndex >> property, in a non-standard manner). > > Then, as suggested, a button element can be used, which has default > styling to encourage clicking, more closely represents the > functionality the OP seems to want, allows focus and tabindex and can > (in most modern browsers) can have its appearance styled to match a UI > theme. Fair enough, except that styling buttons is painful. For example, I don't think it's possible to apply "text-decoration: underline" to a button in FF. And :hover won't work with it in IE6. Those are 2 simple things needed to emulate standard anchor styling/behavior, and both are problematic. -- kangax
From: SAM on 9 Apr 2010 04:52
Le 4/9/10 8:02 AM, kangax a �crit : > On 4/9/10 1:51 AM, RobG wrote: >> >> Then, as suggested, a button element can be used, which has default >> styling to encourage clicking, more closely represents the >> functionality the OP seems to want, allows focus and tabindex and can >> (in most modern browsers) can have its appearance styled to match a UI >> theme. > > Fair enough, except that styling buttons is painful. For example, I > don't think it's possible to apply "text-decoration: underline" to a ??? strange asking ? ! underlined button would disturb me, sure ! > button in FF. for me the best behaviour is to leave the system drawing the buttons, the user well see what they are > And :hover won't work with it in IE6. as you'r asking in a JavaScript group, certainly you can set a bit of code to help this poor IE ? IE = false; /*@cc_on IE=true; @*/ > Those are 2 simple > things needed to emulate standard anchor styling/behavior, and both are > problematic. As IE doesn't know what could be "standards" <!--[if IE]><a href="#" onclick="return false" class="but"><![endif]--> <button class="but" onclick="doIt()">do it</button><!--[if IE]></a><![endif]--> a.but, button.but { color:green; border: 3px outset; text-decoration:none } a.but:hover, button.but:hover { color:red; border: 3px inset; } a.but button.but, a.but:hover button.but { border: none; margin:2px } -- sm |