Jquery to javascript conversion help

Question

I'm trying to convert the following jquery to javascript syntax, but being not familiar with either, I'm getting stuck

var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
// Append our div, do our calculation and then remove it
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'scroll');
var w2 = $('div', div).innerWidth();
$(div).remove();

If you're not a javascript developer, wouldn't it make sense to use jQuery since it minimizes the amount of JS you actually have to write/comprehend? — Rex M
– Rex M, Commented Apr 1, 2010 at 18:16
Put a bounty on it and I'm sure someone will do the work for you. — Jonathan Julian
– Jonathan Julian, Commented Apr 1, 2010 at 18:17
@clamix - I can abbreviate the story and save you some grief here, by the time you convert more than 1 thing like this from jQuery to avoid using it, you'll wish you hadn't. Then, you'll load it in IE and want buy a bullet and rent a gun. I'd use jQuery. It's 24kb sent to the client then cached...that's less than a lot of webpages are each time, size shouldn't be a major concern unless it's a mobile application. — Nick Craver
– Nick Craver, Commented Apr 1, 2010 at 18:26
@clamix - It's getElementsByName, but inside a context, some of the jQuery width calculations that take into account margins, padding, etc...it's not that simple and very tedious to repeat, this is why we use jQuery :) — Nick Craver
– Nick Craver, Commented Apr 1, 2010 at 18:36

maček · Accepted Answer · 2010-04-01 19:07:55Z

4

You can't directly translate jQuery into native JavaScript because it's pulling different tricks for all sorts of variables you couldn't possibly account for (browsers, browser versions, OSes, etc).

You could attempt to do this but it'd be an incredible waste of your time. The top JavaScript pros are working on these frameworks to make JavaScript easier for you. Don't undo all their hard work by trying to do it on your own...

answered Apr 1, 2010 at 19:07

maček

78k37 gold badges172 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mitko · Accepted Answer · 2011-12-15 21:34:51Z

1

function scrollbarWidth2() {
    var outterDiv = document.createElement('div');
    var innerDiv = document.createElement('div');
    outterDiv.style.cssText = "width:50px;height:50px;overflow:hidden; background:red; position:absolute;top:200px;left:200px;";
    innerDiv.style.cssText = "height:100px;";
    outterDiv.appendChild(innerDiv); 
    document.body.appendChild(outterDiv);
    var w1 = innerDiv.offsetWidth;
    outterDiv.style.overflowY = "scroll";
    var w2 = innerDiv.offsetWidth;
    document.body.removeChild(outterDiv);
    return (w1 - w2);
}

edited Dec 15, 2011 at 21:34

user142162

answered Jul 13, 2011 at 7:22

Mitko

111 bronze badge

Collectives™ on Stack Overflow

Jquery to javascript conversion help

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related