My Monkey Do

A Log of Coding Solutions

Coding

Spaces Between Images

by

Problem:

I can’t center the Image or there are spaces between my images.  If I delete the spacing in the code it goes away.  Why is this?

 

Solution:

img { display:inline}

If the img has no display attribute defined, the default display is inline.  This means that the image can be centered with text-align:center from an outer element.  However, if there is a space between images, it may show a space when it is displayed.  You can think of inline display as treating the image like text.

 

img {display:block}

If the img has a display:block attribute defined, the image cannot be centered with the text-align:center from an outer element.  The image will take up the full line so that the elements before and after will appear on a different line.  Because the image takes up the whole line, centering the image doesn’t have any effects.  Spaces between images also do not show because the image fills the whole line.

A nice explanation of inline vs block can be found here: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

IE Back Bug

by

Apparently IE clears the form data by design.  Mozilla and other browsers keep form data when the back button is pressed.  I have not found a way around this besides setting cookies.  This is different from getting javascript to run as that works ok.

http://www.scu.edu.au/flds/index.php/faq/249

Position Relative and Fade

by

These two hated with a hate Found only on the stage

– Lord  Byron

 

Problem:

Having a position:relative on an element causes the jQuery fadeTo and fadeIn/fadeOut functions to not work in IE8 and possibly other IEs.

 

Solution:

Take out position: relative.

Onload Event When Back button is Pressed

by

Problem:

I have some ajax that pulls search results similar to how google images dynamically loads more images using javascript.  So if the user clicks to see ‘page 2’ or ‘more’, javascript runs and fetches more images without the user leaving the page.  If a user clicks on one of the results it will take them to another page.  If the user then presses the Back button, the page that the user was on is lost because it’s as if they are visiting the page for the first time.   A variable can be saved on the page to remember what page the user was on, but the onload javascript functions do not run when the back button is press.

 

Solution:

One of the solutions on stack overflow works like a charm.  The following code lets the “onload” or jquery “ready” functions run when the back button is presssed.

history.navigationMode = 'compatible';
$(document).ready( function(){
    alert('test');
});

 

MySQL Query Examples

by

MySQL examples and queries:

http://www.artfulsoftware.com/infotree/queries.php

This great resource showed me a simple way to pivot in MySQL.  If you have the following tables:

CREATE TABLE `project` (
  `project_id` int(11) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY  (`project_id`),
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE `project_service` (
  `project_id` int(11) NOT NULL,
  `service_id` int(11) NOT NULL,
  UNIQUE KEY `project_id` (`project_id`,`service_id`),
  KEY `service_id` (`service_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `service` (
  `service_id` int(11) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  `short_name` varchar(5) NOT NULL,
  PRIMARY KEY  (`service_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

The result I wanted was to show a project name and its services all in one row.  To accomplish this the website said to use GROUP_CONCAT like so:

select
    p.name,
    GROUP_CONCAT(if(s.service_id = 1, '1', NULL)) AS 'Service1',
    GROUP_CONCAT(if(s.service_id = 2, '1', NULL)) AS 'Service2',
    GROUP_CONCAT(if(s.service_id = 3, '1', NULL)) AS 'Service3'
  from project as p
  inner join project_service as ps
    on (p.project_id = ps.project_id)
  inner join service as s
    on (s.service_id = ps.service_id)

With that query I can see a 1 for each of the project’s services.  Please see the pivot section for more details.

 

 

 

 

 

Curvy Corners … Fun with IE!

by

I have decided to stick with love. Hate is too great a burden to bear.

– Martin Luther King, Jr.

Problem:

I was given a task to make the corners of a div area to be rounded.  I knew that only IE 9 supported this out of the IE family, but I didn’t expect it to be hampered by a -moz-border-radius or jquery.curvycorners.js or jquery.corner.js.

  • -moz-border-radius caused the top and bottom inner border to be smaller.
  • jquery.curvycorners.js caused the corners to look like a square got cut out.
  • The jquery.corner.js made the rounded corner, but you could still see the original square corner (ie it wasn’t transparent).

Solution:

After a lot of trial and error with the multiple ways of trying to get a corner in IE, I found a blog that showed the following code.  Actually I found this blog first and tried this, but for one reason or another it didn’t work until many failures later:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

Stupid IE caching!  I thought I had the solution which was to add the meta tag, but apparently after no code change and a restart of IE, the square corner has come back.  So the new solution is to not run the curvycorner code if it is IE8 and possibly others.