Thread

Hi,

I’ve been all over the web trying to find the right CCSore JS for allow a Text Box top confirm to the browser size,
yet stay clear of the product image as clearly seen here 😊

Second, I have created navigation, but looking for code help that when I click on “Benefits”, the textarea will switch to a different paragraph than the default shown….  Again, please refer to the link seen here

Any advice to point me in the right direction is much appreciated!  :lol:

Best Regards,

Digigumball

Hi Digigumball:

There are many ways to accomplish what you’re looking for and how you have contracted the page layout as well as the field structure of your setup in EE will have a lot to do with the advice you are given.

In terms of the width of the text area to stay clear of the image - that’s a tough one.  Since the image is a background, it doesn’t interact with the text, which is an inline element.  And your background image changes orientation based on the dimensions of the viewer, so it would be very difficult to plot a relative position or sizing for that container that would keep the text from overlapping the bottle.

In terms of changing the text within the body area of the page from quality, benefits and buy content, it comes down to how you have your fields setup in EE.  Are each of those product-related paragraphs in their own fields within a single product entry?  If they are, then you could simply load them on the basis of a url segment.  You could get a bit fancier with it with javascript/ajax if you want the content to load without the url changing, but just out of the box with EE, loading the content based on an additional segment at the end of your url for benefits, for example, would be simple.

Hard to be more specific than that without knowing more about your setup.  Hope this helps.

You could get a bit fancier with it with javascript/ajax if you want the content to load without the url changing.

Hi John,  That’s exactly what I want to do is to use javascript/ajax to allow the text content to load without changing the URL.

For the first issue with the text not overlapping the bottle, is there a way of having the textarea use the relative sizing of the browser itself to determine textarea size since it can not respond to the background image?

Thanks in advance for your help!

Best,

Digigumball

Hmm. Well, there’s a really good tutorial on the subject on css-tricks.com but it still involves a segment in the url, if only to provide direct access to the page content based on a unique URL, even if the content itself is really technically only in a single page.  Ajax isn’t my area, so I can’t be more help on that front.

To your second question - it’s possible, but potentially difficult.  If the background was also a percentage of the browser AND its position was fixed, yes.  But not as it’s configured right now.  The centering of the image makes it a moving target, so you could come close, but the best way to achieve that would be for the background and the container to both be relative to the same thing - then they would naturally be relative to one another as well.  Under those circumstances, yes, you could make the content area relative width and have its position relative to the background image within your control because their proportions and position relative to one another would remain the same even as their actual dimensions adjust to fit the browser window.

John,

For dynamic content replacement,  I’ve been on the same tutorial for the last hour!  http://css-tricks.com/examples/DynamicPage/#index.php

As far as the second question, to make the background also a percentage of the browser AND its position was fixed, making the content area relative width and have its position relative to the background image, sounds equivalent to playing twister!

Do you have a CSS example, or code to get started?

Right now the Content area - width: relative (I need to define css for this area - only using )

background - position: relative (I need to edit the IDs #bg img & #bg div in css)

Best,

Digigumball