I'm intending to use JCrop for a standard image upload feature.
Everything is all right so far, it works great.
BUT: there is a minimum image size required, so instead of letting the user do his cropping and then stop him with an error message when he tries to ulpoad, I'd like to insert a continuous (or at least after selecting) info-text about the current selection size.
So, here's my question: can you add text to the jcrop selection area? Or would I have to create something myself?
Thanks for your input!
The short answer is no you can't add text to the selection area. You could, of course make additions to the jcrop script and add such functionality (which I think would be a cool addition).
I had a similar need (ie. to inform user that it was too small) and did it in a separate area based on the selection size. Something along the lines of:
$("#myDiv").Jcrop({onChange: checkSelection},function(){jcrop_api = this;));
function checkSelection(c){
if (c.x2 - c.x < minWidth)
...
Related
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.
I am using ckeditor to edit my html text, here i want to restrict editable area in the ckeditor, i know how to give width and height for the ckeditor but i do not know how to give width and height for the ckeditor editing area.
Suppose if i give 700px width then user should enter the text only upto 700px, after that it should come to the next line.
I gave like below
CKEDITOR.replace( 'divedit', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
width: '700px',
height:'200px'
});
but it is showing scroll bar if the user types text beyond 700px.
Sounds like a strange requirement. I would try this:
Before saving get the editor contents
Insert into a preview div that has the exact same CSS as your requirements / target but no width
Get the width of the content with javascript
Check if width > 700, alert message the user that their content Sucks and don't save
Otherwise, save
Don't do this with every change event - it will murder your performance at some point.
BTW, I never use static width content in CKE, so I cannot see how this is ever a problem, but I guess you have different requirements or something. If this is to stop users from entering OOOOOOOOOOOOOOOOOOOOOOOOOOOOO... or such content that overflow from the box you are outputting content with, don't worry about it. Content such as that should be deleted or edited using other means and you can also use CSS to control overflows. Or you can validate word widths with a max chars per word limitation or something.
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';
How to distinguish between blank areas and non-blank areas in a webpage with JavaScript? Blank areas including:
areas that are not occupied by DOM elements.
margins, borders and paddings of DOM elements.
EDIT:
As response to the first comment: I am working on a web-based ebook reader. Cursor is set to {cursor:move} for blank areas so that the user can drag and scroll the webpage.
You could recursively go through each element and attach onmouseover and onmouseout events (where the former enables the text cursor and the latter enables the move cursor) on each which has text in it, e.g:
function attachEvents(e) {
if (n.nodeType == 3) { // Node.TEXT_NODE
// A text node - add the parent as an element to select text in
e.parentNode.onmouseover = elmMouseOver /* define your own event fns */
e.parentNode.onmouseout = elmMouseOut
}
else if (n.nodeType == 1) { // Node.ELEMENT_NODE
for (var m=e.firstChild; m != null; m = m.nextSibling) {
attachEvents(m)
}
}
}
The best way I can think of to make sure it's actually "text" which is moused over and not a blank area is to use e.g. <div><span>content</span></div> and put the mouseover/mouseout events in the <span> so that blank areas don't trigger events. This is what I'd recommend doing if you can, as things can get very complicated if you use block elements with padding from my experience. For example:
| The quick brown fox jumps |
| over the lazy dog | <- onmouseover/out of SPANs will ignore the space
after "dog" while DIVs won't and you won't need
to calculate padding/margins/positions which
makes it faster and more simple to implement
If you have to use block DIVs: You could use something like jQuery's jSizes plugin to get margins/padding in pixels or this (for a way to get the inherited CSS values and parse yourself by removing the px part from the end etc)
After that, you could figure out the position using position() in jQuery. I personally don't use jQuery for my stuff, but I use those specific "find positions" functions and found them to be one of the best I think in large part because of number of users testing them.
Good luck!
My advice would be to go for a simple scrollbar. That's far more foolproof. By trying to implement the cool drag-and-scroll feature you risk with a lot of buggy behavior in dozens of edge-cases none of us can even imagine.
If you really want to detect clicks in whitespace, you could try attaching to the onmousedown/onmouseup/onmousemove events for the page itself. JavaScript events bubble nicely, so you'll handle the whole page at once (unless it has some JavaScript in itself, in which case you're screwed anyway). These events supply both the mouse X/Y coordinates and the element that was clicked. Then you can check for padding of that element (careful with inline elements) and figure out if it's in the padding or not. You do not need to check the margin because clicking there will instead originate the click in the parent element.
Although the effect you get this way is a lot of scattered "drag-zones" that the user will have to hunt for in order to scroll the page. I doubt this will sit well with your users. Better then make the whole page "draggable", but then you will loose the ability to select text. Or do like Acrobat, which only allows grabbing in the considerable padding area of the page itself (then you should make sure that there is a considerable padding area). Which in my eyes is not much better than a scrollbar. :P
I want to trigger an event handler when the user hovers on a particular part of the image, like the center of the image or the right side of the image (area would include, say, about a 100 pixels). I am not using any framework, so this is normal javascript that I am working with.
I am not sure if using image maps would work. Can anyone help?
Quirksmode about mouse position
Given the craziness involved here I would:
Use a framework (I just did something like this with Mootools)
Put absolutely positioned divs over the image and listen to events on them, instead of the image (did this too recently, a left 50% and a right 50%, way less cumbersome than tracking the mouse position).
Or go for it, quirksmode gives a decent function to get the mouse position, then you'll need to calculate the position of the image, then do the math to get the position of the mouse on the image, do the math in a mouseover event of the image, then continually check if the position meets your criteria, then do something about it when it does :)
You can use the MouseMove event to find out the location of the cursor, and then implement your own logic to calculate this position relative to the image.
See this page on getting the mouse coordinates.
i do not know how many areas you need and if they need to be especially shaped or something like that....
a straightforward solution would be placing (CSS) empty div elements "over" the image which will trigger the events
afaik it is not possible to trigger js events with an image map
An image map coupled with jquery is a great solution I've used before. I see that you're not using a framework, but it's worth a look.
Here's a little code snippet I used with an image map and mouseenter / mouseleave events.
$(".map-areas area")
.mouseenter(function() {
idx = $(".map-areas area").index(this);
showMapArea(idx);
})
.mouseleave(function() {
$(".map-hovers img").hide();
$(".map-titles img").hide();
});
I suggest putting an invisible div in the place where you want to check for mouse_over in the image. (In the case that the area you want is rectangular of course). And then trigger on mouse_over for this div.
If you want to check for non rectangular areas (that can't be a div), I would suggest that you put a div of the same size of the image on top of it. Check mouse position on that div, and use it to compare with a mask image.
Example:
MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;
if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.
By knowing which color it is on the mask image you can set multiple events.