I want to change the fonts and size of the text dynamically
but I don't see any answer in the browser and also no errors in my code
this is demo
html:
<body>
<form id="texteditor">
<select id="font">
<option value="School">School</option>
<option value="SansitaOne">SansitaOne</option>
<option value="oliver">oliver</option>
<option value="JuraLight">Jura-Light-webfont</option>
<option value="Jura">Jura-DemiBold-webfont</option>
<option value="DJGROSS">DJGROSS-webfont</option>
<option value="College">College</option>
<option value="BYekan">BYekan</option>
<option value="BRoya">BRoya</option>
<option value="BMitraBold">BMitraBold</option>
<option value="BMitra">BMitra</option>
</select>
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="17">17</option>
<option value="20">20</option>
</select>
</form>
<textarea class="changeme">this is my text example !!!</textarea>
</body>
jquery :
$("#font").change(function() {
//alert($(this).val());
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
Aside from not including jQuery in the example, you had a typo.
$('.changeMe') should be $('.changeme')
UPDATED EXAMPLE HERE
$("#font").change(function() {
$('.changeme').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeme').css("font-size", $(this).val() + "px");
});
Related
guys,
here is an example of dependent select options.
$('#city').change(function() {
$('#street option').hide();
$('#street option[value="' + $(this).val() + '"]').show();
// add this code to select 1'st of streets automaticaly
// when city changed
if ($('#street option[value="' + $(this).val() + '"]').length) {
$('#street option[value="' + $(this).val() + '"]').first().prop('selected', true);
}
// in case if there's no corresponding street:
// reset select element
else {
$('#street').val('');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
<select id="street" name="street">
<option value="0">Select Street</option>
<option value="1">Street 1</option>
<option value="1">Street 2</option>
<option value="1">Street 3</option>
<option value="2">Street 4</option>
<option value="2">Street 5</option>
<option value="2">Street 6</option>
<option value="1200">Street 7</option>
<option value="1200">Street 8</option>
<option value="1200">Street 9</option>
</select>
Everything is fine with, but in need to replace value-based filtering with data attributes based, like so:
<option value="1">Street 1</option> => <option data-filter="1" value="">Street 1</option>
Your help is a highly appreciated.
Is that what you wish?
To use data-filter instead of value?
Ok, the twist here is that you have to look for the selected option... Since the value isn't tied to the select anymore. That's all.
$('#city').change(function() {
var cityFilter = $(this).find("option:selected").data("filter");
$('#street option').hide();
$('#street option[data-filter="' + cityFilter + '"]').show();
// add this code to select 1'st of streets automaticaly
// when city changed
if ($('#street option[data-filter="' + cityFilter + '"]').length) {
$('#street option[data-filter="' + cityFilter + '"]').first().prop('selected', true);
}
// in case if there's no corresponding street:
// reset select element
else {
$('#street').val('');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city" name="city">
<option value="" data-filter="0">Select City</option>
<option value="" data-filter="1">Manchester</option>
<option value="" data-filter="2">Leicester</option>
<option value="" data-filter="3">Londra</option>
</select>
<select id="street" name="street">
<option value="" data-filter="0">Select Street</option>
<option value="" data-filter="1">Street 1</option>
<option value="" data-filter="1">Street 2</option>
<option value="" data-filter="1">Street 3</option>
<option value="" data-filter="2">Street 4</option>
<option value="" data-filter="2">Street 5</option>
<option value="" data-filter="2">Street 6</option>
<option value="" data-filter="1200">Street 7</option>
<option value="" data-filter="1200">Street 8</option>
<option value="" data-filter="1200">Street 9</option>
</select>
I also "reduced" the amount of jQuery lookups... using the cityFilter variable.
Feel free for questions. ;)
Your need to use
$(this).find(":selected").attr('data-filter')
and
$(this).find(":selected").attr('data-filter') + '"]').first().prop('selected', true);
So instead of targeting the 'value' attribute you switch to the 'data-attributeName'.
Update: Here is a working example based on your pen.
I need to change the font-size in a div when someone selects a different font size.
Here is my code which I know is working because I added an alert to it. The only thing not working is it changing the font size.
CSS:
.heading {
font-size:18px;
}
JAVASCRIPT:
$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected);
});
HTML:
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="position: relative; zindex: 99; width: 220px; padding: 5px; color: #ffffff; text-align: center;"></div>
I just can't figure out what is wrong.
You need to add px to the every option value or valueSelected+'px'
You are missing the "px" from your value. So you can add it to the values of your dropdown or append it in your script like so:
$('#htsize').on('change', function(e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value + "px";
$(".heading").css("font-size", valueSelected);
});
.heading {
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="">My Headline</div>
Add px as the following code:
$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected + 'px');
});
$(".heading").css("font-size", valueSelected + 'px');
https://jsfiddle.net/ffpxgqy2/
You need to add the "px" on the css font-size value! Here it's working -
<h1>Hello, World!</h1>
<select>
<option value="12">Default</option>
<option value="14">14 PX</option>
<option value="16">16 PX</option>
<option value="18">18 PX</option>
<option value="20">20 PX</option>
</select>
$("select").on("change", function (e) {
var optionSelectedValue;
$( "select option:selected" ).each(function() {
optionSelectedValue = $( this ).val();
});
$("h1").css("font-size", optionSelectedValue + "px");
});
Try this
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="">My Headline</div>
Jquery
$('#htsize').change(function(event){
var optval= $(this).val();
var optpx= optval + 'px';
$("#headline2").css("font-size", optpx);
});
When I click on the focus button I want the select box to automatically scroll and then show the selected option.I am unable to achieve it using focus. Is there any javascript or jQuery method which can help me fix this ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#focus").click(function () {
$("select#selectId").find(":selected").focus();
});
});
</script>
</head>
<body>
<select title="Title" id="selectId" style="width: 143px; height: 125px; overflow: scroll;" multiple="multiple">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="31">31</option></select>
<button type="button" id="focus">focus on selected</button>
</body>
</html>
You can use scrollIntoView() DOM method:
$(document).ready(function () {
$("#focus").click(function () {
$("#selectId").focus().find(":selected")[0].scrollIntoView();
});
});
EDIT: doesn't work on IE11 (other vs???)
$(document).ready(function () {
$("#focus").click(function () {
var indx = $("select#selectId").find(":selected").index();
$('#selectId').animate({
scrollTop: indx * 14
}, 500);
});
});
You can also use this, you can able to control scroll speed here.
I wrote a simple script . This is a better answer because in my case, the contents of the select change dynamically so the scroll height is not a constant. Fiddle link : https://jsfiddle.net/962vxk4f/
$(document).ready(function () {
$("#focus").click(function (e) {
$selectId = $("#selectId");
var $index = $selectId.find(":selected").index();
var lastPos = 0;
$selectId.children().each(function () { lastPos++; });
var currScrollPos = ($index / lastPos) * parseInt($selectId[0].scrollHeight);
$selectId.scrollTop(currScrollPos);
});
});
If a have several selects how can i run a jquery function when all selects have changed and not just the first i choose?
I have this html:
<div class="container">
<select name="talla1" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla2" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla3" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>
With this jQuery function:
$('.container select').change(function() {
alert('changed');
});
but this fires the alert only when change the first select and i want to do it once all selects inside the container have changed its value and i when return to default in any select run other function, was i clear enough?
thanks in advance
You can keep a record of changes on each select and use that value to see if all 3 are changed.
var eventArray = [];
$('.container select').on('change',function(){
indexOfSelect = $('.container select').index( $(this) );
if($.inArray(indexOfSelect, eventArray) == -1)
eventArray.push( '' + indexOfSelect + '' );
if(eventArray.length == $('.container select').length)
alert('All changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<select name="talla1" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla2" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla3" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>
Change your jquery code to this :
$(".talla1").each(function(){
$(this).change(function(){
//alert('called');
$(this).addClass('active');
if($(".container").find('.active').length == $(".talla1").length){
alert('finish');
}
});
});
Here is the working fiddle.
Do tell if it worked.
Happy Coding.
when a class is added to multiple elements its event is binded to every element and the class works for all. simply give a common class to all your select on which you want to fire a event
<script>
$(document).ready(function() {
change_count = 0;
$("select.talla1").on('change', function(event) {
change_count++;
if($("select.talla1").length == change_count){
alert("all changed");
}
});
});
</script>
this works for all the select which has class talla1
I have problem with disabling some value from option field. I try to disable all the values who is less than value from another div field. My code looks like this:
<div id="cur-hour">09</div>
<select id="time_to_hour" class="select">
<option value="">---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
And I have this js code:
$(function(){
if($("#time_from_hour > option").val() < $("#cur-hour").val()) {
$('#time_from_hour > option').prop('disabled', true);
}
});
But it didn't work - here is jsfiddle: http://jsfiddle.net/qhPp7/36/
$(function(){
var n=parseInt($("#cur-hour").html());
$("#time_to_hour option").each(function(){
if(parseInt($(this).val()) < n ) {
$(this).prop('disabled', true);
}
});
});
http://jsfiddle.net/qhPp7/38/
Your condition won't work because the value of option tag is a string.
Also val() is not used for divs, so instead use .html() or .text()
Also it has to parsed as integer
try this
$(function(){
var options = document.getElementById('time_to_hour').options;
var chk = document.getElementById('cur-hour').innerHTML;
for(var o=0;o< options.length;o++)
{
var va = parseInt(options[o].value);
if(va!="" && va<chk)
{
alert(va);
options[o].disabled=true;
}
}
});
Kindly use span to store the value it makes easier to find it.
09
$(function(){
$('#time_to_hour option').each(function () {
if (parseInt($("#index").text()) > parseInt($(this).text())) {
this.disabled = true;
}
});
});
I hope above code will work out for you...
Here is the working example from your fiddle http://jsfiddle.net/qhPp7/35/