When I run init() and create an tinymce instance, I want to have some wrapping divs for styling purposes.
For example, imagine this is the initial DOM inside TinyMCE's iframe when the page starts up:
<html>
<body>
<div class="myWrapper">
<div class="myWrapperContainer">
--> User input area <--
</div>
</div>
</body>
</html>
Then when I get the user input content:
var userContent = tinymce.get("myTextarea").getContent();
I don't want the wrapper divs to be included in userContent. I just want the HTML inside the wrapper divs
How should I go about this?
Related
So, I am trying to load picture from another page using Jquery .load(), now the element I am trying to load has multiple children element which also load on current page, now obviously I could hide those divs but first I want to know if there's way to only grab parent div and leave out children.
I have tried using parent() method but since .load() works differently, it didn't work as intended. (Unless I missed something)
$('#myNewDiv').load('/robots .heading-image');
Here's HTML code from the other page
<div class="heading-image" style="background-image:url(imagelinkhere.png)">
<div class="heading-image_cover">
<div class="left">
<div class="heading-image title">Heading Title</div>
<div class="heading-image desc">I am a desc</div>
</div>
<div class="right">
<div class="heading-image stat">Stat text</div>
</div>
</div>
</div>
That's the code I am using right now, but .heading-image has multiple child elements as mentioned above.
To sum up, I need to load only parent element and ignore all child elements of the div mentioned above without having to load those children on current page and hide them (If possible)
From what I understand, your goal seems to be to copy the empty div to a new page, while maintaining the background image associated with the <div> tag.
The simplest approach would be to add to a stylesheet in which both of the pages can reach. For example:
CSS
.heading-image{
background-image:url(imagelinkhere.png);
}
JavaScript
$('#myNewDiv').html("<div class="heading-image"></div>");
Then in the head of both HTML documents, have <link rel="stylesheet" href="style.css"> to point towards the correct stylesheet for both pages.
If you just want the empty <div class="heading-image"></div> you could use the load() complete callback to empty it:
$('#myNewDiv').load('/robots .heading-image', function(){
// new html exists in page now, 'this' is #myNewDiv element
$(this).find('.heading-image').empty();
});
If there are resources inside that element like images, videos etc that you don't want to load in page you could also parse the :
$.get('/robots').then(function(html){
var $hImage = $(html).find('.heading-image').empty();
$('#myNewDiv').html($hImage)
});
With all that said I don't see why you need to extract an empty element from another page and can't just do:
$('#myNewDiv').html('<div class="heading-image"></div>')
I try to make some kind of ads rotator as follows:
<html>
<head>
<title></title>
<style>
body {
margin:0;
padding:0;
}
</style>
<script>
function fillBoard() {
s = document.getElementsByClassName('slots');
board = document.getElementById('board');
board.innerHTML = s[0].innerHTML
alert(board.innerHTML);
}
</script>
</head>
<body>
<div id="board" style="width:160px; text-align: center; margin:0">
</div>
<div class="slots" style="display:none">
<!-- THE PROBLEM IS HERE -->
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript">
<!--
hsoub_adplace = 1310003403401506;
hsoub_adplace_size = '125x125';
//-->
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/1/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/2/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/3/" />
</div>
<script>
fillBoard();
</script>
</body>
</html>
In the code above:
There is a div with id board to act as a board that displays contents.
The board should be filled with data supplied from other hidden divs with class name slots using innerHTML property.
To do the above a function named fillBoard() is defined in the head section of the page and then called at the end of it just before closing </body> tag.
What is happening?
The hidden divs slots works fine with divs that contain images. However, in the first div there are a javascript code that should generates ads from an ads network which it does not work.
I expect that the javascript code of the ads network should fill its div with data, then the calling of fillBoard() will just copy its content to the board div. However, this is does not occur!
I need to know how could I overcome this issue?
A live example is found here
You can just show the desired hidden div and it's usually a better practice than copying DOM content. If you make sure to only show one of the hidden divs at a time you can show the image always in the same place.
Try this to show the first "slots" element:
s[0].style.display = 'block';
Ok so after some more digging I've found the issue, although I don't have an easy solution at the moment.
The js file show.js is generating some ad content inside of an iframe for you, which you are placing in the first 'slots' div. Simple enough. When you are setting the content of the board to the content of the first slots class, an iframe is being created in the board div but without the same content.
After some searching it seems that innerHTML of an iframe will not copy the contents of the iframe if it comes from a domain other than the page domain for security reasons.
It seems to me that the solution at this point is to either show and hide the slots divs like Zhertal suggested or you can possible find some other way to physically move the content of the slots div into board, but this may still be a violation of the same security concern. I'm going to keep digging and I'll edit this answer if I find anything more.
Reference SO posts:
Get IFrame innerHTML using JavaScript
Javascript Iframe innerHTML
I'm creating a resource database that has a scrolling container on the side. Essentially, when you click a thumbnail within the container, it will load the contents of a div which will fade in and display content for that category. Each div tag looks something like this:
<div>
<h2>Category1</h2>
<p><a style="float:right" class="a_demo_four" href="/Resources/file1.pdf" target="_blank">
Download
</a>File Desc</p>
<hr/>
</div>
And will load as such:
Essentially, I want to be able to display the same exact content when I open another category on this page. I have several different categories, and want to be able to pull the code from say Category1, Category2, and so on and so forth so I can display all of them in a "View All" tab. I've attempted to use jQuery's load function as seen below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<h1>This is why I rule</h1>
</body>
</html>
to load the content from the original div into the view all category, but nothing shows up. Unfortunately, I have very limited knowledge with Javascript/jQuery so I'm having difficulty being able to use the same content in a different div without just copying and pasting the code over. This would also pose problems in the future when I am adding files and have to edit the code twice if I did so.
Thank you in advance!
You can keep your content in a variable like this:
var content = '';
$(document).ready(function(){
//load first in a div
$('#includedContent').load('b.html', function(result){
content = result;
//from here on, you know you have b.html data in the variable content
//and you can use it elsewhere like this
$('#anotherDivId').html(content);
});
});
If you call your code within document ready function will work.
Try,
$(document).ready(function(){
$("#includedContent").load("b.html");
});
However you will probably need to keep it somewhere as visualex suggested in order to add the content in multiple places as you require.
This is a working jsfiddle,
http://jsfiddle.net/c5SAH/show/
it loads content from
http://jsfiddle.net/gfgE8/show/
Currently have my page setup as:
<body id="some-id">
<div class="some-class">
</div>
<!-- some-class -->
</body>
I've tried using append and before, however, it's not quite doing what I want to do.
I'm trying to add a div with id inserted-div like this:
<body id="some-id">
<div id="inserted-div">
<div class="some-class">
</div>
<!-- some-class -->
</div>
<!-- inserted div -->
</body>
Each time I use something, for example: $('body').appendto("<div id='inserted-div'>"); it either won't insert or it will insert the </div> after the inserted <div> rather than placing the </div> before the closing body. Tried prepend and prependto but no luck.
You are looking for wrap method.
$('.some-class').wrap('<div id="inserted-div"></div')
$('body').prepend -- will add a div as the first child of the body.
$('body').append -- will add a div as the last child of the body.
But in your case you want the inserted-div as a wrapper for an already existing div.
Check Fiddle
To target just the first instance you can either use
$('.some-class').first() or $('.some-class:eq(0)')
If you want to wrap something around the entire body content, try:
$("body > *").wrapAll("<div id='inserted-div'/>");
If you want to wrap around the first DIV in the body:
$("body > div:eq(0)").wrap("<div id='inserted-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