:::: MENU ::::

Setting div height the same as width – Responsive Design

Quite a common issue I come across with responsive front end development is setting a height in relation to the width of an element.  For example.  If you are creating a div that you wish to keep a square. If the site is fixed width you can easily set the height, but when the site responsive the width of the div changes as so fixing the height doesn’t work.

I can’t find any CSS solution for this but its pretty easy to do with jQuery.

All you have to do is grab the width value of the element and set the height as the same value. If you make sure this code is triggered on window.resize it will match the width as you resize the window on the fly.

 

I have made a jsfiddle as an example which you can see on the link below. Hopefully this can help someone.

https://jsfiddle.net/dgjn40jv/


Drop the to-do list. Tips for productivity

As as busy web developer, business owner and freelancer I am always looking at ways to increase productivity. Since running my own company I no longer look at the clock willing every second to pass until it is time to go home, instead I look at the clock at 4pm and wonder where the hours have gone –  if only there was more time in the day!

With every second of the day so precious, productivity has become almost an obsession for me over the last year and possibly, like many others, I became a slave to the to-do list.

I discovered many problems with to-do lists. Firstly I often found myself trying to reduce list as quickly as I could by completing all the small jobs first. It feels good to cross items off a list doesn’t it? !Although your list may reduce in size tackling tasks in this way doesn’t take into account priorities. For example, the chances are that you will probably choose the two minute job over the two hour job every time because of the psychological payoff of completing the task.

A to-do list gives  also no context to the tasks. For example, how long a task might take, what needs to happen for a task to complete or even how much time you have to complete the task. I would often find items on my list for months, this was often because the task seemed to big or vague, or I hadn’t put broken it down or thought about how long it would take to complete.

With a to-do list was there was no real way to measure my productivity or account for my time.   Yes, some days I could look back and see I had crossed of 10 items, and that might feel good, but another day I might not be able to cross off 1, but that didn’t mean I didn’t make great progress on a project.

Finally, with a to-do list I began to find myself playing an impossible game of trying to clear my list – an accomplishment I was never able to claim. I would often feel quite downbeat when my day ended with more items on my list than I started with. Something needed to change – and it has.

So what is the solution? Well its simply to use my calendar instead.  By taking my tasks and scheduling them into my calendar I am able to get a much clearer perspective on how long tasks actually take, I am able to assess, prioritise and decide when the task is going to be completed. If more tasks pop up during the day, they need scheduling in. This way of working really helps me to stop jumping from task to task, I am able to stay focused, especially with larger tasks or projects.

I was inspired by a wrist watch I saw advertised that just had one hand which counted down the hours in a day. The idea behind the watch was to give a better perspective as to how long you have in a day. No matter how hard you try, a day only has 24 hours in it and you have a limited amount of time every day to work, by scheduling time I find you use every second far more productively, you start to understand exactly how long each task takes and helps you focus on completing tasks within a certain time frame.

I tend to try and have a rough schedule for the entire week which I work out on Monday morning then each evening before leaving work I write a more detailed schedule for the following day. That way, when I come into work and fire up the computer I am ready to start working.

It is also worth mentioning its a good idea to plan in short breaks throughout the day as well – making sure I stop to make a coffee or just stretch the legs for a couple of minutes has proved to really help my concentration and state of mind.

I haven’t got rid of my to-do list completely, I tend to use it to remind myself of tasks that I need to schedule in, especially useful if things crop up during the day.

Give it a go – it takes a couple of weeks to get used to, but if you are a slave to your to-do list I think you will find this a really useful new way of working.


Magento – import tax_class_id not working

I have been having some problems with bulk importing the tax_class_id field in Magento. I was adding a tax class id (For example 2) in the field but for some reason it was making no difference to my products and when I exported the data the field was just blank.

I managed to work out that for some strange reason you have to put in the full text rather than the id.

 

So for example Taxable Goods rather than 2.

 

A quick find and replace and I was back up and running again. A really strange one but we got there in the end.

 

 


WordPress – adding a shortcode into a template

In WordPress shortcodes are small snippets of code that run more complex functions and logic code. Shortcodes are great as they give the average editor the ability to serve up dynamic code on their site without having to understand any programming.

Shortcodes are designed to be placed in pages and posts, however every now and again you may wish to add a shortcode in a template file directly.   To do this you have to add a little bit more code. Lets take the wordpress maps plugin as an example.

The normal shortcode might look something like this:

 [wpgmza id='1']

To add this direct into the template change it to:

<?php echo do_shortcode("[wpgmza id='1']");

There you go – that’s all there is to it!


Magento – REATIVE AJAX Add to Cart – Changing notice text and colours

I have used to REATIVE AJAX add to cart addon on a couple of sites but the first thing I always want to do is change the background colour of the pop up notifications to match the style of my site.Finding where to edit this isn’t obvious to start with however the file you are looking for is called growler.js. It can be found in /skin/frontend/base/default/ajaxcart.  Scroll down to line 154 and you will see where the background colours are set.

 


Magento – Missing “Header” & “Footer” tabs from Config->Design

If you are wanting to make changes to the header or footer sections in Magento (for example, change the copyright notice or change the logo) then the place to do this is in

Configuration->General->Design

and then under the “Header” and “Footer” tabs.  However if you are using a custom theme you might not have these options available to you.

To fix this you need to log into your ftp client and copy the file “system.xml from

app->code->core->Mage->Page->etc

and save a copy into

app->code->local->Mage->Page->etc

Now when you look back into Configuration->Design you should see a header and footer option.

This had me puzzled for a little while and I was wondering if it had just changed for Magento 1.8 but this simple fixed solved the problem.


Magento – remove “Be the first to review this product”

Problem

I want to remove the link on the product page that is called “Be the first to review this product” but I don’t want to remove reviews formt he products. (You can still review the product via the review tab)

Solution

Go to  [[yourTheme]]/template/catalog/product/view.phtml 

Comment out or remove the following line (around line 60)

<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>

 


Pages:123