Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


How do I justify an image without using "document.execCommand(justifyleft);"

Posted on 2003-12-09
Medium Priority
Last Modified: 2012-05-04
I have a rich text area where users should be able to edit their websites. I have a function to input an image and others to alter that image. One of the other functions should align the image to the right left or center (three functions really) but I am struggling to do this.

The reason I cannot just do this simply using the "document.execCommand(justifyleft);" is because i have used this command for the alignment of the text. If I use the same function then the button for the alignmet of the text is indented as the id seems to have to be the same as the command.

I hope this makes sense.

Question by:wjdashwood
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 25

Expert Comment

by:James Rodgers
ID: 9904195
what about using the style of the image

<img src="" ...  style="align:left">
<img src="" ...  style="align:right">
<img src="" id="someImageId" ...  style="align:center">

and write the tag dynamically

LVL 10

Expert Comment

ID: 9904295
You can put it in a <div>

<div id="images" align="center">Images goes Here</div>

You can change the align dynamically using...
document.all.images.align = "left"; // or right or center

Hope this helps...


Expert Comment

ID: 9904765
use jester's idea.  pass either the reference to the image you want to align or the id of the image (which will require you to add setting the id in the image creation/edit function) and use his method to set the alignment of the image.

the one thing is that "align" is not one of the supported style attributes.  you can use .styleFloat and use left, right, none.
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 9905019
That sounds like a good answer. But how would I go about setting the id when i insert the image? Also when I align the image in this way will the text wrap around the image? I don't want the image to split the text.


Expert Comment

ID: 9905230
how are you inserting the image?

just wondering if you're using .createElement and appending it or if you're setting the innerHTML or something along that line.

Author Comment

ID: 9905356
the user will select an image from the list. The actual code editor.document.execCommand('insertimage', false, image);
is the inserting of the image. If another way is easier then I can change the way it is done.

Expert Comment

ID: 9905533
assuming that you're working with just a very simple wysiwyg editor as well as working in just IE, the following link leads you to a working example
(sorry about it being in french)

it's very simple to follow and will do most of what it seems you're asking for.

if you're working with pulling in values, you can create a javascript function that will load the initial value into your textarea.

Author Comment

ID: 9905594
i have examples of the inserting the image but I wanted to know how i give the image an id, which seems to be needed for the alligning. I can get the image inserted though I will be creating my own customised version which is a lot simpler, this is why the method of input can be changed to aid the adding of the id.


Expert Comment

ID: 9907613
the document.execCommand() does not seem to insert an id for the image (at least no one that i'm seeing), so it doesn't seem that

if you change document.execCommand('insertimage', false) to document.execCommand('insertimage', true), there will be a user interface that pops up that will allow them to choose the image that they want as well as the different tools for alignment, etc.

setting the user interface (the second argument) to true allows them to click on the image then select the icon you have for editing/adding an image and be brought back to that same interface.

the disadvantage to this is the whole pathing issue.  it seems to write out the path for the image as it pertains to the fso on the machine that is editing the file.

Author Comment

ID: 9911789
I'm not exactly sure I understood all of that.
By making the second argument false I am able to use my own interface to insert the image. I have to do this as the default interface does not do enough and is over complicated. Can I not use my own interface to assign the id to the image. If I can, do you know how?

As for your last paragraph, i'm completely lost


Expert Comment

ID: 9912400
the last paragraph was a poor attempt to try and think outloud about how setting the second parameter to true seems to pass the local file path in as the image source, which would obviously be a problem.

ok, working with your own interface, here you go:

<script language=javascript>
var myPage = window.opener;

var imageWidth;
var imageHeight;
var imageAlign;
var imageBorder;
var imageAltTag;
var imageHspace;
var imageVspace;
var imageSrc;
var imageBorderColor;

      imageWidth = myPage.selectedImage.width;
      imageHeight = myPage.selectedImage.height;
      imageAlign = myPage.selectedImage.align;
      imageBorder = myPage.selectedImage.border;
      imageAltTag = myPage.selectedImage.alt;
      imageHspace = myPage.selectedImage.hspace;
      imageVspace = myPage.selectedImage.vspace;
      imageSrc = myPage.selectedImage.src;
      imageBorderColor = myPage.selectedImage.style.borderColor;
      imageWidth = ''
      imageHeight = ''
      imageAlign = ''
      imageBorder = ''
      imageAltTag = ''
      imageHspace = ''
      imageVspace = ''
      imageSrc = ''
      imageBorderColor = ''

window.onload = function Load()

function setValues()
      document.imageForm.image_width.value = imageWidth;
      document.imageForm.image_height.value = imageHeight;
      if (imageBorder == "")
            imageBorder = "0"
      document.imageForm.image_border.value = imageBorder;
      document.imageForm.alt_tag.value = imageAltTag;
      document.imageForm.image_hspace.value = imageHspace;
      document.imageForm.image_vspace.value = imageVspace;
      document.imageForm.img_Src.value = imageSrc;

where imageForm is the form on your page and the form fields are image_width, image_height, image_border, alt_tag, image_hspace, image_vspace, image_src

Author Comment

ID: 9912491
could you give a short description of what this does please?
As i try to follow it I get that there is a selected image in the parent window, the properties of this are copied into the variables. Then what happens, what and where is the form?

Sorry, but i'm quite new to javascript so I struggle to understand it sometimes.


Accepted Solution

poliguin earned 1880 total points
ID: 9912612

the first part you have correct, it is a test to see if an image has been selected, otherwise default values are set for the different properties of an image (such as hspace, vspace, alt, src, etc.

window.onload = function Load()


is the same thing as putting

<body name="MyBody" id="MyBody" onload="Load()">

i've just gotten used to setting the load like that in js that i don't put it on the body any more.

basically, the setValues() function is assuming that you have a form that you are using to get the information from the user, something like (written out in divs for shorthand purposes):
<form name="imageForm" id="imageForm" method="post">
    <div>Image Source:<input type="text" name="img_src" id="img_src" value="" /></div>
    <div>Image alt:<input type="text" name="alt_tag" id="alt_tag" value="" /></div>
    <div>Image hspace:<input type="text" name="image_hspace" id="image_hspace" value="" /></div>
    <div>Image vspace:<input type="text" name="image_vspace" id="image_vspace" value="" /></div>
    <div>Image border:<input type="text" name="image_border" id="image_border" value="" /></div>
    <div>Image height:<input type="text" name="image_height" id="image_height" value="" /></div>
    <div>Image width:<input type="text" name="image_width" id="image_width" value="" /></div>

you access the Image Source text input in java script with the syntax document.imageForm.img_src.value, etc.  you could use document.getElementById('img_src') as well (especially considering you're not going to be worried about nn 4.x or IE browsers that don't support document.getElementById() with what you're trying to do).

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question