html5 placeholder attribute for ie9 and prior

by prettyscripts on 2014-01-28 03:50 • Send feedback »

css • javascript • html • html5 • jquery

one of the many features introduced in html5 is placeholder attribute for form fields. this can be done with javascripts but it's even better being native to html5.

that is, until you use browser that does'n't support html5, like ie9 (and before).

there are quite a few codes out there claiming to make placeholder attribute work in older browsers. but after trying out a few, the following code worked the best (founded via this page).

jquery and modernizr are required.

define css:

CSS

.placeholder { color: #aaa; }

the code

HTML

<script type="text/javascript">
 
$(document).ready(function() {
 
    // Only do anything if the browser does not support placeholders
    if (!Modernizr.input.placeholder) {
 
        // Format all elements with the placeholder attribute and insert it as a value
        $('[placeholder]').each(function() {
            if ($(this).val() == '') {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
            $(this).focus(function() {
                if ($(this).val() == $(this).attr('placeholder') &amp;&amp; $(this).hasClass('placeholder')) {
                    $(this).val('');
                    $(this).removeClass('placeholder');
                }
            }).blur(function() {
                if($(this).val() == '') {
                    $(this).val($(this).attr('placeholder'));
                    $(this).addClass('placeholder');
                }
            });
        });
 
        // Clean up any placeholders if the form gets submitted
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') &amp;&amp; $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        });
 
        // Clean up any placeholders if the page is refreshed
        window.onbeforeunload = function() {
            $('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') &amp;&amp; $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        };
    }
});
</script>

xajax: function returns value

by prettyscripts on 2014-01-20 07:58 • Send feedback »

php • html • code

this code has been tested with xajax V0.6 beta 1.

before sending header:

PHP

	`require_once('xajax_core/xajax.inc.php');`
	`$xajax = new xajax();`
	`$xajax->configure('defaultMode', 'synchronous');`
	`$xajax->register(XAJAX_FUNCTION, 'return_something');`
	`$xajax->processRequest();`

note: line 3 - this must be added to make it work.

xajax function:

PHP

function return_something() {
    $r = new xajaxResponse()
    $r->setReturnValue('the value');
    return $r;
}

calling the function to display the return value:

HTML

<a href="#" onclick="alert(xajax_return_something());">click me</a>

wordpress: qtranslate disabled itself

by prettyscripts on 2013-09-27 15:59 • Send feedback »

php • wordpress

at the time of writing this post, a wordpress site was upgraded to V3.6 and qtranslate plugin was broken. when editing a page or post, the editor does not allow editing the languages and there's a message displayed above the editor:

The qTranslate Editor has disabled itself because it hasn't been tested with your Wordpress version yet. This is done to prevent Wordpress from malfunctioning. You can reenable it by clicking here (may cause data loss! Use at own risk!). To remove this message permanently, please update qTranslate to the corresponding version.

there is a temporary solution while waiting for the plugin to update.

go to the plugin directory and edit qtranslate.php, locate 'QT_SUPPORTED_WP_VERSION' and change the version number the the current wordpress version.

update: this happens when wordpress is upgraded and qTranslate is not. for a quick fix, simply follow the above instruction and update to the current wordpress version.

instagram widget for b2evo or your website

by prettyscripts on 2013-08-11 22:03 • Send feedback »

free • social network

instagram is one of the most popular photo sharing services. it's quite common to display instagram photos on websites.

i thought about writing a plugin for b2evolution since it doesn't seem to have existed yet. however after doing some research via google (as always), i find it's easier to just add the code to the website rather than writing the plugin.

the service is provided by snapwidget. which displays instagram photos as grid, slideshow or photomap. it's free too!

simply go to the site, fill in the form (scroll down the page a bit). it will generate a code to be copy-and-pasted to your site.

if your site is powered by b2evolution, to add to your sidebar:

from tool bar menu on top of the site, select blog > blog settings > widgets
add widget, select free html. paste the code.

now. this is easier than writing a plugin.

social icons widget for b2evolution

by prettyscripts on 2013-08-01 17:24 • Send feedback »

free • php • b2evolution

adds a widget with links to rss feeds and most popular social media such as facebook, google+, instagram, linkedin, pinterest, twitter, youtube.

default icon sets used by the widget by http://www.pinkmoustache.net/.

default icons can be overwritten via css. all icons are enclosed in class #social-icons-block. to overwrite the icon, simple add:

CSS

#social-icon-widget-[type] { background: url(/path/to/icon); }

replace value for [type] with facebook, twitter, gplus, youtube, linkedin, pinterest, flickr, skype, contact.

license

not sure which one to use. it's free and you can do whatever you want with it.

it's greatly appreciated if you could link back to this post and contribute a small donation (tip jar at top right section of the site).

release

0.1 - initial beta release

0.2 - remove hello cotton, add flickr, instagram and contact / email

0.3 - update icons

installation

download the plugin. untar.
upload the folder to plugins directory.
activate the plugin via plugins menu
in plugin settings, enter the full url to the required social media. if empty icon will not be displayed.

support

please report any issues to the project page so i can easily keep track of any problems.

if you have used this plugin on your site, i'd love to see it! please leave yuor links and let me know what you think in the comments.

	`<script type="text/javascript">`

	`$(document).ready(function() {`

	`// Only do anything if the browser does not support placeholders`
	`if (!Modernizr.input.placeholder) {`

	`// Format all elements with the placeholder attribute and insert it as a value`
	`$('[placeholder]').each(function() {`
	`if ($(this).val() == '') {`
	`$(this).val($(this).attr('placeholder'));`
	`$(this).addClass('placeholder');`
	`}`
	`$(this).focus(function() {`
	`if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {`
	`$(this).val('');`
	`$(this).removeClass('placeholder');`
	`}`
	`}).blur(function() {`
	`if($(this).val() == '') {`
	`$(this).val($(this).attr('placeholder'));`
	`$(this).addClass('placeholder');`
	`}`
	`});`
	`});`

	`// Clean up any placeholders if the form gets submitted`
	`$('[placeholder]').parents('form').submit(function() {`
	`$(this).find('[placeholder]').each(function() {`
	`if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {`
	`$(this).val('');`
	`}`
	`});`
	`});`

	`// Clean up any placeholders if the page is refreshed`
	`window.onbeforeunload = function() {`
	`$('[placeholder]').each(function() {`
	`if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {`
	`$(this).val('');`
	`}`
	`});`
	`};`
	`}`
	`});`
	`</script>`

	`function return_something() {`
	`$r = new xajaxResponse()`
	`$r->setReturnValue('the value');`
	`return $r;`
	`}`