Solved

jquery interferes with print view

Posted on 2013-01-28
6
656 Views
Last Modified: 2013-01-29
Hello,

I am working on a site in which I am using a jquery plugin called smooth-div-scroll. It lets you scroll content smoothly in a pane with a mouse over.  The problem is that the plugin interferes with the print preview of the web page. Before adding the jquery code, the print preview is fine - after, the print preview is jumbled and not all there.  I tried tweaking the css print style sheet in hopes of overiding the jquery but no luck. Anyone know a possible solution to this?

The page in question (still in development) is
http://www.weekendmusician.com/archives/issue-1/feature/feature7.html

And here without the jquery code (and different imagery)
http://www.weekendmusician.com/archives/issue-1/feature/feature.html
0
Comment
Question by:kmkmediagroup
  • 4
  • 2
6 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 38830408
Add

<link rel="alternate" media="print" href="http://www.weekendmusician.com/archives/issue-1/feature/feature.html" />

to the head of the page

or

<link rel="alternate" media="print" href="http://www.weekendmusician.com/archives/issue-1/feature/feature7.html?print=true" />

and test in jquery

$(function() {
  if (location.indexOf("print=true") !=-1) return;
  // here you are not printing
}
0
 

Author Closing Comment

by:kmkmediagroup
ID: 38832508
Wow! Thank you so much! That definitely worked.

EDIT - Well, I spoke too soon. It is working in explorer but not in Safari or Chrome.
         Any thoughts for these browsers?

By the way, it even works in Explorer with NO jquery and just this in the head

<link rel="alternate" media="print" href="http://www.weekendmusician.com/archives/issue-1/feature/feature7.html" />

Thanks again for your help.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38832752
Sure

The link alternate is understood by most if not all browsers as the url you want to use if you print.

Then the jQuery simply reads the added print=true and leaves the function before doing all the stuff you do when it is not printing


$(function() {
  if (location.indexOf("print=true") !=-1) return; // leave the function
  // here you are not printing
  // here you would have the other stuff
}
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:kmkmediagroup
ID: 38833475
I made an edit/update to my comment that I think you may have missed when you made yours. (I started saying it works and please explain, but later changed it to say, it only works in Explorer)......I can't get it to work in either Safari or Chrome. I tried using both link alternates and tried putting the jQuery in different places. Any ideas? The site is still there is you want to test on your end.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38833915
Sorry, yes, I skipped that line.
I'll have a look
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38833959
Ah, I apologise I did not code for your actual page

when I posted

$(function() {
  if (location.indexOf("print=true") !=-1) return;
  // here you are not printing
});  

I assumed you would change

// Initialize the plugin with no custom options
		


		$(document).ready(function () {
			
			var browser = navigator.userAgent;
			// None of the options are set
			if (browser.match(/iPad/i)) {
                  $("div#ScrollContainer").smoothDivScroll({touchScrolling: true, manualContinuousScrolling: false});
}
               else {
		          $("div#ScrollContainer").smoothDivScroll
				  ({autoScrollingMode: "onStart",
hotSpotScrolling: true, manualContinuousScrolling: false, hiddenOnStart: false
});
	};
 });         

Open in new window

to
$(function() {
  if (location.indexOf("print=true") !=-1) return; // we are printing

// Initialize the plugin with no custom options

  var browser = navigator.userAgent;
  // None of the options are set
  if (browser.match(/iPad/i)) {
    $("div#ScrollContainer").smoothDivScroll({touchScrolling: true, manualContinuousScrolling: false});
  }
  else {
    $("div#ScrollContainer").smoothDivScroll({autoScrollingMode: "onStart", hotSpotScrolling: true, manualContinuousScrolling: false, hiddenOnStart: false});
  };
});         

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Swiper slider stops between pages 11 50
Groovy:unable to resolve class error 2 107
Register AutoHotkey 12 72
Recursively Delete Files 5 83
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question