removing empty nodes with jQuery

Sometimes you have empty html tags on your code tree and no matter what you try in your cms / php, you can’t avoid them to appear in the rendered html.

But even then you can remove empty instances through some compact jQuery snippets – here are some examples that show how to remove empty links and empty image tags from the html document…

This is how to remove an empty image tag, that generates an error:

 $("img").error(function(){
     $(this).remove();
 });

This is how to remove a link tag that generates an error:

 $("a").error(function(){
     $(this).contents().unwrap();
 });

This is how to hide the parent tag, if the child tag “inscriptions” is empty:

 $("inscriptions:empty").parent().hide();

This is how to remove ’empty’ links that point to a directory instead of a page:

 $("a").each(function() {
     var href = $(this).attr("href");
     if(href == '/node/') { // or anything else you want to remove...
         $(this).contents().unwrap();
     }
 });

This is how to remove ’empty’ image tags that point to non-existing images:

 $("img").each(function() {
     var src = $(this).attr("src");
     if(src == '/images/-thumb.JPG') { // or anything else you want to remove...
         $(this).remove();
     }
 });

See also:

And here’s some related links:

Drupal: cancel button on edit node page

Are you missing a Cancel Button in your Drupal installation? Great. I know the feeling. But as they say: there’s a module for that. For many Drupal related tasks there is already a module available at drupal.org. But some essential tasks can be so ‘small’ that the related module would be even smaller – documenting and uploading it seems to be almost a waste of time. And since writing your own module in Drupal is actually not that difficult, finding a solution for such ‘small tasks’ can be as easy as copy-paste-save-upload. And this also applies to the missing cancel button.

When I needed a cancel button for one project I was working on, I ran into exactly this situation. Or maybe ‘situation’ is to big a word for this – anyways. I needed to add a cancel button to the “new node” and “edit node” screens for all pages. You may think Why not just leave the page instead of clicking a cancel button? And I must agree: from a functional perspective such a button would be redundant.  But from a UX perspective it may very well make sense to have that button: I actually only needed that extra button because the client I worked for was used to having a cancel button from his previous CMS. He was a bit irritated that there was no cancel button in the drupal installation I developed for him. Also telling him “Just leave the page” did not help.

Instead a quick search helped. I found this little snippet from Pascal Duez that does just that: adding a custom cancel button to the “new node” and “edit node” screen of all pages. That was exactly what I was looking for. You can find the module on gihub right here: gist.github.com/pascalduez/1888373

This is what the “new node” and “edit node” screen looks like when the module is activated:

Drupal Cancel Button Example Screenshot

custom cancel-button for Drupal

There is also a slightly more complex, or actually more ‘handy’ version of that script. It also forwards the user to a different, useful page, according to the context in which the cancel button was clicked:

” If the “Cancel” button is clicked, the user is being redirected the following way:

  1. If a “destination” paramter is set, this is used
  2. If no destination parameter is set and we’re in an edit form, the user is being redirected to the node display
  3. Otherwise the user is being redirected to the frontpage “

You can find the slightly more complex module from here:
julian.pustkuchen.com/en/drupal-7-snippet-add-cancel-button-content-edit-create-forms

drupal 7 admin toolbar disappearing [fix]

I recently had the problem, that my admin toolbar would be disappearing randomly. This of course can be a major problem – how do you want to administer your drupal installation when there is no toolbar? Only emptying the cache helped – so having the url to empty the cache at hand can be – handy.

If you happen to have the development module installed (which you should have) then the following path with flush the cache:

/devel/cache/clear

but also the following path lets you empty the cache manually:

/admin_menu/flush-cache

In my case this problem seemed to be a cache related problem. So emptying the cache helped. Luckily I found an easy fix for the problem over at drupal.org – so I didn’t have to empty the cache constantly. Here’s the details:

at the end of settings.php add this:

// admin toolbar fix
 $conf['admin_menu_cache_client'] = FALSE;

i found the quick fix for this problem over here: “Admin menu disappears (randomly), needs either cache to be emptied on every page or page refresh several times”
https://www.drupal.org/node/442560

and the fix was then right here:
https://www.drupal.org/node/442560#comment-2692220

