Bootstrap Dropdown Mega Menu

Update: Just use this plugin https://github.com/CWSpear/bootstrap-hover-dropdown. It's most likely better tested than this hastily put together script.

I would just like to point out that I agree with the Twitter Bootstrap dev's, in that you should not be having the megamenu display on hover. That's paraphrasing their words but seems to be their general intent.

Now that that's out of the way, if you do want a Mega Menu that works on desktop and tablets, here is some code that may be of assistance. I'm pretty curious about it's behaviour on touch screen PCs, but as we don't have any to test with I can't check it :(

var topLevelLinks = jQuery('.dropdown-toggle');  // We're using bootstrap for the dropdown, but we need it to display on hover

    if (!Modernizr.touch) {

        // pseudo hover stuff

        topLevelLinks.on('mouseover', function(event) {

            topLevelLinks.removeClass('disabled');

            jQuery(this).dropdown('toggle').addClass('disabled');

        });

        // pseduo off hover

        jQuery('#menu-main-menu').on('mouseout', function() {

            jQuery('.dropdown-toggle.disabled').removeClass('disabled').dropdown('toggle');

        });

    }

    topLevelLinks.on('click', function(event) {

        if (jQuery(this).parent().hasClass('open')) {

            // stop the dropdown stuff and let the normal link stuff happen

            event.stopPropagation();

        }

    });

Installing Drupal (7.20) on Fortrabbit

Want to install Drupal on Fortrabbit? Here's how. Bear in mind these settings may change as Drupal get's newer or Fortrabbit matures/changes. Also, I've made some assumptions on how you want to do things. Your use case may be different, so have a read over things before following the steps.

I've assumed you have already installed git on your local machine. You're going to need it.

Login and create an App

We're going to login and create an app. Then we're going to set up git access for later.

