Change the line height of the selected text with Javascript - javascript

I am trying to program my own WYSIWYG editor as a summer project. I am trying to implement the line height function that controls(single spacing, double spacing, etc). I have created the dropdown that will allow users to select between the types of spacing. However, I cannot seem to get the right Javascript, because the selected text does not change in line spacing at all no matter which option I choose. Can someone please take a look at my Javascript and tell me where I went wrong? If possible, can you give me the correct code for the Javascript so I can refer off of it? Thank you!
HTML(working):
<select id="lineHeight" onchange="spacing(this)">
<option value="20px">20px</option>
<option value="80px">80px</option>
<option value="100px">100px</option>
<option value="200px">200px</option>
</select>
Javascript(not working)
function spacing(sel) {
var text = editor.document.getSelection();
text.style.lineHeight = sel.value;
}

If I understand what you're trying to do, perhaps this will work for you:
function changeStyle( property, value ) {
if ( window.getSelection().rangeCount ) {
var range = window.getSelection().getRangeAt( 0 ),
contents = range.extractContents(),
span = document.createElement( 'span' );
span.style[ property ] = value;
span.appendChild( contents );
range.insertNode( span );
window.getSelection().removeAllRanges()
}
}
#editor {
width: 350px;
max-height: 100px;
padding: 20px;
overflow-y: auto;
background-color: #efefef;
border: 1px solid #ddd
}
<p>
<label for="lineHeight">Line Height: </label>
<select id="lineHeight" onchange="changeStyle('line-height', this.value)">
<option value="20px">20px</option>
<option value="80px">80px</option>
<option value="100px">100px</option>
<option value="200px">200px</option>
</select>
<button onclick="changeStyle('font-weight', 'bold')">Bold</button>
<button onclick="changeStyle('font-style', 'italic')">Italic</button>
<button onclick="changeStyle('color', 'red')">Color</button>
<button onclick="changeStyle('background-color', 'yellow')">Background</button>
</p>
<div id="editor" contenteditable>Change the line height of the selected text with Javascript:<br>Please note that this example should be completed.</div>

Related

Right-align dropdown menu in select2

