- Joined
- Sep 15, 2014
- Messages
- 4,196
- Likes
- 8,637
- Degree
- 8
You ever go to those websites and the second before you scroll down a big call to action takes up the whole screen? Yeah it pisses you off right? Thing is it gets results, so I was looking for that code cause it was some basic stuff, then learned it was called a "Welcome Mat" by SumoMe. Example:
The thing is they charged a monthly fee for a couple of lines of javascript. Coming from the open source world, obviously this was unacceptable to me cause it was literally some lines of code. So I continued digging and found a version that's easy to customize. Here is an example page I put up for you folks to see it in action: SumoMe Welcome Mat Free Open Source Alternative
And here is the css code you'll need to put in between the <head><head> html tags:
--
Here is the HTML code you'll need to put after the first <body> tag:
--
And here is the end javascript using jQuery you'll need to put at the end of your page before the last </body> tag:
--
That's it.
Play around with it and the css to make sure it works on your site. Oh yeah by the way, you might want to add a cookie in the code so it doesn't re-appear after the user has already closed it and comes back to the site. If I'm not feeling lazy I might circle back to this and improve it. You can also view the source code of the page I provided to above.
If you want more stuff like this just send in a request to the mods and we'll see if we can dig up and re-create some of these un-necessarily complicating code for this new series I'm calling the DevSeries for this section.
Till Next time.
- CC
The thing is they charged a monthly fee for a couple of lines of javascript. Coming from the open source world, obviously this was unacceptable to me cause it was literally some lines of code. So I continued digging and found a version that's easy to customize. Here is an example page I put up for you folks to see it in action: SumoMe Welcome Mat Free Open Source Alternative
And here is the css code you'll need to put in between the <head><head> html tags:
Code:
<!-- Style this nonsense - @MercenaryCarter -->
<style type="text/css">
body {
margin: 0px;
}
@import url("https://fonts.googleapis.com/css?family=Raleway");
.introduction {
font-family: 'Raleway';
color: #fff;
text-align: center;
}
.introduction h1 {
font-size: 3.5em;
}
.introduction h2 {
font-size: 2.8em;
}
.introduction .shade {
background-color: rgba(0,0,0,0.5);
}
.introduction .shade .container .row {
position: relative;
//position: absolute; //you might need to make this absolute to play nicely
height: 100%;
}
.introduction .shade .container .row .header {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.introduction .shade .container .row button {
font-size: 0.9em;
padding: 8px 25px;
background-color: #33c3f0;
border-color: #33c3f0;
}
</style>
<!-- End of style this nonsense - @MercenaryCarter -->--
Here is the HTML code you'll need to put after the first <body> tag:
Code:
<!-- This shit is require mated - @MercenaryCarter -->
<div class="introduction">
<div class="shade">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center header">
<h1><b>Welcome to Money Over Ethics</b></h1>
<h2><i>(Slogan here)</i></h2><br/>
<a href="http://www.moneyoverethics.com/"><img src="http://www.moneyoverethics.com/images/Newsletter-big.jpg"></a><br/><br/>
<button href="http://www.moneyoverethics.com/" class="button btn btn-info btn-lg">LEARN MORE</button>
<button href="#closeMofo" class="btn btn-default closeMofo">NO THANKS</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of require mated - @MercenaryCarter -->--
And here is the end javascript using jQuery you'll need to put at the end of your page before the last </body> tag:
Code:
<!-- Stuff that makes the javascript run - @MercenaryCarter -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script type="text/javascript">
// Utilises https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js
// Change this to include desired pictures
var pictureArray = ["http://dl.dropbox.com/u/515046/www/outside.jpg",
"http://dl.dropbox.com/u/515046/www/garfield-interior.jpg",
"http://dl.dropbox.com/u/515046/www/cheers.jpg"
];
$(document).ready(function() {
resizeEvent();
$(".introduction").backstretch(pictureArray, {
duration: 3000,
fade: 750
});
$(window).bind("resize", function() {
resizeEvent();
});
});
function resizeEvent() {
$(".introduction .shade .container .row").css("height", $(window).height());
$(".introduction .shade").css("height", $(window).height());
}
$('.closeMofo').on('click', function(e){
$(".introduction").slideUp(500);
e.preventDefault();
});
</script>
<!-- Stuff that makes the javascript run - @MercenaryCarter -->--
That's it.
Play around with it and the css to make sure it works on your site. Oh yeah by the way, you might want to add a cookie in the code so it doesn't re-appear after the user has already closed it and comes back to the site. If I'm not feeling lazy I might circle back to this and improve it. You can also view the source code of the page I provided to above.
If you want more stuff like this just send in a request to the mods and we'll see if we can dig up and re-create some of these un-necessarily complicating code for this new series I'm calling the DevSeries for this section.
Till Next time.
- CC
Last edited:
