Style image withing JavaScript/Jquery code

I have some example code I copied and the original example was linked to about three huge bootstrap css files. I would guess 90+ percent I do not need and the other 10 percent I want to change so I decided to write my own styles.

I have hit on a couple of problems:

1/ How do I edit an image within a text area e.g. add a border and some padding?
The code html code is below and as you can see no image tags:


<textarea rows=3 id="points2" name="points2" class="canvas-area" disabled
				placeholder="Shape Coordinates"
				data-image-url="uploads/1_1406320475_XSE.jpg" ></textarea>

The canvasarea code is:


.canvas-area {
	float: left;
	width: 600px;
	height: 120px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-border-radius:15px;
	overflow: auto;
	margin: 0 0 10px 0;
}

2/ It is probably not good practice to do this but I am going to have a page and align everything to the left as I want to accommodate images side by side up to 1500px depending what the user uploads.
I can get the effect I want on a simple html page with:


body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333
}

p {
    padding: 10px;
}

#wrapper {
    width: 3500px;
}

#header {
    float: left;
    height: 75px;
    width: 3500px;
    background: #FF6633;
}

#navigation {
    float: left;
    height: 40px;
    width: 3500px;
    background: #FFCC33;
}

#content {
    float: left;
    background: #FFFFFF;
    width: 3500px;
}

#footer {
    height: 40px;
    width: 3500px;
    background: #33FF66;
    clear: both;
}

.imageContainer{
padding: 10px 0 10px 10px;
float: left;
width: auto;
}

Html:

<body>
    <div id="wrapper">
        <div id="header">
            <p>This is the Header</p>
        </div>
        <div id="navigation">
            <p>This is the Menu</p>
        </div>
        <div id="content">
		
	
           <div class="imageContainer">
		   <img src="image.PNG">
		   </div>
		   <div class="imageContainer">
		   <img src="image.PNG">
		   </div>
	
		
       </div>
        <div id="footer">
            <p>This is the Footer</p>
        </div>
    </div>
</body>

But as soon as I try this with the page containing the javascript it fails.

This is the original demo I am basing my new code on; but as I say my images could be up to 1500px wide.

I suppose I could go back to using the bootstrap files but still need a way so that my image/text area can grow.

My page layout wants to be:
Header > left aligned 960px wide
Navigation > left aligned 960px wide
Content > left aligned 3500px wide
Text area > left aligned 50% wide Text area > left aligned 50% wide
Result > left aligned 1500px wide
Footer > left aligned 1500px wide

Please can somebody help me with this problem.

Hi,

I’m not sure what you are asking as you can’t have an image in a textarea (only text). If you mean the image under the text area then I guess the code you are using uses JS to take the data attribute value (your image source) and apply it to a dynamically generated canvas element.

The generated code looks like this:


	<div class="span6">
								<h2> Image 1 </h2>
								<textarea rows="3" name="coords1" class="canvas-area input-xxlarge" disabled="" placeholder="Shape Coordinates" data-image-url="http://farm8.staticflickr.com/7259/6956772778_2fa755a228.jpg">208,221,208,202,198,199,201,191,218,176,229,155,221,132,196,117,169,131,157,158,163,172,177,164,173,180,190,185,192,199,187,201,185,222</textarea>
								<br>
								<canvas width="365" height="500" style="background: url(&quot;http://farm8.staticflickr.com/7259/6956772778_2fa755a228.jpg&quot;) repeat scroll 0% 0% transparent;"></canvas>
								<br>
								<button type="button" class="btn"><i class="icon-trash"></i>Clear</button>
						</div>

The original source code is just the textarea:


	<div class="span6">
								<h2> Image 1 </h2>
								<textarea rows=3 name="coords1" class="canvas-area input-xxlarge" disabled 
        placeholder="Shape Coordinates" 
        data-image-url="http://farm8.staticflickr.com/7259/6956772778_2fa755a228.jpg">208,221,208,202,198,199,201,191,218,176,229,155,221,132,196,117,169,131,157,158,163,172,177,164,173,180,190,185,192,199,187,201,185,222</textarea>
						</div>

I don’t think css is any help here unless you are adding the structure manually?

That’s the page we’d need to see :wink:

An easier way to make horizontal pages is to use inline-block instead of float and then just white-space:nowrap on the parent to stop the blocks from wrapping.
This means that you don’t need to set widths as such. I’m not sure if it is applicable in your scenario but is a beter method than setting widths on floats or containers just to force things wide.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	text-align:center;
	white-space:nowrap;
}
.horizontal {
	display:inline-block;
	vertical-align:top;
	white-space:normal;
	margin:0 5px;
	border:1px solid red;
}
</style>
</head>

<body>
<div class="wrap">
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal --> 
		
</div>
</body>
</html>


I don’t think css is any help here unless you are adding the structure manually?

No all that I have is this on the page and as you can see the image is called within the text area using “data-image-url”:


<textarea rows=3 id="points2" name="points2" class="canvas-area" disabled 
				placeholder="Shape Coordinates" 
				data-image-url="uploads/1_1406320475_XSE.jpg" ></textarea>

Adding image styling to the text area has no effect on the image within it.

An easier way to make horizontal pages is to use inline-block instead of float and then just white-space:nowrap on the parent to stop the blocks from wrapping.
This means that you don’t need to set widths as such. I’m not sure if it is applicable in your scenario but is a beter method than setting widths on floats or containers just to force things wide.

I will give this a go later and see what happens.

The image isn’t in the textarea it’s in a canvas element that follows the textarea and is built dynamically with js taking the value from the data attribute to construct the
whole thing. If you wanted to target it with css you’d have to do something like:


.canvas-area +br + canvas{
border:1px solid red;
height:300px;
width:200px;
}

Yes that worked thank you Paul and I will test the other part out later.

I think there has been some misunderstanding with the page layout Paul. Unless I have done something wrong I have one very wide page. I still want a vertical page layout but the two divs with the text area and image can spread out sideways as both the image sizes could be up tp 1500px wide and I do not want them overlapping.


Header > left aligned 960px wide
Navigation > left aligned 960px wide

Content > left aligned 3500px wide |


Text area > left aligned |Text area > left aligned |


Result > left aligned 1500px wide
Footer > left aligned 1500px wide

Hi,

I’d need the full code for that section but it looks as thugh you are using text-align:center on the parent of the inline-locks which will center them both in the viewport. Remove the text-align:center from the parent and they will left align (you can always center the text elements if you want individually).

If the images are overlapping then either they are bigger than the dimensions you have allowed or something else is being applied from somewhere. You can give a right margin to the first element to keep the second one over a bit.

I really need to see a live example of what you have so far or a working demo to play with to be more specific :slight_smile:

I think you are looking for something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	text-align:left;
	white-space:nowrap;
}
.horizontal {
	display:inline-block;
	vertical-align:top;
	white-space:normal;
	margin:5px 0;
	border:1px solid red;
}
.header, .main, .footer {
	width:960px;
	background:red;
	min-height:100px;/* for testing*/
}
.horizontal:first-child {
	margin-right:20px
}
</style>
</head>

<body>
<div class="header">Header</div>
<div class="wrap">
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal --> 
</div>
<div class="main">Content</div>
<div class="wrap">
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal -->
		<div class="horizontal">
				<h2>Horizontal</h2>
				<p>Keep all your images and content in here for each block</p>
		</div>
		<!-- end horizontal --> 
		
</div>
<div class="footer">Header</div>
</body>
</html>

You wrap each pair of images in the wrap container and not the whole site and that allows the other elements to be just the 960px that you want.

I have some text-align:center but in places like the footer and result divs which I do not think will have a lot of effect.

The site is in development on my localhost at the moment and most of my security is in place but I do not want to allow public access.

I will try your example code out and see how I get on.

It has taken a while to get back onto this and in the end I used the example from Paul O’B in post #8 which is working well except for one small problem and that is the image jumps up beside the text box if it is under a certain size!

If what is under a certain size?.. the image or the text box? :scratch: :stuck_out_tongue:

This is an extreme example and unless I make lots of images at different size I am not sure of the exact size the change happens.
The spider is 120px x 120px and an image of 268px wide is the same; but a 393px wide image drops below again.

It looks like it could be a IE problem as it looks OK in FF.

This is the relavant code from FF inspector which includes the code generated by the JQuery code:


<div class="horizontal_border">

    <h3></h3>
    <br></br>
    <textarea id="points1" class="canvas-area" data-image-url="uploads/1_1406964913_ZRN.png" placeholder="Shape Coordinates" disabled="" name="points1" rows="3"></textarea>
    <br></br>
    <canvas style="background: url("http://localhost:1234/paul/uploads/1_1406964913_ZRN.png") repeat scroll 0% 0% transparent;" height="120" width="120"></canvas>
    <br></br>
    <button class="btn" type="button"></button>

</div

Have you tried setting the textarea to display:block to stop images rising up alongside?

I tried adding display:block; to the class=“canvas-area” and adding style=“display:block” to the < teaxtarea > without effect.

Do you have this on the development site link you previously PM’d me?

I have just uploaded the latest version.

Looks like you are still floating the canvas -area.

Try this:


.canvas-area{float:none}


Yes that fixed it, thanks again Paul.