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.
Related
Need a possibility to get the exact match of a search string in a on.click handler. This is what I have now,
$("#wrapper").on("click", "label:contains('SEARCH') ~ .material > .icon", function (e) {
Problem is, that "contains" matches all words with Label containing "SEARCH".
E.g. "Search", "Searchsting", "Searchsentence" and so on....
Any ideas?? Have spent a lot of time, to find a solution. E.g. mixing :contains(''):not(:contains). But with no success.
<div class="wrapper">
<div class="field dco-uncommon has-required required dco-enabled" id="bss_options_5283" depend-id="20652" style="display: block;">
<label class="label" for="select_5283"><span>SEARCH</span></label>
<div class="control ">
<select name="options[5283]" id="select_5283" class="product-custom-option admin__control-select required" data-selector="options[5283]" aria-required="true">
<option value="">-- Please choose --</option>
<option value="75108" price="0" depend-id="20659">Option 1</option>
<option value="75111" price="35" depend-id="20662">Option 2</option>
</select>
</div>
<div class="material">
<span class="icon" style="background-image: url(amethyst_1646165.jpg)" data-title="Amethyst 1646165" title="Amethyst 1646165"></span>
<span class="icon" style="background-image: url(apfel_1644435.jpg)" data-title="Apfel 1644435" title="Apfel 1644435"></span>
<span class="icon" style="background-image: url(auster_1644480.jpg)" data-title="Auster 1644480" title="Auster 1644480"></span>
<span class="icon" style="background-image: url(azure_1641085.jpg)" data-title="Azure 1641085" title="Azure 1641085"></span>
<span class="icon" style="background-image: url(baltic_1645155.jpg)" data-title="Baltic 1645155" data-properties="" title="Baltic 1645155"></span>
</div>
</div>
</div>
The logic you're looking for is not supported by jQuery, so I was able to get this library that extends jQuery and gives you exactly what you're looking for:
https://blog.mastykarz.nl/jquery-regex-filter/
This library allows you to use regex to filter values in your elements:
Then here we are using normal javascript regex to match the exact word: ^SEARCH$
// extend jquery
jQuery.extend(
jQuery.expr[':'], {
regex: function(a, i, m, r) {
var r = new RegExp(m[3], 'i');
return r.test(jQuery(a).text());
}
}
);
// extend jquery
$(function() {
$("#wrapper").on("click", `label:regex('^SEARCH$')`, function (e) {
console.log('This label contains the exact string "SEARCH"')
})
});
#wrapper {
height: auto;
width: 200px;
background-color: #DDDDDD;
padding: 2px;
}
label {
display: block;
background-color: white;
padding: 3px;
margin: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<label for="">SEARCH</label>
<label for="">SEARCHstring</label>
<label for="">stringSEARCHother</label>
<label for="">stringsearchother</label>
<label for="">SEARCH</label>
</div>
I've been playing around with HTML and I created a column that immediately appears when I open my file in a browser. I tried moving the column and row classes around but I can't figure out how to get it so that the column doesn't appear until after I select an option from the dropdown menu. I was wondering how I could fix this issue?
<html>
<head>
<title>Testing Display</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.center{
text-align: center;
border: 3px solid #73AD21;
}
{
box-sizing: border-box;
}
.column {
float: left;
width: 30%;
padding: 10px;
height: 2000px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div class ="center">
<p><div><h1>Testing Display</h1></div><br /><p>
<div class="dropdown">
<form>
<select name="list" id="list" accesskey="target" onchange="display(this)">
<option value="none">Choose an option</option>
<option value="one">Option one</option>
</select>
<input type=button value="Select" onclick="display()"/>
<div id="add"></div>
</form>
</div>
</div>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
<div id="div"></div>
</div>
</div>
<script src="order.js"></script>
</body>
</html>
Have the initial visibility of column to hidden.
Have a Javascript function to add a new class to column onChange. Something like this
function onSelect() {
//or add id to easily access unique single element.
var element = document.getElementByClassName("column")[0];
element.classList.add("showCol");
}
.column {
visibility: hidden;
...
}
.showCol {
visibility: visible;
...
}
Can also add styles and remove style onChange instead of toggling classes.
Javascript Solution, call this method in onchange event of drop down list:
function ddlChange(){
if (document.getElementById("list").value === "one"){
document.getElementsByClassName("column").style.display = "table-cell";
}
}
Using jQuery:
$("#list").change(function () {
if($('#list option:selected').val() === "one")
$(".column").css("display","table-cell");
});
Alternatively, you can also try to add or remove a class instead of changing inline CSS value.
How to open a pop up when page loads?
I want to my select drop down box as popup when page loads.
Below is my HTML code:
<div class="UserData">
<h1>Booking</h1>
<select class="selectCity" id="selectCity" style="display:none;">
<option value="City">Select City</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Guntur">Guntur</option>
<option value="Ongole">Ongole</option>
</select>
<span id="welcome"> </span>
</div>
If you want it to show as a popup, all you need to do is style it so with some basic CSS and add some functionality with some JavaScript.
Snippet:
/* ----- JavaScript ----- */
window.onload = function () {
/* Cache the popup. */
var popup = document.getElementById("popup");
/* Show the popup. */
popup.classList.remove("hidden");
/* Fade the popup in */
setTimeout(()=>popup.classList.add("fade-in"));
/* Close the popup when a city is selected. */
document.getElementById("selectCity").onchange = function () {
/* Fade the popup out */
popup.classList.remove("fade-in");
/* Hide the popup. */
setTimeout(()=>popup.classList.add("hidden"), 300);
};
};
/* ----- CSS ----- */
#popup {
display: inline-block;
opacity: 0;
position: fixed;
top: 20%;
left: 50%;
padding: 1em;
transform: translateX(-50%);
background: #fff;
border: 1px solid #888;
box-shadow: 1px 1px .5em 0 rgba(0, 0, 0, .5);
transition: opacity .3s ease-in-out;
}
#popup.hidden {
display: none;
}
#popup.fade-in {
opacity: 1;
}
<!----- HTML ----->
<div id = "popup" class = "hidden">
<select class="selectCity" id="selectCity">
<option value="City">Select City</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Guntur">Guntur</option>
<option value="Ongole">Ongole</option>
</select>
</div>
Note:
The example provided above is made with minimal code and thus has minimal functionality. You can always use an external library, if don't feel like creating the functionality and appearance of the popup yourself from scratch. Here's a quick example below using jQuery and Bootstrap:
Snippet:
/* ----- JavaScript ----- */
$(function () {
$("#custom-modal").modal("show");
});
/* Close the popup when the a selection is made */
$("#selectCity").on("change", function () {
$("#custom-modal").modal("hide");
});
<!-- Libraries -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- A Bootstrap Modal -->
<div id="custom-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Select City</h4>
</div>
<div class="modal-body">
<select class="selectCity" id="selectCity">
<option value="City" disabled>Select City</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Guntur">Guntur</option>
<option value="Ongole">Ongole</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
You can add HTML for your popup and add styles to the same using CSS classes. Once done , you can use lightbox plugin from script to open up the pop up.
<div class="popup">
<h3 class="forget-h3">Forgot Password</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
<!-- css -->
.popup { display:none; background:#000; width:300px; margin:0 auto;}
.popup p { font-size: 15px; font-weight: 300; line-height: 22px; color:#000; padding: 0 0 20px;}
.popup h3{font-size: 18px;line-height: 18px;color: #fff;display: block;font-weight: normal;padding: 0 0 30px;}
<!-- script -->
we have use is lightbox.js
<script>
$(document).ready(function(){
$('.popup').lightbox_me({
centered: true,
});
$ele.trigger('close');
e.preventDefault();
});
</script>
Depends on what you mean by popup but you can simply use Jquery's $(document).ready and open an alert box:
$(document).ready(function(){
alert("Test");
});
If you are looking for an actual pop-up window, take a look at Jquery-Confirm: https://craftpip.github.io/jquery-confirm/
If this is not what you are looking for please give us more information on what you are trying to accomplish so we can better help.
If you mean that you need the selected item in the dropdownlist then use Jquery this way:
$(document).ready(function(){
//Get the selected text
var selectedCityText = $('#selectCity :selected').text();
alert(selectedCityText);
//Or
//Get the selected value
var selectedCityValue = $('#selectCity :selected').val();
alert(selectedCityValue);
});
The way you may want to look at this is instead of opening a popup on page load, you want the users to have the ability to close the modal (popup), or you may want it to open and then close after a few seconds.
HTML :
<div class="UserData">
<i className="material-icons close">clear</i>
<h1>Booking</h1>
<!--remove the display none-->
<select class="selectCity" id="selectCity">
<option value="City">Select City</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Guntur">Guntur</option>
<option value="Ongole">Ongole</option>
</select>
<span id="welcome"> </span>
</div>
CSS:
/* this will open a full screen modal */
.UserData {
position: 'absolute';
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
z-index: 2;
}
.hide {
display: none !important;
}
The jQuery to have it default to open and let users close it, you can also add this to a submit button instead of the close icon:
$('.close').on('click', () => $('.UserData').toggleClass('hide'))
the jquery to have it open and then close after a 3 seconds:
//default is hidden
$('.UserData').hide()
$('.UserData').show(0).delay(3000).hide(0)
The type of component you are looking for is often called a modal. These can be accomplished using a combination of CSS for the styling and Javascript to open a close the modal -- by adding/removing a class and visibility style.
Here is a simple example.
<div id="id0q" class="modal">
<div class="modal-content" style="width: 90% !important;">
<div class="col-md-12 Questions" style="margin:0px !important;">
<h3 style="margin-top: -9px; text-align: center;background-color: #7e15a5; color: #fff;">For Demo<button type="button" class="close" data-dismiss="modal" style=" margin: -7px -26px; font-size: 31px; color: #250631; ">×</button></h3>
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load',function(){
$('#id0q').modal('show');
});
</script>
Now, I would like to make width of my select element, let's say 80% of its parent div ( div#queries). Is there anyway to do it?
<div id="flowchart-left-panel">
<div id ="queries">
<h3>Queries</h3>
<select class="query-list" size="20">
</select>
</div>
<div id="filters">
<h3>Filters</h3>
<select class="filter-list" size="10">
</select>
</div>
</div>
Of course, with CSS.
Demo here: http://codepen.io/anon/pen/JYYGvG
#queries, #filters{
width: 300px;
}
select{
width: 80%;
}
I have this page div#container which contains inputboxes, textareas and selectboxes. When I click them i want to change the background color of the containing div "djform_field"
#dj-classifieds .dj-additem .djform_row .djform_field:focus {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px;
float: left;
padding: 15px;
}
<div class="djform_field">
<textarea id="contact" name="contact" rows="1" cols="55" class="inputbox required"><?php echo $this->item->contact; ?></textarea>
<div id="input-tips"><span class="hint"><?php echo JTEXT::_('COM_DJCLASSIFIEDS_CONTACT_TOOLTIP')?><span class="hint-pointer"> </span></span></div>
</div>
<div style="clear:both"></div>
</div>
$('#contact').focus(function(){
$('.djform_field').addClass('red');
}).blur(function(){
$('.djform_field').removeClass('red');
})
See demo here (using jQuery)
Set one big click handler:
$("#container :text, #container select").click(function() {
$("div.djform_field)".css("background-color", "red"); //or whatever
});
$('.djform_field').children('*').click(function () { //use required selector in .children(), * means all children
$('.djform_field').css('background', 'color');
})