How to move a WordPress Website to a different domain

After various domain movements I figured I would like to reduce my efforts to just one way of moving a WordPress installation from one domain to another – not the quick and dirty, but the right way. IMHO the question remains anyways, if there is any right or wrong way to move a WrdPress Website at all – or if all ways are right, as long as you get the thing done.

Prepare and pack your WordPress Website / Stuff carefully

I’d like to compare moving a WordPress Website to moving a household: of course you can do it this or that way – but in the end it is clearly the easiest if you wrap everything up, put it into boxes, put labels on the boxes – and move it from A to B. Then unpack everything, unwrap everything – and enjoy your new home.

At first glace this might look a bit unpractical – sometimes you just want to skip the wrapping, throw everything in the van as it is and that’s that. But in the end planning, wrapping and packing will reduce the risk of having your precious record collection and/or database broken. And in the long run this might save you a lot of stress, time and money.

So a couple of years ago to move a WordPress Website I actually used to first download all the files and then uploaded it to the new domain. Then I would do a database dump of the related mySQL database – and uploaded the dump, rebuild the database and  to the new webspace and restore all data records. Although this might look handy at first, it turns out to be very unpractical.

If not only the wbspace changed, but also the URL, you will soon notice that any URL you try under the new domain will forward you to the old domain. So entering new-domain/contact will forward you to old-domain/contact and so on. While this is quite easy to fix (just change the entry for siteurl and home in the db table “wp_options” to your new-domain) it might happen that all internal urls are still pointing to old-domain/url-path… That means every WordPress Page and every Blog Post that contains links is likely to be corrupt. So that’s not very handy.

Export – Import – and Bob’s your uncle

Instead of the above mentioned method I prefer to do a clean WordPress install. Upload and install all the plugins and the actual WordPress theme – put all the ‘infrastructure’ in place. To relate to the apartment moving: move and install the shelves first.

Then do an export of all posts and pages from the old domain. You can do that by using the built in WorPress function under tools > export or by using an appropriate plugin. Then download the dump and upload it to your new webspace / new domain. Then import all the posts and pages under the new domain through tools > import.

In general WordPress can import data records from various different sources: Blogger, LiveJournal, RSS, Tumblr etc.  So after clicking ‘import’ you’ll first see various options for different source to import from. One of the options is for WordPress: “Import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.” Following that link will either bring you directly to the upload/import page – or show you an option to install the import plug-in “WordPress-Importer” first.

Most things should be Äin place’ by now. But since WordPress has the (bad) habit to store internal links and links to images with the domain name, all those links are now still pointing to the old domain. But – there is of course a plugin for that: Better Search Replace lets you virtually find everything in your WrdPress-Database that you would want to find and replace. But since it is quite powerful, one should be rather careful using it. Another promising, probably a bit more streamlined plugin is  Velvet Blues Update URLs (which I haven’t tested myself yet).

This all might actually sound a bit complicated – but once you’ve done it once, it’s as easy as 1-2-3 – and Bob’s your uncle :)

301: Tell the world (or at least some bots) you’re moving

That’s about it? Not quite yet. Technically the website has moved – but how will the internet, the search engines, the outside world perceive this process? Worst case scenario: you dumped the old domain right after moving everything to the new domain – and never told anybody about it. So next time a search engine spider visits your old domain, all it will ever find is either an abandoned website or total emptiness. If you don’t let people (and bots) know you’ve moved, then nobody will know you have moved. The search engine spider then has no other option than reporting  “website abandoned” or “website deleted” – your website will drop from the search index – and you don’t want that.

If you’re like me, moving your website and keep your search engine ranking is what you probably actually want to achieve. So you should leave a note, where you and your content have moved – just as you would probably do in real life :) The easiest way of telling “everybody” is putting up a 301 notification. The 301 was just made for this and basically exactly this purpose – to get this one message across: “content has moved”.

To forward every visit to your new domain (under the same directory path) this would be the code snipped you need to place in a htaccess file on the root level of your old domain:

#Options +FollowSymLinks
RewriteEngine on
RewriteRule ^(.*)$ http://www.newdomain.com/$1 [R=301,L]

You’ll have to replace “newdomain.com” according to your new domain :)

