CSS interfering with jQuery?

[Lace]

I've been racking my brain on this issue for two days now, and completely recoded my page twice thinking that I forgot or missed something.

So, here's the issue-

I'm using this jQuery plugin - http://www.ssdtutorials.com/tutorial...ery-print.html

I've coded the content page in a separate html page, with it's own css, and it works fine. Once I dump that html and css into the template, the print function does not want to work. When I click on one of the images, it just has the loading icon in the tab. Basically it's a page with a few coupons on it, and I need to be able to have the user click on one image and have it sent to their printer.

Here's my CSS and HTML:


Template CSS that's screwing it up

body {
	background:url(vip/orange-bg2.jpg) top repeat-x #fa4c19;
}
#Site {
	margin: auto;
	width: 1000px;
	background-color: #FFFFFF;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #333333;
	border-left-color: #333333;
}
#featured {
	margin: auto;
	width: 988px;
	height:auto;
	padding:30px 10px 30px 10px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
}
.Content {
	margin: auto;
	width: 965px;
	background-image: url(../images/extreme_16.jpg);
	background-repeat: no-repeat;
	padding: 0px 0px 0px 0px;
}
body, td, th {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 13px;
}
#Site h1 {
	margin: 0px;
	font-family: "Arial Black", Arial, "Sans serif";
	font-size: 20px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 12px;
}
.FeaturedArea {
	padding-right: 12px;
	padding-left: 12px;
	background-image: url(../images/extreme_08.jpg);
	position: relative;
	padding-bottom: 20px;
}
.Navigation {
	background-image: url(../images/extreme_03.jpg);
	background-repeat: repeat-y;
	height: 40px;
	overflow: hidden;
}
.Navigation ul {
	margin: 0px;
	padding: 0px;
}
.Navigation li {
	display: inline;
	float: left;
}
.Navigation li a {
	font-family: Arial;
	font-weight: bold;
	color: #FFFFFF;
	display: block;
	padding: 12px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #333333;
	text-decoration: none;
}

Content CSS that works fine

#wrapper {
	margin:0 auto;
	width:970px;
}
#submain {
	margin:0 auto;
	width:970px;
}
#coupon1 {
	float:left;
	width:459px;
	height:184px;
	overflow:hidden;
	padding:0px 12px;
}
#coupon2 {
	float:left;
	padding:0px 5px;
}
#coupon3 {
	float:left;
	width:459px;
	height:184px;
	overflow:hidden;
	padding:0px 12px;
}
#coupon4 {
	float:left;
	padding:0px 5px;
}
#coupcon {
	text-align: center;
	width:970px;
}
.left {
	float: left;
}
.right {
	float: right;
}

jscript I'm using

<script src="script/jquery-1.6.2.min.js"></script> 
<script src="script/jquery.PrintArea.js_4.js"></script> 
<script src="script/core.js"></script>

And finally, the code I'm using to print a specific image

<div id="buddypass1"><a href="#" class="clickprint" rel="buddypass1"><img src="vip/buddypass01.jpg" width="315" height="166" hspace="0" vspace="1" border="0" class="left" /></a></div>

Does anyone have a clue on what's going on? I need to get this project finished asap.

[fris]

can you upload a live version?

[Dvae]

Originally Posted by Lace

I've been racking my brain on this issue for two days now, and completely recoded my page twice thinking that I forgot or missed something.

So, here's the issue-

I'm using this jQuery plugin - http://www.ssdtutorials.com/tutorial...ery-print.html

I've coded the content page in a separate html page, with it's own css, and it works fine. Once I dump that html and css into the template, the print function does not want to work. When I click on one of the images, it just has the loading icon in the tab. Basically it's a page with a few coupons on it, and I need to be able to have the user click on one image and have it sent to their printer.

Here's my CSS and HTML:


Does anyone have a clue on what's going on? I need to get this project finished asap.

Aren't you using a JavaScript debugger?
Some browsers have it built-in or you may have to install an extension.

[fris]

ya use firebug if on firefox, or inspect element on chrome

[Colmike9]

Post a live link and we'll fix it

Without posting it, I could guess that this could fix it:
Go to core and find this line: $.extend(pluginOptions, options);
Then add this right after:
this.die();

[Colmike9]

Are you using the default finished .js files from that link? If so, try changing class="clickprint" to class="print"

[Lace]

Originally Posted by fris

can you upload a live version?

Just sent you an ICQ. I'd rather not have this on the board.

If you didn't get me, hit me up on Skype - awmlace

Originally Posted by Dvae

Aren't you using a JavaScript debugger?
Some browsers have it built-in or you may have to install an extension.

Did not even think about that.

Here's the error -

Timestamp: 9/1/2012 2:50:02 PM
Error: TypeError: media is undefined
Source File: script/jquery.PrintArea.js_4.js
Line: 96

Line 96

return (media.toLowerCase() == "" || media.toLowerCase() == "print")

Google'd this - http://stackoverflow.com/questions/1...on-not-working

As Pencho Ilchev referred, this is caused by the jQuery 1.6 BC break of .attr(). Here is a fixed fork of the PrintArea plugin:

Tried the recommended "fix" and received this error

Timestamp: 9/1/2012 2:46:50 PM
Error: TypeError: $("#" + container).printArea is not a function
Source File: /script/core.js
Line: 11

Which core is-

$(function() {
	
	$('.print').click(function() {
		var container = $(this).attr('rel');
		$('#' + container).printArea();
		return false;
	});

	$('.clickprint').click(function() {
		var container = $(this).attr('rel');
		$('#' + container).printArea();
		return false;
	});


});

[Lace]

Originally Posted by Colmike7

Are you using the default finished .js files from that link? If so, try changing class="clickprint" to class="print"

Didn't work.

[Colmike9]

Do you have to declare media="print" and media="screen" separately in CSS for it to work? Just guessing here..

[Colmike9]

Originally Posted by Lace

Didn't work.

Thought I'd ask since that's how they do it in their example..

[Lace]

Originally Posted by Colmike7

Do you have to declare media="print" and media="screen" separately in CSS for it to work? Just guessing here..

I did not thinking that I was only printing images, so css for printing wouldn't be necessary, but I just added it anyway, and nothing changed.

[Lace]

Jesus christ. Figured it out.

Every included CSS has to have the media="" attribute. That's what was breaking it.

[Colmike9]

Originally Posted by Lace

Jesus christ. Figured it out.

Every included CSS has to have the media="" attribute. That's what was breaking it.

Edit: I was in the middle of typing that

Glad you got it working

[Lace]

Originally Posted by Colmike7

Edit: I was in the middle of typing that

Glad you got it working

I had one stylesheet that wasn't using that attribute and it screwed it all up.

[livexxx]

Should have left the cats in, that also fixes it ;)