Here's what I'm looking at. I have a text element:
var label = paper.text(100, 100, "Test String").attr({some attrs});
It appears where I want it to and everything is good. The problem comes when I go to update the text attribute later.
label.attr({text: "My new label text"});
When I do this the text element gets shifted a small amount in the positive y direction, so downward.
When I check the x and y position values before and after the change they are identical. I have no idea what to do. I noticed it not happen once in a friends browser, Chrome, which is the same one I'm using.
Any ideas? I'd rather not have to alter the y value every time I change the text attr.
Thanks in advance for any help!
I don't know if this is feasible for your project, but you can try combining your raphael elements with standard html elements. Your label could be a div that is positioned and styled with jQuery. If you need to dynamically change the text of the label, you can just use the jQuery .html() attribute for the div, which will not change its position. This might not be the most elegant solution, but integrating jquery and raphael works well in most situations and guarantees standardization of text positioning/styling across browsers.
Related
I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!
This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)
If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.
I have a simple textarea and I need to make transparent letters while allowing the text-caret to be visible. When I apply the following rules then I get invisible caret:
textarea {
background: transparent;
opacity: 0;
}
When I type invisible text, I need to see the text-caret move.
EDIT: I need to make editor to edit td cell in table. When I click on a cell I show a textarea and start typing. On a each character letter, I insert a context in a cell. After that, I hide a textarea.
This jsFiddle DEMO uses an online tutorial method that has been slightly modified to create a non-native browser text-caret along with transparent text.
Also, this jsFiddle New Method I created handles that goal differently but isn't IE8 friendly.
Status Update: I've improved the above jsFiddle DEMO with this newer version titled:
jsFiddle New Method that's Newer!!
The above jsFiddle version now allows the inside of the text-area to be clicked and the caret will respect that clicked location. This extra functionality was made possible by a great question and answer here.
Time to throw my $0.02 in.
This is an answer to the question, as I understood it, that works, it's quick and dirty, so feel free to make suggestions. This code is untested, but I did create a working fiddle here: http://jsfiddle.net/66RXc/
<html>
<head>
<title>Testing</title>
<script type="text/javascript">
<!--
function call(val) {
document.getElementById('result').value += val.charAt(val.length - 1);
document.getElementById('result').value =
document.getElementById('result').value.substr(0, val.length);
document.getElementById('test').value =
document.getElementById('test').value.replace(/[^\^]/g, ' ');
}
-->
</script>
</head>
<body>
<textarea name="textarea" cols="20" rows="5" id="test"
onKeyUp="call(this.value);"></textarea>
<textarea style="display:block" cols="20" rows="5" id="result" disabled>
</textarea>
</body>
</html>
The way I approached it was every time a character is typed in textarea "test", copy it over to a hidden text box, and replace all the characters in "test" except ^ with spaces. The characters are hidden, and the carat is still there. The full text is still in the other box. You could use display:hidden instead of display:block to hide it.
This isn't exactly the best implementation in the world, just something I did quickly. You have to type kind of slow (~15-20 WPM) for it to work.
Here is a CSS3 solution for making the text, itself, transparent:
Set the color attribute to be color: rgba(0,0,0,0); for the text
The only problem is that the caret goes invisible to. I did a quick search and found out that the caret and its styling are completely at the disposal of the browser. As such, the only option that I can think of for you is to use Javascript to add a simulated caret to the end of what you are typing.
I have an idea of how to do this, but it's messy and I wouldn't exactly call it ideal - I am, however, going to write it in case it helps further someone else's idea:
add a hidden label to the page
make sure it's hidden and not display: none; (so that it has actual width)
set white-space: nowrap; to keep it all on one line)
make sure the text is styled exactly the same as the text in the textarea
add the element <span id="caret">|</span> right before the textarea (I will refer to this as the caret for the rest of the spec)
set its position to position: relative;
increase its z-index to make it overlay
shift it right in order to set it on top of where the ACTUAL caret's initial position would be
make a function to check take in the value of the textarea and check the width of the textarea against the position of the caret (lookup selectionStart if you don't know how to do this)
the problem here is that characters are not always the same length, nor are they always the same length as their counterparts in other fonts
to solve this, as text is entered into the textarea you should have it imitated in the hidden label you created in step 1
imitate only the text from the start of the textarea to the caret's current position
wrap each character (including spaces) in their own span
next you will have to call a function to compare the width of the label with the width of the textarea
if the label is less wide than the textarea, get the width of the last span in the hidden label and shift the caret to the right by that width, then move on to step 4
as this is function will be run as text is entered it will happen one character at a time
be careful here that the caret doesn't go outside the textarea when it's in its last and near last positions
if the label is wider than the textarea:
add the widths of the characters (spans) in the label one at a time until you reach the width of the textarea
shift the position of the caret down by the height of the font and back to the horizontal starting position (as the caret's position is relative, just change its left position back to (0 + offsetToACTUALCaretPosition)
use a flag (e.g. class="break") to mark the last span (character) in the previous row
call the width comparison function again
make sure that you include a condition to check for the flags that you added at the end of each "row" (if any)
if you haven't already, apply any desired CSS styles to the caret span and change the color of the textarea's text to be color: rgba(0,0,0,0);
Caveats:
this will have a lot of overhead for the tiny job it does
you will have to adjust this method to account for padding
you will have to adjust this method to add support for deleting characters and moving the carets to an earlier position (to the left)
if you leave the textarea scrollable, you will have to add support for that (also for similar settings, like static heights causing text to scroll or move off screen/out of the textarea's visible area)
As I said before, I know that this solution is very rough, but it may help someone come up with a better one.
Good luck!
Based on your edit, if you need to just hide a textarea why don't you use jQuery $('#your_id').hide();
instead of having the containment of the draggable element around it, how can I have it inside it? So you can drag the element anywhere as long as the edges of it do not collide with the element inside of it?
One approach is to use the drag event and update the ui.position or ui.offset fields, to manually constrain the item.
Here is a jsfiddle to illustrate the concept, although this doesn't fully implement what you describe.
You could fake it by making a real containing component that restricts your draggable element as if it is constrained by the smaller element. You would just have to make the dimensions of the real container like this:
Container.height = (Draggable.height - Restrict.height) + Draggable.height
Container.width = (Draggable.width - Restrict.width) + Draggable.width
Then, you would also need to counter the dragging motion so that the contained restriction element doesn't seem to move when the draggable element moves. Either that or the immobile section could be a floating div.
Building upon #RustyTheBoyRobot's answer you could also accomplish in CSS alone if you have known dimensions of your draggable.
Live Example - jsbin.com/agovex
The obvious downside of this is if you want to reuse this in multiple situations it's not going to work because the values are hardcoded in CSS. But if you only need it for one thing with known dimensions I find the CSS only approach simple and elegant. There's only one line of JavaScript to create the draggable.
If anyone else is interested in this, using Rusty's code and logic here's a JSfiddle link.
I am not great with JavaScript, and I am thinking this is a fairly easy answer.
Link to project:
http://dl.dropbox.com/u/4132989/example02/example02/index.html
What I'm trying to do:
Make the draggable cell turn red, and the text turn white, when it's dropped to it's correct location.
When I drag the green or orange cell to their correct locations, I have inserted this as a test to make sure I am able to target only when the drag is correct.
document.body.style.background="red"
If you look at the code, on drop, the border changes on the cell from solid, to dotted. What I am trying to do is be able to change any property on drop. I want to make the background of the cell red on drop and I'd like the text to turn white. I tried this:
REDIPS.drag.style.background="red"
However, this did not work and it made everything non-draggable.
To download the code use this link:
http://dl.dropbox.com/u/4132989/example02.zip
Thanks in advance for any help.
*Oh, the change I made is in the file redips-drag-min.js
You're close, but the object you really want to change is rd.target_cell, the cell that just received the drop action. Add the following inside the if (rd.target_cell.className ... conditional (line 31 of script.js):
rd.target_cell.style.background= 'red';
Consider:
$("#PlotPlace").append('<div style="position:absolute;left:200px;top:40px;font-size:smaller">Hello world!</div>');
I need to execute that line only if the width of the resultant text would be less than 60px. How can I check the width before placing the object?
Unfortunately, the div will only have a width value once it is rendered into the DOM.
I would append that content to an inconspicuous area of the document, perhaps even absolutely positioned so that no flow disruption occurs, and make sure that it is set to "visibility:hidden". That way it will be inserted into the DOM and be rendered, but be invisible to the viewer.
You can then check the width on it, and move it into position and set it to "visibility:visible" at that point. Otherwise, you can remove it from the document.
Maybe you can append it invisible, then check it's width, and then consider to show or hide.
$("#PlotPlace").append('<div style="position:absolute;left:9001px;top:40px;font-size:smaller">Hello world!</div>');
var div = $('#PlotPlace').children("div");
if(div.width() < 60)
div.css({left:200})
Sounds like something you'd have to hack. I don't believe the JavaScript runtime in any browser has an event you can hook into in between calculating the layout and displaying the element, so you can add it in a way that it can't be seen and doesn't affect the height (doesn't cause additional scrolling), and then show/hide it based on the width at this point. It's hacky and ugly, but because you don't have many event hooks it might be the only way to do it.
You can´t. At least not so easy. The text you insert is written in a specific font, which must be rendered by the browser, then you know the width of the element. By the Way, what exactly do you want to insert, with such a restriction? Wouldn´t it be simpler to cut the text within the output parameters?