CSS interfering with jQuery? - GoFuckYourself.com

Lace · 09-01-2012, 08:49 AM

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

Code:

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

Code:

#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

Code:

<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

Code:

<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 · 09-01-2012, 10:23 AM

can you upload a live version?

Dvae · 09-01-2012, 10:33 AM

Quote:

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 · 09-01-2012, 11:19 AM

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

Colmike9 · 09-01-2012, 11:35 AM

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 · 09-01-2012, 11:49 AM

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

Lace · 09-01-2012, 11:53 AM

Quote:

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

Quote:

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 -

Quote:

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

Code:

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

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

Quote:

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

Quote:

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-

Code:

$(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 · 09-01-2012, 11:54 AM

Quote:

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 · 09-01-2012, 11:55 AM

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

Colmike9 · 09-01-2012, 11:56 AM

Quote:

Originally Posted by Lace

Didn't work.

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

Lace · 09-01-2012, 12:02 PM

Quote:

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 · 09-01-2012, 12:23 PM

Jesus christ. Figured it out.

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

Colmike9 · 09-01-2012, 12:26 PM

Quote:

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 · 09-01-2012, 12:33 PM

Quote:

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 · 09-01-2012, 06:11 PM

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

09-01-2012, 10:23 AM	#2
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,359	can you upload a live version? __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

09-01-2012, 11:19 AM	#4
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,359	ya use firebug if on firefox, or inspect element on chrome __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

09-01-2012, 11:35 AM	#5
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,223	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(); __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..

09-01-2012, 11:55 AM	#9
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,223	Do you have to declare media="print" and media="screen" separately in CSS for it to work? Just guessing here.. __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..

09-01-2012, 12:23 PM	#12
Lace Too lazy to set a custom title Industry Role: Join Date: Mar 2004 Posts: 16,116	Jesus christ. Figured it out. Every included CSS has to have the media="" attribute. That's what was breaking it. __________________ Your Paysite Partner Strength In Numbers! StickyDollars \| RadicalCash \| KennysPennies \| HomegrownCash

09-01-2012, 11:49 AM	#6
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,223	Are you using the default finished .js files from that link? If so, try changing class="clickprint" to class="print" __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..

09-01-2012, 06:11 PM	#15
livexxx Confirmed User Industry Role: Join Date: May 2005 Location: UK Posts: 1,201	Should have left the cats in, that also fixes it ;) __________________ http://www.webcamalerts.com for auto tweets for web cam operators