BJOBrien Posted May 16, 2015 Share Posted May 16, 2015 I have three canvasses on my web page as illustrated here: https://www.dropbox.com/s/4wpsqfoboyi43um/ccs.png?dl=0I've been trying to control how they are positioned and scrolled.Grey Canvas:Is locked to the top of the web page and only scrolls horizontally.Brown Canvas:Is locked to the left side of the web page and only scrolls verticallyBlue Canvas:Is free to scroll horizontally and vertically.As the blue canvas scrolls vertically so does the Brown Canvas.As the blue canvas scrolls horizontally so does the Grey Canvas.The z-index is shown so as to illustrate how objects are stacked.I have attempted to use Google chrome (F9) to get this right but have failed miserably.Any help is appreciated.TIAB. Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 18, 2015 Share Posted May 18, 2015 An image of how a page is supposed to present and behave tells me absolutely nothing about the code which is where any solution is going to reside. If you can post a link to the live page, or post the code I might be able to help but with nothing but an image I have no idea what you need. Link to comment Share on other sites More sharing options...
BJOBrien Posted May 19, 2015 Author Share Posted May 19, 2015 This is the html of the three canvasses.https://www.dropbox.com/s/mashfba4cwvl2cq/experiment.html?dl=0 Link to comment Share on other sites More sharing options...
BJOBrien Posted May 19, 2015 Author Share Posted May 19, 2015 I'm thinking this can only be done with javascript. Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 20, 2015 Share Posted May 20, 2015 I get nothing at that dropbox link. Just post a link to the page or post the code so we are not bouncing around between sites looking for code. Link to comment Share on other sites More sharing options...
BJOBrien Posted May 20, 2015 Author Share Posted May 20, 2015 sorry... drop box let me down... <html> <head> <style type='text/css'> canvas.headerCanvas { position:fixed; top:0; left:0; height:50px; width:1000px; background-color:grey; /* just for testing, delete later */ border:3px red solid; /* just for testing, delete later */ z-index:2; } canvas.leftCanvas { position:fixed; top:0; left:0; height:950px; width:50px; background-color:yellow; /* just for testing, delete later */ border:3px red solid; /* just for testing, delete later */ z-index:1; } canvas.bodyCanvas { position:fixed; top:0; left:0; display:block; height:1000px; width:1000px; background-color:blue; /* just for testing, delete later */ border:3px red solid; /* just for testing, delete later */ z-index:0; } </style> </head> <body> <canvas id='CanvasH' class='headerCanvas'></canvas> <canvas id='CanvasL' class='leftCanvas'></canvas> <canvas id='CanvasB' class='bodyCanvas'></canvas> </body></html> Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 20, 2015 Share Posted May 20, 2015 Based on what you have there you have 3 canvases sitting ontop of each other at the top left of the viewport. Using fixed means they are position relative to the viewport edge. If you want to move them around you will need to use Javascript to reference them by Id to alter the style. for example document.getElementById('CanvasH').style.left='200px'; would move that box to a position 200 pixels from the left edge of the viewport. If you wanted the move to be animated instead of a jump you would either need to use a javascript loop to change the value as timed intervals; but it would be easier to have a second class for the element with a different position and a transition property to do the move. Generally for this kind of dynamic you are better to use position:absolute so it positions relative to the body instead of the viewport. From a design perspective I don't see moving a canvas which, I would expect to have animation, as something the user would view as positive, unless the purpose of the site is to demonstrate impractical effects. Generally too much motion on a web page is not a good idea and stacking effects normally has a result of user leaving the site. Link to comment Share on other sites More sharing options...
BJOBrien Posted May 20, 2015 Author Share Posted May 20, 2015 Would you agree that it might be time to move this thread to the Javascript group? I think I need to move the layer 0 and 1 around with java script (as you recommended) and just let layer 0 do it's own thing. Think of this like a spread sheet.. where column 0 doesn't move (horizontally) and row 0 doesn't move vertically. I respect your opinion on limiting motion but this would seem like a pretty standard interface, wouldn't it? Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 21, 2015 Share Posted May 21, 2015 Moving it to javascript seems to make sense if you are going to use javascript for dynamic positioning rather than CSS. However the reference to a spreadsheet has me confused. I can't think of any sort of design where canvas would be an appropriate element for implementing a spreadsheet style application. What you might actually need is flexbox: http://www.w3schools.com/cssref/css3_pr_flex.asp Link to comment Share on other sites More sharing options...
BJOBrien Posted May 23, 2015 Author Share Posted May 23, 2015 (edited) Moving it to javascript seems to make sense if you are going to use javascript for dynamic positioning rather than CSS. However the reference to a spreadsheet has me confused. I can't think of any sort of design where canvas would be an appropriate element for implementing a spreadsheet style application. What you might actually need is flexbox: http://www.w3schools.com/cssref/css3_pr_flex.asp Thanks I will look at that. Row 0 is 'like' an x axis while column 0 is the time axis. I draw the entire plot on the canvas and as I scroll it around... (I can't fit the entire plot on the screen and don't want to use a zoom as the detail when everything is viewable is too small.) So as I pan the canvas I want the axis to move.... Another example that fits this paradym is a map that you scoll and the x/y axises are lat/long. Thanks for your input... Always ready to hear any suggestions. Edited May 23, 2015 by BJOBrien Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now