Javascript methods for elements

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Javascript methods for elements

Post 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.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Javascript methods for elements

Post 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.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Javascript methods for elements

Post 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.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Javascript methods for elements

Post by requinix »

jQuery didn't actually do that. When you .width() on something you're doing that on a jQuery object.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Javascript methods for elements

Post by Pazuzu156 »

Okay, you have a point. Using an object approach, how would I do this?
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Javascript methods for elements

Post 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());
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Javascript methods for elements

Post by Pazuzu156 »

Alright, seem simple enough. I'll look into this. Thank you for the help.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Javascript methods for elements

Post 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.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Javascript methods for elements

Post 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.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Javascript methods for elements

Post 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.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Javascript methods for elements

Post 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.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Javascript methods for elements

Post by Pazuzu156 »

I understand what you're talking about with CSS. Is there an easy way to manipulate CSS without jquery?
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Javascript methods for elements

Post 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";
}
Post Reply