I am trying to insert image inside a contenteditable div. Its working in chrome, firefox, opera and safari. But not working in Internet Explorer. I saw this post, it says insertImage works in IE. But I have no idea why its not working here. Will you please help me. Thank you.
html:
<button id="btn-insert_image">image</button>
<div id="content" contenteditable="true">
<p>How does it work? Just put your image size after our URL and you'll get a placeholder.</p>
</div>
js:
$(document).ready(function() {
$('#btn-insert_image').click(function() {
document.execCommand('insertImage', false, 'http://placehold.it/350x150');
});
});
jsfiddle
Related
Hello guys I've met a problem with one JavaScript which doesn't work on mobile but works really well on PC.
Somebody could to give me any advice what I could to change? I'm working on the project free of charged website for people studying Polish and it would be perfect to put it on one page :) thanks in advance
$(function() {
$('a.say').on('click',function(e){
e.preventDefault();
var text= $('input[name="Text"]').val();
text = encodeURIComponent(text);
console.log(text);
var url = "https://translate.google.com/translate_tts?ie=UTF-8&q=" + text + "&tl=pl&client=tw-ob";
$('audio').attr('src', url).get(0).play();
});
});
HTML
<input type="text" name="Text">
Check it
<audio src="" class="speech" hidden></audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</div>`
Try with a simple code like alert() . if it don't works your mobile browser doesnt support javascript.
if works your speech system not working
im trying to find a way to dispay a div when a user types in the textarea field and then hide the div when they take the text out again.
I am using IE 9 and it must be compatible with that, although i am having a lot of trouble finding a script that IE 9 supports.
I did find this script which works in JSFiddle on my IE 9 browser
link: http://jsfiddle.net/THkqE/
but not when i try and code it into my site myself like so:
<head>
<script>
$(document).ready(function() {
$("#cname").on('input', function() {
$('#cname2')[this.value.length > 8 ? 'show' : 'hide']();
});
});
</script>
</head>
<input type="text" id="cname" name="cname" class="field">
<div id="cname2">cname2</div>
css:
#cname2{
display:none;
}
can someone please show me what i am doing wrong, thanks
I have some HTML and JavaScript to show and hide a div based on a selection in a dropdown list.
The JavaScript looks as follows:
$('.type-of-display-group').hide();
$('#six-graphs').show();
$('#display-type').change(function () {
$('.type-of-display-group').hide();
$('#' + $(this).val()).show();
});
The HTML looks as follows:
<select class="form-control" id="display-type">
<option value="six-graphs">Six graphs</option>
<option value="sliderFrame">Carousel</option>
</select>
<div id="six-graphs" class="type-of-display-group">
[CODE FOR SIX GRAPHS]
</div> <!-- End six graphs display-->
<!-- The div for the carousel-->
<div id="sliderFrame" class="type-of-display-group">
[CODE FOR CAROUSEL]
</div><!-- End of carousel -->
See this Fiddle to see the code in action.
So the code works in Firefox, but it does not work in IE8. What happens is that both the div's are displayed on top of each other (and I see the broken signal on the lower left corner). When I debug the script with F12 and then use the debugger the code suddenly works...
Does anyone have another way of using the show() and hide() jQuery functions so that I can use this code in IE8?
As ajp15243, Kevin B, satpal and Spudley kindly noticed in the comments console.log can only be used while debugging in Internet Explorer. When I removed one console.log I ran on document ready in another JavaScript file and forgot about, the code worked like a charm.
Unbelievable that this stuff took me whole afternoon.
So I'm trying to make a table hidden when the webpage opens but when a is clicked it should show but I'm having problems with IE9. I read that IE8 and below do not support setAttribute and my webpage seems to work correctly with Firefox. Here is the code, just wondering if anyone could help me out:
<h1 onclick="myFunction()">Show Sitemap</h1>
<table id="myInput" style="visibility:hidden;" width="100%" height="50%">
<tr><td><p>Test</p></td></tr>
</table>
<script>
function myFunction()
{
document.getElementById("myInput").setAttribute("style","visibility:visible;");
};
</script>
Try using
function myFunction()
{
document.getElementById("myInput").style.visibility = "visible";
};
instead, as IE is more compatible with this.
Fiddle:http://jsfiddle.net/E396D/
I tried this in IE10 with compatibility mode on and it worked (the original didn't).
This code works fine in <= IE7, but it doesn't work in firefox .. i am using firefox browser 12.0 .. I am not sure whats the reason .. help would be much appreciated .. thanks ..
<head>
<script type="text/javascript">
function getfocus(obj){
if(obj.value.length==0){
alert("Please enter something");
obj.focus();
}
}
</script>
</head>
<body>
<input type="text" onblur="getfocus(this)" value="Get focus">
</body>
</html>
try:
....
alert("Please enter something");
setTimeout(function() {
obj.focus()
}, 10);
Some browsers, notably Firefox, have user-specific settings which control whether focus may be 'stolen' from the user. I think this may be your problem here.
However, you might want to re-consider your tactics here for ensuring the user enters some text. Having an alert pop-up every time you unfocus a blank text field would be extremely irritating to most users.
The code is working fine to me both on FF 12 and Chrome.
You need to clear the input filed and then get out of the item in order to see the alert...