Zoom in/out in a container - javascript

I want to implement a system to zoom in/zoom out a container div in "real time" with javascript.The container contains different subdivs which are connected through a line using the jsPlumb library My webpage looks something like this:
Is there any 3rd party library which will help me to implement this ? Please advise me where to start. Thank you in advance.

Looking around the internet, there doesn't appear to be any libraries for what you intend to do- although I would love to be proven wrong.
Edit: While working on something completely unrelated to this, I came across a library called zoom.js that allows you zoom in on any element. It's API looks quite easy to use, but it is still a proof of concept, and doesn't work on IE. The creator said specifically to not use it in anything important, which is why I'm keeping my old answer too.
However, looking through the source code for zoomooz, I'm pretty sure that here's how you do it: Use the jQuery animate function to slowly apply the change in the css transform property. More specifically, you want to use the scale(XValue, YValue) function for this.
A couple things to remember about using CSS transform:
Set the transform-origin property, so that the page fits inside of the screen when scaled, instead of going outside the borders or something similar.
Include browser specific prefixes like -webkit-transform, -ms-transform, and -moz-transform in addition to transform.
CSS transform is an experimental feature, according to Mozilla, so make sure it is compatible with the browser your users are using.

Related

How do I add a blur BEHIND an html element?

I've dug through the internet and found some things that seem to be going in the right direction but nothing that seemed like a complete solution. Here's what I found:
The upcoming CSS property backdrop-filter, which is currently only supported in Safari and behind a Chrome developer flag. Exactly what I need, but it needs better support.
The JavaScript library Blur.js, which seems to have all but disappeared from the internet. (Even the official website leads to a GoDaddy page.) It may have been a solution but I'm not sure what happened to the project.
The JavaScript library StackBlur, which seems to be a brilliant blurring solution, but I haven't the slightest idea how I would use it to blur BEHIND an element.
Any ideas? Perhaps someone has used StackBlur to do this and has a CodePen I could poke through or something? Basically, I have a grid of element each using jQuery UI Draggable that I would like to make translucent with a nice blur behind each one. The blur needs to update as expected when the elements are dragged around.
One last thought. Right now what I'm using is a pure CSS "solution", but it has some annoying limitations. If you are going to suggest a solution with only CSS it's probably what I'm already doing. The issues with it are the following:
The area behind the element isn't really blurred, just an arbitrary background image.
The edges or the blurred area do not cleanly cut off the blur. This is a bit hard to describe, but just trust me when I say that it's doesn't look great.
Unless I missed something huge in all my searching, I think I'm going to need JS for this one.
Barmar is correct. Give two objects the same absolute position. Blur one object and assign it a lower z-index. Bob's your uncle.
If you need some clearer specifics, then please post your code following the SO guidelines.

Rounded corners in IE 7+ with/without JavaScript?

To create rounded corners on my container elements I use this CSS:
border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).
Is there a workaround for this that's doable entirely in CSS (no script, no extra markup)?
For JavaScript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my CSS, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?
As far as I know for IE<9 there is no way to do this in pure CSS.
It has been documented that IE9 has border radius support.
There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.
Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.
Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.
Update:
I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.
Update #2:
After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviour which only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.
Hope it helps :)
You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.
The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Pie stands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.
Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!
The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.
I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.
you can use .htc for border radius. link1 for htc files link2 for htc files
I suggest to have a look at this site. CSS3 Please
The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.

Fixing CSS positioning and scaling

I was contemplating writing a UI toolkit where setting the position and size of an element/widget was intuitive and powerful. Here are some examples of how it would be used (not currently implemented):
ui("Panel").size(". 40").pos("0 0").attach(element);
ui("Textarea").size(". %-10").pos("0 40").attach(element);
ui("Panel").size(". 10").pos("0 bottom+5");
Where . means auto, % means 100% and the possibility to add pixels to percentages.
Does anything like said exist (even as a jQuery plugin or something)? Somethings just aren't possible with pure CSS.
If you want to create it in Javascript you will have to make the script read the ui code then convert to css. This would cause too much overhead and wouldn't really be worth the hassle. It would be nice to have a quicker more intuitive way to create styles but unfortunately without paying in efficiency it wont work too well.
I would be very wary before lunching into this. This would give any devloper joining your project a major headache of needing to learn your new layout mechanisims.
I have yet to see what CSS can not do, so you may want to look into what it can do further before going ahead look at the various examples from http://www.csszengarden.com/ . I'm not saying CSS is easy but it is standard.
If you need more power look at CSS3 the majority of which can be achived using jQuery.
Sorry to say but I think you are heading down the wrong road by building your own. Use standard, tested, well knowen and documented way. Don't reinvent the wheel unless you are in the wheel making business.

Rotating blocks in JavaScript

I'd like to create a JavaScript web app that makes blocks appear on the page that can be dragged around by the user. If I used DIVs with background colors, it would be easy to rotate them by 90 degrees at a time.
However, if I wanted to rotate them arbitrarily, how could I accomplish this? I'd rather not have to resort to Flash, images, Java applets or HTML5. (I'd like it to be a plain DHTML app, maybe with a cgi script on the backend, but limit the number of plugins I need.)
(EDIT: The draggable DIVs isn't the hard part, I have that down. It's the rotating that I'd like ideas on.)
Dragging is easy. See Catfish's answer.
But rotation? If you'd rather not resort to any of those techniques, then you pretty much can't do it. Sorry.
WebKit (Safari, Chrome) and Mozilla (Firefox) implement the best solution: CSS declarations. I assume one could manipulate them through Javascript, like everything else.
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
However, given all the different restrictions you list (HTML5, mainly), it sounds like you're looking for something that will work every browser, so this solution is out. You could pull it off in <canvas>, though it's also not globally compatible, it'd be a pain, and I'd probably qualify that as HTML5, anyway.
So, no go. You pretty much list every technology that would make this possible as not being an option. Either no cross-browser compatibility, or use a plugin.
The new web is coming. Things will be better. For now, deal with it.
you can use jquery UI to have draggable blocks.
check this out.
Hey dude. Unfortunately, I've never seen or done this with javascript and I say with a little trepidation it may not be possible using true javascript.
There is a way to do with with CSS(3), but it differs slightly from browser to browser.
-moz-transform: rotate(-45deg);
and / or
-webkit-transform: rotate(90deg);
Dragging is pretty simple, difficult to build from scratch but simply googling will come up trumps.
If your using something like jQuery or Prototype, both these should be easy enough to plugin.
Hope it helps.
Catfish's answer for dragging around the boxes is good and useful, but the rotation will be more of a pain.
Take a look at the example here at css3please.com, it shows a cross browser compatible way to do things.
Looks like a promising project!

What's the best way to apply a drop shadow?

What is the best method for applying drop shadows? I'm working on a site right now where we have a good deal of them, however, I've been fighting to find the best method to do it. The site is pretty animation heavy so shadows need to work well with this.
I tried a jQuery shadow pulgin. The shadows looked good and were easy to use but were slow and didn't work well with any animations (required lots of redrawing, very joggy).
I also tried creating my own jQuery extension that wraps my element in a couple gray divs and then offsets them a little bit to give a shadow effect. This worked well. It's quick and responsive to the animation. However, it makes DOM manipulation/traversal cumbersome since everything is wrapped in these shadow divs.
I know there has to be a better way but this isn't exactly my forte. Thoughts?
ShadedBorder is a good looking and easy to use Shadow-Library. check it out
You don't need to wrap those shadow-divs around the other content, just set them a little askew and place them on a lower z-index !-)
if your main problem is to navigate the DOM, just add a class and/or id to your element, and refer it with JQuery selectors. even better if you store the ref in a variable, so you don't need to select it too frequently
Although it is yet to have full cross-browser support, you might like to try using the CSS 3 text-shadow property.
It largely depends on how frequently your images will need to be changing, and the colored areas that they'll be covering. Because I'm guessing that you'll be needing to pay attention to IE6 compliance, most alpha-PNG solutions will cause such horrible jittery-ness that you'll spend more time in performance optimzation than you would have wanted to guess.
To solve this in the past, since our images are modified less than once a month, we call the images through a caching-PHP script which automatically applies the shadow using a pre-defined background color so we don't have to rely on any transparency. This results in faster downloads (fewer HTTP requests) and a faster-interface because there's less Javascript/CSS magic in the works.
I understand that this is a very old-school solution, and the above solutions would be entirely acceptable if your images were static, but being cross-browser compliant and animated will likely force you to do a solution of this style.

Categories