jquery changing clone style changes original style - javascript

I am trying to add change the inline-style property of my html. For this, I cloned a div and append it to another div. I am also trying to display the HTML contents in textarea after stripping the inline-style. Here's my code
//Store html in temp div
$("#html_code").clone().appendTo("#temp_html");
//remove style attribute
$("div.animation-1 span.front").removeAttr('style');
//clone this and attach to textarea
var html_extracted = $("#temp_html").clone().html();
$("#show_html").text(unescape(escape(html_extracted)));
Here is the #html_code:
<div id="html_code">
<!--HTML Code-->
<div class='animation-1'>
<span id="box" class='letter hidden'>
<span class='back'>Android</span>
<span class='front'>T</span>
</span>
</div>
</div>
Here is the #temp_html:
<!--Stores cloned html to remove its style-->
<div id="temp_html"></div>
Here is the #show_html:
<!-- HTML Code display -->
<div id ="html-code-area" class="codearea">
<textarea id="show_html" cols="58" rows="20">
HTML will be displayed here
</textarea>
</div>
But when the clone is changed, it changes the original too. Is there a way to change the clone only without changing the original?
Also, the text in textarea keeps adding the same code again and again. How can I replace everything in the textarea with new contents?

I checked your code in a fiddle, - it works as expected with clone(), except that you remove the style attr from both nodes. You should select only the temp html:
$("#temp_html div.animation-1 span.front").removeAttr('style');
and about replacing the text in the textarea - you need to empty #temp_html before doing a new copy, like this:
$('#temp_html').empty();
The text inside #show_html is always replaced, it's just that #temp_html had several nodes attached.
here's the new fiddle: http://jsfiddle.net/WdTum/3/

Related

How to display a javascript string with style

When I set a paragraph element to a javascript variable with innerHTML, the paragraph element is displayed without any CSS of its divs. I am also using bootstrap.
I have tried applying style to the paragraph itself, but it is not registered/displayed with the javascript variable.
Here is the HTML with the bootstrap styling and paragraph element
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3><p font="38px" id="bounce_rate"></p></h3>
<p>Bounce Rate</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
</div>
</div>
Here is the JS that sets the variable using innerHTML
var bounce_rate = document.getElementById('bounce_rate');
// response.result["values"][0][0] is from JSON and works as intended
bounce_rate.innerText = response.result["values"][0][0];
I expected the styling tags applied to the paragraph element to be applied to the javascript string. The string is displayed, it just does not have styling.
The element does not have a 'font' attribute, so if your intend is to give the <p> element a font-size, the styling should be like this:
<h3><p style="font-size:38px" id="bounce_rate"></p></h3>
Additionally, nesting a paragraph text inside a heading text is not the right convention. If you wish to have a specific text inside <h3> tag to have a font-size of 38px, use <span> tag instead:
<h3><span style="font-size:38px" id="bounce_rate"></span></h3>

How to get a div which is removed from the DOM when it's parent has been made .empty()?

I have a div in a HTML file
"<div id="abc" hidden="hidden">
<div id="statIndicator">
<span id="imgInd" class="status-indicator-border">
<img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
</span><span id="messageIndicator">Updating Plots...</span>
</div>
</div>"
I insert the statIndicator div in another div using append.
so that div becomes
<div id="parentDiv">
<div id="statIndicator">
<span id="imgInd" class="status-indicator-border">
<img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
</span><span id="messageIndicator">Updating Plots...</span>
</div>
</div>
On refresh I write $('#parentDiv').empty() it deletes whatever is inside the 'parentDiv'.
But when I try to append statIndicator using $('#statIndicator'), it return "[]", though I have the 'statIndicator' div in Html.
Is there a way in which I can get the 'statIndicator' div?
No. $.empty() deletes the contents, so your "statIndicator" div no longer exists at all.
Just remove it from "parentDiv" before you call $.empty(). Either store it in a variable or put it back where it started, in "abc".
I think jquery.append() moves the selected elements without making a copy. So you can explicitly create a copy using the .clone() method and append it's result. Something like:
$('#abc #statIndicator').clone().appendTo('#parentDiv');
This is creating a copy and then appending it at the new location.
Once you do this there will be two divs with the same id, so it will be a good idea to always reference the statIndicator's parent container in your selectors.
You can use .detach() function if you want only parentDiv to be removed

