Solved

jquery interferes with print view

Posted on 2013-01-28
6
680 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to count occurrences of each item in an array.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

624 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