So I have a contenteditable button in my webpage I declare like so:
<button id="test" contentEditable="true">This <img src="image..png" /> is a button, click me!</button>
I move the caret around, and I want to find its final location. I tried both:
window.getSelection().focusOffset.toString()
document.getElementById('test').selectionStart.toString()";
but neither of them seems to work :( Any pointers?
Update
Unfortunately the code from the links below seems to work only with Firefox and not with Chrome (for a button, divs work just fine)
Take a look at these:
Get caret position in contentEditable div
https://niichavo.wordpress.com/2009/01/06/contenteditable-div-cursor-position/
Here's a quick and dirty fiddle - it isn't perfect but it might help you get started. I've used code from the blog post at the second link above.
Related
I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.
I need to change the text that appears in the status bar of Chrome. Since it's not possible to use status.text anymore (for security reasons) I am wrapping an <a> tag over <body> so my code is <body>...</body> .
It's working as expected cause every time the user moves the mouse inside the page the status bar shows exactly what is inside the href attr of <a>. The problem: I did not realize till now that I cannot select any text inside the page cause if it's treated as link. I am using return false onclick event of and it works great cause the user is never redirected however it's not possile to select text inside the <a>.
Is there a CSS property that allows me to change that behaviour? It only occurs if <a> tag.
For the sake of hacking. This is invalid markup and bad code, but as a proof of concept (at least for Chrome).
One could use various combinations of mouse events, range selection and editable. Tricky part is to calculate what and where to select.
Sample code should give you selection of the first words in a paragraph; as in: click on the start of each paragraph like somewhere in "Lorem ipsum" or "Duis posuere" to select some of the words. This could then be combined with mousedown, mousemove, mosueup etc. to select correct text.
Chrome only Fiddle
You can try the CSS property pointer-events.
a{pointer-events:none} would disable the mouse event for that element.
But a better approach would be to add the URL in data-attribute and on click event you can navigate to those URL with location.href.
Will that help?
Ok, just for fun, and this is not the real hack but it something close:
Do like this:
<body>
<div class=container>bla bla bla</div>
<a href="my custom text" id=the_hack></a>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(".container").hover(function(e){
$("#the_hack").trigger("focus");
});
</script>
Of course it will have some limitations, when you select text the status bar will disappear, also if you highlight text move the mouse out of the div than back in, the selection will be lost, but hey it's a hack.
See here what I mean.
I created a contentEditable div with a text portion and a link. Double clicking the link will select the link text.
<div contentEditable="true">
This is a text and This_is_a_link
</div>
Afterwards calling document.getSelection().getRangeAt(0).startContainer will return the div:
// => <div contenteditable="true">
Instead of the link. I cannot find a way to find which part of the div is selected.
See this jsfiddle (double click the "This_is_a_link" and there will be a console log with startContainer):
http://jsfiddle.net/UExsS/1/
(Obligatory JS code from the fiddle)
$(function(){
$('a').dblclick(function(e) {
setTimeout(function() {
console.log(window.getSelection().getRangeAt(0));
}, 500);
});
});
Note, that Chrome has the correct behavior, and running the above jsfiddle in Chrome will give textElement for startContainer.
Has anyone run into this issue? did you find a workaround?
Don't think its a bug of Firefox, just a different kind of implementation. When you double click the link, Firefox selects not only the text, but the whole a-tag, so the parent node of the selection is correctly set to the div container.
I added these few lines of code to your fiddle to proof that point:
var linknode = window.getSelection().getRangeAt(0).commonAncestorContainer.childNodes[1];
console.log(linknode);
console.log(window.getSelection().containsNode(linknode, false));
Forked fiddle: http://jsfiddle.net/XZ6vc/
When you run it, you'll see in the javascript console that linknode contains your link, and the check if the link is fully contained in the selection returns true.
This is also one possible solution to the problem, albeit not ideal one. Iterate over all the links in your contenteditable and check if one of them is fully contained in the selection.
Though one word of advice: Don't reinvent the wheel if you don't have to ;-) There's quite possibly some libraries / frameworks out there that fit your needs.
I'm developing a RTE(rich text editor) using a wrapper div.
<div id="myeditor"></div>
//then
editorfunction(myeditor);
What the function does is add the following elements
<div id="myeditor">
<div class="toolbar">buttons here</div>
<div class="editorwrapper">
<div class="editor-richtext">
rich text etc
</div>
<textarea class="editor-source"><p>rich text etc</p></textarea>
</div>
</div>
I can successfully grab the html from the .editor-richtext and put it inside the textarea, but when I edit the textarea, I don't seem to be able to paste that back into the rich-text.
Thanks in advance!
Update 1
Ok, it seems that
$("richtext").blur(function() {
$("textarea").val($(this).html());
});
Works fine, but not the other way around (from textarea to richtext).
Update 2
It seems it is very unstable, it partially works but is acting strange :\
I'm not able to fully get content from textarea and paste as html into contenteditable. I will continue to do some research.
Update 3
I just updated update 1 and update 2 as I totally flipped textarea and richtext in my brain. Sorry!
Update 4
Ok, I pretty much got it solved now. I just have one slight problem, upon initialization, if I don't focus the contenteditable div and switch to the source view\textarea. the textarea is emptied, and when I then go back to RTE view\contenteditable div it is emptied. from the empty textarea\source.
I'm working on a work-around.
You can hook the onBlur event of textarea to copy the text and paste it in editor-richtext
$("textarea.editor-source").blur(function(){
$("div.editor-richtext").html($(this).val());
});
EDIT
For other way around, you can use the following code segment
$("textarea.editor-source").focus(function(){
$(this).val($("div.editor-richtext").text());
});
You may want to use jQuery and the following functionnalities?
$(".editor-source").keyup(function() {
$(".editor-richtext").html($(this).val());
});
Everything works fine. Selectors in your example are incorrect thought:
HTML:
<div class="editor-richtext">
original text
</div>
<textarea class="editor-source">modified text</textarea>
JS:
$(".editor-source").blur(function() {
$(".editor-richtext").html($(this).val());
});
Demo
UPD:
$(".editor-richtext").click(function(){
$(".editor-source").val($(this).html().trim());
});
new demo that puts content from div into textarea on click event.
What I'm trying to do is allow the user to click on a photographer's photo on the portfolioMain page; this will then take them to information about the photographer. When they're done there, they can then click "back," which will then take them back to the portfolioMain.
It use to work perfectly fine but I messed up somewhere in the script or html. So now when I click back, the photographer's information still shows and does not fadeout. Can anyone see what I could I have possibly done wrong?
It seems to be because you have not initialised the document state correctly at the beginning. Otherwise, your code seems to work fine (at least with jQuery 1.6.4).
Here is the working jsFiddle, with the "quick hack" of calling the back link functionality at the start of $(document).ready() to set the state correctly: http://jsfiddle.net/RFra9/1/
Obviously, the way it 'flashes' is not ideal, so you will want to ensure the HTML gets rendered initially with the right elements hidden (set their style attribute to display: none;), and then remove the $(document).ready() call to backToMain().
Does that make sense? Let me know if not.
Oh, and while you are there - technically, <br> should be <br />, and all <img> tags should be self-closing as well (<img ... />) - the one for Vanessa isn't.
EDIT: Okay, after having looked at the page, aside from all the broken image paths (most due to the missing . in the filename), I think the problem with the .portfolioDetail:visible div not fading out correctly is due to your use of floats. Now, I'm no float expert, but I did get the desired behaviour by adding <div style="clear: both;"> to the end of each portfolioDetail div, e.g:
<div id="william" class="portfolioDetail" style="display: none; ">
<div class="quadColumn">
<img src="img/galleryicon2jpg">
</div>
<div class="quadColumn endColumn">
<p>I really enjoyed William's ability to "make scenes come alive". And in our work together, that's exactly what he captured. I thoroughly enjoyed working with William</p>
<p>www.williamchik.com</p>
<br>
<p>Back</p>
</div>
<div style="clear:both;"></div> /* here */
</div>
I'm not sure which CSS framework you are using, as there might be a way to make sure the float is cleared with a special class or something, but adding the div manually (as well as re-binding the $(',back') functionality, I'm not sure why that didn't work with my changes) did fix it for me.
Does that help at all? Try fixing the image paths and add the clearing div on the test site you linked to, and I'll have a look if it still doesn't work.
You should wrap your JavaScript code in:
$(document).ready(function(){
// your code
});