Develop Reference

CKEditor Removes IFrame

When I try to load value from the database into a field that is editable by CKEditor, it strips out the iframe tag from it.
For Example, I send the following html to the be printed out on the screen:
<div class="videodetector">
<iframe src="https://www.youtube.com/embed/eSYKJ8WQ508?autohide=1&controls=1&showinfo=0"
frameborder="0" allowfullscreen=""></iframe>
</div>
But when I look at the printed out html, I see something like this:
<div class="videodetector"><img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FeSYKJ8WQ508%3Fautohide%3D1%26amp%3Bcontrols%3D1%26amp%3Bshowinfo%3D0%22%20frameborder%3D%220%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" data-cke-real-element-type="iframe" data-cke-resizable="true"></div>
It seems to inject this image tag where the iframe is suppose to go.
I have researched this online and I tried adding the following code to the config.js, but it does not make a difference for me:
config.extraAllowedContent = 'iframe(*)';
config.allowedContent = true;
Note: If I print this out in a div that is not editable by CKEditor, then the iframe loads without any issues.

I do this:
CKEDITOR.on('instanceReady', function () {
var CKEIframes = $('.cke_iframe');
var CKEIframesL = CKEIframes.length;
for (i = 0; i <CKEIframesL; i ++ ) {
$(CKEIframes[i]).replaceWith(decodeURIComponent($(CKEIframes[i]).data('cke-realelement')));
}
});

I need to add many HTML tags into my text, including iframe. So I use these settings and they work fine:
'extraAllowedContent'=>'*(*)',
'allowedContent'=>true

how can I make sure a dropdownlist's list is always dropped down rather than up

I want to show dropdownlist always to down. (Is it posible?)
If bottom space is less then the height of dropdown list it's show list to up.
I want to show list always to down.
Thanks in advance

This can be achieved by adding the following attribute to your CSS class of your dropdown list:
.drop-down {
top:100%;
}
The same can be used to force the list to go upwards: bottom: 100%;
Here is a jsfiddle demo.
EDIT:
The standard HTML form Select Option (<select><option> <option></select>) can not be manipulated to expand into a certain direction. You'll have to write your own custom dropdown menu with JavaScript to implement this functionality.
After a quick browse I've noticed that others have struggled with the problem you're having. And apparently the following CSS code seems to fix it in some cases.
select { vertical-align: top; }

What you can do is set the attr size using jQuery like so
jsFiddle : https://jsfiddle.net/ou5n9u3y/
jQuery
$(function () {
var dropdownOptions = $('.dropdown-selector').find('option').length;
$('.dropdown-selector').attr('size', dropdownOptions);
});

KENDO ui menU IE9 issue

I am using KEndo UI in asp.net mvc website and menu is working fine in all the browsers except IE 9.0 . I am using float: right but when i open the page on IE 9 and move my mouse over the menu then it moves from right to left
But it should be like this
Mt CSS
.float-right-menu {
float: right;
}

You may need some kind of css reset for those kind issues

