I am currently working in dynamic template creation where user can drag any defined element from source area into destination area. Now after dropping user can modify it's text (change / add new).
I have done dragging and dropping but how to change it's text after dropping. ?
Is there any javascript library available to help me out?
Have you taken look at the HTML contenteditable Attribute?
<div contenteditable="true">This div is editable. Try to change this text.</div>
Answer is simple. After dropping your element, change it's content to textarea which can be styled to look same as before dragged.
For question about library. I would use jQuery because of it's easy content manipulation. You do something like this:
function eventAfterDrop(container) {
container.html('<textarea name="textarea" class="same-as-dragged"></textarea>');
}
This will do only one thing and that's change of content to textarea. It can be done many different ways. I'm just trying to show you which way to go.
PS: If you show some code, someone can help you to do this exactly for your code.
Related
So in my app I'm trying to implement a component which allows the user to write html into a textarea. This html will be used for email templates, thus a preview of what the email would look like should be rendered below. I have a few ideas of how I can implement this, like simply taking the string and rendering it as innerHTML or I could also pass the html to the srcdoc property of an <iframe>. Both solutions seem very crude to me, so I'm assuming there's a much better/cleaner way of implementing this kind of requirement that I'm simply not aware of. Could anyone guide me on how to do this correctly?
I'm working with Angular if that's of any help.
You can add text area change event onchange and apply your input html to div as
html, refer below example.
html
<textarea id='txtArea'> </textarea>
<div id='preview'></div>
Javascript
$(document).ready(function(){
$('#txtArea').change(function(){
$('#preview').html(this.value);
});
})
here is jsbin demo https://jsbin.com/bojalo/edit?html,console,output
I noticed that most TinyMCE plugins give placeholders with a simple image, and perhaps some edit-button-popover functionality. Take the Wordpress gallery and image edit functionality as an example - a simple image with edit/delete buttons. Even NextGen 2 (a few versions ago at least) had Nextgen-gallery slideshow placeholder as a simple image, not rotating image.
I was recently trying to make some more dynamic content within the editor. It's a challenge to insert the jQuery, then import the jQuery-plugins that run certain behavior within a placeholder. It's also challenging to fix the no-drag-into-noneditable-placeholder bug, after enabling the TinyMCE-noneditable plugin.
Even after that, there is a problem where the div with special content (noneditable placeholder) can lose its elements when it is drag-dropped within other text to another part of the editor.
Are things like this the reason most TinyMCE plugins make a styled image, at best? Is TinyMCE and contenteditable in general inherently incompatible with jQuery-plugins running within its editors? Are there any examples of successful live preview functionality in content-editable areas, rather than a static image file?
Update
It looks like this isn't even a TinyMCE problem - as you can see on this demo page, when you add the contenteditable="true" attribute to the id="main" element, then select some text including the rotating banner, cut and paste to another part, it not only stops the slideshow (as you would expect), it also removes several img elements. Is there any way to stop this glitch?
I want to put a switch for my website that when you click it the language of the page change. Yesterday I saw a close live example in a website.
Here's the link: http://iranfilm76.com/
The object on the left side in the header is exactly what I'm trying to achieve, but instead of changing the background i want to change the language.
I already have the functions for changing the language, my problem is the object, I download the image and css for the file.
I take a close look at the codes with firebug and when you click on the tag the class of the tag changes to class="changestyle".
How can I do this? Thanks for any suggestion.
YOUR_ELEMENT.addEventListener("click", function(){
this.classList.toggle("changestyle");
});
Demo: http://jsfiddle.net/DerekL/KpwkG/ | http://jsfiddle.net/WsGGa
For a non pure javascript approach, you can try selecting your toggle element using jquery like so:
$('element').click(function(){
$(this).toggleClass('language');
});
Then in your CSS you can apply whatever rules you want
So, I'm working on a page and am having a slight issue with setting up a hover funtion dynamically. What I am trying to do is for each entry, create a hover function. I tried everything I could think of but it always seems that each entry gets assigned the same hover function. So, I came to the solution I have now which works in jsfiddle but not on the website I made.
Is there a better way to create a dynamic hover function, or how can I get this to work? Any help is appreciated.
Link to fiddle
Link to website
This has nothing to do with ExpressionEngine, it doesn't even need to be done with Jquery and can be done purely with CSS.
The problem is you're outputting the JS with every loop of the channel entries instead of using a centralised JS file in your head or bottom of the body html, similar advice would be to move the CSS into a general CSS file instead of inline.
.MF {
hide the rollover text
}
.MF:hover {
hide the title and sub-title
show the rollover text
margin-left the arrow
}
Because of stackoverflows spam prevention, links + image are in pastebin. HERE
On with question-
I want it so when I click an autosuggest it works as a link but that isn't the main question here.
If you go on my website (pastebin) you can see there are boxes around the text box.
[Please look at the image, also in pastebin] (Drew's form ontop, mine below)
It must be css, but I can not find which property has to be changed.
(the form is generated on-the-fly so I can't look at the html.
thanks
Pal, thats because you have called the plugin twice at $(document).ready.
Remove the following from your $(document).ready.
$(function () {
$("input[type=text]").autoSuggest(data);
});
JSFiddle here: http://jsfiddle.net/naveen/H7ptB/
Try commenting out all the border properties and box shadow properties in the Auto Suggest CSS file.