tell google (and other link partners) where to find you

Last but not least you should probably contact google directly. If you happen to have a google webmasters account this is a rather easy process. You might want to delete your previous domain from the google index and register your new domain – along with xml sitemaps etc…

Ah – very last but not very least you should of course inform your link partners. The 301 redirect will do for some time, but after a while it might look a bit odd if people are simply redirected. And once you close down the old domain and the old webspace, also the 301 redirect will stop working. So you better be sure you get your link partners informed in time.

tell your readers you have moved (and why!)

And then you should probably also inform your users and/ or readers directly: write a blog post about your reasons to move, tweet about it, write a newsletter – whatever you preferred form of user interaction might be, now is the time to use it. It is probably the most crucial aspect of moving a domain, that your users understand your motives – so you should address them directly and explain your reasons – and they’ll understand.

how to align floating divs vertically ‘middle’

The following may sound familiar: you have a row of floating divs with varying heights and want to align them neither top nor bottom – but vertically centered? In the good old days of table-layouts that was easy. You would just throw the divs in one table cell each and tell that cell to display its content valign=”middle”.

But in times with mostly CSS powered design that might sound a little bit difficult.  But ‘table’ is the right keyword here: you can use a containing outer div (container / parent object) with the behavior ‘table row’ and give the contained inner divs (child objects) the behavior ‘table-cell’ – then you can apply the css property vertical-align: middle – and Bob’s your uncle.

Here’s a jsfilddle with a working example:
jsfiddle.net/nH2sd/5/

And this question-answer-post at brought me to the above fiddle:
How to center vertically a floating div inside an inline-block?
stackoverflow.com/questions/…/how-to-center-vertically-a-floating-div-inside-an-inline-block

make container / parent div the height of contained / child divs

Having floating divs not stretching the parent container to their full height is re-occurring problem in daily webdesign business. And since I’m looking for a solution every now and then, I decided to finally write down the easiest solution that I could find looking for “make container div the height of contained divs”. Here we go:

The problem: you have a box (the parent / container div) filled with floating divs (the child / contained divs). The inner divs have ‘real’ content, stretching them to a certain height. The outer, container / parent div however won’t naturally get the height of the inner elements, since they are floating.

Solution: add the css behaviour “overflow:auto” to the container / parent element.

floating divs container height

see also:

Since the article on sitepoint is from 2005 I suppose the solution does work also on older browsers.

Drupal 7 node gallery with plupload but no upload [solution]

Another note-to-self – and maybe / hopefully somebody else might also find this note useful…

The problem: The Drupal 7 module “node gallery” installed just fine and is running well. Additionally I installed the Plupload module for drag’n’drop and multi-file upload functionality – but no upload form / no upload option at all is actually happening.

Solution: there is a misleading detail in the readme.txt that comes with the module – or actually in the file structure / naming that comes with the module Plupload:

The installation instructions in readme.txt suggest that you need to upload the file plupload.full.js – but at the suggested location there is instead the minimized version of that file plupload.full.min.js.

sites/all/libraries/plupload/js/plupload.full.js

 vs.

 sites/all/libraries/plupload/js/plupload.full.min.js

The module will perfectly work if you first rename the file. So all you would have to do is remove the “.min” from the file name and upload the file – and everything is fine. The module works as intended and there you’ll have your drag’n’drop- and mupload functionality.

Interspire Email Marketer: how to avoid accidental unsubscribe

I know, there are many Newsletter Tools out there: from WordPress plugins to free online services – basically you wouldn’t need to buy a Newsletter tool if you just want to send out some newsletter every now or then. But then there are also websites with other demands – and those demands may call for a professional tool.

My tool-of-choice is the so called Email Marketer be Interspire. It’s a rather complex system, but it’s flexible and reliable – yet affordable. I like it – and as far as I know many of my clients like it too.

The pre-defined variables are one great feature in Interspire’s Email Marketer. Adding the unsubscribe-variable / short code “%unsubscribelink%” enables users to unsubscribe from the newsletter mailing list with just one click. That is great – but sometimes one click is not enough – or actually just a little bit ‘too much’ convenience. So you might want to make that two clicks, to avoid unintended accidental unsubscriptions.

