CODEWITHSUNDEEP
javascriptjquerycssvendor-prefix
Gonzalo Fernandez
Gonzalo Fernandez

Reputation: 235

Vendor prefixes for javascript

I'm new to this world of coding. My knowledge of HTML and CSS is minimum and inexistent when it comes to Javascript.

I am working on a project for which I need to create a parallax site and each section is divided diagonally. The parallax bit is almost done but I'm struggling to make the diagonals functional on different browsers. Using a bit of code somebody else put in this forum I got to do it for Firefox but still need to make it work on the other browsers or at least Chrome and Safari. Can anyone help?

HTML

<div>
  <section><a href="#1"></a></section>
  <section><a href="#2"></a></section>
</div>

CSS

html, body, div{ height: 100%; width: 100%; padding: 0; margin: 0; }
div { overflow : hidden; position: relative;  }
section { 
height        : 500%;
background    : red; 
width         : 500%;
position      : absolute;
top           : -100%;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}

section + section { 
background: #333;    
top       : 80%;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
} 

section a { display: block; width: 100%; height: 100%; cursor: pointer; }

JS

$(function() {

$(window).on('resize', function() {
   var h = $(document).height(),
       w = $(document).width(); 

   var angle = ((Math.atan(h/w) * 10.29577951308232));
   $('section').css("-moz-transform", "rotate(" + angle + "deg)")

})
.triggerHandler('resize');
});

Upvotes: 3

Views: 977

Answers (1)

Ingo B&#252;rk
Ingo B&#252;rk

Reputation: 20033

As Rob W. pointed out, jQuery will (in recent versions) add vendor prefixes for you. However, that means you shouldn't do it yourself:

$('section').css("transform", "rotate(" + angle + "deg)");

This works in both Chrome and Firefox for me: Fiddle

Upvotes: 1

Related Questions