My Monkey Do

A Log of Coding Solutions

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.

 

 

 

 

BR Tag Being Ignored by Firefox

by

Problem:

I had a couple of <br> tags in my text from a content editor and Firefox was not displaying the line break.  I had two <br> tags but no breaks!  Why!??!?  IE of all browsers was showing it fine.

 

Solution:

Be careful of styles that you use the asterisk (*) on.  It can cascade all the way down to the <br> tag.  For example:

 

#someID * {
    float:left;
}

Using Firebug I saw that the float:left was being used on my text container, which seemed normal because the element holding the text should be floating left.  However when I took off the float:left everything was fine.  The lesson is to be careful when using the * especially with float:left and having regular text.  I did not know the <br> tag could have a float on it, but I guess that makes sense.  Although this was only seen in Firefox.

Get TinyMCE to use Absolute Paths

by

Problem:

I was working with a customized CMS which uses the TinyMCE editor.  This editor was placed in a subfolder to edit content meant for the root folder.  This meant that the images in the TinyMCE editor would show something like “../images/” for the path to the images folder while the public pages would need something like “images/”.  The problem with TinyMCE was that every time you insert an image it would show the absolute path, but when it saved, it would be a relative path.

 

Solution:

To get TinyMCE to always use absolute paths, tell it to not use relative paths!  In tinyMCE.init where you configure the editor, add the options under the “use absolute urls” comment

 

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    width: "480",
    height: "400",

    //use absolute urls
    remove_script_host : false,
    relative_urls : false
});

 

Centering w/o Absolute

by

Problem:

I needed to add some jquery popups to my code, but the popup appeared at the very top outside the viewing area.  The popup uses absolute positioning and so it is relative to the nearest element with a “position” attribute.  Since I centered my page with the following code, I didn’t have a nearest element with a “position” attribute so the popup was relative to the document.  And the document was just a sliver at the top because the elements within it were positioned absolutely…  here’s I mean:

The yellow highlight is the body tag.

Using Firebug, you can see, the yellow highlighted area is the width/height of my body element (it’s actually the margin and the width/height is zero).  So the popup appeared in that area instead of the entire page.

 

Solution:

The quick solution would be to change this  code:

#Table_01 {
    position:absolute;
    left:50%;
    top:0px;
    height:auto;
    margin-left:-500px;
    width:1025px;
    background-image:url(../images/expand.png);
    background-position:top;
    background-repeat:repeat-y;
}

To the following code.  The following code doesn’t use absolute, instead it uses display: table and margin: 0px auto;

#Table_01 {
    display: table;
    margin: 0px auto;
    width:1025px;
    background-image:url(../images/expand.png);
    background-position:top;
    background-repeat:repeat-y;
}

And of course, we need some special code for our special browser Internet Explorer:


        
body { text-align: center; }
body * { text-align: left; }
#Table_01 {
    zoom: 1;
	display: inline;
}

 

Table_01 is the first element inside of the Body tag.  For a full explanation head on to where i found the solution.  Also do not forget the Doc Type for IE to work propery.