Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery interferes with print view

Posted on 2013-01-28
6
Medium Priority
?
692 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 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
Stack Overflow Podcast - Developer Story

Welcome to the Stack Overflow podcast recorded Thursday July 20 at Stack Overflow Headquearters in NYC. Your hosts today are podcast regulars Jay Hanlon, David Fullerton, and Ilana Yitzhaki, plus the quite irregular Matt Sherman (Stack Overflow Engineering Manager extraordinaire)

 

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

Automating Terraform w Jenkins & AWS CodeCommit

How to configure Jenkins and CodeCommit to allow users to easily create and destroy infrastructure using Terraform code.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Before we dive into the marketing strategies involved with creating an effective homepage, it’s crucial that EE members know what a homepage is. In essence, a homepage is the introductory, or default page, of a website that typically highlights the …
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

715 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