Is it possible to remove the annoying black border that IE 9 puts around submit buttons?
This only occurs when the form is in focus.
IE 9:
IE 9 http://olokoo.com/sandbox/ie.jpg
FireFox
Firefox http://olokoo.com/sandbox/firefox.jpg
You can use jQuery if you want, but adding the following to your CSS should fix it
input[type=submit] { border:none !important; }
//edit per your comment
Depending on if you want to use HTML5 or not, you need to make sure you've set up the DOCTYPE and meta tags correctly:
HTML5 setup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
For HTML4 setup examples see: W3School
If you want to remove the border from the buttons with jQuery, something like this should work:
$(":button").css({border-width:"0px"});
Related
I am programming a web app where clicking on a bit of text should toggle the line-through css style. This works on Firefox, but the click event seems not to fire in Chrome once the style has been applied.
HTML:
<script>
$(document).ready({
$(".liner").click(toggleStrikethrough);
});
<div class="liner">
Hello World
</div>
JS (note that I've used jQuery because that's what I'm using in the app, but a vanilla solution would be acceptable as well):
function toggleStrikethrough()
{
if($(this).css("text-decoration") != "line-through")
$(this).css("text-decoration","line-through");
else
$(this).css("text-decoration","");
}
JS Fiddle
In CSS3, text-decoration has multiple parts. In your particular case, the read $(this).css("text-decoration") returns line-through solid rgb(0, 0, 0).
Instead, try changing the if condition to $(this).css("text-decoration-line") to get only the line style part of the text decoration.
I tried to solve your problem using different way. I think it was succeeded. you can use below mention code to get same output that you want.
$('div').bind('click',function(){
$(this).toggleClass('liner');
});
.liner{
text-decoration:line-through;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Exzmple</title>
<style>
</style>
</head>
<body>
<div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I used bind , toggleClass methods for this. As a result js code was simple and it could run efficiently.
I want to used color picker as html input element to enter some product colors. I used various color pickers, but not satisfied my requirements. But Finaly I found Spectrum - The No Hassle jQuery Colorpicker to my system.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Spectrum - The No Hassle jQuery Colorpicker</title>
<meta name="description" content="Spectrum is a JavaScript colorpicker plugin using the jQuery framework. It is highly customizable, but can also be used as a simple input type=color polyfill">
<meta name="author" content="Brian Grinstead and Spectrum contributors">
<link rel="stylesheet" type="text/css" href="spectrum.css">
<script type="text/javascript" src="docs/jquery-1.9.1.js"></script>
<script type="text/javascript" src="spectrum.js"></script>
</head>
<body>
<input type='color' name='color2' value='#3355cc' />
</body>
</html>
This works with microsoft edge also. But i want add more color picks when i click add button. It's work only with crome. when i used edge i shows only text box. how I solve this problem?
You can use the Color Picker JQuery Plugin. It is the best out there !
Link: http://www.eyecon.ro/colorpicker
Spectrum.js "The No Hassle jQuery Colorpicker" is simplest and one of best color pickers going around.
Open Source
Easy to Use
Many in built color functions.
Link
http://bgrins.github.io/spectrum/#options-showInput
Oops i made a mistake while reading the question.
Here is a working fiddle for spectrum for IE
Link
$(".basic").spectrum({
color: "#f00",
change: function(color) {
$("#basic-log").text("change called: " + color.toHexString());
}
});
-Help :)
I have a radio button inside a content editable div. But when I click on the radio button nothing happens in Firefox and IE. But it works fine in Chrome.
What can I do to make this work in Firefox and IE?
The code is available at http://jsbin.com/uqexoy/2/edit and is simply:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div contentEditable="true"><input type="radio" />ere er er er re </div>
</body>
</html>
This was tested to work in IE8, IE9, Chrome and Firefox. It does work, albeit rather strangely so, also in Opera, where the input field (in our case a radio button) does change it's status to checked (tested with JavaScript alert(this.checked);), however it doesn't change it's appearance to reflect that. See for a possible workaround below.
The solution for the majority of the problematic browsers is to wrap non-editable contents in a span, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div contentEditable="true">
<span contentEditable="false">
<input type="radio" />
</span>ere er er er re
</div>
</body>
</html>
As for the Opera part, the fact that it doesn't reflect changes to the radio button's selected state 'should' be possible to override by styling its two different states with CSS selectors input[type="radio"] and input[type="radio"]:checked and applying these two CSS rules only to Opera browsers. Opera seems to accept background-color property changes for such radio buttons, which doesn't make any difference in all other browsers I've tested in. This might be your way to apply Opera specific CSS rule to reflect changes to the checked state. Here's an example:
input[type="radio"]:checked {background-color:gray;}
Other browsers will simply ignore this CSS rule. Another acceptable Opera specific rule that can be applied is border, but I find that of limited to no value in our case.
You use the contentEditable property of the DOMElement, like so
<div onClick="this.contentEditable='true';"><input type="radio" />
This is test
</div>
I'am developing a web-application that allows to select parts of an html document and put some kind of annotation on it.
To get hold of the selected text I use window.getSelection() which works pretty fine in IE9, FF, and Safari.
However I run into trouble when using the same page on my IPad 2:
If I just select a word by tapping it for a sec, window.getSelection() returns the proper selection.
If I create a text range ( as discribed here http://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipad ) always return "null".
I've already examined the window, document and related event objects - but without success...
Any help would be really appreciated!
Edit: Just a small example. Select a text and press the button. On Safari (PC) the function prints the selected value...
<html>
<body>
<script>
function a()
{
alert(window.getSelection());
}
</script>
Hello World! <input type="button" onclick="a();"
</body>
</html>
Okay finally I've solved the problem: As Tim assumed the click events causes to selection to collapse. I consider this as rather strange behavior as on regular Safari this does not happen.
However, the solution is not to use the click event. Instead of I'm using "vlick" provided by the jquery mobile.
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
Hello World! <input type="button" id="button1" />
<script>
function a()
{
alert(window.getSelection());
}
$("#button1").bind("vclick",a);
</script>
</body>
</html>
I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
You can see the code in action here - http://evermight.com/jquerybug/index.html
In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html(' and <header> of the button's onclick event handler, then the black bakground persists as expected.
Why does an empty space affect the CSS appearance of the header tag in IE8?
This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.
If you try your code, replacing
<header> .... </header>
with
<div class='header'> .... </div>
you'll find it works correctly, even with the leading space.
If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).
You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.
You need the innershiv.