SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do we update CSS Transform() on rotation?

    I have JS code that grabs the magnetic direction and outputs in text the number in degrees. That works fine. But I want to make it visual, a pointer that rotates according to that number.

    I have a div containing an SVG graphic (N with a vertical arrow). I use this code to rotate it:

    Code:
        function onSuccess(heading) {
            var element = document.getElementById('heading');
            element.innerHTML = 'Heading: ' + heading.magneticHeading; // this shows an integer; updates every 3 seconds
            
            var north = document.getElementById("heading2");
            north.style = "-webkit-transform:rotate(" + magneticHeading + ")"; // this remains stationary instead of rotating
        }
    How do I get the div or graphic in it to rotate? How do I get it to continue rotating on update?
    Steve Husting

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is the SVG section if you need it:

    Code:
    <!-- SVG image BEGIN -->
    <div id="heading2">
    <svg version="1.1" id="heading3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
    <ellipse fill="#FFF01F" cx="100.442" cy="100" rx="99.558" ry="100"/>
    <polygon fill="#009ADF" points="127.8,58 162,58 100.8,4 37.8,58 73.8,58 73.8,192.61 127.8,192.61 "/>
    <g>
    	<path d="M36.949,167.744V66.442h23.64l52.942,51.251c12.066,11.874,21.916,22.545,29.55,32.917l0.739-0.15
    		c-1.971-13.528-2.463-25.852-2.463-41.634V66.442h20.192v101.302h-21.67l-52.696-51.402C75.61,105.069,64.529,93.497,56.402,82.524
    		l-0.738,0.15c1.231,12.776,1.477,24.95,1.477,41.784v43.286H36.949z"/>
    	<path fill="#FF1F88" d="M163.05,169.244h-23.78l-0.438-0.426l-52.696-51.402c-12.615-12.287-21.813-22.229-28.63-30.963
    		c0.939,11.501,1.135,22.917,1.135,38.005v44.786H35.449V64.942h25.747l53.378,51.673c11.709,11.522,20.447,21.082,27.179,29.754
    		c-1.556-12.467-1.896-24.164-1.896-37.543V64.942h23.192V169.244L163.05,169.244z M140.49,166.244h19.56V67.942h-17.192v40.884
    		c0,14.776,0.416,27.475,2.447,41.418l0.204,1.403l-3.067,0.624l-0.568-0.772c-6.941-9.431-16.281-19.833-29.394-32.736
    		l-52.498-50.82H38.449v98.302h17.192v-41.786c0-16.708-0.241-28.878-1.47-41.64l-0.129-1.345l2.998-0.609l0.568,0.768
    		c6.91,9.329,16.64,20.018,30.622,33.636L140.49,166.244L140.49,166.244z"/>
    </g>
    </svg>
    </div>
    <!-- SVG image END -->
    Steve Husting

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This doesn't work either:

    Code:
        function onSuccess(heading) {
            var element = document.getElementById('heading');
            element.innerHTML = 'Heading: ' + heading.magneticHeading; 
            if (heading.magneticHeading > 0) {
            	var north = document.getElementById("heading3");
        		north.style = "-webkit-transform:rotate(" + heading.magneticHeading + "deg)";
            }
        }
    As a test, adding the CSS directly to the element does indeed rotate it:

    Code:
    <svg version="1.1" id="heading3" x="0px" y="0px" style="-webkit-transform:rotate(90deg)" ....
    It just won't rotate when the innerHTML of id "heading" changes (which changes when the mobile device is rotated).
    Steve Husting

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    My apologies. I think this belongs in the JavaScript forum.
    Steve Husting

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This doesn't work:

    Code:
       function onSuccess(heading) {
            var element = document.getElementById('heading');
            element.innerHTML = 'Heading: ' + heading.magneticHeading;
            // key, value pair into localStorage to access it in next function
        	localStorage.setItem('direction', heading.magneticHeading); 
        	active();
        }
        
        function active() {
         var direction = localStorage.getItem('direction'); // get data from localStorage
        	var north = document.getElementById("heading3");
        	north.style = "-webkit-transform:rotate(" + direction + "deg)";
        }
    Steve Husting

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Are my posts too complicated? Is more information needed?
    Steve Husting


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •