/    Sign up×
Community /Pin to ProfileBookmark

Need help with Drag and Drop script

Copy linkTweet thisAlerts:
Apr 24.2010

Hello!
I’m using Walter Zorn’s Drag & Drop script on my page: [url]http://www.accentironwork.com/railings%20design.html[/url]
The script works just fine. But there is a problem when the visitors are trying to print out their design. All “draggble” elements are getting shifted in relation to the rest of the page (try to move “draggble” elements, and then go to Print Preview to see what happens).
The page layout is centered on the screen:
#maincontainer{margin: 0 auto; /*Center container on page*/}
Drag & Drop script recalculates positions of elements from the Top Left corner.
If I change margin to left, than everything prints out just fine, without shifting.
I’d like to keep my page layout centered on the screen and I know nothing about Java programming. How to make necessary changes to the Drag & Drop script to achieve proper page printing?
Drag & Drop script path:
[url]http://www.accentironwork.com/Drag-Drop/wz_dragdrop.js[/url]
CCS path:
[url]http://www.accentironwork.com/css/globalstyles.css[/url]

Thanks in advance!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@WestWebApr 24.2010 — You could write separate styles into your style sheet for print media using the @media print method.

[CODE]
@media print {
/* Styles for Printing Go Here */
}
[/CODE]

Some more Info: http://www.w3.org/TR/CSS2/media.html#at-media-rule
Copy linkTweet thisAlerts:
@yuriauthorApr 25.2010 — I do have print CSS. It looks like this:
<i>
</i>
/* CSS Document */

@media print {
DIV.PAGEBREAK {page-break-before: always}
DIV.SCREEN {display: none} /* you can "div" out anything that you don't want to be printed &lt;div class="SCREEN"&gt;&lt;img .....&gt;&lt;/div&gt; */
}

@media screen {
DIV.PRINT {display: none} /* If you want something to be printed but not displayed use &lt;div class="PRINT"&gt;&lt;p&gt;This will be printed, but won't show up in the browser.&lt;/p&gt;&lt;/div&gt; */
}


@media print {
* {
background-color: white !important;
background-image: none !important;
color: black !important;
}
}


I tried to add to @media print {
<i>
</i>#maincontainer{margin: 0;}

but it did not help. Also, I tried to post my problem on CSS forum, but did not get any help. I'm running out of options. Can any body help me?
×

Success!

Help @yuri spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...