Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery interferes with print view

Posted on 2013-01-28
6
Medium Priority
?
698 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 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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 …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…
Suggested Courses

926 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