We Keep Coding

new Effect.toggle(argument) in javascript?

At the moment im working on a projects which contains prototype.js + scriptaculous.js and some other things..Im trying to remove these libs. So everything should be done with javascript. But i faced 1 thing which is not clear for me (i was not able to find good explanation or solution).
Maybe someone will be generous enough to help me a little bit.
I have a function where 4 arguments will be passed on click:
function someEffect(element, argTwo, argFive, argSix) {
//code which is done already
//code which is done already
new Effect.toggle(element);
}
So the only thing that i need is to replace last line with a pure js.

In Scriptaculous, Effect.toggle (by default) fades in or out an existing element. There are other transition effects that can be specified in a second argument, but by default, the object fades in or out over 3 seconds. The exact implementation of these effects is documented here: Effect.fade Effect.appear
The toggle bases its decision on which effect to fire on the display property of the element. If it is currently display: none, then the appear effect is played on it. If not, then the fade effect is. The end-state of Effect.fade is to set display to none.
I give you all that background in case there are other parts of this page that still need to interact with the replacement effect you are building. If they do, then you'll need to exactly replace those parts of the effect. If not, you can probably do all of this with CSS, and reduce the overhead of your script to adding or removing a CSS classname on the object.

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.

Updating overflow without removing elements from the div?

If I used:
parentNode.removeChild( divHere );
It does work and the scroll bar for the overflow updates accordingly. If I use JS to 'divHere.style.visibily = "hidden";' well that doesn't work anymore. What I've done pretty much is create 115 divs that are in a container div and the user can select filters to show only the images they want, all the divs have a background image and are essentially just an image with a name under it.
So I have 2 questions:
1) Is there a way to update the overflow and make it not take hidden elements into consideration?
2) If 1) isn't possible than when I use removeChild to remove a div from the container, it does indeed disappear but what exactly happens to it? Does it disappear off the page because it's not added to any element on the page? So it essentially works like it's hidden? I don't have to worry about people seeing the images in some completely weird spot in some lesser used browser?
and well 3) If you have a better method of doing this it would be greatly appreciated
Thanks in advance for any help

The removeChild() method removes a specified child node of the specified element and returns the removed node as a Node object, or null if the node does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/

I believe I may have a response for the third part of your question. That large number of divs in your containing div and the usage of filtering make me think you might want to look into using the DataTables plugin for jQuery (http://www.datatables.net/). It has some very nice features for sorting/filtering/etc. a large number of data elements and supports a variety of data sources. There are also some plugins for the plugin if the basic functionality isn't enough for you.
There is a bit of a learning curve if you want to do more complex stuff with it, and it might be tricky to get used to if you haven't worked with jQuery much (though being someone who hasn't worked with jQuery all that much due to not doing much web development, I can say that I quite like using it whenever I get the chance, although that may just be due to me enjoying learning how to do new things in programming), but I feel that if you're willing to spend the time on it you will have something much more maintainable than what you currently have.

jQuery subtracts css property value when i fetch it

I am facing a very ilogical and odd problem here.
I have defined the width, height and other properties in a seperate CSS file. Now I wan these values on the run time to manipulate them and make my application dynamic.
But when I fetch this value using jQuery, it subtracts one or two from the value.
For example, the width of an element defined in the CSS is 450px, now when I fetch it in jQuery using
$('.programeSectionBox').width();
It will give me 449px. This thing is also happening with height and margin parameters too.
Can somebody please tell me whats happening here, I am badly struct in this problem .
Thanx for all the replies. I have checked the outerWidth() solution but its not working, giving the same issue.
Actually I am creating an application for Samsung Smart TV, they are offering two resolutions 960x540 and 1280x720. For 960x540 everything is working great, but when it comes to 1280x720, the problem is occuring which I have mentioned.
In my application I am using one javascript file and two different CSS files for the two resolutions, the applications checks that on which TV resolution its working and then loads the respective CSS. I cant hardcode the values in JavaScript file because I want to keep it dynamic, if I will hardcode the values, it will obviously work for one resolution.
So if anybody have any other solution, it will be great.
Thanx

