I have the standard content editor that uses an iFrame as the text area and then onchange of dropdowns it performs:
idContent.document.execCommand(cmd,"",opt);
where "idContent" is the iFrame.
One of the dropdowns is supposed to be style but it performs a "formatBlock" command.
I have a custom style sheet. Is there a way for me to put styles that I've created into this style drop down? If not, I can have another dropdown for these custom styles but what is the command name to set those styles?
Here is the dropdown and javascript that I'm currently using:
<select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>Style</option>
<option value="Normal">Normal</option>
<option value="Heading 1">Heading 1</option>
<option value="Heading 2">Heading 2</option>
<option value="Heading 3">Heading 3</option>
<option value="Heading 4">Heading 4</option>
<option value="Heading 5">Heading 5</option>
<option value="Address">Address</option>
<option value="Formatted">Formatted</option>
<option value="Definition Term">Definition Term</option>
</select>
function cmdExec(cmd,opt)
{
idContent.document.execCommand(cmd,"",opt);
idContent.focus();
}
It is possible to link a stylesheet to the document you are currently editing, assuming you have in the iframe a document in designMode. The stylesheet can contain the styles you like that you can apply by altering element CSS classnames or wrapping in an HTML element that has a classname. However you will not be able to apply it using the designMode commands. You'll have to use selections & ranges, and manually change the HTML mark-up to get your desired styling applied.
Read the following article on the general commands that you can apply: https://developer.mozilla.org/en/Midas
The following articles will explain advanced editing techniques using Selections & Ranges:
https://developer.mozilla.org/en/DOM/Selection
https://developer.mozilla.org/en/DOM/range
Related
How could I prevent style changing of the html select on size attribute changing?
<svg>
<foreignObject>
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=1;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
</foreignObject>
</svg>
Here is a fiddle, because for some reasons I can not run the html in the SO fiddle.
What I tried to do is to catch all style changes using the Chrome dev tools, but there are too many of them (changes).
I need to change the size so that to be able put a constraint onto the number of the options visible at once in the select.
In order to avoid a possible x-y problem: I need this to make a scrollable dropdown in svg using the foreignObject and html select.
I would like to be able to select only one option at a time.
According to this question, specifically to the answer:
The behavior depends on the browser and cannot he controlled by the author. You can use the size=10 attribute in the element, but it also changes the menu to a listbox so that 10 options will be visible even when the menu is not focused on. To achieve the behavior you describe, you would need to build your own controls using JavaScript and CSS.
I may tell that my question is about preserving the menu and not changing the style to the listbox style.
I have used select2 plugin. I need to add the new class in
.select2-results .select2-highlighted class for override the background color.
Can anyone please tell me the solution.
You want to color different select2 boxes different colors. select2 actually makes this a bit difficult because of the format of the generated html and the way it is added to your document:
From the Docs:
By default, Select2 will attach the dropdown to the end of the body and will absolutely position it to appear below the selection container.
When the dropdown is attached to the body, you are not limited to just displaying the dropdown below the container. Select2 will display above the container if there is not enough space below the container, but there is enough space above it. You are also not limited to displaying the dropdown within the parent container, which means Select2 will render correctly inside of modals and other small containers.
This apparently helps select2 work better in modals and such but it bones you because the "parent" element doesn't mean jack now,....ie - styling descendants of the original select's parent wont help you.
However, the dropdownParent option lets you specify where the generated html should be added...so we can work with that instead.
The basic idea is to add a data-select2-container="" attribute to each select whose select2 counterpart should be colored differently. The code will then create an div with the class specified in the attribute and add it after the original select then append the select2 box as a child of that added div thus allowing you to style the elements as children of a div with the specified class:
$(function () {
$(".select2").each(function(i,e){
$this = $(e);
if($this.data('select2-container')){
// if a container was specified as a data attribute, create that container and add it after the current raw select element
// the value set for `data-select2-container` will be used as the class for the container
$('<div class="'+$this.data('select2-container')+'"></div').insertAfter($this);
$this.select2({
placeholder: 'Select an option...',
dropdownParent:$this.next() // set the parent for the generated html to the element we created
});
}
else $this.select2({ placeholder: 'Select an option...'}); // handel cases where a container was not specified
});
});
.orange .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: orange;
}
.red .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: red;
}
.green .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="container1">
<select class="select2" data-select2-container="orange">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select><br>
<div class="container2">
<select class="select2" data-select2-container="green">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select><br>
<select class="select2" data-select2-container="red">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</div>
<br>
Important notes:
This code will only work if you are using the full version of select2 4.0.0 (and the CSS to go with it )
Elements added like this may not function as expected if they are in a modal (judging by the comments in the docs, not tested)
This is one of those cases where I might would just download the plugin and edit it so that it has this functionality natively, I cant image why the author didnt include an option for this...
I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?
Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.
I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...
I am trying to create a select element which has a basic list, then when the user hovers over an option it expands to shows a more complete list.
I started by using css to hide all the values I wanted hidden, but this did not adjust the height of the select dropdown, so I was left with a lot of white space.
I then tried to have two selects, one with the reduced list, the other with the complete list(which is hidden). I then used javascript to copy the options from the complete list to the reduced list, when a user hover on the 'Other' optgroup. The code for this is shown below.
Html:
<select id="Title">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<optgroup label="Other">Other</optgroup>
</select>
<select id="FullTitle" style="display:none">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
<option value="DR">Doctor</option>
</select>
Javascript:
<script type="text/javascript">
$('select').find('optgroup').hover(
function () {
var parent = $(this).parent()
var selected = parent.find('option:selected').val()
var id = "#Full" + parent.attr('id')
parent.html($(id).html())
parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
})
</script>
This works fine in firefox but does not work in either IE or Chrome. I am not sure why.
I was wondering if anyone knows why this is not working or a better approach to my problem?
Hover events don't fire for options in IE and Chrome. There are some scripts you can try that might do this, and I've seen other posts on this site about it as well:
jquery hover event doesn't work with select option tag in google chrome?
From what I've seen, converting this into a div/ul and using css/jquery to make it look like a select list might by your best bet.