Solved

jquery interferes with print view

Posted on 2013-01-28
6
668 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

679 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