Web-Dev - Joel Lipman .Com

Slideshow div layer through a window

: Joel Lipman; MooTools Framework; 11 September 2012; Hits: 5778

Somewhat incomplete! Will post a final solution but here are the basics

What?
This article is a quick note to myself on the idea of a slideshow with the MooTools javascript framework. Basically, I want to create a div layer that I can see through (like a window with no glass) and for all the flashy stuff, to only appear within the boundary of the parent div layer.

Why?
I'm making a slideshow from scratch.

How?
The idea is:

: Joel Lipman; Cascading Stylesheets; 02 September 2012; Hits: 16467

What?
So I have an unordered list of values (*, 1, 2, 3...) and for styling reasons I want the asterisk to be the same size as the numbers but not overlap any list item beneath it. By increasing the size of the asterisk, this often increases the line-height and causes the overall line height to change for other objects in the same row. The problem afterwards was that the asterisk character would overlap the item beneath it (in this case #2) so when a user clicked on #2 they would in fact be clicking on the item containing the asterisk above it.

Objective

Box List Before:	Box List After
* 1 2 3	* 1 2 3

How?

: Joel Lipman; JavaScript; 21 August 2012; Hits: 5279

What?
This is to describe how to change the value of a field of a form from it's default when it is clicked on so that it auto-clears and changes to how it normally works.

Example?
Note the value in the below field. Now click on it and it disappears, allowing you to type normally. Clear whatever you type so the field is empty and click somewhere on the page (not on a link as this will take you to another page) and the field returns to displaying "Name:".
Why?
I've noticed a lot of solutions now use JQuery or Mootools but most of these will not work in Internet Explorer 7 which is unfortunately still in use. I needed a back-to-basics solution and this is the one I have used since my fad of JavaScript 1.2 in the 90s. For broader compatibility, this is my recommended solution.

: Joel Lipman; MooTools Framework; 10 August 2012; Hits: 6296

Why?
This has taken me too long to figure out and I hope I don't lose this note again. The only website that was titled similarly kept slowing down my computer too much so I decided to work out my own. The complexity is due to content also being dynamically resized in height.

What?
Basically I have a menu in a sidebar, I don't want it to overlap the header nor the footer.I have a content page next to it which changes in height dynamically (a separate mootool function to this one).

How?

: Joel Lipman; Personal Home Page; 31 January 2012; Hits: 5305

What?
This is intended for activity/session durations and although I usually get MySQL to do the date/time calculations, there are times when we have to do with PHP. This is the shortest way I know to properly convert seconds into total hours, minutes and seconds (taking into account regional settings and without using a date function).

How?

copy raw

$total_time =intval(intval($total_seconds)/ 3600).":";
$total_time.=str_pad(intval(($total_seconds/60)%60),2,"0",STR_PAD_LEFT).":";
$total_time.=str_pad(intval($total_seconds%60),2,"0",STR_PAD_LEFT);

// yields
// 82800  = 23:00:00
// 108000 = 30:00:00

$total_time =intval(intval($total_seconds)/ 3600).":";
$total_time.=str_pad(intval(($total_seconds/60)%60),2,"0",STR_PAD_LEFT).":";
$total_time.=str_pad(intval($total_seconds%60),2,"0",STR_PAD_LEFT);
// yields
// 82800 = 23:00:00
// 108000 = 30:00:00

On one line:

copy raw

$total_time=intval(intval($total_seconds)/ 3600).":".str_pad(intval(($total_seconds/60)%60),2,"0",STR_PAD_LEFT).":".str_pad(intval($total_seconds%60),2,"0",STR_PAD_LEFT);

$total_time=intval(intval($total_seconds)/ 3600).":".str_pad(intval(($total_seconds/60)%60),2,"0",STR_PAD_LEFT).":".str_pad(intval($total_seconds%60),2,"0",STR_PAD_LEFT);

Category: Personal Home Page :: Article: 413

First and Last Entry on a Page using Modulus Remainder

: Joel Lipman; Personal Home Page; 26 September 2011; Hits: 6904

So I know it's quite a long title but I'm not sure what I'll be searching next time. It has taken me a lot longer than I thought it would mostly out of frustration and the inability to know exactly what I'm looking for... always difficult. After a cup of tea the solution was glaringly obvious, just do a primary school mathematics table and it all makes sense (see my 10 mod table below).

This article is a quick note (so I never spend as long again) in PHP on how to determine when looping through a loop, which entry was first and which was last. This is incredibly useful for pagination.

: Joel Lipman; Web-Development; 03 June 2011; Hits: 4802

So I've started this list to make sure I don't spend so long anymore on debugging code. The aim of this article is to quickly suggest ways of pinpointing the source of the problem:

: Joel Lipman; Web-Development; 28 April 2011; Hits: 39620

If you're not an IT person, you may want to avoid reading the rest of this article in case you're easily offended. It's just an amusing stab at customers computer issues. Note that most of the below were remote support jobs so we weren't there in person and could only see the users screen.

Three Webdevelopers phone in to say their computers can't view a website properly

"Can someone have a look at our computers because we recently received the new corporate template for our website and it's not displaying properly on my colleague's computers". [Priority 1]

What's a web guru?
Well this might be obvious to some but these are self-proclaimed highly qualified web-gurus in the marketing department. They'd paid around £150,000 for a template designed by a 3rd-party company. Received the zip and uploaded it to their homepage. The 3rd-party company had obviously designed the template to work in one browser only: Internet Explorer version 7. The marketing web-gurus were simply using different browsers. The project leader was on IE7, while their designer was on an Apple Mac using Safari, and a third was using Mozilla Firefox. We told them to go back to the template providers and report the same problem to them...???

Staff member requiring access to a secure application

"So that's all installed for you. I just need you to restart your computer now and tell me when that's done.".

"I've done what you said but it's still not working".

"From my logs, you haven't restarted this machine in a while.".

"No I definitely log off every evening and then back on again".

"You mean you log back on in the morning?"

"No it takes so long in the morning, this is quicker".

Explained how logoff is not the same thing as restart and reminded on both IT and environmental policies. Tech Notes: For PCs: Run a command prompt and type systeminfo: Look for "System Up Time".

A staff member in a partner institution:

"By the way my printer has stopped working, in fact it hasn't been working for ages, could you also look at that".

"Is there a power light on when you switch it on?".

"Yes it's definitely plugged in if that's what you're asking.".

"Is it a networked printer, I mean is there a cable that directly connects the printer to your computer or does the printer plug into the wall? Ok could you please follow the cable from the computer to the printer and tell me.".

"Hang on its on the other side of the room.".

This was a remote support job over the phone. The discussion above was after installing drivers and setting up the workstation with updates etc. as per our standard image. The printer was connected via three usb extension cables. The middle one wasn't connected to anything on either end.

What not to say to IT

"Hi could you find <staff_name> and tell them to unlock the record they are viewing".

"Oh that person isn't at work today".

"Well someone on that computer has locked a database record.".

"Well my colleague who's using that computer is in a meeting but I can login and do this for you".

IT Policy: Do not share passwords. It defeats the whole purpose!

A media student:

"My computer has swallowed my CD-Rom, I put in the disk but when I eject the CD there's nothing in there!".

I can't really have a go at customers as it took 4 IT technicians deliberating over 30 minutes (remote support so we weren't there in person): The computer had two CD-Roms. The user put the disc in one of the drives but was pressing eject on the second drive.

