Div content, inline images, contain scroll methods

MacPro, DW CS6
Swap Image function
Using inline image row, responsive divs, as secondary navigation (Back-Home-Next text navigation in div above) for swap image pages. I would like to contain the div to the div container width, but avoid the stacking on down size to notePad, then mobile. Do not want to use scrollbars, but would like to emulate slideshow type of function, to allow nav images to move left or right as needed by viewer, with remainder hidden until appearance is needed.
Although I could use PowerPoint, Bridge or easyRotator, I would prefer to use pages as I've coded as I intend to use throughout site for art presentations.
View on server at: http://www.satgraphics.com/SR-71/pages/gallery1_pg1.htm
Thanks in advance,
Joe Satterwhite
SatGraphics.com
ScreamingEagles.com

I require different (text) information in its own div to display with each image, and have created a different page for each, to enable navigation through entire series sequentially.
IMO, that's a very clumsy approach to gallery presentation. You could just as easily create one page for each gallery using jQuery and Fancybox with inline content. To illustrate my point, copy & paste this code into a new, blank document. Save & preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 with Divisions</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles thumbnail container**/
#thumbs p {
    float: left;
    width: 180px;
    margin: 10px;
    padding: 10px;
    text-align: center;
    border: 1px solid silver;
    /**optional rounded borders**/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
/**use same size thumbnail images throughout**/
#thumbs img {
    width: 160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
    content: "";
    clear: left;
    display: block;
/**content**/
#detail-01, #detail-02, #detail-03 {
    display:none;
img {max-width:100%; margin:0 auto; display:block}
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2 Gallery</a> with images & divs</h1>
<h2>Details are hidden until thumbnails are clicked.</h2>

<div id="thumbs">

<p><a class="inline" data-fancybox-group="gallery" href="#detail-01"><img src="http://placehold.it/160x120&text=THUMBNAIL 01" alt="Thumbnail 01" />
</a></p>

<div id="detail-01">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 01"><h3>Heading 3</h3>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>

<p><a class="inline" data-fancybox-group="gallery" href="#detail-02"><img src="http://placehold.it/160x120&text=THUMBNAIL 02" alt="Thumbnail 01" />
</a></p>

<div id="detail-02">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 02"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>

<p><a class="inline" data-fancybox-group="gallery" href="#detail-03"><img src="http://placehold.it/160x120&text=THUMBNAIL 03" alt="Thumbnail 01" />
</a></p>

<div id="detail-03">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 03"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>
</div>