• Login in to Fortrabbit (or create an account)
• Create the app in Fortrabbit
• Give the app a name
• Give the app a description (in the notes section)
• Leave this window open for later.
• Open the .ssh folder with "gitbash"
• Open windows explorer
• Right click on the folder that matches your username (you'll find in under Desktop)
• Select the "gitbash" option.
• If you haven't yet created all the ssh stuff, google "github generating ssh keys"
• In git bash, run this command "clip < ~/.ssh/id_rsa.pub"
• Move the cursor into "Your public SSH Key"
• Paste the previously copied key info into this field (ctrl + v)
• If you want to have login details emailed to you, enter the email address into the field
• Click Save App Settings
• Wait. This takes a little while.

SSH Access to the server (via a key-pair)

SSH access is gold. Unfortunately, for Windows Users it is a pain to set up. Follow this step by step guide, and make sure you have installed Putty and PuttyGen. You don't need PuttyGen if you like to try and remember your password every login. That works for some people.

Or you could set up a key value pair so you never have to remember the username/password combination again.

• This may not work straight away, as the account needs to be verified. Come back in 5 minutes if it didn't.
• Open Putty
• In Saved Sessions, write a memorable name
• Click Save
• I do these two steps first so I always remember about it. You don't have to.
• Put in the hostname (ssh1.eu1.frbit.com)
• In category, expand "Connection" and click on "Data"
• Put your username in the Auto-login username field
• Go back to Session and click save
• Click open
• Type in your password
• You're now connected. If you don't want to use a keygen pair, you're done. If you do, follow these steps
• As we're using Putty, we need to create a keygen there
• Open PuttyGen
• Click Generate
• Move the mouse cursor like a good developer
• When it's generated, save the key
• Right clock on the generated key
• Select "select all" 
• Right click and select copy
• Go back to your connected shell
• Type "cd ~/.ssh"
• Then type "vim authorized_keys"
• Press "i" to insert
• Assuming your public key is still in your clipboard, right click and it will be copied into the file
• Press "esc"
• Type ":wq!"
• This is now saved.
• Exit the shell.
• In putty, either create a new session or load the existing one
• Expand "Connection", then "SSH" and click on "Auth".
• Click on browse to select Private Key File
• Select the previously saved file.
• Go back to the session menu and save it
• Open
• You now have ssh access using a key (no more remembering passwords)

Installing Drupal

• http://drupal.org/documentation/install/download has all the instructions you need to install Drupal. 
• On Fortrabbit, you need to change the .htaccess file after you have moved and untarred everything.
• Comment out line 14 of the .htaccess (Options +FollowSymLinks)'
• This isn't allowed by the server settings, as it's already set.
• Go to your apps URL and follow the prompts to install Drupal.

Getting mysql to work

• Use MySQL workbench. Download it from Oracle. 
• Create a new connection.
• Set the conenction method to "Standard over SSH"
• Use the SSH and MySQL details that FortRabbit supplied to connect. 
• If you want to create/edit users, use the Model view. That's not intuitive.

Alright then. 

Enjoy the steps and let me know any steps I've missed.

PhpStorm, Symfony 2 and GIT

I've recently started a new job, and after 2 years of using Ubuntu I'd had enough and wanted to try out Windows 7. Basically, I got sick of running two operating systems, and as my macbook is getting a bit long in the tooth I decided to try and get everything working under Windows 7. These instructions worked for me.

• Install wampserver2
• Download and install Composer using the Windows Installer option.
• Download and install GIT (only if you're using it, but at some point in your development life you will be, so you may as well install it now
• When installing GIT, make sure to select the middle option, that allows GIT to be run from the command line (the cli in some documentation)
• Download and install the trial version of PhpStorm. You may not like it so no point paying until you have trialled it.

At this point you should have a working version of everything you need. Here's how to test it, to make sure everything actually works. 

1. Use Composer to install the Symfony 2 framework. I'd highly recommend that you do this in the wamp/www folder to save yourself time.
   • On the Symfony website, they say to use composer.phar . It should be updated to read "composer". Composer installed a .bat file that will do all the hard work for you.
   • The "path/" in the command is the folder to install it into. If you're in the www folder, use "symfony" or something similar.
   • The full command to run from the c:\wamp\www\ folder is now "php compose create-project symfony/framework-standard-edition symfony/ 2.1.4"
2. If you have yet to install GIT, you won't be able to install Ascetic. If GIT is installed correctly, then we also know that GIT is installed and working correctly!
   • If it failed at this point, then go back and install GIT. Then from the command line, run "composer update" in the c:\wamp\www\symfony\ folder.
   • This will read the composer.json file and download/update components. Most importantly, it will add in the missing components such as Ascetic as the git command is now available.
   • If for some reason that didn't work, close the command prompt window and try this again in a new one.
3. Open PhpStorm
4. Create a project, from existing sources, where we just installed Symfony 2 to. Select the bottom option, as the files are local and we don't yet have a server set up. 
5. You should get a few "error" messages, as this is the first time you've worked with PhpStorm. It'll prompt you to say you're using the Symfony 2 framework. Follow the prompts to fix this.
6. It will probably also say GIT is not installed. It's wrong, but click fix button.
7. In the dialog, you'll see it's looking for "git.cmd". Change that to "git". Click the test button to prove it worked.
8. Now, open the .gitignore file in PhpStorm
9. At the bottom, add the lines ".idea/*". This folder is where PhpStorm keeps a record of stuff about the project, and we do not want this committed.
10. Right click the name of the project in the left hand panel, and select GIT -> Add. This should add our entire directory to GIT. I like to do this so I can always tell what files I have played around with whenever I'm doing anything.
11. Next, right click again, GIT -> Commit Directory. Now that we've added the files to the list of files to be indexed by GIT, we need to commit the files to the repository. (note, that is a very simple explanation of what a VCS does)
12. Double check the .idea folder is ignored (i.e. There are no files to be committed from that directory)
13. Mouseover the commit button, and select commit.
14. I tend to ignore the review option but you may want to have a look to see what errors/todo's have been left in the code.

One last thing that you may find useful. Run a "composer update" from the root directory of the project. Changes are the version of Symfony 2 you've downloaded is slightly out of date, and this will go through and check everything.

That's it. I've assumed you're comfortable with the command line. If you're not, well, there's no time like the present to learn!

Leave a comment if I've missed a step or something isn't clear :)