Posts categorized “The Web”.

Create Add Root FTP Account in cPanel

When you get a new hosting account you get an account user. These user details can be used to log into cPanel if you have it, but can also be used to connect via an ftp client to upload your sites files.

This always puts me on edge though. If someone gets your details they can’t just access your ftp but can also log in and make any changes that they want to your site.

For this reason I generally set up a new ftp account just to use for ftp access.

Until now I’ve never worked out how to access the root of a site with an ftp account. Generally I just accept access to the public_html folder and leave it at that. But today I finally worked out how to give an ftp account root access to a hosting accounts files.

More… »

CSS3 Element Wiggle With Keyframes

fetchit-21

This technique produces something similar to the wiggle you get on an iPhone when deleting items.

Be aware that keyframe animation is still very poor in Chrome and cases freezing and jumping if multiple items are animated at once.

The animation css below results in a hovered element rotating back and forth around it’s centre point. You can update the number of degrees and length of animation to change the appearance.

Just add this css and give your element the class ‘wiggler’ to implement

 
/* safari and chrome */
@-webkit-keyframes wiggle {
	0% {-webkit-transform:rotate(4deg);}
	50% {-webkit-transform:rotate(-4deg);}
	100% {-webkit-transform:rotate(4deg);}
}
 
/* firefox */
@-moz-keyframes wiggle {
	0% {-moz-transform:rotate(4deg);}
	50% {-moz-transform:rotate(-4deg);}
	100% {-moz-transform:rotate(4deg);}
}
 
/* anyone brave enough to implement the ideal method */
@keyframes wiggle {
	0% {transform:rotate(4deg);}
	50% {transform:rotate(-4deg);}
	100% {transform:rotate(4deg);}
}
 
.wiggler:hover {
	-webkit-animation: wiggle 0.5s infinite;
	-moz-animation: wiggle 0.5s infinite;
	animation: wiggle 0.5s infinite;
}

A Friend Request Form Inside A Facebook Iframe Application

fetchit-21

The example given on the Facebook developer documentation page ( http://developers.facebook.com/docs/reference/fbml/serverFbml/ ) doesn’t work. This one does.

Note how some html is escaped and the multi-friend-selector is inside the form.

The code below allows you to add the large version of a friend select in the form of an invite tool to your iframe facebook applications:

<fb:serverFbml style="width: 755px;">  
     <script type="text/fbml">
        <fb:fbml>
            <fb:request-form
                action=""
                method="post"
                invite="true"
                type="XFBML"
                content="This is a test invitation from XFBML test app
                &lt;fb:req-choice url=&quot;see fb:req-choice docs for details.&quot;
                    label=&quot;Ignore the Facebook test app!&quot; /&gt;
             ">
				<fb:multi-friend-selector
                    showborder="false"
                    actiontext="Invite your friends to use Socially." />
             </fb:request-form>
         </fb:fbml>
    </script>
</fb:serverFbml>

Twitter Bootstrap Tabs On Right Side

fetchit-21

Twitter’s bootstrap css currently doesn’t support tabs on the right hand side or floated right. We’ll here is the css to allow it.

We’ll stick to existing naming. Twitter use secondary-nav within topbar so let’s use that…

.tabs .secondary-nav {
	float:right;
	margin-left:10px;
	margin-right:0;
}

The the html for the tab you want to float right you need:

<li class="secondary-nav"><a href="#">Link Text</a></li>

The outcome is most tabs on the left and any with the new class positioned over to the right.

Hide Google Related Bar On Your Website With CSS

fetchit-21

Update: The css method of removing / hiding the related bar no longer works. See the new (javascript only) fix at bottom of this post.

Google recently released a new browser extension for Internet Explorer and Google Chrome called Google Related. I’m sure it will be coming to Firefox soon.

The extension adds a bar to the bottom of some website which shows things like maps, video, images, reviews and related websites.

To get the bar to show at the bottom of your browser Google injects an iframe at the end of your body tag which is positioned with css to always sit at the bottom of your browser and has a high z-index to ensure it always sits above everything else on the page.

No longer working css fix

The beauty of Google Related using an iframe in your own pages html is that you can hide it using a single css declaration. For now it’s as simple as…

iframe.grelated-iframe {
	display: none;
}

…although in the future, if Google get wise to webmasters hiding their Google Related bar you may need to do something like

iframe.grelated-iframe {
	left:-99999px !important;
	display: none !important;
}

Update November 2011

<iframe frameborder="0" src="http://www.gstatic.com/webgps/grelated_0_6_9/html/grelated_bar_iframe.html" style="border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; bottom: 0px !important; display: block !important; left: 0px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; position: fixed !important; right: 0px !important; top: auto !important; vertical-align: baseline !important; visibility: visible !important; width: 100% !important; z-index: 2147483647 !important; height: 49px !important; " scrolling="no"></iframe>

As you can see Google no longer makes it easy to hide the tool using css. They’ve ensured every css property you could use to hide the iframe is forced as !important.

The only option left (if you still want to hide the bar) is to use javascript to hide or remove the element.

I’m suggesting a setInterval incase Google does an update which keeps trying to reshow / add the iframe.
I’m suggesting ‘none !important’ because it’s the highest selector value you can add and least likely to be replaced by other css on the page or that Google choose to inject.

setInterval(function()
{
 var ifr = document.body.getElementsByTagName('iframe'), l = ifr.length;
    for(var a = 0; a < l; a++)
    {
        if(ifr[a].src.match(/^http:\/\/www\.gstatic/))
        {
            ifr[a].style.display = 'none !important'
        }
    }
},1000);

That javascript will check all iframes in the page once every second to see if it’s the pesky Google related bar by checking the url (which may need updating in the future!) and hides it if it does.

If you’re unsure of what to do with the javascript code, copy the JavaScript above and paste it into a .js file which is included on every page of your site, or copy the whole next code chunk and paste it just before the closing body tag of your page.

<script type="text/javascript">
setInterval(function()
{
 var ifr = document.body.getElementsByTagName('iframe'), l = ifr.length;
    for(var a = 0; a < l; a++)
    {
        if(ifr[a].src.match(/^http:\/\/www\.gstatic/))
        {
            ifr[a].style.display = 'none !important'
        }
    }
},1000);
</script>

If you use jQuery on your site then the following will do something very similar:

 
setInterval(function()
{
    $('body > iframe[src^=http://www.gstatic]').css({display:'none !important'});
},1000);