7 Javascript and CSS Tricks You Could Really Use

Dear Loyal Readers;

So I guess it’s been about a month since I last posted here. This is probably the longest dry spell on ppc.bz since the 1980’s, and I know everyone is waiting for a wrap-up of the hilarious antics that happened during Affiliate Summit West but you won’t find it here (still waiting on some content before I write that post). Hopefully you all had fun and no one lost all their bail money playing Blackjack.

Anyway, back to business!

This is a post I’ve been meaning to write for at least a month now. I’ve been thinking about it almost every day and I need to get this shit over with before I go insane. So enjoy the fruits of my labor, you sons of bitches. Don’t say I never gave you nothin’!

These are mostly tricks I’ve been using on PPV landing pages, but they can be applied to any kind of landing page. Also, don’t blindly apply these tricks without split-testing them first. Some may sound like they will always work, but it will all depend on your traffic sources and types of visitors.

You may or may not know, but I’ve been on a javascript and jQuery kick for the past few months. jQuery is indeed the shit, and if you don’t know it then you should really learn. Javascript seems like an overwhelming language and it is, but you can cut through a lot of the bullshit by picking up jQuery, which makes it so much easier.

There have been a few posts in the internets blogosphere about using jQuery, such as this one from PPVPlaybook. That post is actually a good primer on setting up jQuery if you don’t already know how.

I too have a few tricks up my sleeve which I will share here.

1. CSS – Reset and Show me the DIVs!

This is a simple CSS trick that I use all of the time when designing landing pages. Setting up the HTML for a landing page isn’t hard, but getting everything to go exactly where you want it can be a huge pain in the dick- especially if you want the page to look exactly the same in Firefox and Internet Exploder.

Note: About 95% (in my experience) of PPV traffic is Internet Explorer users, so you have to make sure your shit looks good in IE.

Reset Margins and Padding

Each browser has its own default margins and paddings for webpages. If you don’t tell the browser what to do with your CSS, then it will use the defaults and shit can get screwy.

One way around this is to set your margins and padding to 0 at the top of your CSS file. This gives you the greatest chance of success and lowest chances of ripping your hair out in frustration.

*{padding:0px;margin:0px;}
html{padding:0px;margin:0px;}

Just put that shit at the very top of your CSS file. There are other methods to reset the margins and padding for all your page elements, but this method is simple and has always worked for me.

From there you just set the margins and padding on your DIVs as you normally would, but with a lot less variance between browsers.

Show Some DIVs

Once you start working on your landing page, most of the time will be spent trying to get everything to place on the page correctly. Make changes, upload and review in browser, repeat four thousand times.

The problem is that its hard to tell which DIV is going where, how big it is, and how its affecting other DIVs, “Why the fuck did my content just go down 600 pixels on the page?” “Why is my Opt-in box overlapping my header?” “Why did dad just tell me about the birds and the bee?! I’m 24!!” So on, and so forth.

To make it easier on yourself, you want to view the size and position of your DIVs so you’re not just guessing.

Method 1 – Use Web Developer Toolbar for Firefox
If you design for the web and you don’t have Web Developer Toolbar, then punch yourself in the face.

1. Install Web Developer Toolbar
2. Go to the your landing page.
3. Information > Show Block Size

This will put a border around all of your CSS elements so you can visually see what the fuck is going on. Unfortunately, this plugin is only for Firefox (as far as I know). You might still see noticeable differences on your landing page when viewing in IE. There are a ton of other features in the Web Developer Toolbar , so get that shit if you don’t have it already. Very handy for finding Javascript errors too (use the buttons on the top right of the toolbar).

Method 2 – Add Your Own Borders
Another option is to add a border to all of your DIVs directly in your CSS. This works for IE. Once your landing page is finished, you can just remove the code from your CSS to take off the borders.

