I was wondering how the guys who made carv.ai achieved the text masking effect on the paragraph "Carv connects wirelessly ...".
I know that we can mask a background image on a text.
The first thing that you can do to have text masking, is either give the masking div a greater z-index than the text, or make the text the same color as the masking color. Then you can use jQuery to make the div slide away.
Here is the jQuery:
$("#id").animate({width:'toggle'},350);
Related
I want to implement a navbar element highlight using a div that moves (via transitions) to the selected element when you click on it.
But in addition, it should change the color of the text it passes through.
See this example (the red highlight is currently moving from "First" to "Second Text", coloring the text inside the highlight white):
I've made a small codepen to showcase a solution I came up with, which utilizes position: absolute and overflow: hidden.
See here: https://codepen.io/JZ_CodePen/pen/JjMzpye
Is there a simpler / more professional way to implement this?
That is the best way. Using position: absolute and overflow: hidden is great. You are also using the onclick event of JavaScript, which makes it even better. One thing you could do is change the text-color of the text onclick, but then that would make the whole thing white instead of partially like you want.
I want to make a basic text editor using angularjs (or just pure javascript). The idea is that I will have a div to contain the text, instead of using textarea. I want the user to be able to click anywhere inside the div and have a blinking cursor appear where they click. I really have no idea how to do this. Any suggestions? By the way, I would prefer not to use contentEditable.
Since you prefer not to use contenteditable, Here's a few suggestions you could have a look at to get a blinking cursor, manually:
Overlay the div with a canvas element, get the click's position, and animate a line on the canvas at that position.
Overlay a animated .gif containing the blinking line at the click's position.
Use a animated .gif containing the blinking line as the div's background, and set the background-position, depending on the click's location.
For the above two suggestions, instead of a .gif, you can use a static image, and toggle it.
You'll have to keep in mind that the line will have to snap to the closest character boundary, so you won't have your cursor blinking in the middle of a character. Using a monospaced font would make that a lot easier.
You will still have to write the other features a text field has, though:
Text manipulation.
Selections.
Copy / pasting
You can make the div editable by adding contentEditable="true" attribute to the div element.
<div contentEditable="true"></div>
As you mentioned you wanted to avoid using of contentEditable then you can go for Javascript/Jquery plugin. It will be very easy for you if you use plugin rather developing it on your own. Here is a jquery plugin which can come in handy. http://www.appelsiini.net/projects/jeditable
you could try setting the div to contenteditable
<div contenteditable>
</div>
JSFiddle
Seems you are looking for html5 contenteditable attribute.
http://html5demos.com/contenteditable
Given some shape, I would like it to be clickable on its filled parts, and not clickable (thus clicking through to the element behind it) on its transparent parts. Here's an example of a triangle shape:
Black lines are bounding box lines. I would like to be able to select text, or interact with any element that is within bounding box (green-outlined areas), but not covered with the filled part.
I tried SVG with pointer-events set to every possible value, but it does not seem to work. Preferred solution would make us of html5, css and png image, but every working solution is welcomed.
You can add style property
pointer-event:none
to Image it will help you out through the image
Note: it will work only to modern browsers
I maybe wrong in my approach here but I created an HTML5/Javascript container that uses javascript to glow the text and to use a countdown. I was however able to achieve the iframe result i was seeking after great difficulty but the only thing is that the background color of the page on which i have the widget if you will is in red color so now wherever the iframe is being embedded it moves around the widget and shows the background color.
I thought of changing the color to white but that still has problems with the positioning so I am wondering if there are something that i need to fix on the page OR how do i make sure only the part i want from the page is embedded?
Without more information this is a long shot but try to put a background-color:transparent; on the offending widget or simply do not use a background color on it so that is does not overflow your desired space.
I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"
How could I write something like that using jQuery?
How to get row and column of cursor?
how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
How to make sure the DIV appears at the start of a word?
Thank you in advance!
Answer: http://jsfiddle.net/morrison/57BR3/
What it does:
Creates div positioned near hyperlink.
Looks like Google docs box.
Ability to change text and url.
Remove is implemented.
What it does not do:
Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.
You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.