Center the content of div on a image using jQuery based on the text box text typed

niceoneishere
niceoneishere used Ask the Experts™
on
Hello There,

Here is my product layout of my test site.

Test Product Layout

I am showing a preview of the dog tag a customer selects and customize it. So for example when a customer types some thing in Line 1 that text is being displayed and so on.

Where I am stuck is I am not able to display the typed text onto the center of the preview image, its always showing below the image. I have tried using position relative and absolute and its no use.

Also I am stuck is when text is entered in the second line on the preview image the first line text needs to move up a little to display the second line text underneath it and so on. If there is no text in second line, the first line text needs to 100% centered.

Any advise is appreciated


Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You want to make your dog tag image a background image.

<div class="pc-prod-preview-tag">
		<img src="http://sandbox.silverpawtags.com/wp-content/uploads/2016/08/preview-tag.jpg" alt="preview">
		<div class="div-preview">
		 <div id="pc-line1-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		  <div id="pc-line2-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		 <div id="pc-line3-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		 <div id="pc-line4-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		 <div id="pc-line5-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		 </div>
		</div>

Open in new window

Should become
<div class="pc-prod-preview-tag">
		
		<div class="div-preview">
		 <div id="pc-line1-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		  <div id="pc-line2-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		 <div id="pc-line3-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		 <div id="pc-line4-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		 <div id="pc-line5-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		 </div>
		</div>

Open in new window


Then use css to make the image <img src="http://sandbox.silverpawtags.com/wp-content/uploads/2016/08/preview-tag.jpg" alt="preview"> a background to the parent div.pc-prod-preview-tag
Top Expert 2008
Commented:
Good comments. I found when I tested it, the text was still not centering within the image. When I modified your code, the following seemed to work:

<div class="pc-prod-preview-tag" style='background-image: url("http://sandbox.silverpawtags.com/wp-content/uploads/2016/08/preview-tag.jpg");'>
		
	<div class="div-preview" style="align-items: center;display: flex;justify-content: center;flex-direction: column;text-align: center;height: 114%">
		<div id="pc-line1-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		<div id="pc-line2-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		<div id="pc-line3-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		<div id="pc-line4-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
		<div id="pc-line5-preview" style="width:100px;"><span style="font-size: 150px;"></span></div>
	</div>
</div>

Open in new window


The items within the style="" should be defined in the CSS for the pc-prod-preview-tag and div-preview classes.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
, the text was still not centering within the image

Make sure the text in each div is centered https://developer.mozilla.org/en-US/docs/Web/CSS/text-align as well as your background https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

You may find it easier to use an external style sheet rather than inline styles (style="width:100px;"><span style="font-size: 150px;">). This way, when you need to make a change, you only need to change in one place.  It is also easier to work with javascript too.
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Top Expert 2008

Commented:
Hi Scott,

Just an FYI, I'm not the user who posted the question. I'm just looking at the question and trying to pitch in :)
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Here is an example to work from

https://jsbin.com/xahunuwere/edit?html,output
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
         .pc-prod-preview-tag{
         
         width:200px;
         height:200px;
         background-image: url("http://sandbox.silverpawtags.com/wp-content/uploads/2016/08/preview-tag.jpg");
         
         }
        .div-preview{
          padding-top:70px;
         text-align:center;
        }
        .div-preview span{
          display:inline-block;
         
        }
        
      </style>
   </head>
   <body>
      <div class="pc-prod-preview-tag">
         <div class="div-preview">
            <div id="pc-line1-preview" class="line one"><span>line 1</span></div>
            <div id="pc-line2-preview" class="line two"><span>line 2</span></div>
            <div id="pc-line3-preview" class="line three"><span>line 3</span></div>
            <div id="pc-line4-preview" class="line four"><span>line 4</span></div>
            <div id="pc-line5-preview" class="line five"><span>line 5</span></div>
         </div>
      </div>
   </body>
</html>

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Just an FYI, I'm not the user who posted the question
LOL, Got it.

Author

Commented:
Thanks guys I have made the changes as suggested and works pretty good so far testing on mobile devices now

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial