GoFuckYourself.com - Adult Webmaster Forum - CSS interfering with jQuery?

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - CSS interfering with jQuery? (https://gfy.com/showthread.php?t=1080001)

CSS interfering with jQuery?

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. :(

can you upload a live version?

Quote:

Originally Posted by Lace (Post 19157694)

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

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

Post a live link and we'll fix it :winkwink:

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();
:upsidedow

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

Quote:

Originally Posted by fris (Post 19157784)

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 (Post 19157798)

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;

        });





});

Quote:

Originally Posted by Colmike7 (Post 19157866)

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

Didn't work. :(

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

Quote:

Originally Posted by Lace (Post 19157871)

Didn't work. :(

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

Quote:

Originally Posted by Colmike7 (Post 19157872)

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

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.

Jesus christ. Figured it out.

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

:Hollering

Quote:

Originally Posted by Lace (Post 19157900)

Jesus christ. Figured it out.

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

:Hollering

Edit: I was in the middle of typing that :upsidedow

Glad you got it working :winkwink:

Quote:

Originally Posted by Colmike7 (Post 19157902)

Edit: I was in the middle of typing that :upsidedow

Glad you got it working :winkwink:

:)

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

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