I'm trying to make an image button. I'm using/learning html5 and jquery mobile. this is my sample code:
<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />
the image is displayed, but the input type doesn't show the image. what do i do wrong ?
<input type="image" src="img/beer.png" /> is meant to collect coordinates. If you want to use it as a submit-button, you'll have to add an onsubmit-event, e.g.
<input type="image" src="img/beer.png" onsubmit="submit();" />
But you should rather use the <button>-element, which is way more flexible. It can contain text, images or both:
<button type="submit" name="beer" value="beer_btn_was_clicked">
Here's some optional text,
<p>which you can even put in a paragraph!</p>
And you don't even need JavaScript!
<img src="img/beer.png" />
</button>
Edit (2016-02-12)
As of today*, the above example is not considered 100% valid because <p>-elements are not allowed within a <button>-element anymore.
According to the MDN HTML element reference the only permitted content category within a <button>-element is the so called Phrasing content:
Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.
Elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
A few other elements belong to this category, but only if a specific condition is fulfilled:
<a>, if it contains only phrasing content
<area>, if it is a descendant of a element
<del>, if it contains only phrasing content
<ins>, if it contains only phrasing content
<link>, if the itemprop attribute is present
<map>, if it contains only phrasing content
<meta>, if the itemprop attribute is present
*today was that I read about it, not when the change was introduced
http://jsfiddle.net/cyB7B/
This works for me...have you got any other code that could be interfering? CSS maybe?
Related
given this:
<span data-v-086f077a="" data-v-bf29e118="" class="toggle undefined-undefined small">
<span data-v-086f077a="" class="toggle-label"></span>
<input data-v-086f077a="" type="checkbox" id="tracked-item-toggle-0">
<label data-v-086f077a="" for="tracked-item-toggle-0"><span data-v-086f077a="" class="on-text">Tracked</span>
<span data-v-086f077a="" class="off-text">Not Tracked</span>
</label>
</span>
How can I get the displayed text of the input checkbox.
clicking on the checkbox toggles it back and forth and displays either Tracked or Not Tracked. I just need to know which one it is so I can toggle it to Tracked if its Not Tracked.
To toggle I use //span[#class='toggle undefined-undefined small']
I have tried many things including //label[#for='tracked-item-toggle-0' and ./span[contains(.,'Not Tracked')]]
but that finds it whether its displayed or not.
None of the code changes based on toggling the checkbox
Thanks!
The label contains two spans which contain the text Tracked and Not Tracked and have class attributes on-text and off-text, respectively. Which of the two labels is displayed is presumably controlled by CSS.
My guess would be that there are CSS rules which control the display or visibility properties of these two spans, presumably using their class attributes in conjunction with some other attribute of the parent element.
Maybe take a look at the CSS (and include it in your question) and see what it reveals?
I am working on fixing a bug for a frontend built using Fluent UI. I have a ChoiceGroup in which I have rendered two div tags each having text. I want the screen reader to read both the texts when the first div is chosen. The only way I can narrate both text is by having them inside the same div but then I cannot style them the way I want to style them.
Similar question but related to Bootstrap: Adding aria-label to text elements
So you have something like this?
<div>
text1
</div>
<div>
text2
</div>
What do you mean by "chosen" in "when the first div is chosen"? Is it an interactive element?
In my previous answer that you alluded to, all the elements to be read were contained in a parent container. It was a <button> in that case.
Normally, if you want all the text to be read, then the focus needs to move to the parent element so that all the child elements will be read, so you'd need a parent <div> and the focus would have to move to it.
<div>
<div>
text1
</div>
<div>
text2
</div>
</div>
Alternatively, for interactive elements, you can have aria-labelledby (or aria-describedby, depending on the nature of the second <div>) to have an element's text announced with another element. Something like this:
<div id="new1" aria-labelledby="new1 new2">
text1
</div>
<div id="new2">
text2
</div>
However, using aria-labelledby directly on a <div> without a subsequent role is not really supported.
And when I said the "nature" of your second <div>, if the second div acts like an extension of the first text, then aria-labelledby (with two IDs) seems appropriate. But if the second text is more of a "further description" of the first element, then aria-described might be more appropriate.
<div aria-describedby="new2">
text1
</div>
<div id="new2">
text2
</div>
Without further details of your code, a more specific answer can't be given.
there is a label applied CKEditor on my page, HTML code as follows:
<textarea id="MyHtmlEditor" class="ckeditor" cols="80" rows="10" name="MyHtmlEditor"></textarea>
When I upload and then insert a picture, you can see the pictures in normal CKEditor, the viewing source will appear <img alt = "" src = File Name /> tag code.
Because it will put more than one picture, if I want to do in a certain period of time to execute javascript, you can get all the content in the editing area where CKEditor <img alt = "" src = filename /> src attribute values
That is made all the pictures of connecting position.
I found a CKEditor stall, it seems that only the editorial content replace () method can be used.
Some people know how to reach this level?
Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.
<input type="text">
I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.
As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".
Thanks
I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.
Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.
HTML :
<input type="text" />
jQuery script
jQuery(document).ready(function(){
$("#myInputLink").click(function(){
// .trigger('focus') or .focus(), but the first one is better on my own
$(this).next('input[type="text"]').trigger('focus');
});
});
Have a nice day.
I am trying to generate clean XSL-FO from a VisualForce page. But the xml coming out of the VisualForce page is not valid due to the empty span tags that are being generated by nested apex:outputPanel tags (outer rendered=true, inner rendered=false). Here is a focused page that illustrates the problem:
<apex:page contentType="text/xml" cache="false" showHeader="false" sidebar="false">
<root>
There is no reason for a nested apex:outputpanel to generate a span tag like this:
<apex:outputPanel layout="none" rendered="true">
<apex:outputPanel layout="none" rendered="false" />
</apex:outputPanel>
This breaks strict xml documents like XSL-FO.
</root>
</apex:page>
That page gives this xml output:
<root>
There is no reason for a nested apex:outputpanel to generate a span tag like this:
<span id="j_id0:j_id3" style="display: none;"></span>
This breaks strict xml documents like XSL-FO.
</root>
Actually, I did find an obscure reason in the docs:
apex:outputPanel layout attribute - The layout style for the panel. Possible values include "block" (which generates an HTML div tag), "inline" (which generates an HTML span tag), and "none" (which does not generate an HTML tag). If not specified, this value defaults to "none". However, if layout is set to "none", for each child element with the rendered attribute set to "false", the outputPanel generates a span tag, with the ID of each child, and a style attribute set to "display:none". Thus, while the content is not visible, JavaScript can still access the elements through the DOM ID.
Sounds useful if my content type is html or javascript, but it's breaking my strict xml. So the question is: how can I achieve nested conditional rendering while avoiding the span tags?
Switch both, or just the outer, to an apex:variable like this:
<apex:variable rendered="true" value="" var="tempOuter">
<apex:outputPanel layout="none" rendered="false" />
</apex:variable>
Try using <apex:outputText> instead of <apex:outputPanel>. In my case, I was rendering a table into pdf document, and <apex:outputPanel> broke table layout, while <apex:outputText> worked perfectly, and supported conditional render like this:
<apex:outputText rendered="{!IF(Sum != 0.00, true, false)}">