In the image below, I want Exp. Year (the disabled option) to be grey on page load like a placeholder, and when an option is clicked (2016), I want it to turn to black. It is possible to do this without js?
JSFiddle
What is currently does:
What I want it to do: (Exp. Month is grey on page load, then 2016 is black on select)
.select-box {
border: 1px solid $ghBlack;
height: 36px;
background: transparent;
margin: 10px 0 14px 0;
color: #000;
}
option:disabled {
color: #a9a9a9;
}
option:not(:checked) {
color: #a9a9a9;
}
One way to do this is as follows:
// binding an anonymous function as the change-event handler:
$('select').change(function () {
// adjusting the 'color' property of the select element:
$(this).css('color', function () {
// caching the 'this' variable for efficiency (give repeated use):
var self = this,
// finding the options of the select element:
opts = self.options;
// getting the currently-selected option, and then checking if
// it's the default-selected option (returns a Boolean); if it is
// we set the colour to '#aaa', if not we set the colour to '#000':
return opts[self.selectedIndex].defaultSelected ? '#aaa' : '#000';
});
// triggering the change-event so that this runs on page-load:
}).change();
JS Fiddle demo.
Reference:
change().
css().
When you explained more what you try to do, then the answer is no, you can't do it without javascript, because the color of the main option is just one....its defined by this css selector
.select-box {
color: grey;
}
You can only change colors of the options (when the select is opened) - fiddle: http://jsfiddle.net/san6q621/
I generate filter SELECTs and INPUTs to the footer TH of my data table. I want these items widths to match width of parent TH (minus some margin).
My TH elements have classes .datainput or .dataselect to know, whether SELECT or INPUT should be generated.
I've created this script, which is called after AJAX data are loaded and inputs are generated:
function fnFixElementsTH() {
// Fix data inputs
$('.datainput').each(function(i) {
var thWidth = $(this).width();
$(this).children().width(thWidth);
});
// Fix data selects
$('.dataselect').each(function(i) {
var thWidth = $(this).width() - 10;
$(this).children().width(thWidth);
});
}
I use following CSS for TH:
padding: 3px 0px 3px 10px;
font-weight: bold;
font-weight: normal;
And for select:
word-wrap: normal;
margin-right: 10px;
In chromium it is working perfectly:
But in firefox, SELECTs have invalid sizes:
I printed widths of THs and SELECTs in chromium and firefox and here are the results for second column in chromium:
And in firefox:
Could you tell me what I am doing wrong, or suggest a better solution?
Problem is in .width() Jquery API. It has some issue with FF. You can use .css to set the width.
$(".dataselect").each(function(i) {
var thWidth = $(this).width() - 10;
$(this).children().css('width',thWidth);
});
Solution Fiddle: jsfiddle.net/vfNRS/1
I've found a solution, outer width of select has to be set:
// Fix data selects
$('.dataselect').each(function(i) {
var thWidth = $(this).width() - 10;
//$(this).children().width(thWidth); THIS WAS WRONG
$(this).children().outerWidth(thWidth);
});
Solution is here: http://jsfiddle.net/gZEc9/12/
I want to change a less variable on client side.
Say I have a less file
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
I want that user yo pick a color and change the value of #color1 and recompile css without reloading the page.
Basically I'm looking for a js function, something like this
less_again({color1: '#ff0000'})
Marvin,
I wrote a function that does exactly what you're looking for, last night.
I have created a fork on Github;
https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc
Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.
Here is a basic sample;
Sample LESS:
#bgColor: black;
#textColor: yellow;
body {background: #bgColor; color: #textColor;}
From JS:
less.modifyVars({
'#bgColor': 'blue',
'#textColor': 'red'
});
The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically
This less:
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
compiles to this CSS and this is all the browser knows about:
.title { color: #123456; }
.text { color: #234567; }
So, now you're effectively saying you want to change dynamically to this:
.title { color: #ff0000; }
You can do that by reaching into the existing stylesheet with JS and changing the rule for .title. Or, you can define an alternate rule in your original CSS:
.alternate.title { color: #ff0000; }
And, find all the objects with .title and add .alternate to them. In jQuery, this would be as simple as:
$(".title").addClass(".alternate");
In plain JS, you'd need to use a shim to provide getElementsByClassName in a cross browser fashion and then use:
var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
list[i].className += " alternate";
}
I am looking for a Javascript autocomplete implementation which includes the following:
Can be used in a HTML textarea
Allows for typing regular text without invoking autocomplete
Detects the # character and starts autocomplete when it is typed
Loads list of options through AJAX
I believe that this is similar to what Twitter is doing when tagging in a tweet, but I can't find a nice, reusable implementation.
A solution with jQuery would be perfect.
Thanks.
Another great library which solves this problem At.js (deprecated)
Source
Demo
They are now suggesting the Tribute library
https://github.com/zurb/tribute
Example
I'm sure your problem is long since solved, but jquery-textcomplete looks like it would do the job.
Have you tried this
GITHUB: https://github.com/podio/jquery-mentions-input
DEMO/CONFIG: http://podio.github.io/jquery-mentions-input/
It is pretty simple to implement.
I've created a Meteor package for this purpose. Meteor's data model allows for fast multi-rule searching with custom rendered lists. If you're not using Meteor for your web app, (I believe) you unfortunately won't find anything this awesome for autocompletion.
Autocompleting users with #, where online users are shown in green:
In the same line, autocompleting something else with metadata and bootstrap icons:
Fork, pull, and improve:
https://github.com/mizzao/meteor-autocomplete
Try this:
(function($){
$.widget("ui.tagging", {
// default options
options: {
source: [],
maxItemDisplay: 3,
autosize: true,
animateResize: false,
animateDuration: 50
},
_create: function() {
var self = this;
this.activeSearch = false;
this.searchTerm = "";
this.beginFrom = 0;
this.wrapper = $("<div>")
.addClass("ui-tagging-wrap");
this.highlight = $("<div></div>");
this.highlightWrapper = $("<span></span>")
.addClass("ui-corner-all");
this.highlightContainer = $("<div>")
.addClass("ui-tagging-highlight")
.append(this.highlight);
this.meta = $("<input>")
.attr("type", "hidden")
.addClass("ui-tagging-meta");
this.container = $("<div></div>")
.width(this.element.width())
.insertBefore(this.element)
.addClass("ui-tagging")
.append(
this.highlightContainer,
this.element.wrap(this.wrapper).parent(),
this.meta
);
var initialHeight = this.element.height();
this.element.height(this.element.css('lineHeight'));
this.element.keypress(function(e) {
// activate on #
if (e.which == 64 && !self.activeSearch) {
self.activeSearch = true;
self.beginFrom = e.target.selectionStart + 1;
}
// deactivate on space
if (e.which == 32 && self.activeSearch) {
self.activeSearch = false;
}
}).bind("expand keyup keydown change", function(e) {
var cur = self.highlight.find("span"),
val = self.element.val(),
prevHeight = self.element.height(),
rowHeight = self.element.css('lineHeight'),
newHeight = 0;
cur.each(function(i) {
var s = $(this);
val = val.replace(s.text(), $("<div>").append(s).html());
});
self.highlight.html(val);
newHeight = self.element.height(rowHeight)[0].scrollHeight;
self.element.height(prevHeight);
if (newHeight < initialHeight) {
newHeight = initialHeight;
}
if (!$.browser.mozilla) {
if (self.element.css('paddingBottom') || self.element.css('paddingTop')) {
var padInt =
parseInt(self.element.css('paddingBottom').replace('px', '')) +
parseInt(self.element.css('paddingTop').replace('px', ''));
newHeight -= padInt;
}
}
self.options.animateResize ?
self.element.stop(true, true).animate({
height: newHeight
}, self.options.animateDuration) :
self.element.height(newHeight);
var widget = self.element.autocomplete("widget");
widget.position({
my: "left top",
at: "left bottom",
of: self.container
}).width(self.container.width()-4);
}).autocomplete({
minLength: 0,
delay: 0,
maxDisplay: this.options.maxItemDisplay,
open: function(event, ui) {
var widget = $(this).autocomplete("widget");
widget.position({
my: "left top",
at: "left bottom",
of: self.container
}).width(self.container.width()-4);
},
source: function(request, response) {
if (self.activeSearch) {
self.searchTerm = request.term.substring(self.beginFrom);
if (request.term.substring(self.beginFrom - 1, self.beginFrom) != "#") {
self.activeSearch = false;
self.beginFrom = 0;
self.searchTerm = "";
}
if (self.searchTerm != "") {
if ($.type(self.options.source) == "function") {
self.options.source(request, response);
} else {
var re = new RegExp("^" + escape(self.searchTerm) + ".+", "i");
var matches = [];
$.each(self.options.source, function() {
if (this.label.match(re)) {
matches.push(this);
}
});
response(matches);
}
}
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
self.activeSearch = false;
//console.log("#"+searchTerm, ui.item.label);
this.value = this.value.replace("#" + self.searchTerm, ui.item.label) + ' ';
self.highlight.html(
self.highlight.html()
.replace("#" + self.searchTerm,
$("<div>").append(
self.highlightWrapper
.text(ui.item.label)
.clone()
).html()+' ')
);
self.meta.val((self.meta.val() + " #[" + ui.item.value + ":]").trim());
return false;
}
});
}
});
body, html {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}
.ui-tagging {
position: relative;
border: 1px solid #B4BBCD;
height: auto;
}
.ui-tagging .ui-tagging-highlight {
position: absolute;
padding: 5px;
overflow: hidden;
}
.ui-tagging .ui-tagging-highlight div {
color: transparent;
font-size: 13px;
line-height: 18px;
white-space: pre-wrap;
}
.ui-tagging .ui-tagging-wrap {
position: relative;
padding: 5px;
overflow: hidden;
zoom: 1;
border: 0;
}
.ui-tagging div > span {
background-color: #D8DFEA;
font-weight: normal !important;
}
.ui-tagging textarea {
display: block;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: transparent;
border-width: 0;
font-size: 13px;
height: 18px;
outline: none;
resize: none;
vertical-align: top;
width: 100%;
line-height: 18px;
overflow: hidden;
}
.ui-autocomplete {
font-size: 13px;
background-color: white;
border: 1px solid black;
margin-bottom: -5px;
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
http://jsfiddle.net/mekwall/mcWnL/52/
This link will help you
I could not find any solution that matched my requirements perfectly, so I ended up with the following:
I use the jQuery keypress() event to check for the user pressing the # character.
If this is the case, a modal dialog is shown using jQuery UI. This dialog contains an autocomplete text field (many options can be used here, but I recommmend jQuery Tokeninput)
When the user selects an option in the dialog, a tag is added to the text field and the dialog is closed.
This is not the most elegant solution, but it works and it does not require extra keypresses compared to my original design.
Edit
So basically, we have our large text box where the user can enter text. He should be able to "tag" a user (this just means inserting #<userid> in the text). I attach to the jQuery keyup event and detect the # character using (e.which == 64) to show a modal with a text field for selecting the users to tag.
The meat of the solution is simply this modal dialog with a jQuery Tokeninput text box. As the user types here, the list of users is loaded through AJAX. See the examples on the website for how to use it properly. When the user closes the dialog, I insert the selected IDs into the large text box.
Recently i had to face this problem and this is how i nailed down...
Get the string index at the cursor position in the textarea by using selectionStart
slice the string from index 0 to the cursor position
Insert it into a span (since span has multiple border boxes)
Get the dimensions of the border box using element.getClientRects() relative to the view port. (here is the MDN Reference)
Calculate the top and left and feed it to the dropdown
This works in all latest browsers. haven't tested at old ones
Here is Working bin
Another plugin which provides similar functionality:
AutoSuggest
You can use it with custom triggers or you can use it without any triggers. Works with input fields, textareas and contenteditables. And jQuery is not a dependency.
I would recommend the textcomplete plugin. No jQuery dependency. You may need bootstrap.css to refer, but I recommend to write your own CSS, lighter and simple.
Follow the below steps to give it a try
npm install #textcomplete/core #textcomplete/textarea
Bind it to your input element
const editor = new TextareaEditor(inputEl);
const textcomplete = new Textcomplete(editor, strategy, options);
Set strategy(how to fetch suggestion list) and options(settings to configure the suggestions) according to your need.
JS version
Angular Version
This small extension seems to be the closest at least in presentation to what was asked. Since it's small, it can be easily understood and modified. http://lookapanda.github.io/jquery-hashtags/
THIS should work. With regards to the # kicking off the search, just add (dynamically or not) the symbol to the beginning of each possible search term.
Hello I am using jquery layout plugin from http://layout.jquery-dev.net/ .
my options are following:
<script>
$(document).ready(function(){
// create page layout
pageLayout = $('body').layout(
{applyDemoStyles: true,
spacing_open:0,
spacing_closed: 0,
slidable: false,
togglerLength_closed: 0
});
pageLayout.panes.north.css('backgroundColor','#A6f');
// we need to remove the borders as well....
});
</script>
This removes sliders but:
How to remove the pane borders as well?
thanks Arman.
Remove one border:
pageLayout.panes.north.css('border','none');
Remove all borders:
As you should be quite sure that each pageLayout.pane will have o as a property:
for(property in pageLayout.panes){
pageLayout.panes[property].css('border', 'none');
}
How you should really do it - checks to make sure o is a property of pageLayout.pane before attempting to access it:
for(property in pageLayout.panes){
if(pageLayout.panes.hasOwnProperty(property)){
pageLayout.panes[property].css('border', 'none');
}
}
I haven't tried this plugin yet but since your last line is pretty much like the usual css try this.
pageLayout.panes.north.css({'backgroundColor' : '#A6f', 'border' : 'none'});
Using a css rewriting. After including the css layout file in the head section (usually jquery.ui.layout.css) you could add a style that rewrites the original.
<style>
.ui-layout-pane {
background: #FFF;
border: 0 none; //This rewrites the original style
padding: 10px;
overflow: auto;
}
</style>