When I click on an image inside a label to select/deselect a checkbox, it changes its state accordingly in Firefox and Chrome. However, in IE8, the checkbox never responds if I click on an image and only changes its state if I click on the text.
jsFiddle is here (click on the white box image before the text in IE):
http://jsfiddle.net/dzTMD/3/
I'm not sure what the problem in IE8 but you can use background image within css instead of attaching it directly in html and this will work in IE. Here is fiddle with example
put the input field inside the label tag
example:
<label>
<input name="yn00" id="yn00_1" type="checkbox">
<div class="indicator"></div>
<span>My text for this label</span>
</label>
all elements will work inside the label, your img aswell..
just remember to use opacity to hide the input field .
IE8 will not fire events on display:none or visibility:hidden elements
Related
I followed the setup / instructions for adding a Featherlight lightbox to a button on my Squarespace site and everything worked out well with one issue. The paragraph text is not appearing in the popup. I get a white lightbox with a black close button, all functioning properly. But the text does not show. When I inspect the box, I am able to highlight the text and see that it exists + the color is dark blue (not white, so should be showing against the white lightbox background). Any idea what may be happening?
Here's my code:
Learn More
</div>
<div style="display:none;">
<div id="learn-more" style="text-align:center;">
<p>PARAGRAPH TEXT HERE</p>
</div>
</div>
I have a simple project which has a button and an image. The image shows when pressing the button. But the image shows with delay about 1000ms.
On the browser, there aren't any problems.
and these are the codes
<span (click)="getImage()">Click it!</span>
<img src="assets/{{img}}" *ngIf="img" alt="">
img = "";
getImage(){
this.img = "aa.jpg";
}
To remove this delay, you can add the tappable attribute to your element.
<div tappable (click)="doClick()">I am clickable!</div>
Source: Click Delays
In general, we recommend only adding (click) events to elements that
are normally clickable. This includes and elements. This
improves accessibility as a screen reader will be able to tell that
the element is clickable.
However, you may need to add a (click) event to an element that is not
normally clickable. When you do this you may experience a 300ms delay
from the time you click the element to the event firing.
In WebPlus, I am trying to make the text in a form for a support page disappear on click, or disappear when the box has contents inserted. How could I do this?
HTML CODE at here.
Although I'm not familiar with WebPlus, it's just HTML at the end of the day.
First we need to add an ID to your Submit Button ( assume this is the button you want to click that will hide stuff?)
<input id="Submit" type="submit" style="position:absolute; left:137px; top:668px; width:81px; height:22px;" value="Submit">
What we'll need to do next is put some javascript into your form page's HTML that hides the textbox(es) you choose.
for example:
<script type='text/javascript'>
$(window).load(function(){
$('#Submit').click(function(){ //when submit button is clicked
$("#txt_32").hide(); //hide this element
$("#txt_33").hide(); //hide this element
//etc... hide the text boxes by grabbing them with their ID tag
});
});
</script>
After that, you'll probably want to unhide them. I'm not sure what the end goal is or what you're trying to do, but to get hidden elements to show you call .show() on the elements that we called .hide().
I have an app which has an html file on the screen with a textarea where the user enters data. However, when the user presses in the box, the virtual keyboard and textbox and entire screen enlarges as if you used a three fingered tap. I can pinch the screen to get things back to the normal view, but I don't want the user to have to do this. I should mention that the same code works fine on an ipad. here is relevant code:
<div id="newtext">
<p>Enter Your Text Into the Box</p>
<textarea rows="4" cols="50" id="txtArea"></textarea>
</div>
The relevant css is:
#newtext {margin-top:300px;text-align:center;font-size:60px;padding:10px;margin-
left:20px;margin-right:20px}
#txtArea {font-size:30px}
Any help would be appreciated
I have a mobile webpage that is just a simple form with a submit button.
I have just tried to make the submit button bigger in the css file and also inline on the submit button itself and it doesn't show.
If I use the Ripple extension for Chrome it shows in there (but Ripple doesn't have the exact look of the iPhone form elements yet).
I was wondering if this is a known issue - i.e. incase the browser removes styling from submit buttons etc. or if it is something that I am doing wrong.
The line in question is simply:
<input type="submit" value="Submit" class="submit" style="text-align: center; width:30%; height:50px; "/>
The height rule won't apply to the button unless you specify "border: 0". However, you'll lose the default styling of the button, but you can get the styling back with your own CSS.
Not sure if you're trying to get the submit button centered in the form - but if you are, you should set the button to "display: block" and then add "margin: 0 auto". The text-align rule isn't necessary.
This should help you
-webkit-appearance: none;
add it to the input button you're styling