Here’s the problem: I dual boot Windows 7 and Ubuntu 14.04, after deciding to upgrade Windows to 10, I ended up with upgrade partially finished and GRUB going into rescue mode.
That means that Windows messed up GRUB and possibly corrupted Linux’s partition. Here are basic steps I had to take to recover Linux + Windows dual boot (make sure you have a live USB to boot from): Continue reading
The whole process was described in this article, but there are few quirks to fix in newer Ubuntu (namely 13.10 / Apache 2.4).
sudo nano /etc/apache2/sites-available/projectsudo nano /etc/apache2/sites-available/project.config<VirtualHost *:80>
DocumentRoot /home/user/project
ServerName project.localhost
<Directory /home/user/project>
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost>
So here are updated instructions for Ubuntu 13.10+ (and maybe some older versions). Continue reading
Another update for our Unobtrusive Background Image Switcher jQuery plugin: new option to show the navigation links so that the user can switch between the images manually.
This option is disabled by default, to use it just enable the “links” option, the rest is up to CSS:
<div id="bg-body"></div>
<script type="text/javascript">
// array with image paths
var srcBgArray = [
"/path/to/image1.jpg",
"/path/to/image2.jpg",
"/path/to/image3.jpg"
];
$(document).ready(function() {
$('#bg-body').bcatBGSwitcher({
urls: srcBgArray,
alt: 'Alt text',
links: true
});
});
</script>
Since the images are not loaded at the time of the page load, they might have to be fetched after user clicks the link, in this case the loader animation has to be shown.
Loader element is created automatically if the links are enabled, the animation itself can be styled just as anything else, we included the default implementation in the demo.
Since we put few extra bytes to implement the new features, we now distribute the minified (with UglifyJS) version that is as light as 2.8 kb. If you want the source code – feel free to check out the Git repository.
Demo and downloads:
Updated our Unobtrusive Background Image Switcher jQuery plugin: added support for multiple instances per page. This means it can be called from multiple elements on the same page like that:
<div id="bg-body"></div>
<script type="text/javascript">
var srcBgArray = [
"/path/to/image1.jpg",
"/path/to/image2.jpg",
"/path/to/image3.jpg"
];
$(document).ready(function() {
$('#bg-body').bcatBGSwitcher({
urls: srcBgArray,
alt: 'Alt text'
});
});
</script>
/* some other stuff here */
<div id="content-slider"></div>
<script type="text/javascript">
var srcContentImgArray = [
"/path/to/content-image1.jpg",
"/path/to/content-image2.jpg",
"/path/to/content-image3.jpg"
];
$(document).ready(function() {
$('#content-slider').bcatBGSwitcher({
urls: srcContentImgArray,
alt: 'Alt text'
});
});
</script>
Not really useful for background images, but if you have a background image switcher as well as a content image slider and wouldn’t want to load too much scripts this might just be your thing, was also our reason for this update.
Demo and download links remain the same:
Since our MooTools class worked well on many projects we went ahead and rewritten it for jQuery (after all it’s a jQuery world out there).
The idea as well as functionality remains pretty much the same: we need to use as many (probably background) images as we want no matter how heavy they are, while minimizing their influence on load times.
Here are the basic requirements:
So here is the jQuery version:
No need to pass the full screen option any more, for jQuery version of this plugin it is handled entirely by the CSS – again if you want the full screen feature to work, download the whole package and take a look at our bare bones style.css. The CSS part is based on Perfect Full Page Background Image / CSS-Only Technique #2 from css-tricks.
Images used in this demo are copyrighted and only intended for this demo.
Further information, usage and options: Continue reading
Here is the task: make images on a page printable. Not really challenging unless the images are fetched via ajax from an external server and loaded in a lightbox (Mootools MediaboxAdvanced), that makes this task a little more challenging and worthy to write about. Continue reading
Update 2013.04.26: we have published the jQuery version of this plugin, please see it if you prefer to use jQuery.
There are plenty of image slider and gallery scripts out there, but recently we had a pretty specific goal – to switch backgrounds of a website, and couldn’t find a good MooTools solution to accomplish it, so we had to create our own MooTools Class.
Here are the basic requirements:
So here it is:
Full screen functionality uses both JavaScript and CSS so if you want the full screen option to work, download the whole package and see our bare bones style.css. The CSS part is based on Perfect Full Page Background Image / CSS-Only Technique #2 from css-tricks.
Images used in this demo are copyrighted and only intended for this demo.
Further information, usage and options: Continue reading
Update 2014.02.10: Ubuntu 13.04 and newer users might want to check out the newer guide here.
To develop web applications we often need to set up subdomains under the localhost to accsess them locally like that:
http://project.localhost/
Here is a quick and pain-free way to do that: Continue reading
Recently I needed to remove some old fashioned forms on an old fashioned project – static website with like 200 pages. Each form had a name attribute with value “form1” and varying contents spread throughout multiple lines. The idea was to use NetBeans Project’s Replace feature with “Regular Expressions” checked, to do it quickly like that:
<form name="form1">.*</form>
But it didn’t work. After a short research (still quicker then hand edit these 200 files) it became clear that “dot all” regex piece doesn’t include line breaks. The addition of “(?s)” part that indicates line feeds made it work for me, here’s the final line:
<form name="form1">(?s).*</form>