I am trying to emulate how twitter highlights users when they are #mentioned when composing a tweet.
I am using the mentionsInput jQuery plugin. I want to change the color of the #screen_name instead of changing the background color as the plugin does by default.
Is there a way to color the #screen_name and still show the blinking cursor at the end?
I was able to do it but I need to hide the textarea text so it doesn't darken the CSS styled text over it... but then it hides the blinking cursor which I don't want to do.
See my jsFiddle showing the problem: http://jsfiddle.net/thhbe/1/
OR see it...
Required: jQuery, Underscore.js and the plugin.
HTML:
<div><textarea id="tweet_textarea" class="mention textarea compose_text"></textarea></div>
JS:
/*
* Add handlers to HTML elements and set options....
*/
$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [
{ id:1, name:'Kenneth Auchenberg', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:2, name:'Jon Froda', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:3, name:'Anders Pollas', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' }
];
data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, data);
}
});
I'm a couple of years late, but hopefully I can provide an actual answer to your problem.
You (or the plug-in) have got the idea right... utilizing another element (the "facsimile element") which contains a styled version of the text in the textarea. There are just a couple of changes that need to be made:
The fascimile element is supposed to have the same dimensions (the element as a whole as well as its content area), shape, and position as the textarea
The fascimile element is supposed to be placed underneath the textarea rather than on top of it.
The background of the textarea is supposed to be made transparent.
The text and border of the fascimilie element is supposed to be made transparent.
I'm not sure how much of this is able to be done without modifying the plug-in, but once these changes are made, you shouldn't have to worry about the cursor disappearing since there will no longer be a need for you to hide the textarea.
You're not out of the woods just yet though, there is a lot more that needs to be done to make the solution robust.
So I'd recommend checking out Mentionator, which is a jQuery plug-in that robustly implements the functionality you desire. Its source code is a well-structured, easy to follow, and copiously commented, so should you want to look at the code to understand how the plug-in, and Twitter's tagging utility by extension (most likely), work, you should have little trouble doing so.
One more thing, given i'm such a big proponent of transparency, I'd like to let you know that Mentionator is maintained by yours truly :) .
The answer for me is to use contenteditable http://html5demos.com/contenteditable. It does not appear that this is how twitter has done it for their tweet input (which has mentions highlighted) but I have given up on figuring out how they did it.
I've had a similar problem and found it difficult to find a nice solution. I was implementing my own caret/cursor into the styled element with a span tag, this has some issues with splitting up words onto new lines however. But I found a solution that's pretty simple and seeing as this is the first thing on Google for this problem I'll share it, as this would have been ideal for me weeks ago if it was here! :)
As said, the solution is to have your styled element underneath the text input. You need to make the text input have a alpha=0 background and color. The color also hides the caret. But there's a CSS property specifically for the caret that you can use the unhide it:
background: rgba( 0, 0, 0, 0.0 );
color: rgba( 0, 0, 0, 0.0 );
caret-color: rgba( 0, 0, 0, 1.0 );
Related
I am new to Material Angular, and just started using it around a month ago, so this might be a simple question. Anyway, I have a toolbar set to a white frame of 0. When I scroll down in my md-content I would like to have the white frame value change to 2 or 4 or just another number, hence giving it a shadow. I also would like to have it animate, not having the shadow just blink/appear. An example of that would be the Google Fonts website. If you look at the picture bellow you will see a line under the toolbar. Then the Picture under that shows that when you scroll it turns into a shadow. Outline above.
Shadow above.
I would try to invest time in inspecting their css, js, and html, but I am actually working on a project for school, which is due next Friday, and I have to type up a bunch of content, and gather information.
I was able to make a shadow appear at the bottom of the md-content, but that was by adding a css selector with a box-shadow when I scrolled down, I just can't figure out how to change the md-whiteframe value on scroll.
I have tried to use a variable. Like md-whiteframe="{{ctrl.elevation}}"
Then say something like
if(item.scrolltop > 0) {
this.elevation = 0;} else {
this.elevation = 4;}
I tried something like that in my js, but it just ended up as a mess. This isn't a really big deal I am just trying to give my project some nice touches. I would really appreciate any help though. Thank you in advance. Also I looked for questions similar to this, and didn't find any that were what I wanted, but if you find a question that answers this then please tell me.
Try to act on the class property of the md-whiteframe directive.
For instance:
<md-whiteframe class="{{ctrl.elevationClass}}">
<span>My content</span>
</md-whiteframe>
On your controller:
if(item.scrolltop > 0) {
this.elevationClass = 'md-whiteframe-1dp';
} else {
this.elevationClass = 'md-whiteframe-4dp';
}
https://material.angularjs.org/latest/demo/whiteframe
I'm a designer, but I also do some programming (javascript, html, css). I need to create a custom timeline for a website (Couldn't post a photo because of insufficient reputation on here, but here's a link to the design: http://postimg.org/image/5p92wkk8f/ Like you hover the mouse over a part of the timeline, and according to that the year changes) But I have no idea where to begin. (I tried looking it up on the internet, but there's no timeline code examples and I don't wanna generate a timeline from other websites, I wanna make a custom one that would be exactly like this design). Would anyone be able to give me hints, say anything useful, tell me where to start? Thanks!
Timeline JS is may be exactly what you are looking for. As it's open source tool, you can modify it as per your needs.
I'd make many divisions, one for each part (year in this case) of the timeline. So there'll be about 20 divs that together make the whole white line.
CSS would be something like:
.timeline { /*"timeline" is a class name that I made up.*/
background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
height: 30px; /*estimation*/
width: 30px; /*estimation*/
position:absolute;
}
.timeline:hover {
background-color:#000000; /* This is black color, change it to the brownish background color.*/
}
This is just a part of the CSS. You'll need to position each division with margins. With the CSS code done, you'll have the timeline change it's color for each div you hover on.
The harder part is actually changing the text, and for it we'll use javascript. In order to make the code not too long (and easier for me to write) I'm going to write it as if there were only 2 divisions in the timeline. Once you get what I do, you will be able to finish it off easily.
So first of all, add an id to the division in which the text is, "text" e.g. In html, add to the 2 timeline divisions the event onmouseover, then a function. The functions are numbered.
<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>
Now we need to write the functions. We'll make a variable which will include the whole "text" id, then make 2 functions (one for each div) and make each function change the text according to the function's number.
var text_div=document.getElementById("text");
function changeText1()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}
So let's review. The CSS makes the division change color when hovered on. Additionally, when a division of the timeline is hovered, it will trigger a function from the javascript code which will change the text, according to which division was hovered on.
Another thing you should notice: In the image you added, there isn't one paragraph only, for each paragraph a different CSS code. The javascript code I wrote will change the whole "text" division, making it's CSS be the affecting one for the whole text you entered in javascript ("Some Text" part). If you wish the CSS to stay different, you should:
make for each paragraph its own id (in html).
then make a new variable in javascript for each id.
and then add a new line to each function, which will change the inner HTML of the new paragraph separately.
If something is unclear, please ask.
I am trying to create my own text selection with DOM-elements. Yes, I mean the blue background you see behind the text when you select it in this element. The idea is to halt the default behavior (the blue color) and use my own elements to do the job by finding the xy-position of the selection and then placing absolute positioned elements. I want to be able to do this with a regular div.
I'm thinking I need 3 elements. One for the top row (which may be incomplete), one for the middle chunk, one for the last (same as top). Here's an image that helps you understand:
I've been thinking of catching mouseup/down and then mousemove and then check window.getSelection() but so far I'm having trouble getting anywhere.
Using the CSS ::selection will not work because the element will not have focus.
I appreciate all help I can get! Thanks in advance.
Edit:
Stumbled upon https://code.google.com/p/rangy/ which might be of help? Anyone with experience with this plugin?
Edit2:
Cross-browser support is required.
You can use getClientRnge:
var element = document.getElementById('element')
element.onmouseup = function(){
var selection = document.getSelection(),
range = selection.getRangeAt(0),
clientRects = range.getClientRects()
console.log(clientRects)
}
http://jsfiddle.net/XjHtG/
This will return the left, right, top, bottom, width and height of all selections made.
I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC
I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:
There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }
I've seen this done in a lot of sites recently, but can't seem to track one down. Essentially I want to "disable" an entire panel (that's in the form on an HTML table) when a button is clicked.
By disable I mean I don't want the form elements within the table to be usable and I want the table to sort of fade out.
I've been able to accomplish this by putting a "veil" over the table with an absolutely positioned div that has a white background with a low opacity (so you can see the table behind it, but can't click anything because the div is in front of it). This also adds the faded effect that I want. However, when I set the height of the veil to 100% it only goes to the size of my screen (not including the scrolling), so if a user scrolls up or down, they see the edge of the veil and that's not pretty.
I'm assuming this is typically done in a different fashion. Does anyone have some suggestions as a better way to accomplish this?
You could try javascript like:
function disable(table_id)
{
var inputs=document.getElementById(table_id).getElementsByTagName('input');
for(var i=0; i<inputs.length; ++i)
inputs[i].disabled=true;
}
Try the below with Jquery
$("#freez").click(function(){
$('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
$('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});
Disabling the inner elements of an HTML table can also be done using pointer-events CSS style as shown below:
table[disabled], table[disabled] input { pointer-events: none }
At any desired point in our JavaScript code, we can add disabled attribute to the parent table which will bring the CSS styling into effect:
let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);
Another way to do it would be using the opacity property.
function disablePanel(id) {
var panel = document.getElementById(id);
var inputs = panel.querySelectorAll('input, button'); //anything else can go in here
for (var i=0; i<inputs.length; i++) {
inputs[i].disabled = true;
}
panel.style.opacity = 0.3; //or any other value
}
Can't you just find out the height of the area in pixels with JavaScript? And then set the veil's height to that number?
I don't have the exact code in my head but offsetHeight might do the trick
Somebody please correct me if I am wrong, but I have seen Javascript and some derivate Javascript libraries that have a lot of options for accomplishing for what you would like to do. I have used the jQuery library to do some similar effects.
One thing to think about is what exactly you are trying to disable. Essentially tables are not interactive so disabling a table would not accomplish much. If it is the form elements within the table you want to disable. You can accomplish this using JavaScript.
Along with using JavaScript for disabling the form elements, you can also use it to change properties of the non interactive elements.
An example of this would be using JavaScript to change the color of the font and borders and other non interactive elements in the table to give the "look" of being disabled. Of course you still need to use JavaScript to disable the form elements.