How to force enter key to make a line break inside iframe editor
Tags: javascript,html,css,iframe
Problem :
I am trying to learn how to make a text editor using javascript(I am new to JavaScript).Here I create a paragraph using "para" button and inside the paragraph there will be a quote.Every time I press 'enter' within this paragraph, a new paragraph is created, rather than a new line for typing texts. How can I force a line break to be created instead of a paragraph element?also if I clicked outside of the quotation mark it wont allow me to write inside the paragraph
<script>
function loads(){
idContent.document.designMode="On";
}
function para(){
var m=document.createElement("p");
m.setAttribute('style',"border:1px solid black;height:100px;width:500px;position:relative;background-color:white;");
m.setAttribute('designMode',"on");
m.setAttribute('contenteditable',"true");
var t=document.createElement("q");
t.innerHTML="quote here";
m.appendChild(t);
idContent.document.body.appendChild(m);
}
</script>
Here is my html code,
<body onLoad="loads();" style="position:relative;">
<iframe id="idContent" width="600" height="280" contenteditable="true" ></iframe>
<input type="button" value="para" onClick="para();">
</body>
Here is my css styles,
<style>
* {
margin:0px;
padding:0px;
}
q {
color:;
}
#idContent{
background-color:pink;
}
div{
border:1px solid black;
}
</style>
Solution :
You can do something like this:
function appendPara(e) {
if (e.keyCode == 13) { //13 is javascript key-code for Enter
.....
idContent.document.body.appendChild(m);
}
}
CSS Howto..
You can remove position:absolute and use css calc for calculating the width of .icons and don't forget to remove extra spaces which is occurred by display:inline-block; Jsfiddle .header_first_above { width:...
First, you should fix your HTML. Replace your divs line with this (I am reformatting it for the sake of the readability of my answer): <li id="div1"> <a href="#">Weather <img...
You can do this with #one { position: absolute; min-height:100%; width:100%; z-index: -1; } div { position:relative; } <div> <video id="one" autoplay poster="image.png"> <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> </video> <h1>Bunny is funny</h1>...
There are a couple of issues in your code: The ID for your second button should be p2 instead of p12. You have to assign your event handlers like this...
There's lots of ways to accomplish this. There's lots of css selectors like ID, classes... See css selectors reference Best way to achieve what you want is to use classss....
You can do like this @media print { body { font-size: 10pt; background-image: url(photo_with_white_background.jpg); } } To manipulate images you can use filters img {-webkit-filter: grayscale(100%); filter: grayscale(100%);} img {-webkit-filter:...
For example, we have standart page, like: <html> <head> <!-- HEAD CONTENT --> </head> <body> <div class="container"> <div class="post"> <h1>Title of post</h1> <p>Text or another content of post</p> </div> <div...
By default a <span> is display: inline and so height and width do not apply to it. Set display: inline-block or some other value to which those properties apply. You...
+1 to all of the answers above. You can also maintain an array of all the selectors to hide if you can't rewrite your code: var mult = ['#gDescZone1','#gDescZone2','#descAd1','#descAd2', '#descAd3','#descAd4','#header','#contentArea',"#marquee'];...
I resolve the problem, this code below: Add the tag RowStyle-CssClass In the CSS add .GvGrid:hover This is the code: <style> .GvGrid:hover { background-color: #FFEB9C; border-top: solid; color:#9C6500; } </style>...
The issue is with these two styles: .grayscale.grayscale-off, .grayscale.grayscale-fade:hover { -webkit-filter: grayscale(0%); filter: none; } .grayscale.grayscale-replaced.grayscale-off > svg, .grayscale.grayscale-replaced.grayscale-fade:hover > svg { opacity: 0; } When you move your cursor...
To change the width of that space in a table using CSS you would use table { border-spacing: 10px; border-collapse: separate; } For more info see: How to set cellpadding...
Try this: jQuery('span[title]').hover( function() { jQuery(this).addClass('highlight'); jQuery('span:contains("'+jQuery(this).attr('title')+'")').addClass('highlight'); }, function() { jQuery(this).removeClass('highlight'); jQuery('span:contains("'+jQuery(this).attr('title')+'")').removeClass('highlight'); } ); ...
Using CSS attribute selectors, you'd need to escape the colon : by a leading backslash\, as follows: description[xlink\:href="http://book.com/images/HPotter.gif"] { background-color: gold; } <?xml version="1.0" encoding="UTF-8"?> <bookstore xmlns:xlink="http://www.w3.org/1999/xlink"> <book title="Harry...
This will work with dynamic content and no extra DOM has been used. Give a try ul { list-style: none; } ul li { padding-bottom: 40px; position:relative } ul li...
Add height in slides img as well. Hope this will work .slides img { display: block; position: absolute; transition: opacity 1s; opacity: 0; width: 100%; height:200px; margin-top:0px; } ...
You're using jQuery, fall back to it when CSS fails you. This doesn't mean inline styles, let's continue to use classes (modified fiddle): Your new CSS: .hidden { display: none;...
Based on your HTML From your Task CSS .fill_a:hover{ color:white; text-decoration:none; } .fill_div:hover{ background-color:pink !important; } you should use !important because in your html you already set the style. Meaning...
The Kendo UI mobile themes are self contained and furthermore the mobile themes and the web mobile skins cannot work together. Thus, you should remove kendo.mobile.all.min.css from your app. Additionally...
Try this: Take out float:left from the embedded divs Add white-space:nowrap; display:inline-block; to your container div Here's modified version: http://jsfiddle.net/9e4hX/...
Add height:auto body { height:auto; min-height: 700px; background: red; } But better use this setting to your wrapper div instead of body...
Change your .product styles to add in a width: auto !important; line like this: http://jsfiddle.net/b3Jyv/ .product { padding-top:10px; padding-bottom:10px; padding-left:24px; padding-right:24px; float:left; width: auto !important; } The div that contains...
You're looking for padding, not margin try adding to #contenido p padding-top:10px; For more information look into CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model...
I'm guessing it's not officially supported yet as it's a bit unpredictable... In Firefox using $("#somediv").css("-moz-border-radius", "20px"); will set the border radius fine, but trying to read it back via...
The thing is, you're using floats, which will not clear themselves, and therefore the ul element will not get the correct dimensions dynamically based on the content. So it's a...
FWIW - Here's a solution without which will work in IE7+ Use the General sibling selector p { /* styles first p here */ } p ~ p { /*...
Use % width for your Logo Image accroding to device the logo width and height will reduce.
You can remove all the CSS rules containing :hover using Javascript. This should work on pretty much any touch device. var touch = 'ontouchstart' in document.documentElement || (navigator.MaxTouchPoints > 0)...
You can achieve this using em as a unit of measurement, rather than absolute pixels: #block { font-size: 16px; height: 1em; width: 2.5em; margin: 0 auto; border: 1px solid black;...
All I had to do was set float: left and width: 25% on the images in CSS .map img{ float: left; width: 25%; } DEMO...