Develop Reference

Cropping images in Javascript (IE)

Is there a way to manipulate an image(crop) using javascript in IE? I know that I can do this with some ActiveX controls. But is there a pure javascript way? May be with filters are any special api provided by Internet Explorer?

It depends upon what you're trying to do. You can use a containing div with overflow set to hidden and a constrained size to clip off any portion of an image and only show a desired crop. If the geometry is known ahead of time, this can be done with pure HTML/CSS. If you need to calculate the size, then sizes, positions and CSS properties can be set with javascript.
Demo: http://jsfiddle.net/jfriend00/QsHy7/

You can use Jcrop with the jQuery library. (info, download page)

You can also take a look at iCropper: http://github.com/supnate/icropper which is a pure javascript image cropping solution. It doesn't depend on any library which makes it fast, light-weight and easy to integrate.

Javascript crop function without displaying image

First of all, I'm very new to javascript. I'm trying to develop a javascript function which takes an image and returns a cropped version of that image. By looking around on google I've found that I probably need to use a canvas in some way to accomplish this task. But does that mean I have to display the image on my page?
I've also looked at different javascript image processing libraries for a similar function, for example Pixastic's Crop, but I have no idea how to use it to solve my particular problem. So now I'm turning to you guys for help. Please guide me in the right direction!
Thanks!

Pixastic's Crop solution seems easy to implement and uses the canvas. It would do the job as long as you don't need to support Internet Explorer 7 or 8.
Otherwise, you can simply use CSS overflow:hidden; to do a client side cropping.
Pixastic Solution: http://www.pixastic.com/lib/docs/actions/crop/, check out the Example Code tab.
Here is a working example for Pixastic and the CSS solutions: http://jsfiddle.net/EB6P7/1/
I used the jQuery plugin for Pixastic.
--
If you don't need to save the image on the server side I recommand using the CSS solution as it doesn't rely on Javascript and achieve the same result as Pixastic.
If there's anything you don't understand, ask me as I don't know your level in HTML/CSS.

Well if your problem is only cropping and not saving the cropped image, the simplest solution I would say is to position the image using CSS inside a div and show only the cropped area.
If you want to save then I wish you need to use some library on the server side to crop and save

Maybe the CSS Clipping feature is a solution for you?
#someImage
{
clip:rect(50px 100px 130px auto);
}

update SVG dynamically

I have some objects inside of svg that can be clicked by user.
Is there any way to:
- send information about object (id) that was clicked by user to the 'main html document'?
- draw from outside document in the svg file.
Probably, my description is unclear,... I want to implement something like this:
user click on any object inside of svg-image;
main document will receive id of the clicked object and:
display some information about that object;
draw additional object inside of the svg-image.
Questions: how to communication from svg to document and from document to svg?
Thanks a lot, any thoughts are welcome!
P.S. Probably SVG is not the best way do that? What is better then?
EDIT: I saw recommendation regarding use of Raphael,.. but I would like to see 'native' options. (For now I'm analyzing Raphaels implementation to see that, but don't think it is doing exactly what I need).

See this example for how to get the DOM of a referenced svg from the parent document.
And here's an example of how you can call from an svg file to the parent document.
SVG is very well suited for doing what you describe.

I'd suggest using a library like Raphaël to support your SVG building. You can attach events to DOM objects that you can get through the node property of an image component.

Raphaël.js is indeed a good solution if you want to stick to SVG / VML. Now you can use canvas (new HTML 5 functionality) as well. Canvas is a new html tag (that can have id, events, ...) that allows you to draw free shapes a bit like SVG does. IE doesn't support canvas natively, of course, and you will need "excanvas.js" (this one or another, but this one works pretty well...) to make it IE compatible.
Only one restriction I know of regarding canvas: using background images makes IE be very slow. I would use Raphaël.js if it was something you'd consider doing.
Good luck

Nobody suggested, but accidentally I've found that svg is already supported by jQuery!
http://plugins.jquery.com/project/svg
Probably that is not the best approach, but I will try to work with svg using jquery. And actually, that seems like reasonable

Am I using too much jQuery? When am I crossing the line?

Lately I found myself using jQuery and JavaScript a lot, often to do the same things that I did before using CSS.
For example, I alternate table rows color or create buttons and links hover effects using JavaScript/jQuery. Is this acceptable? Or should I keep using CSS for these kinds of things?
So the real question is:
When I'm using too much jQuery? How can I understand when I'm crossing the line?

