SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Jan 23, 2008, 07:02 #1
- Join Date
- Aug 2007
- Posts
- 154
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
trying to wrap images around text editor content
Hi, not sure if this will make any sense whatsoever but here goes:
i'm working on a CMS which up till now contained sections where, for example, a new article could be uploaded with an accompanying photo (via PHP). I used Javascript to determine the dimensions of the image before either wrapping text alongside it, or (if it exceeded a certain width) placing the image underneath the article text. The html code for this was simply:
Code:<p><img src = ......../>The main article content</p>
Now I've had to add a texteditor to this area, which causes a problem as i still want to be able to wrap text round images of a certain width, however, the above approach no longer works as the text editor generates html tags. Therefore i can no longer place the image within the first paragraph tag.
Is there any way i can use Javascript to wrap text round images in this context, where the text will be a sequence of paragraphs?
-
Jan 23, 2008, 07:41 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
I'll bash out something quick before grabbing some sleep.
Code Javascript:function wrapImages(section) { var section = document.getElementById('section'); var images = section.getElementsByTagName('img'); var i, parent; for (i = 0; i < images.length; i++) { if (sizeTest(images[i]) === true) { // get previous paragraph para = images[i].previousSibling; while (para.nodeName !== 'P' || para.nodeName === 'BODY') { para = para.previousSibling; } if (para.nodeName) === 'P') { // move image into paragraph para.firstChild.insertBefore(images[i], para.firstChild); } } } }
Last edited by paul_wilkins; Jan 23, 2008 at 13:52.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jan 23, 2008, 08:05 #3
- Join Date
- Aug 2007
- Posts
- 154
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Paul, thanks for the reply. I'm pretty inexperienced with Javascript to if you could help any further that would be great.
I'm currently floating an image to the right of the text, if it's width is greater than 300px. An example of both scenarioes can be seen at http://www.antoninesportscentre.co.u...nth=1198368000
Because the text editor is likely to be generating more than one paragraph within the article, I could potentially have a number of short paragraphs which should all wrap alongside the image until they reach the end of the image. The problem I have is that by using my current approach and appending the image after the first paragraph generated by the text editor, I could then have a huge gap until the article resumes with the next paragraph underneath the image. Is it possible to create a div on the fly for the image and to wrap the text alongside the div?
The JS code i currently use is
Code:function checkImages() { var maxWidth = 300; var ps = document.getElementById('content').getElementsByTagName('p'); //loop through each paragraph and check the images attached for (i = 0; i < ps.length; i++) { var img = ps[i].getElementsByTagName('img')[0]; var resized = new Boolean("false"); if (img != null) { var height = img.height; var width = img.width; var clone=img.cloneNode(true); //check to see if image needs to be resized - 500 is the maximum width allowed if (width>500) { var reduction = 500 / width; clone.style.width = '500px'; //set new height proportional to new width var newHeight = Math.round(img.height * reduction) ; clone.style.height = newHeight + 'px'; width = 500; resized = true; } //check to see if image needs to be resized - 300 is the maximum height allowed if (!resized) { if ( height>300) { var reduction = 300 / height; clone.style.height = '300px'; //set new width proportional to new width var newWidth = Math.round(img.width * reduction) ; clone.style.width = newWidth + 'px'; width = newWidth; } } //if the image is too wide to wrap the text alongside it, move the image underneath the text if (width > maxWidth) { ps[i].removeChild(img); ps[i].appendChild(clone); clone.style.marginRight = 575 - width + 'px'; clone.style.marginBottom = '40px'; clone.style.marginTop = '20px'; } //set min height for paragraph if (img.height < 250) ps[i].style.minHeight = img.height + 60 + 'px'; else ps[i].style.minHeight = '310px'; } } }
Bookmarks