Adding an additional step to the one-click-undsubscribe-function to make it a two-click-unsubscribe is not as easy as 1-2-3 –– but it is very well possible. All you basically need to do is add a variable to the variable “unsubscribelink” and twist the “unsubscribe.php” a little bit – that means adding about 2-3-4 lines of code to to the “unsubscribe.php” like this:

<?PHP 
$this_url = explode("&ok",$_SERVER['REQUEST_URI']);

if ((sizeof($this_url)>1)&&($_GET['ok']=="ok")) {

// here goes the 'regular' unsubscribe code 

} else { 

$_SERVER['REQUEST_URI'];

$signoff = $_GET['ok'];

$this_url = explode("&ok",$_SERVER['REQUEST_URI']);

$this_url = $this_url[0];

?>

Are you sure you want to be unsubscribed from the list?
<a href="<?PHP echo($this_url); ?>&ok=ok">YES, take me off the list</a>

<?PHP } ?>

So in the “unsubscribe.php” I first check the URL for the variable “ok” – and if it’s set to “ok” then I continue with the unsubsribe-process. If the variable is however not set to “ok” yet, then I show a link so that the user can confirm his/her un-subscription by clicking that link. This has reduced the amount of unwanted unsubscriptions by nearly 100%. Yay!

Ha! Update: here is also an even easier fix for that problem:
https://www.interspire.com/forum/showthread.php?t=17207

Fancybox with fancy title but without tooltip

Yes: it’s possible to have a fancybox with a fancy title but without the tooltip. You can even style the title, that will be shown in the modal window / popup layer without making the roll-over tool tip look wired. How? Here is how:

Usually you would put the “image caption” (or the actual image title) in the title tag. the problem might be, that the title tag is shown on rollover – and if you would like to style your image caption, then things can look funny. In the following example the “made in 2008” is supposed to be displayed in italic – but the tooltip would reveal the html tags:

“The Title of the Image <i>made in 2008</i>”

Now instead of placing the image caption inside the title tag, you can actually use the alt tag, remove the title tag and give your fancybox code the following little detail:

‘titleFromAlt’    : true

Then the alt tag of the image will be used for generating the title inside the modal window. That’s all..

This is basically just another “note to self” — but I hope you find the information useful anyways. If you’d like to have a more detailed description on how to use fancybox titles without the tooltip, then just drop me a line in the comments…

best, +…

take screenshots on your iPhone in two easy steps

Sometimes you just want to “save” what you actually/currently see on you iPhone screen – you need to take an actual screenshot. Maybe you want to take a screenshot of a website so you “remember” it in the current state for later debugging. Or maybe you want to take a picture of a certain area or a detail on your Google Maps app, a special/funny point of view on Google street view  – or just a funny combination of angry birds and green pigs in your favorite game – there is a million good reasons to take a screenshot on an iPhone every now and then.

I actually sometimes take a screenshot of my position shown in a map (I love OffMaps) and then email it or send it though iMessage to somebody who asks me where I am. A great and easy way to exactly show the actual location – often easier than describing it, especially when you’re in a park or in a huge building or the like.

Now the good news is: taking a screenshot on the iPhone is of course possible – and it’s way easier than you might have thought. You don’t need to install another app and you don’t need to be a geek to take a screenshot and save the current screen to your images. If you just want to save whatever you iPhone’s screen is currently showing to you, there is a built in easy to use screenshot function, that a.f.a.I.k. will work in whatever app you have running.

Enough introduction: here’s the three two easy steps to take:

  1. push and hold the home button
  2. tap on the on/off button once

If you have sound switched on, you should hear the familiar “camera sound”. Then you just have to start up your photos app and you’ll find the screenshot saved as the newest picture. From here on you have all the options you have with any images – you can send the screenshot by email, you can sync it to your iPhoto app – or (of course) you can just delete it.

But before wildly taking and publishing screenshots you should be aware that most of what you see on your iPhone probably is copyrighted design / art work. Of course under certain circumstances you are allowed to use screenshots to illustrate e.g. articles, if referenced correctly. On the other hand you should always be careful when using other people’s intellectual property..:P