Like these? Share your experiences as comments below :)

CSS keeping the footer at the bottom

: Joel Lipman; Cascading Stylesheets; 25 April 2011; Hits: 11522

Spent enough time trying different methods across the web but only 1 article worked for me using the "push" div layer. Loosely based on Ryanfait: Make a Footer Stick to the Bottom of the Page

Aim:

Header
Left	Right
Footer

copy raw

<div id="container">
     <div id="header"></div>
     <div id="content">
          <div id="left"></div>
          <div id="right"></div>
          <div class="push"></div>
     </div>
     <div id="footer"></div>
</div>

<div id="container">
<div id="header"></div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div class="push"></div>
</div>
<div id="footer"></div>
</div>

Situation
The header displayed fine. The left and right columns finally got them side by side. But the footer that has a background image was under the left and right columns... The main content layer was overlapping the footer. I tried various z-index's bearing in mind that the footer has to be behind because the main content had a semi-transparent layer that overlapped it half-way.

I managed to fix this by including a div push layer which clears both (even though i had clear:both on the css for my #right div layer). For some reason, it has a more forceful effect in its own separate layer.

Category: Cascading Stylesheets :: Article: 350

: Joel Lipman; Cascading Stylesheets; 25 April 2011; Hits: 5642

Add horizontal space between label and fieldset

copy raw

fieldset label.inline { display: inline-block; margin-left: 2em; }

fieldset label.inline { display: inline-block; margin-left: 2em; }

Change color of fieldset grouping line

copy raw

fieldset { border: 2px ridge #7abcff; }

fieldset { border: 2px ridge #7abcff; }

Category: Cascading Stylesheets :: Article: 349

CSS Background Without Causing Scrollbars

: Joel Lipman; Cascading Stylesheets; 23 April 2011; Hits: 8858

Quick note in case I spend as long as I did again.

A Client had some clouds on the background of his photoshop file for his website. They were to be positioned in the top right corner with the leftmost tip aligned to the right of a central content section. I separated off the clouds as another div layer, specified the width and height and specified it's left. It caused the horizontal scrollbar which is a bit annoying because you scroll to the right and theres nothing but some background image. Also the footer was at 100% so it got cut off if you scrolled horizontally.

Aim / Objective
To have a background of sky and grass with a centered content section (white semi-transparent layer) of 900 pixels width as shown in the following picture:

background of sky and grass with a centered content section (no clouds)

And I want the clouds as another layer ontop aligned to the top right:
background of sky and grass with a centered content section (with clouds)

: Joel Lipman; Web-Development; 14 April 2011; Hits: 4852

To be honest I saw this on some Joomlaworks Blog who appropriately title it "A must see for professional webdesigners". If you're a developer relying on clients for your income, then at least watch some of this.

March 2011 San Francisco, CreativeMornings (creativemornings.com) was Mike Monteiro, Design Director, and co-founder of Mule Design Studio (muledesign.com). This event took place on March 25, 2011 and was sponsored by Happy Cog and Typekit (who also hosted the event at their office in the Mission).