So I've been trying to make my newer website complaint for all browsers while reducing lag for an input. I made a div as the container that is contenteditable and each line as its own div and acts as a line. This works great for every browser but IE here's an example of the issue: IE selection resize. I do not want to make each line contenteditable because doing so will not allow the user to highlight more than one line of text. My code looks like this:
<div contenteditable>
<div class='inner'>BLA BLA</div>
<div class='inner'>BLA BLA</div>
</div>
All help is appreciated, if I didn't specify well enough please comment.
Any way, if u want to change that, youre talking about styles, this is the way you can handle the styles:
[contenteditable="true"]:active,
[contenteditable="true"]:focus{
border:none;
outline:none;
}
maybe this can fix ur issue, give it a try
Related
For text editing purposes I use contenteditable divs in a website. When I edit some text the div height is growing dynamically and all other elements on the webiste below shift downwards. That's what I want. Finally I store the content via Ajax on a server. So far everything is working fine.
The problem is when I reload the content from the server the height of the contenteditable divs does not grow automatically to show all it's content. Instead its height stay in the initial size.
BTW, this is true for all browsers.
Does anyone have some hints to overcome this issue ?
EDIT
This is the html and javascript contendeditable relevant code
<div class="editable" contentEditable=true onkeyup="autoGrowSave(this)" onblur="update(this)" ></div>
function autoGrowSave (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
I use above javascript function to auto grow the contenteditable. Actually I do not know if even I need it. The jsFiddle example from Abhitalks below does not need one. Hmm ... I have to try without...
To store content on a sever I use the onblur attribute, which works perfect.
I answer the question myself. Thanks to Abhitaks jsFiddle I found the problem which limited to auto adjust the height. For this I appreciate the answer of course ;-)
In a CSS declaration I gave the class editable an initial height of 20px. Because of this the contenteditable could not adjust its height automatically. In turn I needed the javascript function autoGrow() to compensate this issue. While this "crazy" approach worked when editing the content, it did not work when reloading the content.
So the solution is to eliminate the heightin the CSS declaration and get rid of the javascript function autoGrow(). Now it works perfect !
I want to make a div draggable with Javascript/JQuery. However, for reasons that I don't think are worthed explaining, I want in draggable from another div.
It happens that this other div (the handle), must not move, as is has the size of the screen and the objective is for it to alays stay covering the whole page.
I can't seem to find an situation like this, which is strange... Is this such a stupid question?
Anyway, can someone tell me how to do this? Thanks for the help in advance.
Have you tried applying the stoppropogation function to the drag event handler of the parent div?
I gonna put an example here , if you want more explanation, comment please.
HTML CODE:
<div style="width:1024px: height:768px" id="content"> <!-- this css is only an example -->
<div class="child" style="width:100px;height:100px;border: 1px solid black"></div>
</div
JS CODE:
$(document).ready(function(){
$(".child").draggable();
});
note: Use jquery.js and jqueryUI.js
I have a contenteditable div, but I want to add a few characters of uneditable, unselectable text to the end of each line.
I have mocked up an example bellow, which adds a note of whether all the words on the line were spelled correctly or not:
My div is a pretty simple contenteditable div:
<div contentEditable="true" designMode="on" id="edit" style="border: 1px dashed black; width: 700px; height: 400px"></div>
Any idea how to tackle this? Thanks
Maybe you can use float:right to position your good/bad labels on the right, and have the content flow around them. The alignment wouldn't be exactly like your example, but it might be made to work.
It might look something like this example at jsFiddle.
Update
Here's a different approach that might work, depending on your needs: see jsFiddle here.
In this second approach, I've split each line into its own <div>, and followed each line's div with a <span contentEditable=false>(Good!). I've floated everything to the left, with aclear:left` on the divs, so that each div lands on its own line. This does exactly what you want (at least, in webkit browsers) -- as long as you can split your lines up like that.
you should be super imposing a div (z-index greater than content div) on top of the contentEditable div with text "Good!","Error" etc.. This way, the content would not be editable through the contentEditable div.
You should be able to calculate the position of the div based on the number of characters on a line and the line number.
Is there any way to align google plus button to right? It seems that g+ button holds some place in case there were more digits. It would be nice if sulution could be using only css/html - no javascript.
update It apears that google has changed a little bit api of 1+ button since yesterday, but still it seems impossible to align it to the right.
update 2
Question has been asked on Aug 24 '11. Since then Google+ has changed several times. There's no need to spam answers to this post anymore (repeated, and same answers!). Options you all suggest didn't existed at the time. Check out parameters on google+ documentation webpage: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters
Nowadays you just add data-align="right" to your <div>. For example:
<div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div>
That will keep the contents of the <iframe> aligned to the right.
If you would like to align the +1 button right, you should either use the 'tall' form factor, since it expands up, or configure the +1 button to not display the count. Either of these will remove the slack space for numbers on the right side. The documentation explaining how to do this can be found here: http://code.google.com/apis/+1button/#button-sizes
Now that the padding is gone on the right side you can use CSS to align the button.
Add the following attribute to the g:plusone tag:
align="right"
Got the solution from
https://developers.google.com/+/plugins/+1button/#button-sizes
Set the align attribute to right for the +1 button tag.
<g:plusone align="right"></g:plusone>
The easiest solution I have found is to just wrap the plus one button div in a container, give the container a class and style that to float how ever you require.
<!-- Google +1 button -->
<div class="plusonealign"><div class="g-plusone" data-size="medium" data-align="left"></div></div>
.plusonealign {
float: left;
}
encountered this exact problem yesterday. wrapped the namedspaced plus one tag in a div and floated right.
you could always use a stylesheet to override the inline styles that google send down the wire
so for markup like this:
<div class="myPlusOneWrapper">
<div id="theActualPlusOneWrapper" style="whatever google send down the wire">
<!-- blah -->
</div>
</div>
you could have this CSS:
.myPlusOneWrapper
{
float: right;
}
.myPlusOneWrapper > div
{
width: auto !important;
}
the width will then adapt to be as wide as it needs to be, and will take precedence over google's inline style
JS Fiddle
I would try to put the button into a div. Then I would make this div smaller than the button to cut away the right part of the button. You need to adjust the position and overflow options in your css.
I am having a problem getting the correct width of a span. It works in the following browsers and NOT in IE7:
Works in:
Firefox
Chrome
Safari
IE8
I need to get the correct width of the span so I can pass it as an argument to a jquery function.
Example code is identical to code with problem, but with generic class names substituted in to make the example easier to understand/refer to.
Related HTML:
...
<span class="outer-span">
<div class="inner-div">
<a href="http://www.google.com">
<span class="selected">
<c:out value="${somestring}" />
</span>
</a>
</div>
</span>
...
Related CSS:
.outer-span { width: 120px; }
When I alert($('.outer-span').width()) in all browsers EXCEPT IE7 I get 120.
In IE7, the alert shows me that the width of 'outer-span' is 700px, which is probably the width of one of its parents.
I know that to accurately reason about the problem, you probably have to see the html above the block that I've posted. What I'm looking for however, is some tips for debugging the problem, or a clue as to why IE7 acts this way or how IE7 handles things differently. I'm not looking for you to rewrite my code or come up with some CSS hack. Comment if you need more clarification on the problem.
You can't put a <div> (block element) inside a <span> (inline element). It's invalid and doesn't make sense.
Browsers may try to fix your mistake, for example by closing the <span> when it sees the opening <div>. This would cause the span to be empty and hence have no width. But this behaviour will vary across browsers.
Also, you can't put a width on an inline element. It will have no effect, unless you have IE in Quirks Mode... which may be the case if this is working for you. You really want to avoid Quirks Mode (use a proper <!DOCTYPE>!).
If you want a simple block wrapper to contain a <div>, it should probably also be <div>.
It's possible that IE7 is throwing a fit because you have a span surrounding a div, and inline elements cannot have block level children. Try applying:
.outer-span { display:block }
If that works, then I recommend changing the span in question to a div.
By default, spans are inline and divs are block elements. Having a div inside a span doesn't make a lot of sense without changing the default CSS display attribute. Try using nested divs with a CSS width on both of them, or changing the inner div into a span, or using display: inline on the inner div.