<script>
$(document).ready(function() {
$("a.inline").fancybox({
'transitionIn'    :    'elastic',
'transitionOut'    :    'elastic',
'speedIn'        :    600,
'speedOut'        :    400,
'autoScale'            : true,
'overlayOpacity'    : 0.8,
'overlayColor'    : '#505050'
</script>
</body>
</html>
Nancy O.

Similar Messages

In the paragraph after a conditional build tag, an inline image gets wrapped in a div tag

Hi,
TCS5, so FM 12 and RH11. I have successfully applied some conditional build tags by turning off the apply conditional build tag setting and using the Conditional Build Expression in the WebHelp properties instead.
In RoboHelp, everything looks correct. I generate WebHelp and suddenly, a div tag is wrapped around the inline image in the paragraph that followed the text marked conditional.
This did not happen with TCS 4 (FM11, RH10). I am not sure why this div tag is applied only when I generate the help. Any thoughts on what to check?
Lauren

Hi lauren,
I tried to replicate the above mentioned issue, but did not get the <div> around the image in Webhelp output. Would it be possible for you to provide more information on this:
At what point does the <div> start appearing around the image, as soon as the CBT expression is applied?
If yes, what is the expression?
What happens when expression is set to None again and individual CBT is under application
Is there a spacing or the CBT text just follows the inline image?
Please send us a sample file for the same, if possible. Thanks!
Amit

Save mx:HTML full content to image

After searching my pants off for the correct approach for this, I need some help regarding this. I want to save the contents of an html component to an image (png/jpg/whatever) in the filesystem. The added bonus, is that I want to render the entire HTML page, not just the visible part in the component.
A few approaches I tried:
- Trying to get some reference to the canvas that is drawn on in the html component, no luck (this seemed to me to be the easiest solution)
- Trying out a way of splitting the entire html page in multiple squares and creating seperate bitmaps for each viewport's content, after that combining them into 1.
Some problems I have:
- No way to get an easy reference to the entire html-canvas in the html component (that I could find).
- Lot's of other stuff that went wrong which made me think there has to be an easier way.
- Pages can become 10000px or more high easy, how do we work with bitmaps this size taking the bitmap size limit in the player into account?
I know this should be possible, since I've seen Air apps do it already (Webkut e.g.).
Any help appreciated,
Ben

I was finally able to get a working solution. I ended up using the scrolling method, in which I dispatch an event if there are more pages to process. The handler for that event then simply called the function again. This allowed the HTML component to scroll incrementally. Sample below (this is bits and pieces of my PrintManager class, which does a lot more. I haven't tested the sample below) :
private var _html:HTMLLoader;
private var page:int = 0;
public function snapshot(html:HTMLLoader):void{
var PAGE_HEIGHT:int = html.height;
     var pages:int = Math.ceil(html.contentHeight/PAGE_HEIGHT);
     var b:BitmapData;
     // make global reference to html object
     _html = html;
     //global counter of pages;
     page++;
     // Register Listners
     FlexGlobals.topLevelApplication.addEventListener('NEXT_PAGE_PLEASE',nextPageHandler);
     FlexGlobals.topLevelApplication.addEventListener('PRINT_JOB_COMPLETE',pringJobCompleteHandler);
     // Without the timeout the window doesn't refresh in time to take a snapshot
     setTimeout(function():void{
          b = new BitmapData(PAGE_WIDTH+50,PAGE_HEIGHT);
          b.draw(html);
          /* Code here to write the image to disk or whatever */
          // Ok, here's the magic. If there are more pages to process we need to dispatch an event
          // telling our printer to execute this method agian. If it is the last page we need to
          // create the pdf and present it to the user. Then reset the global vars used.
          if(page < pages){
               FlexGlobals.topLevelApplication.dispatchEvent(new Event('NEXT_PAGE_PLEASE'));
          }else{
               FlexGlobals.topLevelApplication.dispatchEvent(new Event('PRINT_JOB_COMPLETE'));
     },100);
public function nextPageHandler(e:Event):void{
     FlexGlobals.topLevelApplication.removeEventListener('NEXT_PAGE_PLEASE',nextPageHandler);
     _html.scrollV = _html.scrollV+_html.height;
     // This will snapshot the next screen.
     snapshot(_html);
public function pringJobCompleteHandler(e:Event):void{
     FlexGlobals.topLevelApplication.removeEventListener('PRINT_JOB_COMPLETE',pringJobCompleteHandler);
     trace('print job complete');
     page = 0;
Like I said, I copy/pasted bits and pieces from my class to post here. You probably need to tweak it to get it to work. One of the things I left out here was logic to calculate and clip the last page, since the last page likely contains the previous page you need to determine the height of the last page and use something to clip it. I actually used BitmapData.copyPixels and copied a rect in the correct position and size from a temporary snapshot of the page.
--Abram

How to add a link to a report inline image?

Hi,
I use apex 3.1.2
I have made a report where I show a small inline image. The image is stored as a blob in the db (IMAGE:XXSMALLPICS:PICTURE:ID::::::inline:Download). It works fine, but I would like to add a link to the small image so that if I click on the image a larger image shows in a popp up window.
How can that be done?
I don't succeed to add any type of link to the image.
/Erik

Hi Sam,
Firstly, you have an error in your SQL statement:
SELECT FILE_NAME,
'<img onclick="javascript:showImage(this);" >src="#OWNER#.DISPLAY_IMAGE?inID=' || NVL(IMAGE_ID, 0) || '" >height="50" width="50" />' IMAGE
FROM A_IMAGES
ORDER BY FILE_NAMEYou have an extra > - it should be:
SELECT FILE_NAME,
'<img onclick="javascript:showImage(this);" src="#OWNER#.DISPLAY_IMAGE?inID=' || NVL(IMAGE_ID, 0) || '" height="50" width="50" />' IMAGE
FROM A_IMAGES
ORDER BY FILE_NAMEFor the Region Header - I just click on the report in the page definition and scrolled down to the setting called "Region Header". Then I pasted in:
<div id="imagediv" style="display:none; position:absolute; top:0px; left:0px; height:0px; width:0px; margin:0px; padding:0px; border:0px; background-color:whitesmoke;" align="center" onclick="javascript:closediv();"><table style="border:0px; padding:0px; margin:0px; width:100%; height:100%;" cellpadding=0 cellspacing=0><tr><td style="vertical-align:middle; text-align:center">
<img id="largeimage" src="" style="border:3px double darkblue;">
</td></tr></table>
</div>
<script type="text/javascript">
var iDIV = document.getElementById("imagediv");
var iIMG = document.getElementById("largeimage");
function showImage(i)
iIMG.src = i.src;
iDIV.style.width = document.body.clientWidth;
iDIV.style.height = document.body.clientHeight;
iDIV.style.display = "block";
function closediv()
iDIV.style.width = 0;
iDIV.style.height = 0;
iDIV.style.display = "none";
iIMG.src = "";
</script>If you go back to my page, you will see that I have added two screenshots (Page41ReportSource.gif and Page41RegionHeader.gif) that show you what I have done on my report.
Andy

Problem with large inlined images

One of the annoying aspects when inlining images is the fact that it seems to be possible to blow the margins by any amount with no limit. Once a thread contain an image a few thousand pixels wide, all posts in the thread will wrap the text at a width of several screens wide, putting entire paragraphs on single lines and forcing the reader to constantly scroll left and right while reading.
Lithium really should find a solution for this. Other forums automatically reaplace inlined images above a certain size with a smaller thumbnail version, which, when clicked would open the full-sized image in a new window.
LabVIEW Champion . Do more with less code and in less time .

P.S.
altenbach wrote:
Other forums automatically reaplace inlined images above a certain size with a smaller thumbnail version
That's an important point. I find it a bit annoying that LAVA (for example) does this even for relatively small images. Ideally, it should depend on the client's resolution, but I don't remember whether web browsers receive that information or not.
Try to take over the world!

[CS2][JS] How to scale all inline images to 70%

To all the script gurus out there. can you help me make a script that scale all inline images to 70%? 'coz we got this client and they supply us with lots of eps files then the instruction would be to reduce the size of all images without touching the original ones. it takes time to process all of them in indesign manually.
help please.

Thank you so much guys. I'll try it later. Although I have one more problem. I got this LabelGraphics script from Indesignsecret.com modified for CS2 (originally from CS3), and it works fine for displayed figures but for inline it only labels the figures in first page.
here's the code:
//LabelGraphics.jsx
main();
//=============================================================\\
function main(){
if(app.documents.length != 0){
if(app.documents.item(0).allGraphics.length != 0){
myDisplayDialog();
else{
alert("Document contains no graphics.");
else{
alert("Please open a document and try again.");
//=============================================================\\
function myDisplayDialog(){
var myLabelWidth = 100;
var myStyleNames = myGetParagraphStyleNames();
var myDialog = app.dialogs.add({name:"Graphics name"});
with(myDialog.dialogColumns.add()){
//Label type
with(dialogRows.add()){
with(dialogColumns.add()){
staticTexts.add({staticLabel:"Label Type", minWidth:myLabelWidth});
with(dialogColumns.add()){
var myLabelTypeDropdown = dropdowns.add({stringList:["File name", "File path", "XMP description", "XMP author","Paste from clipboard"], selectedIndex:0});
with(dialogRows.add()){
with(dialogColumns.add()){
staticTexts.add({staticLabel:"Label Offset", minWidth:myLabelWidth});
with(dialogColumns.add()){
var myLabelOffsetField = measurementEditboxes.add({editValue:0});
//Style to apply
with(dialogRows.add()){
with(dialogColumns.add()){
staticTexts.add({staticLabel:"Label Style", minWidth:myLabelWidth});
with(dialogColumns.add()){
var myLabelStyleDropdown = dropdowns.add({stringList:myStyleNames, selectedIndex:4});
//=============================================================\\
var myResult = myDialog.show();
if(myResult == true){
var myLabelType = myLabelTypeDropdown.selectedIndex;
var myLabelHeight = 24; // A generic label height that will be adjusted later
myPasteFailure = false;
var myLabelOffset = myLabelOffsetField.editValue;
var myLabelStyle = myStyleNames[myLabelStyleDropdown.selectedIndex];
myDialog.destroy();
var myOldXUnits = app.documents.item(0).viewPreferences.horizontalMeasurementUnits;
var myOldYUnits = app.documents.item(0).viewPreferences.verticalMeasurementUnits;
app.documents.item(0).viewPreferences.horizontalMeasurementUnits = MeasurementUnits.points;
app.documents.item(0).viewPreferences.verticalMeasurementUnits = MeasurementUnits.points;
try{
myAddLabels(myLabelType, myLabelHeight, myLabelOffset, myLabelStyle);
catch(e){
alert("Unable to add lables. " + e);
try{
resizeOverset() ;
catch(e){
alert("Unable to correct overset text. " + e);
if (myPasteFailure == true){
alert("Unable to paste from clipboard.");
app.documents.item(0).viewPreferences.horizontalMeasurementUnits = myOldXUnits;
app.documents.item(0).viewPreferences.verticalMeasurementUnits = myOldYUnits;
else{
myDialog.destroy();
//=============================================================\\
function myAddLabels(myLabelType, myLabelHeight, myLabelOffset, myLabelStyleName){
var myDocument = app.documents.item(0);
myStoriesArray = new Array();
if (app.selection.length == 0) // If nothing is selected apply caption to all graphics in the document
var myConfirmation = confirm("Add captions to all images in the document?", false, "LabelGraphics.jsx" );
if (myConfirmation == true)
var myGraphics = myDocument.allGraphics;
else
{ // If graphics are selected, just add captions to the selected items, as long as they are rectangles(image frames)
var myConfirmation = true;
var mySelections = app.selection;
myGraphics = new Array();
for(i = 0; i < mySelections.length; i++){
if(mySelections[i] == "[object Rectangle]"){ //Check to make sure selection only includes rectangles
myGraphics.push(mySelections[i].allGraphics[0]);
else{
//alert("Objects other than graphics were selected!");
//Nothing happens if you don't select at least one graphic
myLabelStyle = myDocument.paragraphStyles.item(myLabelStyleName);
if (myConfirmation == true){
for(var myCounter = 0; myCounter < myGraphics.length; myCounter++){
try{
myAddLabel(myDocument, myGraphics[myCounter], myLabelType, myLabelHeight, myLabelOffset, myLabelStyle, myStoriesArray);
catch(e){};
//=============================================================\\
function myAddLabel(myDocument, myGraphic, myLabelType, myLabelHeight, myLabelOffset, myLabelStyle, myStoriesArray){
var myLabel;
var myLink = myGraphic.itemLink;
var myPasteFromClipboard = false;
//Create the label layer if it does not already exist.
var myLabelLayer = myDocument.layers.item("Grapiks");
try{
myLabelLayer.name;
catch (myError){
myLabelLayer = myDocument.layers.add({name:"Grapiks"});
//Label type defines the text that goes in the label.
switch(myLabelType){
//File name
case 0:
myLabel = myLink.name;
break;
//File path
case 1:
myLabel = myLink.filePath;
break;
//XMP description
case 2:
try{
myLabel = myLink.linkXmp.description;
catch(myError){
myLabel = "No description available.";
break;
//XMP author
case 3:
try{
myLabel = myLink.linkXmp.author
catch(myError){
myLabel = "No author available.";
break;
//Paste from the clipboard
case 4:
try{
myPasteFromClipboard = true;
catch(myError){
myLabel = "No clipboard data available.";
break;
var myFrame = myGraphic.parent;
myX1 = myFrame.geometricBounds[1];
myY1 = myFrame.geometricBounds[2] + myLabelOffset;
myX2 = myFrame.geometricBounds[3];
myY2 = myY1 + myLabelHeight;
if (myPasteFromClipboard ==true)
try{
var myTextFrame = myFrame.parent.textFrames.add(myLabelLayer, undefined, undefined,{geometricBounds:[myY1, myX1, myY2, myX2]});
myTextFrame.insertionPoints.item(0).select();
app.paste();
catch(e){
myTextFrame.remove();
myPasteFailure = true;
else{
var myTextFrame = myFrame.parent.textFrames.add(myLabelLayer, undefined, undefined,{geometricBounds:[myY1, myX1, myY2, myX2], contents:myLabel});
myTextFrame.textFramePreferences.firstBaselineOffset = FirstBaseline.leadingOffset;
myTextFrame.paragraphs.item(0).appliedParagraphStyle = myLabelStyle;
myFrameParentStory = myTextFrame.parentStory;
myStoriesArray.push(myFrameParentStory);
//=============================================================\\
function myGetParagraphStyleNames(){
var myStyleNames = app.documents.item(0).paragraphStyles.everyItem().name;
return myStyleNames;
function resizeOverset() {
for (var j = myStoriesArray.length - 1; j >= 0; j--) {
myLastFrame = myStoriesArray[j].texts[0].parentTextFrames[myStoriesArray[j].texts[0].parentTextFrames.l ength - 1];
myNewY2 = myLastFrame.geometricBounds[3]; //get the width of the text frame before doing fit()
myLastFrame.fit(FitOptions.FRAME_TO_CONTENT);
myNewY1 = myLastFrame.geometricBounds[1];
myNewX1 = myLastFrame.geometricBounds[2];
myNewX2 = myLastFrame.geometricBounds[0];

Zooming an image and scrolling it using a JScrollPane

Hi all, I know this is one of the most common problems in this forum but i cant get any of the replys to work in my code.
The problem:
I create an image with varying pixel colors depending on the value obtained from an AbstractTableModel and display it to the screen.
I then wish to be able to zoom in on the image and make it scrollable as required.
At the minute the scrolling method is working but only when i resize or un-focus and re-focus the JInternalFrame. Ive tried calling revalidate (and various other options) on the JScrollPane within the paintComponents(Graphics g) method but all to no avail.
Has anyone out there any ideas cause this is melting my head!
Heres the code im using (instance is called and added to a JDesktopPane):
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import java.awt.geom.AffineTransform;
import uk.ac.qub.mvda.gui.MVDATableModel;
import uk.ac.qub.mvda.utils.MVDAConstants;
public class HCLSpectrumPlot extends JInternalFrame implements MVDAConstants
AbstractAction zoomInAction = new ZoomInAction();
AbstractAction zoomOutAction = new ZoomOutAction();
double zoomFactorX = 1.0;
double zoomFactorY = 1.0;
private AffineTransform theTransform;
private ImagePanel imageViewerPanel;
private JScrollPane imageViewerScroller;
public HCLSpectrumPlot(String title, MVDATableModel model)
    super(title, true, true, true, true);
    int imageHeight_numOfRows = model.getRowCount();
    int imageWidth_numOfCols = model.getColumnCount();
    int numberOfColourBands = 3;
    double maxValueInTable = 0;
    double[][] ValueAtTablePosition =
        new double[imageHeight_numOfRows][imageWidth_numOfCols];
    for(int i=0; i<imageHeight_numOfRows; i++)
      for(int j=0; j<imageWidth_numOfCols; j++)
     ValueAtTablePosition[i][j] = ((Double)model.getValueAt
             (i,j)).doubleValue();
    for(int i=0; i<imageHeight_numOfRows; i++)
      for(int j=0; j<imageWidth_numOfCols; j++)
     if ( ValueAtTablePosition[i][j] > maxValueInTable)
       maxValueInTable = ValueAtTablePosition[i][j];
    BufferedImage newImage = new BufferedImage(imageWidth_numOfCols,
          imageHeight_numOfRows, BufferedImage.TYPE_3BYTE_BGR);
    WritableRaster newWritableImage = newImage.getRaster();
    int colourB;
    double pixelValue, cellValue, newPixelValue;
    for (int x = 0; x < imageHeight_numOfRows; x++)
      for (int y = 0; y < imageWidth_numOfCols; y++)
     colourB = 0;
     cellValue = ValueAtTablePosition[x][y];
     pixelValue = (1 - (cellValue / maxValueInTable)) * 767;
     pixelValue = pixelValue - 256;
     while (colourB < numberOfColourBands)
       if ( pixelValue < 0 )
         newPixelValue = 256 + pixelValue;
         newWritableImage.setSample(x, y, colourB, newPixelValue);
         colourB++;
            while ( colourB < numberOfColourBands )
           newWritableImage.setSample(x, y, colourB, 0);
           colourB++;
     else
       newWritableImage.setSample(x, y, colourB, 255);
     colourB++;
     pixelValue = pixelValue - 256;
      }//while
     }//for-y
    }//for-x
    imageViewerPanel = new ImagePanel(this, newImage);
    imageViewerScroller =     new JScrollPane(imageViewerPanel,
                        JScrollPane.VERTICAL_SCROLLBAR_ALWAYS,
               JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);
    this.getContentPane().setLayout(new BorderLayout());
    this.getContentPane().add(imageViewerScroller, BorderLayout.CENTER);
    JToolBar editTools = new JToolBar();
    editTools.setOrientation(JToolBar.VERTICAL);
    editTools.add(zoomInAction);
    editTools.add(zoomOutAction);
    this.getContentPane().add(editTools, BorderLayout.WEST);
    this.setVisible(true);
class ImagePanel extends JPanel
    private int iWidth, iHeight;
    private int i=0;
    private BufferedImage bufferedImageToDisplay;
    private JInternalFrame parentFrame;
    public ImagePanel(JInternalFrame parent, BufferedImage image)
      super();
      parentFrame = parent;
      bufferedImageToDisplay = image;
      iWidth = bufferedImageToDisplay.getWidth();
      iHeight = bufferedImageToDisplay.getHeight();
      theTransform = new AffineTransform();
      //theTransform.setToScale(parent.getContentPane().getWidth(),
                                parent.getContentPane().getHeight());
      this.setPreferredSize(new Dimension(iWidth, iHeight));
    }//Constructor
    public void paintComponent(Graphics g)
      super.paintComponent(g);
      ((Graphics2D)g).drawRenderedImage(bufferedImageToDisplay,
                                         theTransform);
      this.setPreferredSize(new Dimension((int)(iWidth*zoomFactorX),
                                      (int)(iHeight*zoomFactorY)));
    }//paintComponent
}// end class ImagePanel
   * Class to handle a zoom in event
   * @author Ross McCaughrain
   * @version 1.0
class ZoomInAction extends AbstractAction
   * Default Constructor.
public ZoomInAction()
    super(null, new ImageIcon(HCLSpectrumPlot.class.getResource("../"+
              MVDAConstants.PATH_TO_IMAGES + "ZoomIn24.gif")));
    this.putValue(Action.SHORT_DESCRIPTION,"Zooms In on the Image");
    this.setEnabled(true);
public void actionPerformed(ActionEvent e)
    zoomFactorX += 0.5;
    zoomFactorY += 0.5;
    theTransform = AffineTransform.getScaleInstance(zoomFactorX,
                                                zoomFactorY);
    repaint();
// ZoomOut to be implemented
}// end class HCLSpectrumPlotAll/any help greatly appreciated! thanks for your time.
RossMcC

Small mistake, the revalidate must be called on the panel not on the jsp.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class UsaZ extends JFrame
     IPanel      panel = new IPanel();
     JScrollPane jsp   = new JScrollPane(panel);
public UsaZ()
     addWindowListener(new WindowAdapter()
     addWindowListener(new WindowAdapter()
     {     public void windowClosing(WindowEvent ev)
          {     dispose();
               System.exit(0);
     setBackground(Color.lightGray);
     getContentPane().add("Center",jsp);
     setBounds(1,1,400,320);
     setVisible(true);
public class IPanel extends JComponent
     Image map;
     double zoom = 1;
     double iw;
     double ih;
public IPanel()
     map = getToolkit().createImage("us.gif");
     MediaTracker tracker = new MediaTracker(this);
     tracker.addImage(map,0);
     try {tracker.waitForID(0);}
     catch (InterruptedException e){}
     iw = map.getWidth(this);
     ih = map.getHeight(this);
     zoom(0);
     addMouseListener(new MouseAdapter()
     {     public void mouseReleased(MouseEvent m)
               zoom(0.04);
               repaint();
               revalidate();
public void zoom(double z)
     zoom = zoom + z;
     setPreferredSize(new Dimension((int)(iw*zoom)+2,(int)(ih*zoom)+2));
public void paintComponent(Graphics g)
     super.paintComponent(g);
     Graphics2D g2 = (Graphics2D)g;
     g2.scale(zoom,zoom);
     g2.drawImage(map,1,1,null);
     g.drawRect(0,0,map.getWidth(this)+1,map.getHeight(this)+1);
public static void main (String[] args)
      new UsaZ();
[/cdoe]
Noah

Image Gallery & Scroll Bar

Just exploring flash as a beginner, still.
I've come across this website:
http://www.jeremiahshoaf.com/
I'm a fan of the scrolling portfolio idea the designer has used in the centre of the website's front page.
Any ideas how this is produced?
My presumption would be a MovieClip with images various other MovieClips inside (holding images etc) and then a scrollbar controlling how far across the screen the images are shown with actionscript?
Knowing me I'm wrong, but any ideas would help me out to explore and learn further.
Thanks for your great advice, as always.
.. Also, I wondered if this could be produced, and as well as the scrollbar, the ability to add scrolling with the keyboard, left and right keys? Again, only a presumption, but I was thinking this might be simple with actionscript? Simply a piece of code to tell the scrollbar to move to the next MovieClip, if my initial presumption was correct.
The above is only a small side note for those who feel they can assist - but thanks again for any help you can provide!
This forum has been a huge help to me, in learning Flash so far.
Thanks a lot.

Well first you need a really long MovieClip with some graphics inside on it. That should be simple enough to do. Then you need a scrollbar. Just a rectangle should do for now. On this MovieClip give it a MOUSE_DOWN event listener and on that event use the "startDrag" function to add dragging functionality. Add a MOUSE_UP event listener to the stage and when that happens call "stopDrag" on the scroll bar clip. Then you can have an ENTER_FRAME event that actually updates the scrolling. On this event, check the scrollbar's x position and do some math to figure out the percentage you have scrolled. It might look like this:
var percent:Number = scrollbar.x / (stage.width - scrollbar.width);
Then update the main image container by the percent:
var minPosition:Number = -500;
bigImage.x = percent * minPosition;
Hopefully that should be enough info to get you started.

How can I make numbers align with the baseline in ordered lists with inline images?

When I use inline images in an ordered list, the number for every line that has an inline image is offset from the baseline to align with the top of the image. Here is a screen shot from Preview mode (same behavior on real devices):
List entries 1 and 3 are normal. Entries 2 and 4, which contain inline images, have their numbers offset above the baseline.
I guess the line-height gets redefined based on the inline image, and then the numbers align based on line-height. Is there a way to change this within Muse so the numbers will consistently sit at the baseline even when the line includes an image? Is it something that needs to be addressed by modifying style sheets?

Hi,
You are correct in observing that inline objects affect line height, which in turn affects alignment of the bullet/number with the line.
To address this, you can use negative wrap offsets on the inline (specifically top offset) using the Wrap panel: adjust the value until the inline no longer adversely affects line height.
Hope this helps.
Abhishek

My Image Getting Scrolled in Tabstrip Change or Pagedown in Module Pool

Hi All ,
I have designed a module pool with Tabstrip . On the Top i have displayed image . My Tab1 is for Coversion , Tab2 is for Interface . When Click on the Interface Tab and Press page down the image also scrolls down and gets displayed in the Mid of the screen and when i press ESC button iimage goes to its normal position . I have created a Custom Container , I have also tried making a subscreen and display image but still same results . Please help me out in this ..
Thanks & Regards
Shankar
Edited by: Shankar SB on May 24, 2011 12:46 AM

SEARCH in SCn before posting you will get so many threads like these.
[Image in module-pool|https://forums.sdn.sap.com/click.jspa?searchID=24201936&messageID=3844659]

ITS 6.1 : Printing the contents in a container in webgui

Hai All,
I have a module pool program which displays, employees details with there photo in a container. I used method "CALL METHOD html_control->execwb." to print the content within the container. The program works fine when i run the program in SAP gui. I have created the transaction code as "SAP GUI for HTML"
The problem is we are using ITS server 6.1, when i run the same program in webgui, the print functionality is not working. The reason being the above method is related to OLE, which will not work in "SAP GUI FOR HTML".
We can print the content of the container by right clicking whithin the container and selecting print. Is it possible to have that functionality by clicking a button in the screen. That is when the user clicks a button in the screen the content of the container should be printed.
Please let me know, is there any solution for this.
Thanks & Regards,
H.K.Hayath Basha.

Hi Hayath,
this method is Windows only. Neither webgui nor java gui support the method because it based on OLE.
But you can insert a link in the HTML and execute the print method of the window object when clicking on the link.
Example:
<html><head><title>Test</title>
</head><body>
<a href="javascript:window.print()">Print this page</a>
</body></html>
Regards,
Klaus
P.S.: I would recommend to upgrade to ITS 6.20. ITS 6.10 is no longer supported by SAP and SAP will refuse any OSS message regarding ITS 6.10.

Table of contents moves images

I'm running into a problem with a paper I am writing. At the top of the paper is a Table of Contents, in the different pages are floating images. I need them to float so that the text wraps around them at the correct parts. The problem is, when the ToC starts a new page all of the images are moved with regards to the text. IOW, the images that were on page three are still on page three, but the text that was on page three is now on page four.
Is there any way to keep the ToC from constantly moving the images off their pages?

First Insert a section after the TOC.
Best would be if you used inline images. You can wrap text around inline images too.

How to save inline images and attachments separatley?

Hi,
I want to save all inline images into a certain directory and all attachments into another directory.
I use the following code to do this:
Multipart multipart = (Multipart) message.getContent();
        for (int x = 0; x < multipart.getCount(); x++) {
            BodyPart bodyPart = multipart.getBodyPart(x);
            String disposition = bodyPart.getDisposition();
            if(disposition != null){
                 log.debug("Disposition: " + disposition);
                 if (disposition.equals(BodyPart.ATTACHMENT)) {
                      log.debug("Mail has attachment: ");
                     DataHandler handler = bodyPart.getDataHandler();
                     log.debug("FILENAME: " + handler.getName());
                     saveAttachment(session, bodyPart, emailData);
                 else if(disposition.equals(BodyPart.INLINE)){
                      log.debug("Mail has inline attachment: ");
                     DataHandler handler = bodyPart.getDataHandler();
                     log.debug("Inline FILENAME: " + handler.getName());
                     saveInlineAttachment(session, bodyPart, emailData);
            else {
                 log.debug(bodyPart.getContent());
        }This approach works when the email has inline images only or attachments only.
It does not work when the email has both inline images and attachments. (Only the attachments are saved).
Come someone please help me correct my solution so that it can process an email that has both inline images and attachments and save them in different directories.
Thank you

Thanks bshannon.
It took me a while to understand what you meant but I think I finally got it.
I modified the getText method in order to save the embedded images:
private Image getImages(Part p, EmailData emailData, String ext) throws MessagingException, IOException {
         if (p.isMimeType("image/*")) {
            InputStream is = p.getInputStream();
            BufferedImage im = ImageIO.read(is);
            String fileName = "attachments/inline/body " + inlineImageNumber++ + "." + ext;
            File imageFile = new File(fileName);
            ImageIO.write(im,ext,imageFile);
            is.close();
            emailData.getInlineAttachments().add(fileName);
            return null;
        if (p.isMimeType("multipart/related")) {
            Multipart mp = (Multipart)p.getContent();
            Image image = null;
            for (int i = 0; i < mp.getCount(); i++) {
                Part bp = mp.getBodyPart(i);
                if (bp.isMimeType("image/jpeg")) {
                    if (image == null){
                        image = getImages(bp, emailData, "jpg");
                    continue;
                else if (bp.isMimeType("image/gif")) {
                    if (image == null){
                        image = getImages(bp, emailData, "gif");
                    continue;
                else if (bp.isMimeType("image/bmp")) {
                    if (image == null){
                        image = getImages(bp, emailData, "bmp");
                    continue;
                else if (bp.isMimeType("image/png")) {
                    if (image == null){
                        image = getImages(bp, emailData, "png");
                    continue;
            return image;
        else if (p.isMimeType("multipart/*")) {
            Multipart mp = (Multipart)p.getContent();
            for (int i = 0; i < mp.getCount(); i++) {
                Image image = getImages(mp.getBodyPart(i), emailData, "");
                if (image != null){
                    return image;
        return null;
    }

Hi ,info need on container creation,methods,class,interface....

hi ppl,
Can anybody give me information on what is and how to create
container creation,methods,class,interface....with programs.

>
priyank dev wrote:
> hi ppl,
> Can anybody give me information on what is and how to create
> container creation,methods,class,interface....with programs.
Hi Dev,
Interface is just the skeleton of the class definition.
If you want to have your own code for all or any of the methods that interface is havings then you can create an instance of that interface and implement those methods with you own code.
That is the advantage of object oriented programming. And if you want to use the standard method or original method's functionality then you have call the method along with the class which implemented it like below
class => method1
For Imore information on interfaces Check this link.
http://help.sap.com/saphelp_nw04/helpdata/en/c3/225b6254f411d194a60000e8353423/frameset.htm
For creating classes you can follow this procedure.
Go with abap dictionary->select database table->provide the table for dev classs eg. V_TDEVC-> go for display option-> select utilities->select contents option-> select create dev class,
provide the name and short text,software component->create req.no.
with this dev class will be created.
Thanks
Nitesh
Edited by: Nitesh Kumar on Nov 18, 2008 10:56 AM

Inline images in BSP

HI,
I have created a web page in BSP with some images in it. now i want the images to display some values that change with the user. can anyone tell me if it is possible to do in BSP. i have heard that it is possible to do in HTML and is called 'inline images' but dont know how to implement. it would be good if someone could tell me if it is possible or not, and if possible, then how?
thanks in advance,
pushpa

sure raja, the code that i used is as under:
<div >
<span style='mso-ignore:vglayout;position:absolute;z-index:-1;margin-left:2px;margin-top:0px;width:624px;height:357px'>
<img src="Logon.jpg"/></span>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>                </td>
<td>                </td>
<td>
</td>
<td width=101 bgcolor="white" COLOR="black"><font size=-4>C123456789</font></td>
     </tr>
    </table>
    </p>
    </div>
this is it..and now i have to pass a value to the page and that particular value has to be displayed on the image. can u tell me how i can do that. i have to take input from user and display it on the image.
thanks,
pushpa

Div content, inline images, contain scroll methods

Similar Messages

Maybe you are looking for