Try using outerWidth and see if that works for you:
jQuery("#myElement").outerWidth();
More on outerWidth:
http://api.jquery.com/outerWidth/

Just use parseInt to the value you get it.
After that you will get integer value then you can perform any operation on it.
console.log(​parseInt('445px')​​);​
FIDDLE

Since this is happening with several computed values (not only width/height), I would guess that your browser is zoomed. In your case it is probably zoomed out one step, since you seem to be getting lower values than the ones you set via CSS.
Try this example here: http://jsfiddle.net/zsygt/
When the browser zoom is reset to it’s default value (100%), it should print 448. But when I zoom in one step in Chrome, it prints 449.

Can someone clarify Raphael's documentation? (or know a place in which someone already has done it)

I´m working with Raphael, and I think that I´m using it in a way that does not take advantage of some features that seems to be useful.
For example, I´m trying to add a listener on a Set (a group of elements), in a way that on mouse over on any of those elements, the script triggers an animation on the whole set.
When you add a listener to a set, Raphael adds the listener to each of the elements and animates them separately.
Like you see in this example http://jsfiddle.net/4VYHe/3/ in wich I want that all the rectangles in the same set (set = horizontal groups of 10 rectangles), change the color attribute on mouse over on any of them.
I have found a few methods in the raphael documentation that i think must help to achive this. But I´m having a hard time understanding how these methods work.
For example:
the eve object(http://raphaeljs.com/reference.html#eve)
the Element.animateWith() method (http://raphaeljs.com/reference.html#Element.animateWith)
the Raphael.animation() method (http://raphaeljs.com/reference.html#Raphael.animation)
The Raphael Library seems to be really powerful and I really want to get it work properly, I don´t want to write all kinds of diferent javascript hacks, because I think that these tools have to get the work done in a more elegant way.
If you think that I´m using the wrong library I´m still open to all kinds of advices.
Thank you in advance.
---EDIT---
This is a working example (http://jsfiddle.net/4VYHe/6/). But this is a hack with lack of efficiency and elegancy. I want something that uses the correct tools on the correct way.
There is some information on this page. http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#PAGETOP . A couple of examples, but nothing that explain how things work in Raphael.

Take a look at this fiddle, I think it is doing what you are looking for. The fundamental difference is that you want to call animate on the set, rather than this. It appears that when you add a handler to a set, this refers to the individual elements in the set (which are iterated over to assign the handler), and not the set itself.
Note that I pulled the handler functions out into the getHoverHandler function:
function getHoverHandler(fillColor) {
var cSet = set;
return function(){
cSet.animate({fill: fillColor}, 300);
};
}
set.hover(getHoverHandler('#000'),
getHoverHandler('#FFF'));
in order to break the closure. If you try to do it like this:
set.hover(function(){
set.animate({fill: '#000'}, 300)
}, function(){
set.animate({fill: '#FFF'}, 300)
});
as you loop through, set will keep changing, and the closures will maintain awareness of this. As a result, all handlers will be acting on the last row of boxes.
If you don't understand javascript closures, you might want to look at this article. It is old, but in pretty simple language, and it helped me as I have tried to get my head around them.

Kreek is absolutely correct in this comment above. Sets are a workaround for the inconsistencies between SVG and VML.
In your example above, you're running into the same issue that you were facing in your previous question. Using this in an anonymous function will almost always not work in the way you expect, as this won't be referring to what you think it is. Have a look at this discussion, particularly the first two comments in the comments section. (As an aside, the commenter uses "self" as the reference to "this", which is much better than my "that", which goes to show there's always someone doing it better than yourself)
Anyway, with that in mind, I've cloned your fiddle, wrapped your set in an object, and put the events into the object constructor. By doing this, the event can then refer to that.set and animate all objects in the set at the same time.
It's a small but fundamental concept that will aid you throughout any Raphael (or javascript) development you do.
This doesn't answer your question directly, but hopefully clarifies some of the issues you seem to be discovering. I can't really comment on the animation calls you've mentioned, but I do think that Raphael as a library is definitely worth persevering with.
N.