javascript PRINT functionality

Question

I am doing an image zoom and pan MODAL.

All working fine, we use this for floor plans. What I would like is to add a print button ( same style ) to the viewer.

See example: http://test.dpetroff.ru/jquery.iviewer/test/

Need it to appear next to the [ 200% ] button.

Any suggestions ?

The js is here: http://test.dpetroff.ru/jquery.iviewer/jquery.iviewer.js

My html code:

    var $ = jQuery;
            $(document).ready(function(){
                  $("#viewer").iviewer(
                       {
                       src: "images/floorplan.gif", 
                       update_on_resize: false,
                       zoom: 200,
                       initCallback: function ()
                       {
                           var object = this;
                           $("#in").click(function(){ object.zoom_by(1);}); 
                           $("#out").click(function(){ object.zoom_by(-1);}); 
                           $("#fit").click(function(){ object.fit();}); 
                           $("#orig").click(function(){  object.set_zoom(100); }); 
                           $("#update").click(function(){ object.update_container_info();});
                                    console.log(this.img_object.display_width); //works*
                                             console.log(object.img_object.display_width); //getting undefined.*

                       },
                        onFinishLoad: function()
                        {
                $("#viewer").data('viewer').setCoords(-500,-500);
                            //this.setCoords(-0, -500);
                        }

//                       onMouseMove: function(object, coords) { },
//                       onStartDrag: function(object, coords) { return false; }, //this image will not be dragged
//                       onDrag: function(object, coords) { }
                  });

UPDATE:
OK It isn't 100% not sure why.

Here is the HTML

 <div class="wrapper">
        <div id="viewer" class="viewer"></div>
        <div class="iviewer_zoom_print iviewer_common iviewer_button2"><a href="javascript:window.print()">PRINT</a></div>
    </div>

Here is the CSS:

.iviewer_zoom_print {
left: 170px;
font: 1em/28px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
color: #ec008c;
background-color: #fff;
text-align: center;
text-decoration:none
width: 60px;

Link css

.iviewer_zoom_print a:link { text-decoration:none !important;color:#ec008c !important;}

Here is preview. enter image description here

Ok Issue I have, is this code the best way of accomplishing this ? How would I position the print button better. JS must be enabled because its a modal window, so non js print functionality isnt really a prerequisite.

Also I need that on click of the print button it prints the entire image. At the moment it prints only that in view.

Any help appreciated.

Ok I have fixed the alignment issue, by nesting the div insode the viewer . Just now need to sort the print functionality out better — 422
– 422, Commented Apr 29, 2011 at 0:52

Ron Harlev · Accepted Answer · 2011-04-28 23:01:14Z

1

Add another DIV with class iviewer_button like the existing iviewer_zoom_fit iviewer_common used to fit the image. This will call the printing function.
Something like <div class="iviewer_print iviewer_common iviewer_button"></div>

For an implementation of print see a sample and documentation here

answered Apr 28, 2011 at 23:01

Ron Harlev

16.8k26 gold badges93 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mu is too short · Accepted Answer · 2011-04-28 23:03:15Z

1

If you look at the generated HTML in a decent DOM inspector, you'll see that the buttons along the bottom are just absolutely positioned <div> elements. The button-ish ones have three CSS classes:

iviewer_zoom_X where X is the item in question.
iviewer_common
iviewer_button

The iviewer_zoom_X class is used to set the positioning so you could add an iviewer_zoom_print class with appropriate bottom and left values and then just append a <div> to the viewer with these classes:

iviewer_zoom_print
iviewer_common
iviewer_button

and bind a click handler to it.

answered Apr 28, 2011 at 23:03

mu is too short

436k71 gold badges863 silver badges822 bronze badges

3 Comments

422 Over a year ago

Not really 100% with this, I kinda get what you mean Mu. Should I just add a DIV class separate, and absolutely position the button ( using css ) and then attach Ron Harlevs unobtrusive jquery print function to the button ?

mu is too short Over a year ago

@422: Yeah, that's pretty much it. The positioning CSS would go in iviewer_zoom_print (to match the other buttons) and then you'd bind an action to it just like your other actions; then see Ron Harlev's stuff for the printing functionality.

mu is too short Over a year ago

@422: Where are you getting stuck? With the printing part?

can3p · Accepted Answer · 2011-04-29 05:42:52Z

0

I don't think I can help you with print functionality ( may be put all this into iframe? ), but the previous comments were correct - you need to create a div with class iviewer_common, iviewer_button and your own ( iviewer_print ). iviewer_common sets the default alignment and border and your class is needed to set left position and colors inside the button.

answered Apr 29, 2011 at 5:42

can3p

594 bronze badges

Collectives™ on Stack Overflow

javascript PRINT functionality

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related