You're crossing the line if you're using jQuery to do things that can be done easily without jQuery. jQuery's purpose is to make life easier, but it shouldn't be at the expense of compatibility or usability.
jQuery most certainly shouldn't be used as a replacement for CSS -- think of the users who have JavaScript disabled.
I know this image is overused, but someone had to throw it in here:
Image Credit - bobince.

I don't think there is a "line" here, I think there are some straightforward things and some grey areas there you have to balance what you want. Advanced features, performance, compatibility, think of these are a triangle, it's hard to do all 3 as best as possible at the same time.
If CSS can do it, of course do it in CSS. If it can't be done in CSS use jQuery, but do't use jQuery where the overhead isn't needed, e.g. $(this).attr("id") can usually be this.id, many things are available strictly on the DOM and still in a cross-browser way.
When are you using it too much? When it's not needed, sometimes you need jQuery for cross-browser CCS3 selectors, sometimes you're using a CSS selector that's already available put it in the stylesheet. There are a hundred other examples, but if you can get by in a cross-browser clean way without it, then there's no need, things like fading aren't trivially done. If you need to include jQuery at all, there's no reason not to use .fadeIn() once you have (the code's been included, why duplicate it?)
JavaScript vs No JavaScript
As said in comments here your site should offer all the basic functionality without javascript, this usually isn't a problem, e.g. capturing a click and loading the content via AJAX...if you don't capture it they do a full page reload, this is an easy fallback to the standard behavior. However, all the "bells and whistles"? This is opinionated for sure, but I don't think you should bend over backwards to offer all the functionality without JavaScript. The user turned it off, they don't get the fancy stuff, that's fine...look at SO as an example, disable javascript disables a lot of non-essential features, you can browse around just fine, but commenting, voting, mainly actions aren't necessarily available without JavaScript.

If you turn off java script on your browser and your site/application does not run or look functionally with out it, then you have a problem.
JS is great, but it should never stop a user from using something you have built, IF it is disabled.

If it's something that is easily do-able in CSS, then ditch jQuery and do it in CSS. That way you don't have to depend on javascript execution for the look/feel of your application.

You use too much jQuery if you could set one class attribute instead of a lot style attributes. For example:
/** Select 400 rows and change the background colour **/
$('#table tr').css('backgroundColor', 'blue');
Instead of:
/** jQuery **/
$('#table').addClass('blueRows');
/** CSS **/
#table tr.blueRows {
background-color: blue;
}
To avoid jQuery styling, you could also set a class to the body so it's easier to style with CSS for Javascript-enabled browsers:
/** jQuery **/
$(document).addClass('JS-enabled');
/** CSS **/
body #table tr{
background: #FFF;
}
body.JS-enabled #table tr {
background: blue;
}

jQuery most often gets applied after the document has been loaded. I guess that if you can achieve the same thing with plain CSS, CSS is the way to go. Less load on the browser, and if someone doesn't have jQuery enabled at least there's still (some) style because of the CSS.

For example, I alternate table rows color or create buttons and links hover effects using JavaScript/jQuery. Is this acceptable? Or should I keep using CSS for these kind of things?
Really, it depends on your browser support. You can do zebra-striping on tables really simply with this code:
table.classname tr:nth-child(even) td {
background-color: #ddd;
}
But this doesn't work in Internet Explorer at all (although it should in the upcoming version 9). So if you need everything to look the same cross-browser, use jQuery instead.
For link hover effects, assuming you mean colour changes, etc. and not fancy animation, definitely use CSS since this is supported everywhere.

Ok, don't mark me as a troll...
If your web-app wont work in an environment that doesn't have JavaScript enabled or isn't compatible with JQuery, then just go with whatever is easiest for you to manage. There is no benefit to having visual support for an application if it doesn't actually work otherwise at all.
Tho if you want to make it work later without JavaScript support, then you should prob try to use css. But if you don't plan for no-JavaScript support, and it works, go with whatever is easiest for you

Spinning javascript menu

I would like to create a spinning menu akin to the one done in flash here. Are there any relevant links you know about to help with this endeavor?
Thank you kindly.

You can do it with a series of images and just swap them. Without getting into complexities of cross-browser canvas/svg that's probably the easiest way to do it.

You could use the <canvas> tag.

You could make a circular image map with the mouseovers, and then use css rotates with animation on the angle in something like jQuery so that the currently selected item is at the top. However, this would be limited in the amount of browsers that support it (mozilla and webkit). I think there is a similar thing in IE, but requires an ActiveX overlay