tag:blogger.com,1999:blog-34891503512634843772024-02-22T21:59:09.898+00:00Dannys Code SnippetsAnonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-3489150351263484377.post-84722901916769497412013-10-09T17:36:00.001+01:002013-10-09T17:36:02.937+01:00How to make a nice file upload button with HTML & CSS<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">We have all seen the horrible file upload boxes, we all know what they look like.. and they all differ slightly from browser to browser.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">There are lots of hacks out there to emulate a button click to launch the file input dialog, or to position the input box transparent ontop of a beautified button, but all of these are limited to the browser support and some browsers require hacks.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I want to show you the simplest way I can think of..</span><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Here's how it looks:</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<style>
.upload_box {
overflow:hidden;
position:relative;
}
#select_file {
position:absolute;
left:-300px;
}
label {
cursor:pointer;
font-weight:bold;
}
</style>
<br />
<div class="upload_box">
<input id="select_file" type="file" />
<label for="select_file" id="selected">To select your file click here!</label>
</div>
<br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Ok that's cool, but how exactly does it work?</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<pre class="css" name="code"><style>
.upload_box {
overflow:hidden;
position:relative;
}
#select_file {
position:absolute;
left:-300px;
}
label {
cursor:pointer;
font-weight:bold;
}
</style></pre>
<pre class="html" name="code"><div class="upload_box">
<input id="select_file" type="file" />
<label for="select_file" id="selected">To select your file click here!</label>
</div></pre>
><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">And that's all there is to it..</span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
</span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Let me explain..</span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">the good thing about the</span><span style="font-family: Courier New, Courier, monospace;"> label </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">tag is it links to the input element that you would like to focus on.. the container (</span><span style="font-family: Courier New, Courier, monospace;"> .upload_box </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">) has the css attribute</span><span style="font-family: Courier New, Courier, monospace;"> overflow:hidden; </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">so we basically hide the input element off to the left, which essentially "hides" the input element, so when you click on the label, it triggers the input dialog.</span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
</span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Because this is a label, you can style it to however you like.. this is how I have styled it for one of my clients:</span>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5VrK0NIVWs1qNaaHkk5GOoxK0pHvuhi9_7jPGCTMOs0ScF4O1XxBSH_JWAIKIwg3gl_lcyMDC3w2IAeFf71VbI2gKiJybROrIXzhcj2Hm5f0cX9Bxj4R6d7A3pS6oZW28D5V8CUR7J1U0/s1600/Capture.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="34" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5VrK0NIVWs1qNaaHkk5GOoxK0pHvuhi9_7jPGCTMOs0ScF4O1XxBSH_JWAIKIwg3gl_lcyMDC3w2IAeFf71VbI2gKiJybROrIXzhcj2Hm5f0cX9Bxj4R6d7A3pS6oZW28D5V8CUR7J1U0/s320/Capture.JPG" width="320" /></a></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">So, now we've covered how to do it.. there's one more thing you should know, once you select the file it won't display the file name, so to do this we do need a small piece of Javascript.. This is the Javascript:</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<pre class="js" name="code"><script>
function fileName()
{
var _file = document.getElementById('select_file');
document.getElementById('selected').innerHTML = _file.value.replace(/C:\\fakepath\\/i, '');
}
</script></pre>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">To make this work, you need to attach</span><span style="font-family: Courier New, Courier, monospace;"> fileName() </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">to the input field, to do this simply add</span><span style="font-family: Courier New, Courier, monospace;"> onchange="fileName()" </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">like so:</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<pre class="html" name="code"><input id="select_file" type="file" onchange="fileName()" /></pre>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I hope this has helped!</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b><a href="http://jsfiddle.net/ChubbyNinja/Y94nz/" target="_blank">And here's a working DEMO</a></b></span></h2>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com1tag:blogger.com,1999:blog-3489150351263484377.post-161269037293045472013-06-14T17:02:00.001+01:002013-06-14T20:46:19.684+01:00Need help getting your tweets onto your website? (Twitter API v1.1 no PHP needed)<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">A lot of us used to use the old "search twitter for the screenname and return the json results" javascript.. this was awesome, and easy to implement.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Unfortunately, Twitter turned off the old 1.0 API, which includes unauthorized queries to their API v1.1.. now you have to sign up for an application, create an oAuth and make requests to twitter..</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Now people are shouting "My twitter feed isn't working!!!" and "how do i get my twitter feed on my website?" and "how to oauth with twitter"...</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">This means time and hassle searching and developing.. it also means you need to watch and change it again once twitter change their setup again!</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Or, you could use <a href="http://getmytweets.co.uk/">http://getmytweets.co.uk</a></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">It's simple, it includes 5 steps in total, and 1 of the steps is sharing the website with people!!</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Here's how it works..</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Simply, place this above the </head> tag of your HTML and replace "gmtweetsuk" with your twitter username..</span><br />
<br />
<pre class="html" name="code"><!-- include the jQuery library if you haven't already -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- include the GMTweets library, keep this hosted to our servers to ensure you stay up-to date -->
<script src="http://api.getmytweets.co.uk/min.tweet.2.js"></script>
<!-- the plugin -->
<script type="text/javascript">
$(document).ready(function(e) {
$('.twitter_feed').getmytweets({
twitter_sn: 'gmtweetsuk', /* my twitter username */
twitter_wrap: 'tweet', /* wrap each tweet with a class */
twitter_limit: 1 /* how many tweets to return */
});
});
</script></pre>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">And then place this where you want your tweets to appear:</span><br />
<br />
<pre class="html" name="code"><div class="twitter_feed"></div></pre>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Simple!
</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The good thing about this, is when twitter change things, you don't have to! GMTweets will constantly update their API to keep your feed current and working.. all you need to do is keep linking to their JS.</span>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com2tag:blogger.com,1999:blog-3489150351263484377.post-73905207264124024042013-02-23T22:28:00.001+00:002013-02-23T22:33:05.265+00:00Need help fixing your newsletter / eflyer / eshot?So, building a newsletter that works in all the different email clients is a mission! <br />
<br />
Luckily there is a program that helps out, adobe fireworks - this program exports the HTML files and images needed for the newsletter, unfortunately this isn't all you need to do.. That'll be ok for some templates but if you have any text in yours newsletter there'll be issues!<br />
<br />
There's a tool called <a href="http://www.eshotdoctor.com/" target="_blank">eshotdoctor.com</a> which takes your HTML freshly exported from fireworks and processes is to fix all the issues like padding, images out of shape, text resizing on iPhone mail, images jumping on googles gmail, blue links underline on mac outlook and more!<br />
<br />
Give it a try.. It saves you so much time <br />
<br />
<a href="http://www.eshotdoctor.com/" target="_blank">http://www.eshotdoctor.com</a>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com0tag:blogger.com,1999:blog-3489150351263484377.post-87861192659241391832013-01-23T15:43:00.005+00:002013-01-23T15:45:10.629+00:00Wait until all images have loaded then fade in - jQuery<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I'll be showing you a very easy way of having all your images hidden, and then fading in nicely when they have loaded, which gives a nicer effect than seeing them trace down the page or depixelate into an image...</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Place this in your head just before the closing tag.. </span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<pre class="html" name="code"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('img').css('opacity',0); // hide all images
});
$(window).load(function() { // we use $(window).load because unlike $(document).ready, it isn't triggered until the client has finished loading completely.
$('img').animate({'opacity':1},800); // everything is loaded, fade images in
});
</script>
</pre>
Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com1tag:blogger.com,1999:blog-3489150351263484377.post-53836522902022333762012-07-02T18:14:00.000+01:002012-07-02T18:15:01.980+01:00How to use CSS3 Pseudo Classes on IE7 and IE8<br />
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
It is a real shame when you have to drop using Pseudo classes and add another class into your CSS just to combat IE7 and IE8. Sure it's no big deal, but these classes, especially nth-* is a really nice addition to the CSS library, and makes coding a lot easier. Luckily, jQuery does understand these selectors. </div>
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
A lot of websites are using the jQuery library now, so we have developed this plugin to use in conjunction with jQuery.</div>
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
How to use it:</div>
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
Place this just before the closing <strong style="border: none; margin: 0px; padding: 0px;"></head></strong></div>
<pre style="border: none; color: #666666; font-size: 11px; line-height: 20px; padding: 0px;"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://api.skyblueproject.com/pseudoie/pseudo-ie.0.1.min.js"></script>
<!--[if lt IE 9]>
<script>
$(document).pseudoie({url:'<span style="border: none; color: red; margin: 0px; padding: 0px;">style.css</span>'});
</script>
<![endif]-->
</pre>
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
Make sure you replace <span style="border: none; color: red; margin: 0px; padding: 0px;">style.css </span>with the path to your stylesheet for instance:</div>
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
/styles/style.css<br />
/css/style/mystylesheet.css</div>
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
If you have multiple stylesheets to parse, then simply replicate as follows:</div>
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
<br /></div>
<pre style="border: none; color: #666666; font-size: 11px; line-height: 20px; padding: 0px;"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://api.skyblueproject.com/pseudoie/pseudo-ie.0.1.min.js"></script>
<!--[if lt IE 9]>
<script>
$(document).pseudoie({url:'<span style="border: none; color: red; margin: 0px; padding: 0px;">style1.css</span>'});
$(document).pseudoie({url:'<span style="border: none; color: red; margin: 0px; padding: 0px;">style2.css</span>'});
$(document).pseudoie({url:'<span style="border: none; color: red; margin: 0px; padding: 0px;">style3.css</span>'});
</script>
<![endif]-->
</pre>
<div style="border: none; color: #666666; font-family: Arial, sans-serif, Verdana; font-size: 11px; line-height: 20px; margin-bottom: 14px; padding: 0px;">
Hope this helps!<br />
<br />
Any issues please leave a comment!</div>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com0tag:blogger.com,1999:blog-3489150351263484377.post-39209446285277730522012-03-22T18:41:00.000+00:002012-03-22T18:41:27.770+00:00Custom select dropdown with CSS and JS<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Dropdowns have been a major pain in the backside in the past when it comes to styling of them, the default look doesn't always suite your website theme.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Customization is very limited, but it's not very difficult to change the style of the dropdown with CSS and javascript.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Lets turn this:</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1McijHBMrCl8TPppcu_HqAtjCfeiG77pUJXXdHpjsMj60_5bJcFB4Grm-faJc58YhE5YHVPRMnaBQTlIchbompxxSjuTc9UvczstvajhaTJLIrmzc1dMjJwXPe43WXSw325P4FwIb6rnf/s1600/Untitled-1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1McijHBMrCl8TPppcu_HqAtjCfeiG77pUJXXdHpjsMj60_5bJcFB4Grm-faJc58YhE5YHVPRMnaBQTlIchbompxxSjuTc9UvczstvajhaTJLIrmzc1dMjJwXPe43WXSw325P4FwIb6rnf/s1600/Untitled-1.jpg" /></a></div>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Into this:</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHw9xGvcN3nmkHC0q_QGSvA0vwnEg8og502W6oHvS-7n0sFDw2CnEkqNRF3fJfllsy9a95cHXr7mr7bBRwUU8MDl5wCOBpckZD3qy5nMvCcVrZwtd2CcwntGQCcu5VOCXq9cGkHSAWtLk/s1600/Untitled-12.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHw9xGvcN3nmkHC0q_QGSvA0vwnEg8og502W6oHvS-7n0sFDw2CnEkqNRF3fJfllsy9a95cHXr7mr7bBRwUU8MDl5wCOBpckZD3qy5nMvCcVrZwtd2CcwntGQCcu5VOCXq9cGkHSAWtLk/s1600/Untitled-12.jpg" /></a></div>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: large;"><b>Step 1</b></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">The HTML - This is simple, basically we have a div which holds the select element, it also holds the span element:</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<pre class="html" name="code"><div class="selection">
<select class="selectbox" onchange="changeValue(this.value);">
<option>test select</option>
<option>test select 2</option>
<option>test select 3</option>
<option>test select 4</option>
<option>test select 5</option>
</select>
<span id="selector">test select</span>
</div>
</pre>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: large;"><b>Step 2</b></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">The CSS - this tells the select element to become invisible, and tells the span what to look like and to sit below the selectbox.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<br />
<pre class="css" name="code"><style>
.selection { position:relative; }
.selectbox,#selector {
position:absolute;
top:0;
left:0;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
}
.selectbox {
width:220px;
padding:5px;
height:30px;
opacity:0;
z-index:5;
}
#selector {
background-image:url(dropdown.jpg);
background-repeat:no-repeat;
padding:5px 43px 5px 10px;
overflow:hidden;
width:162px;
height:20px;
color:#fff;
}
</style>
</pre>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Perfect, as you can see from the CSS, the span with the id of #selector uses a background image called dropdown.jpg - this gives the coloured background and the arrow, you can make your own one. - this image is 215x30px if you change the size of it make sure you adjust the CSS accordingly, basically fiddle around with the #selector width and padding. You may also need to change the .selectbox width and padding if you experience difficulty clicking the dropdown once you've changed the size.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: large;"><b>Step 3</b></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">The Javascript - this is just to update the span with the selected dropdown option.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">You can do this with the jQuery library (if you already use it on your website), or using built in javascript, both work fine:</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><b>jQuery</b></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<br />
<pre class="html" name="code"><script>
function changeValue(val)
{
$('#selector').html(val);
}
</script>
</pre>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><b>Javascript</b></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<br />
<pre class="html" name="code"><script>
function changeValue(val)
{
document.getElementById('selector').innerHTML = val;
}
</script>
</pre>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">So there you have it, the complete code is below:</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: large;"><b>Complete Code</b></span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: large;"><b><br /></b></span>
<br />
<pre class="html" name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Select box</title>
<script>
function changeValue(val)
{
document.getElementById('selector').innerHTML = val;
}
</script>
<style>
.selection { position:relative; }
.selectbox,#selector {
position:absolute;
top:0;
left:0;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
}
.selectbox {
width:220px;
padding:5px;
height:30px;
opacity:0;
z-index:5;
}
#selector {
background-image:url(dropdown.jpg);
background-repeat:no-repeat;
padding:5px 43px 5px 10px;
overflow:hidden;
width:162px;
height:20px;
color:#fff;
}
</style>
</head>
<body>
<div class="selection">
<select class="selectbox" onchange="changeValue(this.value);">
<option>test select</option>
<option>test select 2</option>
<option>test select 3</option>
<option>test select 4</option>
<option>test select 5</option>
</select>
<span id="selector">test select</span>
</div>
</body>
</html>
</pre>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com5tag:blogger.com,1999:blog-3489150351263484377.post-23122706480275521002012-03-14T14:45:00.000+00:002012-03-19T12:45:34.508+00:00How to secure HTML5 video<span style="font-size: small;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">With videos being used everywhere, more and more websites are trying to accommodate videos on their website, if it's for visual tutorials, or marketing. Sometimes though you don't want your video being downloaded and shared with others.. A good case for this would be a subscription based website. <br /><br />Easy, lets use a flash player.. well ok, we could do.. but with more and more websites jumping over to HTML5 compliant, it would be nice if we could protect our videos and still use the HTML5 player.<br /><br />The key issues with using an HTML5 player is there is absolutely NO encryption or protection for the videos.<br /><br />Here's an example of the HTML5 video tag</span></span>
<br />
<pre class="php" name="code"><video controls>
<source src="/sample.mp4" type="video/mp4" />
<source src="/sample.webm" type="video/webm" />
</video>
</pre>
<span style="font-size: small;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">All a viewer has to do is right click on the playing video and hit a button called 'Save Video As' and they'll have it on their computer. If not they can see exactly where the video is stored and download it anyway.<br /><br />Protecting the video is a very complex method using multiple checks on multiple technologies, i won't go into the details..<br /><br />We have spent hours, ounces (of coffee), an unmeasurable amount of stress developing this HTML5 protection. <br /><br />After a lot of agressive testing we have secured our videos and have developed a very smart detection system which adapts to different download attempts.<br /><br />And so from the creators of <a href="http://www.skybluecreations.com/blog/skyblue-transporter---the-sb-simplistic-alternative-to-yousendit" target="_blank">The Skyblue Transporter</a> and <a href="http://www.skybluecreations.com/blog/tutorial-how-to-make-a-google-plus--1-share-button" target="_blank">The Custom Google +1 button</a> we are proud to announce that we will be releasing Version 1 of our <a href="http://www.skybluecreations.com/blog/moving-forwards-with-html5-securing-html5-videos" target="_blank">SkyblueVideoProtection (SkyBVP)</a> on a cloud based subscription where you can securely store and stream your videos embedded directly to your website.. For more information <a href="http://www.skybluecreations.com/contact" target="_blank">please enquire</a>! </span></span>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com1tag:blogger.com,1999:blog-3489150351263484377.post-26014921833176575172011-10-13T10:07:00.000+01:002011-10-13T10:17:45.057+01:00PHP: Getting disk usage (class)<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">I thought I might as well post this class I wrote a while ago. It basically gathers the following for the specific drive you've selected;</span><br />
<ul>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"> Raw Total Size</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Raw Free Size</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Readable Total Size</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Readable Free Size</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Percentage Free</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Percentage Used</span></li>
</ul>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">The Class</span><br />
<pre class="php" name="code"><?php
class diskSpace
{
function __construct( $disk = '.' )
{
$this->the_drive = $disk;
$this->raw_diskspace = $this->disk_spaces( "total" );
$this->raw_freespace = $this->disk_spaces( "free" );
$this->readable_diskspace = $this->readableSizes( $this->raw_diskspace );
$this->readable_freespace = $this->readableSizes( $this->raw_freespace );
$this->percentage_free = $this->percentages( "free" );
$this->percentage_used = $this->percentages( "used" );
}
public function disk_spaces( $type )
{
switch($type)
{
case "total":
return disk_total_space( $this->the_drive );
break;
case "free":
return disk_free_space( $this->the_drive );
break;
}
}
public function readableSizes( $size )
{
$types = array( ' B', ' KB', ' MB', ' GB', ' TB', ' TB', ' EB', ' ZB', ' YB' );
$i=0;
while($size>=1024)
{
$size/=1024;
$i++;
}
return("".round($size,2).$types[$i]);
}
public function percentages( $type )
{
switch($type)
{
case "free":
return (round($this->raw_freespace / $this->raw_diskspace, 2) * 100) . "%";
break;
case "used":
return round(100 - $this->percentage_free) . "%";
break;
}
}
}
?>
</pre>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">The Usage</span><br />
<pre class="php" name="code"><?php
// load class with default drive
$dUsage = new diskSpace;
// or load class with specific drive
$dUsage = new diskSpace( "." );
// how to call each option
print("The Disk: " . $dUsage->the_drive);
// will output: .
print("Raw Size: " . $dUsage->raw_diskspace);
// will output: Raw Size: 489616760832
print("Raw Free: " . $dUsage->raw_freespace);
// will output: Raw Free: 454473097216
print("Readable Size: " . $dUsage->readable_diskspace);
// will output: Readable Size: 455.99 GB
print("Readable Free: " . $dUsage->readable_freespace);
// will output: Readable Free: 423.26 GB
print("Percentage Free: " . $dUsage->percentage_free);
// will output: Percentage Free: 93%
print("Percentage Used: " . $dUsage->percentage_used);
// will output: Percentage Used: 7%
?>
</pre>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com1tag:blogger.com,1999:blog-3489150351263484377.post-41361489704796583492011-10-12T14:09:00.001+01:002011-10-12T14:09:57.735+01:00Make script not directly accessible<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">So if you're a PHP developer and want to make some include files protected. Basically so no one can look directly at them for whatever reason, simply;</span><br />
<br />
<pre class="php" name="code"><?php
if(preg_match("/".basename(__FILE__)."/i",$_SERVER['REQUEST_URI']))
{
die("Direct access is not allowed");
}
?></pre><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Simples!</span>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com0tag:blogger.com,1999:blog-3489150351263484377.post-22505275000349806222011-08-23T11:52:00.005+01:002011-10-11T11:57:22.794+01:00Tutorial: How to apply a custom google plus +1 share button<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">So I needed a custom google+1 button for a website I am developing.. But there wasn't any around! Sure there were custom buttons, icons etc, but no way to implement them. I searched on the interwebz for a tutorial on how to make a custom google +1 share button.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">But then I decided I might as well just make it myself.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">It was surprisingly easy to be honest, and because of the lack of tutorials out there, I thought I'd write a quicky!</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">So, How did I turn this:</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMF9cQRII-5YEioB72_CULPKoDmfZIPyKZXoFhwSvgfjpJMqKeol4ytyJj4ulSenJiHJhD0Ax-8YeaStF1AlMBpoo3WqtL-HIWtBbEKCGkoVgv32SfjLMFR_b9QU171RePx3VBHqfTl_Nn/s1600/oldplus.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMF9cQRII-5YEioB72_CULPKoDmfZIPyKZXoFhwSvgfjpJMqKeol4ytyJj4ulSenJiHJhD0Ax-8YeaStF1AlMBpoo3WqtL-HIWtBbEKCGkoVgv32SfjLMFR_b9QU171RePx3VBHqfTl_Nn/s320/oldplus.jpg" width="320" /></a></div><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
</span><br />
<br />
<br />
<br />
<br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Into this: </span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioTgA_jSiuNh0QCytOnI1uA_ygm43IqX1UUFbL5pLMcnhT9ozN5XMNe4oSt-vYjML3O6_JTWnYj8w2xcRgoyoOtvB1_36bUcEVYw2LKDaV8KOgEv9ewkElAx-NJdByczjDEzvXeTWa9nrd/s1600/newplus.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioTgA_jSiuNh0QCytOnI1uA_ygm43IqX1UUFbL5pLMcnhT9ozN5XMNe4oSt-vYjML3O6_JTWnYj8w2xcRgoyoOtvB1_36bUcEVYw2LKDaV8KOgEv9ewkElAx-NJdByczjDEzvXeTWa9nrd/s320/newplus.jpg" width="320" /></a></div><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
</span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Well when you see below you'll kick yourself if you haven't already, because it's so simple.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><b>Step 1</b></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;">Pour yourself a brew, Now this can be either Tea or Coffee dependent on your preference.</span></span></span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: large;"><b>Step 2</b></span> </span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;">The HTML </span></span></span><br />
<pre class="html" name="code"><div class="googleplus">
<div class="googlehider">
<g:plusone annotation="none"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<img src="images/googleplus.png" class="mygoogle" />
</div>
</pre><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: large;"><b>Step 3</b></span> </span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;">Next, you'll have to get your custom icon, this is the one we are going to replace the original google +1 icon with. (Here's some good ones: <a href="http://www.iconfinder.com/search/search/?q=google%20plus">http://www.iconfinder.com/search/search/?q=google%20plus</a> ) </span></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;">Make sure you name it googleplus.png and place it in your images folder.. - You may need to change the HTML above if your image is named or located elsewhere.</span></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;"><br />
</span></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;"><span style="font-size: large;"><b>Step 4</b></span></span></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;"><span style="font-size: large;"><span style="font-size: small;">The CSS</span></span></span></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;"><span style="font-size: large;"><span style="font-size: small;"> </span><b> </b></span></span></span></span><br />
<pre class="css" name="code">.googleplus {
position:relative;
/* - use this to position your share icon on your page - */
}
.googlehider {
opacity:0;
height:30px;
width:30px;
position:absolute;
top:0;
left:0;
z-index:3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
.mygoogle {
position:absolute;
top:0;
left:0;
z-index:2;
margin-left:6px;
}
</pre><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: large;"><b>Step 5</b></span> </span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;">Put it all together..</span></span></span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;"><b><span style="font-size: large;">Step 6</span></b></span></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;"><span style="font-size: large;"><span style="font-size: small;">Enjoy your freshly made brew.. it should still be warm ;-)</span></span></span></span></span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: large;"><span style="font-size: small;"><span style="font-size: large;"><span style="font-size: small;">Walla! I hope this helps :-) </span></span> </span></span></span>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com40tag:blogger.com,1999:blog-3489150351263484377.post-71530087085867158732011-05-26T14:59:00.001+01:002011-05-26T15:34:26.276+01:00How to remove the fonts.com footer banner<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">If you use <a href="http://webfonts.fonts.com/">webfonts.fonts.com</a> for their custom web fonts API, and like me, you don't like their default footer banner.</span><br />
<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkKaYnjzZjyeA6w2H82fPsLacszIkaVcn_Bx5ax55DrlUOr39llWzM1ReEEY-hLkKBwGqlo7YSf7euu4bhFu1Mar7mZ49CPaq7ocSDHhYSs-FRYYAfKqNLQCjnXjhjubFGbykNue_mCrxQ/s1600/fonts.com_image.jpg" imageanchor="1" style="clear: both; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkKaYnjzZjyeA6w2H82fPsLacszIkaVcn_Bx5ax55DrlUOr39llWzM1ReEEY-hLkKBwGqlo7YSf7euu4bhFu1Mar7mZ49CPaq7ocSDHhYSs-FRYYAfKqNLQCjnXjhjubFGbykNue_mCrxQ/s1600/fonts.com_image.jpg" /></a></div><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">You've probably wanted to remove it and replace it with your own custom, much slicker banner which works nicely with your website.</span><br />
<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhu7B3io2V_zdsdxmyIaiGrgx1E2A0EzcSIBJt_9GWCzf7jzFtBlwtPdqd6vMvuSEn4S6ctXNmR-jr6DHCkCVHaKtDXgpvVY-r7xcVXx4bNqMhF7OIqgkXg3O6KsGUQmY219BrAfUcGqgs/s1600/fonts.com_custom2.jpg" imageanchor="1" style="clear: both; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhu7B3io2V_zdsdxmyIaiGrgx1E2A0EzcSIBJt_9GWCzf7jzFtBlwtPdqd6vMvuSEn4S6ctXNmR-jr6DHCkCVHaKtDXgpvVY-r7xcVXx4bNqMhF7OIqgkXg3O6KsGUQmY219BrAfUcGqgs/s1600/fonts.com_custom2.jpg" /></a></div><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">I recently had this problem and decided to do something about it.</span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><b><span style="font-size: large;">How they do it</span></b></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: small;">The javascript file you include in the head of your html document loads their custom css and font, it then waits for 6 seconds to load the banner, this ensures all your other scripts have loaded, leaving nothing left but their banner to be placed neatly at the bottom of the page looking hideous.</span></span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: small;">I am going to give two examples here to removing this banner, the first will be using the jQuery library.</span></span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: small;"><b><span style="font-size: large;">Using the jQuery library</span></b></span></span><br />
<span style="font-size: small;"><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Below is the complete code, it would be nice if you could leave my simple credits in there, Basically what happens is we count how many div tags have been loaded into the page and then we keep checking for another div to be added at the bottom of the page, once this happens we change the css attribute of display to none, which hides the banner.</span></span><br />
<span style="font-size: small;"><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"></span></span><br />
<pre class="js" name="code">/* http://dannyscodesnippets.blogspot.com 2011 removing webfonts.fonts.com banner */
/* when the document is ready start */
$(document).ready(function(){
/* set variables */
var count,newcount;
/* count total divs loaded on the page */
count = $('div').length;
function checkwebFontDiv() {
/* count total divs loaded on the page */
newcount = $('div').length;
/* if the total divs has increased by 1 then continue */
if(newcount == count+1){
/* hide the last div (the fonts.com banner div) */
$('div:last').css("display","none");
/* otherwise check again */
} else {
setTimeout(checkwebFontDiv,5);
}
}
/* start checking for the new div */
checkwebFontDiv();
});
</pre><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"> This is an example of how to implement this into your webpage.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">First of all you need to download the jQuery library from here <a href="http://jquery.com/">jquery.com</a> (latest version).</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Secondly you need to make sure you place this inside your head tags</span><br />
<pre class="js" name="code"><html>
<head>
<title>My test page hiding fonts.com banner</title>
<script src="javascript/jquery.1.5.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
/* http://dannyscodesnippets.blogspot.com 2011 removing webfonts.fonts.com banner */
/* when the document is ready start */
$(document).ready(function(){
/* set variables */
var count,newcount;
/* count total divs loaded on the page */
count = $('div').length;
function checkwebFontDiv() {
/* count total divs loaded on the page */
newcount = $('div').length;
/* if the total divs has increased by 1 then continue */
if(newcount == count+1){
/* hide the last div (the fonts.com banner div) */
$('div:last').css("display","none");
/* otherwise check again */
} else {
setTimeout(checkwebFontDiv,5);
}
}
/* start checking for the new div */
checkwebFontDiv();
});
</script>
<head>
</pre><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br />
and that's it.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"> </span><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"> </span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: small;"><b><span style="font-size: large;">Using javascript</span></b></span></span><br />
<span style="font-size: small;"><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Below is the complete code, it would be nice if you could leave my simple credits in there, Basically what happens is we count how many div tags have been loaded into the page and then we keep checking for another div to be added at the bottom of the page, once this happens we change the css attribute of display to none, which hides the banner. The difference between this and the example above is that you don't need the jQuery library loaded, <b>you also need to place this at the bottom of your webpage</b>, just before the closing body tag.</span></span><br />
<br />
<pre class="js" name="code"><script>
/* http://dannyscodesnippets.blogspot.com 2011 removing webfonts.fonts.com banner */
var count,newcount,xDivs;
xDivs = document.getElementsByTagName('div');
// count total divs loaded on the page
count = xDivs.length;
function checkwebFontDiv() {
// count total divs loaded on the page
newcount = xDivs.length;
// if the total divs has increased by 1 then continue
if(newcount == count+1){
// hide the last div (the fonts.com banner div)
xDivs[count].style.display='none';
// otherwise check again
} else {
setTimeout(checkwebFontDiv,5);
}
}
// start checking for the new div
checkwebFontDiv();
</script>
</body>
</html>
</pre><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">That's it!</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Any questions please comment.</span>Anonymoushttp://www.blogger.com/profile/11270517328334718070noreply@blogger.com15