Home > javascript > Positioning transformed divs (grid system)

Positioning transformed divs (grid system)

January 10Hits:6
Advertisement

I am trying to position some diamond divs using some trigonometry in javascript but it seems my logic fails somewhere.

You can see that I tried this formula: pos + trig * dimension. I hoped it would give me the right coordinates so that I can construct my diamond grid. So my question is, how can I align the diamond borders with trigonometry?

var div = document.getElementsByTagName('div');  var x1 = div[0].offsetTop + Math.cos(45) * div[0].offsetHeight; var y1 = div[0].offsetLeft + Math.sin(45) * div[0].offsetWidth;  div[1].style.top = y1 + 'px'; div[1].style.left = x1 + 'px'; 

The entire jsfiddle can be found here: https://jsfiddle.net/hmfxmvvs/

Tags:javascript

Related Articles

  • Positioning transformed divs (grid system)January 10

    I am trying to position some diamond divs using some trigonometry in javascript but it seems my logic fails somewhere. You can see that I tried this formula: pos + trig * dimension. I hoped it would give me the right coordinates so that I can constru

  • Getting: org.opengis.referencing.NoSuchIdentifierException: No transform for classification "Transverse Mercator Zoned Grid System" with geotoolsApril 22

    Using geotools I've been trying to create a referenced envelope after converting/reprojecting from WGS 84 to UTM with specific zones and it seems that either I need to do something with authority factories or figure out some kind of a workaround for

  • most efficient way to create a grid system in unityMay 19

    I'm creating a little tower defence game to get myself acquainted with unity. At first I was going to emulate a grid system by capturing touches / mouse clicks and rounding the coordinates to the nearest whole numbers. This is very low cost and works

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • Border each item without padding in Bootstrap Grid System while keeping distance between themJanuary 14

    I want to border each item in Bootstrap Grid System while keeping distance between them but struggle to achieve so. Here is a simple Codepen to illustrate what I'm trying to achieve: http://codepen.io/anon/pen/xZLNqY .card-box .image img { width: 100

  • Blocks and CSS Grid Systems

    Blocks and CSS Grid SystemsSeptember 12

    How do I achieve the following in Drupal: <div class="row"> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4

  • Converting longitude and latitude coordinates to Indian Grid system?February 7

    How to convert lat/long coordinates to Indian Grid system? I've googled for a couple of days but didnt find the exact algorithm for this. and i got a link Indian Grid System. but i didnt get a picture how the zones(there are 9 zones) are divided amon

  • can one use \figure with the grid-system package?

    can one use \figure with the grid-system package?March 18

    Using the grid-system package http://www.ctan.org/tex-archive/macros/latex/contrib/grid-system Very little documentation on it. When I tried adding a \figure in a cell, I get Latex error. \documentclass[12pt,notitlepage]{article}% \usepackage{float}

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • Simple grid system made out of CSS columnsApril 15

    I have been researching and experimenting with HTML5 and CSS3. I was aiming to create a very simple but efficient tiled gallery / grids. So some sort of grid system that I can layout anything inside. Below is what I have created, what are your opinio

  • SASS grid system improvementsJune 3

    I've got this own made grid system made in SASS: @import "../mixins/cross-browser-elements/box"; $columns: 12 !default; $gutter-width-px: 20px !default; @function calculate-column-width($index) { @return percentage($index / $columns); } .row { o

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • Grid System Comparison: Bootstrap 3 vs. Foundation 5

    Grid System Comparison: Bootstrap 3 vs. Foundation 5January 6

    Bootstrap and Foundation are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look

  • How to display a grid system on adobe muse for easier design ?February 20

    I downloaded adobe muse and I find it perfect ! However I wonder if there is some plugin or page option or view that can display a grid system on the screen so I can arrange my components easier ? And by grid I mean X,Y grid no only Y grid like 960 g

  • Simple mobile-first/responsive Grid System (w/ IE8 Support)March 18

    I now use a grid system similar to that of the one created by André Luís located here: http://andr3.net/blog/post/142 and evolved by Lea Verou located here: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Made my first g

  • How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? September 7

    Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • My Grid system using bootstrap is not working properly

    My Grid system using bootstrap is not working properlyJanuary 25

    I wrote simple grid system using bootstrap and compiled in chrome. but those grid system is not displaying properly. code:- <!doctype html> <html> <head> <title>Gris system</title> <link rel="stylesheet" href=&qu

  • Ionic grid system 3x3 not applying

    Ionic grid system 3x3 not applyingFebruary 2

    I am trying to create this with the grid system of Ionic My html code: <ion-content> <div class="row responsive-md" > <div class="col col-33"> <div> <a ng-repeat="gin in gins" href="#">

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.726 s.