Jump to content

Unable to fix an image (or transparent color area) to stay over a textarea as it is moved or resized, or page is moved


SerenityNetworks

Recommended Posts

I'm using the skew functionality to superimpose an image or a transparent color over a textarea. I want the image to move as the textarea moves. For example, I have a video playing to the left of the textarea. If I resize the video then I want the image to move and stay in its place over the textarea. If I resize the textarea then the image should resize to the same width. It is doing just what I want in aligning the image to the left of the textarea and then to the width of the textarea.

 

But it is not working for putting the image at the top of the textarea and moving it as the page scrolls or different page elements move the textarea up or down on the page. I can't figure out the behavior at all. What am I doing wrong or what could I do differently to achieve my goal of keeping an image or transparent color over the same place on a textarea?

 

Thanks in advance,

Andrew

		function getJSONloc() {			var element = document.getElementById('id01'); //id01 is the json textarea			var rect = element.getBoundingClientRect();			var elementLeft,elementTop; //x and y			var scrollTop = document.documentElement.scrollTop?			                document.documentElement.scrollTop:document.body.scrollTop;			var scrollLeft = document.documentElement.scrollLeft?                   			                 document.documentElement.scrollLeft:document.body.scrollLeft;			var elementTop = rect.top+scrollTop;							// pixels from top of page			var elementLeft = rect.left+scrollLeft;							// pixels from left of page			var elementWidth = document. getElementById('id01').clientWidth;	// pixel width of element (json textarea)			jsonFunction03(elementLeft);	//moves highlight for json area to the left margin of the json area			jsonFunction04(elementTop);	//moves highlight for json area to the top of the json area			jsonFunction07(elementWidth);	//sets the highlight as the width of the json area		}
Link to comment
Share on other sites

sounds like just css alone solves 90% of your problems.

<div class="container"><textarea class="overlay"></textarea><img src="" class="underlay"></div>
 .container{  position: absolute;} img.underlay{  position: absolute;  z-index:0;  background-color: red;// or whatever color or background-image you want...  width:100%;  height:100%;  top:0;} textarea.overlay{  position: relative;  opacity: 0.5;  z-index:1;}

then use what ever code you already have to resize the textarea.if you want them to stick the window without scrolling away simply switch contiainer's position to fixed and play with top and left styles to put it were you want it to be on the screen regardless of scrolling.

Edited by Hadien
Link to comment
Share on other sites

You need container element that tightly fits round the textarea element. This is usually done using float or display: inline block; you then add position: relative; to this element.With image you need to use position: absolute; and then use top:0; bottom:0; left:0; right:0; this causes the image to always be the same size as outer container element which should be the same as textarea, as the position of outer edges of image is determined by outer edges of container element.If you wish to use position: fixed; so container, textarea and image remain fixed within browser window, add a extra outer container, where you will have option to use media queries to swap from fixed to relative positioning depending on device where position: fixed is not ideal, without affecting original design.

Link to comment
Share on other sites

Thank you!

 

I've been redirected on my work for a bit, so it will be a day or so before I can get back to this. But I wanted to reply, so it isn't thought I'm ignoring your efforts.

 

Thank you again. I'll dig back into this as quickly as I can.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...