Page 1 of 1
Javascript methods for elements
Posted: Fri Dec 07, 2012 5:49 pm
by Pazuzu156
I have an element, and want to create a method for grabbing the width of this element.
I thought maybe I could try like this:
Code: Select all
var getWidth = function() {
// get the width of the element....
}
alert(element.getWidth());
The point is to achieve such a thing without the need for jQuery.
However, I don't know exactly how to do this. Any help would be great.
Re: Javascript methods for elements
Posted: Fri Dec 07, 2012 6:20 pm
by requinix
Extending the built-in objects is frowned upon. Make a normal function, or an object that wraps the element and provides the method.
Re: Javascript methods for elements
Posted: Fri Dec 07, 2012 6:27 pm
by Pazuzu156
Could you show an example of doing this? Extending built-in things wasn't the intention. I merely wanted to make a method that would grab the width for each object this method is applied to. Therefore making it easy to say: element.grabWidth(); to get the width of this element. jQuery did it, and I'd like to know how to do this too.
Re: Javascript methods for elements
Posted: Fri Dec 07, 2012 6:47 pm
by requinix
jQuery didn't actually do that. When you .width() on something you're doing that on a jQuery object.
Re: Javascript methods for elements
Posted: Fri Dec 07, 2012 6:58 pm
by Pazuzu156
Okay, you have a point. Using an object approach, how would I do this?
Re: Javascript methods for elements
Posted: Fri Dec 07, 2012 7:20 pm
by requinix
First, unless there's a bunch of methods you want to add then using objects is overkill.
There are a bunch of ways of doing objects in Javascript. Find the one you like best. My constructors tend to be complicated so I tend to use
Code: Select all
foo = function(obj) {
this.getWidth = function() {
// get the width of the element (using obj)
};
};
However you do it, the code to use the "class" is
Code: Select all
var f = new foo(element);
alert(f.getWidth());
Re: Javascript methods for elements
Posted: Fri Dec 07, 2012 7:30 pm
by Pazuzu156
Alright, seem simple enough. I'll look into this. Thank you for the help.
Re: Javascript methods for elements
Posted: Tue Dec 11, 2012 4:20 pm
by Pazuzu156
One other question, how to I make this update every time a change happens in the browser? Reason: to prevent having to refresh the web page each time something changes.
Re: Javascript methods for elements
Posted: Tue Dec 11, 2012 4:31 pm
by requinix
Depends what changes. Is it not possible to structure the page and apply CSS to get the results you need? It often is.
Re: Javascript methods for elements
Posted: Tue Dec 11, 2012 5:24 pm
by Pazuzu156
The objects position is what changes. I'm centering the box to the screen top and left. I'm more or less learning how to do this with pure JavaScript as a leaning thing.
Re: Javascript methods for elements
Posted: Tue Dec 11, 2012 6:33 pm
by requinix
What I said is still correct - you can still use CSS for this. Horizontal centering is easy though vertical centering is a bit trickier*.
Why am I harping on about CSS? Not only it is the most correct way (IMO) but it's easier than trying to position and move the thing with Javascript.
* Unless the situation has changed in the last couple years I find it easiest to use tables, be they HTML or CSS. vertical-align:middle on a display:table-cell is the best general-purpose way to center that I know. Otherwise check with Google.
Re: Javascript methods for elements
Posted: Tue Dec 11, 2012 6:48 pm
by Pazuzu156
I understand what you're talking about with CSS. Is there an easy way to manipulate CSS without jquery?
Re: Javascript methods for elements
Posted: Tue Dec 11, 2012 6:58 pm
by requinix
Manipulate? Once set you wouldn't have to change it... At most it would be the toggling of class names, but no framework means you have to care (more) about compatibility yourself. Off-hand,
Code: Select all
// given obj is the thing you're changing and "foo" is the class
if (obj.classList) {
obj.classList.toggle("foo");
} else if (obj.className.indexOf("foo") >= 0) {
obj.className = obj.className.replace(/foo/, "");
} else {
obj.className += " foo";
}