CODEWITHSUNDEEP
jquery
422
422

Reputation: 5770

javascript PRINT functionality

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.

Upvotes: 1

Views: 744

Answers (3)

can3p
can3p

Reputation: 59

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.

Upvotes: 0

mu is too short
mu is too short

Reputation: 434665

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.

Upvotes: 1

Ron Harlev
Ron Harlev

Reputation: 16673

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

Upvotes: 1

Related Questions