Welcome to IE :( If I remember correctly, IE9 has an odd rendering bug where if your floated element doesn't have a width specified in CSS, then it decides to make it 100% width (like a non-floated div would be).
I think to fix it you have to give it a width in CSS. Unfortunately, that is hard to do unless you know the actual width of the menu. But, try setting it to something like "width: 300px;" just to see if it fixes the issue.

You can use something like that
<script type="text/javascript">
function SetMenuWidth()
{
var menu = $('#MenuName');
menu.width(menu.width());
}
$(document).ready(function () {
SetMenuWidth();
});
</script>

How can I animate between display none and display table (or the visual equivalent thereof), in jQuery?

I have been trying to learn a little bit about jQuery's .animate() function, and I have gotten a few things to animate, but I haven't been able to set up animation for my table in the way that I would like.
Here's the table html:
<div class="topSectionContainer">
<div id="dropDownArrow">►</div><span class="editLabelTitle">Page Settings</span>
<table class="topSectionTable">
<tr>
<td class="pageSettingsContainer"></td>
<td class="fileBoxContainer">#Html.Raw(ContentGenerator.getFileBox("Tourism"))</td>
</tr>
</table>
</div>
I would like to get the following functionality:
The table.topSectionTable starts off as though it had display: none assigned.
When div#dropDownArrow is clicked it should (while animating) appear that the table is growing in height (whether the height property is actually adjusted or not) and revealing the contents of the table as it expands.
Once div#dropDownArrow is clicked again, it should animate in reverse, thus hiding the table and shrinking its height (or appearance thereof).
I have already used some simple code for this that does not have animation (jQuery):
$("#dropDownArrow").toggle(function () {
$(".topSectionTable").css("display", "table");
$("#dropDownArrow").html("▼");
},
function () {
$(".topSectionTable").css("display", "none");
$("#dropDownArrow").html("►");
});
Things I have tried:
Using jQuery's .animate() with the display property. I am not sure of the reason for failure here, as the actual change in the display property doesn't show, but I'm guessing that changes to the display property are not supported with jQuery's .animate().
I have also tried setting the CSS rules for table.topSectionTable to reflect both overflow: hidden; and height: 0px;, then animating only the height property. Here, the animation on height was successful, however, the contents of td.fileBoxContainer show up whether the height is 0 or not (even though the height expands and contracts on the clickings of the div#dropDownArrow element.
I've seen this done all the time on websites, so I know there is a way. Furthermore, I would like to do this in jQuery rather than just CSS3 because I would like to retain this functionality in IE8, as well, if possible, and I know CSS3 has no chance of doing this.
UPDATE -- TRYING WITH HEIGHT 0 AND OVERFLOW HIDDEN, PLUS JQUERY ANIMATE
jQuery Code:
$("#dropDownArrow").toggle(function () {
$(".topSectionTable").animate({
height: 100}, 1000);
$("#dropDownArrow").html("▼");
},
function () {
$(".topSectionTable").animate({
height: 0}, 1000);
$("#dropDownArrow").html("►");
});
CSS:
table.topSectionTable
{
height: 0;
overflow: hidden;
}
td.pageSettingsContainer
{
}
td.fileBoxContainer
{
}
And the HTML is the same as above
My C# getFileBox Method:
public static string getFileBox (string location)
{
string content = "";
string[] files = Directory.GetFiles(HttpContext.Current.Server.MapPath("~/CMS Files/" + location + "/"));
foreach (var file in files)
{
content += Path.GetFileName(file);
content += "<br/>";
}
return content;
}

Try slideUp() and slideDown(), examples here, and documentation here

yes as sayd up use:
$("#dropDownArrow").toggle(function () {
$(".topSectionTable").slideDown();
$("#dropDownArrow").html("▼");
},
function () {
$(".topSectionTable").slideUp();
$("#dropDownArrow").html("►");
});

Ended Up Figuring This One Out:
Okay, so while this page was the suggested duplicate:
Transitions on the display: property
The real duplicate (considering the problem at hand, but especially the answer) should be this:
overflow:hidden not working when using tables
The short answer to my problem was this:
"Overflow only works on block level elements. Table elements aren't block elements."
Thus my solution was to simply wrap my table in another div and apply overflow: hidden; and the height to it, and then target it with the jQuery's .animate() instead of the table.
As for why slideUp() and slideDown() didn't work, I can only speculate that when jQuery implements these functions, it uses some (if not all) of the same features that apparently breaks on non-block level elements.

Custom button in HtmlEditorExtender control?

I'm in dire need of assistance.
I need to add a custom button to an HtmlEditorExtender control, but I'm lacking the know-how to actually do that.
I've searched throughout this forum but no information was relevant or whatsoever.
Should someone be so kind to help, I need an example to help me sort this issue out.
Thanks in advance.

One possibility is to add it to the DIV containing the buttons using javascript. I do it using jQuery.
If you inspect the DIV in Firefox, you'll notice that it has a class named 'ajax__html_editor_extender_buttoncontainer'. Knowing this class allows you to select the container and add your own custom button to it.
To do so, add the following jQuery script in the HTML below your HtmlEditorExtender:
<script language="javascript" type="text/javascript">
// retrieve button container div using its class
$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
if ($btnContainer.length == 1) {
// append your custom button to the collection of elements within the button container div
$btnContainer.append("<input id=\"HtmlEditorExtender_YourButtonName\" class=\"ajax__html_editor_extender_YourButtonName\" type=\"button\" name=\"YourButtonName\" title=\"YourButtonName\" style=\"width: 101px; height: 21px;\" unselectable=\"on\"></input>");
}
</script>
To style the button, create images for it and add the following to your style sheet:
/* custom button */
.ajax__html_editor_extender_YourButtonName {
background: url('/images/YourButtonName_off.png') no-repeat scroll;
cursor: pointer;
display: block;
float: right; /* default is left */
border: medium none;
}
.ajax__html_editor_extender_YourButtonName:hover {
background: url('/images/YourButtonName_on.png') no-repeat scroll;
}
The appearance of your button is of course up to you, but the result may look something like this:
Finally, to add functionality, add a click event to elements that have the class you specified. You can do this in your external .js file.
If you want to access the html of the textbox, inside that click you will want to retrieve the html of the first of two divs that have the attribute contenteditable='true'. This is the design view of the HtmlEditorExtender.
Add the following to your .js file:
// click event for the custom button
$("body").on("click", ".ajax__html_editor_extender_YourButtonName", function (e) {
var $editorDiv = $("div[contenteditable='true']").first();
alert($editorDiv.html());
})
There's probably a more efficient way to get the design view but it'll work.