CKEditor: how to force P within DIV?

In the CMS I'm working on, I need to insert some custom HTML (which works):
var element = CKEDITOR.dom.element.createFromHtml("<div class='sidebar'>Edit Sidebar Text</div>");
The problem is that when editing what's inside the sidebar element, pressing ENTER duplicates the sidebar DIV instead of adding a P tag within the sidebar. How do I tell the editor to use a paragraph instead?
I expect this:
<div class="sidebar">
Enter sidebar text
<p></p>
</div>
and get this:
<div class="sidebar">
Enter sidebar text</div>
<div class="sidebar">
</div>
I have not made any changes to "entermode" settings.
You have almost guessed the name of the preference:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.forceEnterMode (yes I think that this setting should default to true, but at least we have the option to set it)
In addition to Alfonso's post, the second thing you need to do is insert your own paragraph as part of the wrapping element. That way CK will create a plain <p> tag inside the wrapper instead of <p class="sidebar">.
var element = CKEDITOR.dom.element.createFromHtml("<div class='sidebar'><p>Edit Sidebar Text</p></div>");
Found this clue from here: http://ckeditor.com/forums/CKEditor-3.x/inside

How to make a template content non editable in tinymce

I've crated html template file, I put some elements inside that template are non editable.
template.html contains
<body>
<div>This is a sample template </div>
<div contenteditable="false" style="color:red">Read Only Text</div>
</body>
on inserting this template file into the textarea the second div is editable, while inspecting over that div I've seen that the attribute contenteditable="false" is not there on insert, but its there on the preview before the insert of template.
Any help gratefully received!
From this page: http://www.tinymce.com/tryit/noneditable_content.php
Its using a textarea:
<textarea name="content" style="width:100%">
<p>Text with a <span class="mceNonEditable">[non editable]</span> inline element.</p>
<p class="mceNonEditable">Noneditable text block with <span class="mceEditable">[editable]</span> items within.</p>
<p>Text with tokens that isn't [[editable]] since they match the noneditabe_regexp.</p>
</textarea>
The key here is putting a class of mceNonEditable in your element:
span class="mceNonEditable"
Then whatever non-editable content you have, wrap it in greater than and less than:
>You cannot edit me<
Then finally close the element:
/span
I think you can also change the mode (in the example they're using textareas, so I guess you can also use divs or spans) when initializing tinymce:
tinyMCE.init({
mode : "textareas",
noneditable_regexp: /\[\[[^\]]+\]\]/g
});
There's also noneditable_regexp which lets you specify a regular expression of non-editable contents.
I think this is easier than using html entities.
I haven't actually tried it but that's the way I interpret the example in the page.

image overwriting existing html objects

i tried to generate img tag with javascript
(when clicked on link, image is created)
The problem is that when the image is generated, all other objects(other images or text) are overwritten and i cannot reach them anymore
i have something like
document.getElementById("picturediv").innerHTML=picturetag;
in html
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
It should work, unless picturetag is breaking the html.
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
<script>
document.getElementById("picturediv").innerHTML="<img src='"+pictureLocation+"'>";
Assigning the innerHTML indeed "overwrites" any previous content of the element.
To append the image to the existing contents have:
document.getElementById("picturediv").innerHTML += picturetag;
Assuming picturetag contains valid HTML - if no luck please post more code especially what is picturetag and how it's created.
Try something like this:
document.getElementById('picturediv').appendChild(picturetag);
That will append the image to the div

Categories

Resources