Is there a way to right-align the dropdown menu with dropdownAutoWidth: true in a select2, instead of the standard left-align? I want the select to stay the same, but the dropdown to move to the left so it aligns with the select on the right side. See snippet below with the wrong alignment...
Note: I want different sizes of the select and the dropdown just as shown.
Edit // Updated with suggestion to add direction: rtl; text-align: right;. This only right-aligns the text. I want the whole dropdown to right-align with the selected option above it. E.g. the dropdown should stick out to the left of the selected option, not to the right.
Edit 2 // Updated with .select2-dropdown { left: -69px !important; } This makes it look the way I want, but is there a way to not have to set a fixed value of -69px?
$(".form-control").select2({
width: '100px',
dropdownAutoWidth : true,
});
.select2-container--default .select2-results > .select2-results__options { direction: rtl; text-align: right; }
.select2-dropdown {
left:-69px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
I want it to look like this, but not with a fixed value to achieve it.
As you want to have different sizes of the select and the dropdown, here is my solution using select2 built-in options and some CSS, but maybe not perfect one.
Making rtl is dead easy, just use dir, but we need to pass some other options as shown below:
$('select').select2({
dir: "rtl",
dropdownAutoWidth: true,
dropdownParent: $('#parent')
});
The key here is dropdownParent, also you need to edit your HTML as follow:
<div id='parent'>
<select>
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
</div>
And finally you need some CSS:
#parent {
/* can be any value */
width: 300px;
text-align: right;
direction: rtl;
position: relative;
}
#parent .select2-container--open + .select2-container--open {
left: auto;
right: 0;
width: 100%;
}
You can see it in action here on codepen
If you have more that one select, you need some JS code to handle dropdownParent option. btw your life will be easier if you remove dropdownAutoWidth option ;)
I managed to make it work slightly different. I needed to expand the dropdown to the left while keeping the options texts aligned left. I thought it's worth sharing. Here is the setup:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<div id="select2-container">
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
</div>
CSS
.select2-container.select2-container--default.select2-container--open {
right: auto;
left: unset !important;
}
.select2-container.select2-container--default.select2-container--open .select2-dropdown.select2-dropdown--below {
width: fit-content !important;
left: unset;
right: 0;
}
JavaScript
$('.form-control').select2({ dropdownParent: $('#select2-container') });
Result looks like:
If still looking for an alternative method. I recently needed to achieve this as well and the RTL answer was not a viable solution for my project. If you are using the select2.js(4.0.6) and do not mind modifying the script you can replace the following code and achieve right positioning with adding a class to the target element.
Look for lines 4381 to 4384
var css = {
left: offset.left,
top: container.bottom
};
Replace with the following
var containerWidth = this.$container.outerWidth()
var right = ($("body").outerWidth() - (offset.left + containerWidth));
if (this.$element.hasClass("right-align")) {
var css = {
right: right,
top: container.bottom
};
} else {
var css = {
left: offset.left,
top: container.bottom
};
}
Add the class right-align to your target select input.
<select id="client_select" class="form-control right-align">
<option value="01">Example One</option>
<option value="02">Example Two</option>
<option value="03">Example Three</option>
</select>
That should be all you need. If the target element has the class then the code will position the dropdown using right instead of left positioning. Should work the same if container is set to a parent. However, this is not thoroughly tested. It may not be an elegant solution, but it does not require overriding anything with CSS. Should do the trick until an update is made to add an option for handling right aligned dropdowns. Hope it helps.
init select with dir: "rtl" such as:
$('select').select2({
dir: "rtl,
...
...
...
...
})
option tag of select cannot be modified by css it need to be done jquery plugin
http://selectric.js.org/demo.html
It should help you my friend
I think it will help you to get what exactly you need.if u wont get it ping me back
select {
text-align-last: right;
}
option {
direction: rtl;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>

Changing multiple textareas css values with javascript and dropdown?

http://jsfiddle.net/g3u7hxr6/4/
I have this following code, currently it changes all textareas css values with the dropdown boxes.
I want it so that when 1 textarea is selected and glowing green, the dropdown boxes will only change the css for the selected textarea rather than all of them.
Basically I want to be able to change each text area font individually.
I considered using another dropdown box to select which textarea to change. but there must be a way for the javascript to detect the selected textarea and make changes to it only. I would need to add a unique id field to each textarea but i'm completely lost with the javascript. please help!!!
Answered thanks to Binvention:
http://jsfiddle.net/g3u7hxr6/19/
JS:
$(function () {
$("[id^=font]").on('change', function () {
$('.address').css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});
$('.address').focus(
function(){
$(this).parent('div').css('box-shadow','0px 0px 10px green');
}).blur(
function(){
$(this).parent('div').css('box-shadow','0px 0px 0px');
});
HTML:
<div class="options">
<div class="left">Font:
<br>Size:
<br>Weight:</div>
<div class="right">
<select name="fontFamily" id="fontFamily">
<option selected value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
</select>
<br>
<select name="fontSize" id="fontSize">
<option value="8">8</option>
<option selected value="16">16</option>
<option value="24">24</option>
</select>
<br>
<select name="fontWeight" id="fontWeight">
<option selected value="Bold">Bold</option>
<option value="Normal">Normal</option>
</select>
<br /> <br />
</div>
<div class="page">
<div class="left border">
<textarea class="address" tabindex="1">text area 1</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="4">text area 4</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="2">text area 2</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="5">text area 5</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="3">text area 3</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="6">text area 6</textarea>
</div>
</div>
CSS:
.left {
float: left;
}
.right {
float: right;
}
.options {
width: 200px;
}
.page {
width: 440px;
}
.border {
border:1px solid #888;
border-radius: 5px;
padding: 5px;
margin: 0 0px 0px 0;
}
textarea {
resize:none;
height: 100px;
width: 200px;
overflow: auto;
font-family: Verdana;
font-size: 16px;
}
You need to create a unique class that marks one as selected like this
$('textarea').click(function(){
$(this).toggleClass('textselected');
});
That will allow you to dynamically pick which text boxes your editing just click to edit click to deselect from editing. You'll need some css to distinguish selected from not selected though.
Then when you edit the font and text properties you use that special class not the text areas to select the property like this
$("[id^=font]").on('change', function () {
$('.textselected').css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});
I have edited your fiddle with the necessary changes here
You need to add $(this).addClass('selected'); within your focus event and change the selector to $('.address.selected') within your change event.

set dropdown list option with ellipses

I want to add ellipsis in the dropdown list options if I click the ellipsis able to see the full option values
for example, dropdown list looking like this
<select id ="id">
<option>One - A long text need to be cut off with ellipsis</option>
<option>Two - A long text need to be cut off with ellipsis</option>
</select>
I am expecting the output like as follows
One - A long option....
Two - A long option....
when clicking the ellipses able to see the full option values like
One - A long text need to be cut off with ellipsis
Please see the code which I done so far
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
select {
width:200px;
}
</style>
<script>
$(document).ready(function() {
var maxLength = 20;
$('#example > option').text(function(i, text) {
if (text.length > maxLength) {
return text.substr(0, maxLength) + '...';
}
});
});
</script>
</head>
<body>
<select name="example" id="example">
<option value="">John Smith,1019 Your Company PO Box 7169 Poole BH15 9EL</option>
<option value="">91 Western Road,Brighton PO Box 7169 East Sussex England BN1 2NWL</option>
<option value="">John Smith,1019 Your Company PO Box 7169 Poole BH15 9EL</option>
</select>
</body>
</html>
Please help me to get the expected result as above
Here is my solution for you problem.
Its a workaround with the target to ellipse the select value and show the hole text when the options are shown. So the user can read the option values.
$(document).ready(function () {
$('div.viewport').text($('#example')[0].textContent);
$('#example').change(function () {
$('div.viewport').text($("option:selected", this).text());
});
});
select, .container {
width: 100px;
z-index: 2;
position: relative;
}
select {
color: transparent;
background: none;
}
.container {
position: relative;
}
.viewport {
position: absolute;
width: 80%;
height: 100%;
z-index: 1;
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
font-size: 14px;
padding: 3px;
}
option {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="viewport"></div>
<select name="example" id="example">
<option value="">This is some longggggggggggggggggggggggggggggggg text</option>
<option value="">Short Text</option>
<option value="">This is some really,really long text text and text</option>
</select>
</div>
This is code for setting title display Option text
$(function(){
$("select option").attr( "title", "" );
$("select option").each(function(i){
this.title = this.text;
})
});
$("select").tooltip({
left:25
});
In here, you may not be able to find cross browser compatible solution. Since select option element cannot be style as usual. So if you can do this grammatically it will be safe.

Style Select Element with same style as the selected option

I am trying to style a select element that is created in php. The select code is very simple and I can style the text color of the drop down. But this doesn't style the select element when a option is selected. Also this code doesn't work on Safari at all.
Code:
<div class="theme">
<select class="theme" name="select_theme">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
CSS:
.theme {
width: 200px;
}
.theme select {
width: 200px;
background-color: rgba(200,200,200,0.8);
}
.theme select option[value="red"] {
color: red;
}
.theme select option[value="green"] {
color: green;
}
.theme select option[value="blue"] {
color: blue;
}
How do I style the default select so that it matches the option style rule?
How to get this to work on Safari? Possibly IE I haven't checked it yet no Windows system ATM.
Is there a way to get these rules to display an image as well? I've tried a few things but seems it requires Javascript which I try to avoid when I can.
I made a JSFiddle to demonstrate this.
There's no way you can accomplish this without JavaScript:
$('select.theme').change(function () {
$(this).css('color', $(this).find('option:selected').css('color'));
}).change();
Here's your fiddle: http://jsfiddle.net/uCmSR/2/

how to scroll div vertical scroll bar on the basis of select box select item?

As requirement i need Horizontal and vertical scroll bars in select box.after research i found that select doesn't support horizontal scroll bar.so that i Wrap the SELECT inside a DIV.
<style type="text/css">
.scrollable{
overflow: auto;
width: 70px; /* adjust this width depending to amount of text to display */
height: 80px; /* adjust height depending on number of options to display */
border: 1px silver solid;
}
.scrollable select{
border: none;
}
</style>
<div class="scrollable" id="scrolldiv">
<select size="6" multiple="multiple" id="selectbox">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
</div>
when the select box item grow,and you want to select item from bottom of select,div vertical scroll bar don't move the select item.
please help me,how can move the vertical scroll bar of div with item selected in select-box.
Thanks
You have to use CSS to set the font size of your option items and then use the jQuery's change() method in conjunction with scrollTop() . I believe this is what you need:
Update the style
.scrollable select {
font-size: 14px;
border: none;
}
Add the following jQuery
$("select").change(function () {
$("select option:selected").each(function () {
$("#scrolldiv").scrollTop($(this)[0].index*14);
});
});
The jsFiddle link is here: http://jsfiddle.net/jKZ5s/1/.
This code work for me.
jQuery(document).ready(function($)
{
$('#selectbox').change(function()
{
var divscrollvalue = ( parseInt(this.selectedIndex))*17;
$('#scrolldiv').scrollTop(divscrollvalue );
});
});

Categories

Resources