div{border:#FF0000 1px solid;}

2. Javascript – Focus and Blur

There are two javascript window functions that could be useful to you, depending on what you’re doing. One will bring your window to the front of the user’s browser, and the other will put your window behind other windows in the users browser.

Note: Not really effective if the user only has one browser window open. But you have no way of really knowing that, do you?

Here is the demo of both functions in action. Ignore the “timeout” part for now since it’s used to demonstrate both functions. View source to see what the fuck is going on.

window.focus

This function will bring your window into focus. If you’re running some pop-under traffic, and the user has 10 windows open, this will basically bring your window to the forefront. You see E-mail submit advertisers doing this almost all of the time (along with a ton of other Javascript tricks)

Essentially, you can use this command to turn pop-under traffic into pop-up traffic.

<script type="text/javascript">
window.focus();
</script>

window.blur

Same thing as above, but the opposite. You can turn pop-up traffic into pop-under traffic if your heart desires. Sometimes, depending on several factors, pop-under traffic works better than pop-up, so you can split test this and see if its effective for you.

<script type="text/javascript">
window.blur();
</script>

3. jQuery – Play my Javascript when Focused

Now onto the juicy jQuery stuff! Shits so good it’ll make you wanna slap your momma!

Before you continue, you actually have embed the jQuery library on your page. If you don’t then the shit don’t work. I like to embed Google’s library because a good number of people will have it cached. Hosting it yourself is kind of pointless. Put this line at the top of your HTML above the <head> tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

To run some jQuery code, you’d put it inside a function that looks like this:
<script type="text/javascript">
$(document).ready(function(){
    // Your code goes here
});
</script>

OK so what the fuck is going on here?
1. The <script> tags surrounding the code is your standard code saying to the browser “There is some javascript here. You always need this to run javascript. And if I’m explaining this to you, then this whole post is probably over your head anyway.
2. $(document).ready initializes the jQuery code. Basically this is saying “Once the document is ready, do this shit.” It’s pretty clever because you don’t want to run any javascript with half the page not downloaded yet. Here is a better explanation of document.ready.

And the Next Step…Play when Window Focuses

The above is your standard jQuery initialization code. Let’s get a little more advanced…

What if you are running pop-under traffic? If you have 15 seconds of animation on your page, is it really going to matter if it takes the user 2 minutes to get to your window? Worse, what if you’re running some CPU intensive code? If it takes them 10 minutes to get to your page (since they were doing something else), how slow have you made their already adware-filled computer with your window just sitting in the background?

There are a ton of reasons you might want to do something only when the user is looking at your window. Whatever that reason may be, this is how you do it:

<script type="text/javascript">
$(document).ready(function(){
// put code here that you want to run before the window comes into focus.
    $(document).focusin(function(){ // nested function- when the document is ready AND when the window is in focus, do this:
       // Your code goes here
$(this).unbind("focusin"); // After your code above runs, this will unbind the focusin function from your document. If the user is jumping between windows, it can wreak all sorts of havoc without this line. Basically, you are only running the javascript on the first focus (since you unbind) rather than every single time the window focuses.
}); // end doc.focusin
}); // end doc.ready
</script>

The extra .focusin function on the window will run your javascript once your window is in focus. If there is some javascript you want to run before they focus, you’d put it between the doc.ready and doc.focusin functions.

4. Javascript + jQuery – Don’t Close that Window Just Yet!

I really liked #6 in the PPVPlaybook post, but the ActiveBar plugin that is recommended did not do the job for me. I can’t remember why it didn’t do that job since it was months ago. Since I wrote the code, I’ll just post it here anyway.

You can use the ActiveBar plugin if it works for you. It’s actually more user-friendly and should get the job done. My code is a lot more customizable but requires a good grasp of HTML / CSS / Javascript to work properly.

Demo with a Banner at the Top
Demo with a Hovering Box

View the source to see what is going on. I tried to keep it as clean as possible.

The Javascript

The hard part of this trick is the javascript / jQuery code. I have done this for you already though. The code below is for the Banner demo, but the Window demo works the same way, just slightly modified.

<script language="javascript" type="text/javascript">
var posX;
var posY;
var xdiff;
var ydiff;
var xold;
var yold;
$(document).ready(function(){
   $("#trigger").mousemove(function(e){
    posX = e.pageX;
    posY = e.pageY;
    xdiff = posX - xold;
    ydiff = posY - yold;
     if(ydiff < -2){$("#outbanner").fadeIn(200);$('#trigger').hide();}     xold = posX;     yold = posY;});    $("#outbanner").mouseup(function(){      $(this).hide(function(){$(this).unbind()});    }); }); </script>

So what the fuck is going on?
1. The first part, right above the doc.ready function, sets some variables so the browser window can do some mathematics.

2. The stuff inside $("trigger").mousemove tries to figure out the direction of the mouse pointer, and how fast its moving. I'm not going to explain what it does because I don't know what it does. I just hacked someone's code I found.

3. This line if(ydiff < -2){$("#popbox").fadeIn(200);$('#trigger').hide();} fades in your #outbanner DIV if a condition has been met, which is "Is the mouse going up?" and "How many pixels did the mouse move up?" You can modify the (ydiff <-2) part to a different number to change the tolerance. Also, it hides the trigger so it doesn't pop-up again. If you want it to pop-up again, then just removed the $('#trigger').hide(); part

4. The last function, $("#outbanner").mouseup(function() ... will do two things. mouseup determines if the user has clicked and released their mouse button. If so, it hides the banner and unbinds it (meaning it won't show up again)

The Window demo is slightly modified so that it hides your pop-up box when the user clicks "Close."

The CSS

The Javascript is was the hard part to figure out while the CSS is actually the time consuming part. If you grasp the Javascript, then all you are doing is modifying the CSS to get your page to look the way you want.

The popup box and banner are both hidden by default (display:none;) They fadein once the #trigger has been met. To make it easier on yourself, remove the display:none while playing around with your CSS. That way you don't have to trigger it every time to see what the final product will look like.

5. Javascript - Enlarge and Resize Windows

Javascript lets you do a lot of shit with the browser window like resizing them. In some cases, you might want to fullscreen your window. Other times, you might want to shrink it down. Who the fuck knows anymore...

Full Screen a Window

Below is the function to fullscreen your window. The first line moves it to the top left (0,0) of the user's screen. The second line resizes it to available Width and Height.

function fullscreen(){
window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
}

But that's just a function. You actually have to call the function otherwise nothing happens.

<script language="javascript" type="text/javascript">
 $(document).ready(function(){
   fullscreen();
 });
</script>

The above will fullscreen the window as soon as the document is ready. You can also call the function through a number of ways. One way is to do it when the user clicks a link on your page using the code below:

<a href="page2.php" onClick="fullscreen();">Click Here to Continue</a>

Resize a Window

Fullscreen-ing is cool and all, but sometimes you want to make the window smaller. All you'd do is modify the parameters in the code above. View source on the demo to see whats going on.

6. jQuery - $$ Pop Up / Under Your Own Windows $$

This tip can actually make you more money. Split test it though to see if it does, because in some cases it could make you less.

Let's say you have a very broad landing page that multiple offers could work for. If the user clicks "Continue to A" maybe you want to popup / popunder an additional window with a similar offer to try and squeeze more money out the visitor.

One Simple Rule of New Windows and Pops

My research has shown me that most browsers hate popping up new windows. The most generic of popup blockers will block most popup / popunder windows unless the user clicks a link tag <a href="xxx">. I've tried a number of ways to get new windows to show up, and the only way I've found that will work is when the user clicks a link.

There are tricks to do shit when the user closes the window (exit pop) but this is not something I discuss here. From what I remember though, you will only be able to modify your own window (like redirecting to a "Bonus Offer") and not popup an additional one. If I am wrong though, correct me.

How to Popup or Popunder New Windows

View the Demo Here. If you have 2 or 3 monitors, or even a wall of monitors, it's difficult to predict what will happen. Thankfully, the average citizen only has one monitor. View the page source to see what is going on.

Note that all of the parameters can be modified to your liking. You can completely take out all of the shit that makes up a browser window (set to "no" for menus, location bar, toolbar, etc).

The Javascript for a Popunder
function popthisUnder(url,thewin)
{
params = 'width='+screen.width;
params += ', height='+screen.height; /*this and the above line indicate a full screen window*/
params += ', top=0, left=0' /* window position */
params += ', directories=no';
params += ', location=yes';
params += ', menubar=yes';
params += ', resizable=yes';
params += ', scrollbars=yes';
params += ', status=yes';
params += ', toolbar=yes';
params += ', fullscreen=yes';
thewin = window.open(url,thewin, params);
thewin.blur();
window.focus()
return false;
}

1. The function popthisUnder(url,thewin) accepts two variables. The first is the URL, and the second is the window name. If you are doing this multiple times on a single page, then each new window needs a new name, otherwise it will just modify the existing window with that name.

2. Next are the parameters to set. They are pretty self-explanatory but you will probably need a reference.

3. This line opens a new window: thewin = window.open(url,thewin, params);. The next line "blurs" the new window (moves it out of focus) and the following brings your main window back into focus (essentially a popunder)

The Javascript for a Popup
function popthisOver(url,thewin)
{
params = 'width=640';
params += ', height=480'; /*this and the above line have a strict variable for the size*/
params += ', top=0, left=0'
params += ', directories=no';
params += ', location=yes';
params += ', menubar=yes';
params += ', resizable=yes';
params += ', scrollbars=yes';
params += ', status=yes';
params += ', toolbar=yes';
params += ', fullscreen=yes';
thewin = window.open(url,thewin, params);
thewin.focus();
return false;
}

1. The above function is nearly identical but with some slight changes. The width and height are strict (set to 640 x 480) instead of taking up the fullscreen like in the first function.

2. The window.blur line was removed, so now it will just bring the new window into focus (essentially a popup)

Calling the Function
The only way you can call either function to create a new window is through a new link. Any other way will be blocked. The user has to click something!

<a href="page2.php" onClick="popthisUnder('http://www.myotheroffer.com','windowName')">Click here to popunder</a>

Remember to split test this! Once I was popping under some Zip submits and it completely fucked up conversions since Zip submit advertisers like to bring their windows into focus- not to mention a ton of other sketchy shit that ensures the user is focused on their offer.

7. jQuery - Fake Chat Box Thingie

Just to wrap this shit up already, here's some jQuery that mimics a chat box. View the Demo here. The source code should be pretty self-explanatory. You could copy it directly and just change the variables to change the text. Most of the work will be modifying the CSS to make it look the way you want.

This demo uses the "focusin" trick so it will only play once the window comes into focus. You may have to switch to another window then go back in order for it start playing.

Use at your own risk! One can do a lot of damage with such a trick. Check with your affiliate networks for compliance. If the Feds come lookin' for you, don't say I didn't warn you!

  • Good tips. One of the things I’ve seen that I haven’t actually tried yet is to have a CSS light box block the content and be like ‘Blah blah bla click ok to continue’. Maybe it is just because I have gamevance installed and am looking at pops but when I am normally browsing and see one of these I HAVE to click ok to the box first even though I could simply close out the window. Mind you this isn’t a javascript blocking box or anything, just a basic internal display.

  • Kenna

    WTF is this shit? I come to ppc.bz for the weed porn and dominos pizza trackers, not for nerdy JavaScript tips.

  • I am not a coder or anything but I’m going to use these on my PPV campaigns for sure. Thanks

  • Barman tha shit. Mad props for slik trix.

  • groomez

    lol @ tip number 4 good stuff! solid post, it was worth the wait

    Maybe john chow will be good in my dating campaigns

  • Aaron

    Nice stuff. Regarding section 1, if you haven’t used the firebug firefox extension you’re missing out. Best.

  • very nice tips… i used javascript a little to create some popups, but they were part of a booking system, so they weren’t annoying popups :)

    I like very much the idea of opening a popup / popunder when a user clicks an offer.. actually, sometimes that might bring some extra cash… it’s worth trying. thanks for the tips

  • hm… so that’s why my popups were blocked… i thought there is no way to make them pass through the blocking system implemented by browsers.. still, there are some sites that show the popup when you click anywhere on the page for the first time, no matter if it’s link or not.. and i don’t know how they do it, because i tried and they got blocked by browser :(

    • its because their site is overlayed with a <a href="#" or something. it works, just has to be done correctly.

  • Mattias

    Damn this post was so good you made me punch myself and slap my momma!

  • These tips are hot as hell barman, you saved me some time scratching my head this weekend with tip #4. If you are not using an opt in box, you can suggest similar offers they might be interested in, if they choose another offer, start popping that more popular offer on that url.

    I mean if you can’t get the conversion the first time around, you may as well try to use your money for market research and attempt conversion number two.

    Cheers for the code!

  • nice one!! particularly like the play on focus & chat thingy.

  • will

    Is that fake chat thing really dangerous? Like what kind of trouble could you get in for actually using it, like for dating offers?

  • Hey barman, #4 is smokin. That went right in my JS swipe file quickly.

    C

  • fm1234

    I want to make sweet, sweet love to this post. And then I see the picture of Mays. And I think about that magnificient beard. And I think that if I were gonna go gay, I’d want to go gay with a guy who had a magnificient beard, because it would tickle my balls like a thousand fairies whispering secrets at my groin. But then I think about the fact that Mays has been dead for a while, and if I went gay with him that he’d probably be a zombie, and if he was face-down in my crotch like a good salesman should be, he’d probably be in the process of eating me. And then the magic dies.

    Anyway, good post, fucking useful and I thank you.

    Frank

  • Pingback: Your End of Summer Affiliate Marketing Reading List | ppc.bz()

  • javascript put more weight to your pages, no? focus blur thingy can be achieved with css3 now.