Solved

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

Posted on 2003-12-09
13
1,116 Views
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.

Thanks,
H
0
Comment
Question by:wjdashwood
13 Comments
 
LVL 25

Expert Comment

by:James Rodgers
Comment Utility
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

someImgeeId.style.align="left";
0
 
LVL 10

Expert Comment

by:D_M_D
Comment Utility
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...


--------
D_M_D
0
 
LVL 2

Expert Comment

by:poliguin
Comment Utility
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.
0
 

Author Comment

by:wjdashwood
Comment Utility
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.

Thanks,
H
0
 
LVL 2

Expert Comment

by:poliguin
Comment Utility
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.
0
 

Author Comment

by:wjdashwood
Comment Utility
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.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 2

Expert Comment

by:poliguin
Comment Utility
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
http://www.coacoacoa.net/wysiwyg/wysiwyg5.shtm
(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.
0
 

Author Comment

by:wjdashwood
Comment Utility
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.

Thanks,
Hayley
0
 
LVL 2

Expert Comment

by:poliguin
Comment Utility
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.
0
 

Author Comment

by:wjdashwood
Comment Utility
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

H
0
 
LVL 2

Expert Comment

by:poliguin
Comment Utility
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;

if(myPage.selectedImage)
{
      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;
}
else
{
      imageWidth = ''
      imageHeight = ''
      imageAlign = ''
      imageBorder = ''
      imageAltTag = ''
      imageHspace = ''
      imageVspace = ''
      imageSrc = ''
      imageBorderColor = ''
}

window.onload = function Load()
{
      setValues();
}



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;
}
</script>



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
0
 

Author Comment

by:wjdashwood
Comment Utility
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.

Thanks,
H
0
 
LVL 2

Accepted Solution

by:
poliguin earned 470 total points
Comment Utility
ok.

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>
</form>

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).
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now