January 7th, 2015  | Categories: Drupal, Drupal 7, JavaScript, JQuery

PROBLEM
I don’t think I’m going to explain this very well. Here’s a short story long.

So what I was trying to do was kind of confusing as it is. I’ll try to explain… In Drupal 7 there is a cool module called field group table. I needed this module to display data in a table format. However, one of the limitations of this module is that it doesn’t display the label in the th for grouped elements. So say you have an address that you’d like to display in a table. You can use this module but it won’t display the group name in the th. It’ll go above the information.

The "location" text and "CRS Coordinator" text is above the data and not in the t h

I used some slick JQuery to move the “Location” text inside the empty th like so:

$(".table_site_map_info .group_table td #site_map_location_th div span").first().appendTo(".table_site_map_info .group_table th.field-label-hidden:eq(0)");

That did the trick. However I noticed that there was a space added and the “Location” and “CRS Coordinator” didn’t line up correctly with the “Phone” (which isn’t a group).

The "location" and "CRS coordinator" were moved to the t h but there was a space before them which doesn't align

SOLUTION
Unfortunately the JQuery trim function needs a parameter and all the examples on JQuery and around the web always had it using a JavaScript variable. I just needed to trim elements; not variables.

So in other words, I wanted to do something like $(“.table_site_map_info .group_table th”).trim() . However that didn’t work.

I had to go back tho the drawing board kind of. I first got it out of its span (which I thought initially was the spacing problem). I used:

$(".table_site_map_info .group_table th span").contents().unwrap();

This didn’t work. It got rid of the span but it still had the space. After looking at the HTML in FireBug, I saw an added space in the th. I needed to remove the space. Unfortunately, like I said earlier, the trim function was useless. I had to individually set each HTML element to its trimmed self.

So, here’s my code:

$(".table_site_map_info .group_table th.field-label-hidden:eq(0)").text($.trim($(".table_site_map_info .group_table th.field-label-hidden:eq(0)").text()));

Sorry that this is a long post and it’s mostly useless but I hope it can help someone. I wanted to post this to remember it.

a screen shot of what it's supposed to look like

If anyone has a more efficient way to do all the above using JQuery or Drupal, I’d love to hear it.

August 8th, 2014  | Categories: Drupal, Drupal 7

PROBLEM
So I want to create a carousel on the homepage of a website. The carousel items should be their own content type. Two of the carousel items need to generate a random publication and a random study (both content types). These can be generated by creating a View for both. I need to call this view though inside the carousel item content type.

I used the module_invoke method like this inside the body of the node (using the PHP filter):

<?php

$block = module_invoke(‘views’, ‘block_view’, ‘studies-block_1’);
print render($block);

?>

It outputted the content great. Exactly what I wanted it to do. However, it generated the following errors:

Warning: Invalid argument supplied for foreach() in element_children() (line 6428 of C:\xampp\htdocs\drupal_project\includes\common.inc).
Warning: Illegal string offset ‘#children’ in drupal_render() (line 5893 of C:\xampp\htdocs\drupal_project\includes\common.inc).
Warning: Illegal string offset ‘#children’ in drupal_render() (line 5903 of C:\xampp\htdocs\drupal_project\includes\common.inc).
Warning: Illegal string offset ‘#children’ in drupal_render() (line 5941 of C:\xampp\htdocs\drupal_project\includes\common.inc).
Warning: Illegal string offset ‘#printed’ in drupal_render() (line 5948 of C:\xampp\htdocs\drupal_project\includes\common.inc).

SOLUTION
Apparently these kinds of errors are very difficult to track down. It usually means some third-party module has passed in something wrong to one of Drupal’s common functions.

Since I’m using the render function from Drupal 7, I decided to output what the $block would be. It’s an array. As I’m already using PHP inside a block, what’s the harm in using some more? I just needed the first part of the array…

<?php

$block = module_invoke(‘views’, ‘block_view’, ‘studies-block_1’);
print($block[“content”][“#markup”]);

?>

Very handy to know the module_invoke function to call specific blocks so you can include them in your content without having to put them into the structure… however it does make the content harder to maintain as you’ll have to remember where you’re calling the blocks.

July 1st, 2014  | Categories: Drupal, Drupal 7, MS IE

PROBLEM
I’m using HTML5 in my theme. I want older browsers (ie, IE) to recognize some of the new tags such as header, footer, etc. Google has a shiv out there you can download. I use this on like all my sites.

You can link to it directly but I want the print shiv as well… I’m not sure where they keep that so you can directly link to it.

I’m a novice at Drupal 7 and they’ve changed a bunch since Drupal 6. The JavaScript calls are different. Also these JS files are a little unique as I want to put them in an less than IE9 comment.

SOLUTION
After playing around with getting the URL to the theme, having that not work exactly since I’m working on a local environment, I got the function calls I needed to link to the /javascript/ folder I created in the theme where the shivs will go.

I modified the html.tpl.php file which is in the themes folder. I added the following two lines of code which go to the two shivs:

<!--[if lt IE 9]><script src="<?= base_path().path_to_theme(); ?>/javascript/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="<?= base_path().path_to_theme(); ?>/javascript/html5shiv-printshiv.js"></script><![endif]-->

If there’s another way, I’d like to know. I’m sure there’s a module out there you can download to get the HTML5 support like a shiv, but I think linking to the shivs is a lot easier.

May 22nd, 2014  | Categories: MS Windows 7

PROBLEM
I recently got a new computer at work. After installing everything I had and configuring it the way it was before, I noticed that I didn’t have the option to create a new text document on right click.

I used this feature multiple times a day. I had to figure out how to get it back. My current menu on right click looked like this:

Right Click spawned menu without an option for a New Text Document

After digging around online for a bit, I saw you needed to modify your registry keys in Windows 7 to get the option. I don’t work very much with the registery. Oh who am I kidding, I have worked very little with the Windows registery.

A few forumns in the google search “windows 7 new text document on right click” lead me to the right idea.

SOLUTION
I first had to get into the registry. To do this, I went to Start and typed “regedit.exe” into the search field.

From start, type regedit into the search field

There I navigated to Computer –> HKEY_CLASSES_ROOT –> .txt . I double clicked on the (Default) and instead of what it was before, I put “txtfile”.

Type in txtfile for the Value data for the (Default)

No restart necessary. I now have the ability to create a new text document when I right click.

When right clicking, I have the option to create a new text document

January 22nd, 2014  | Categories: CSS, Mozilla Firefox, MS IE

PROBLEM
I need to put content after a very specific float. There are a few floats going on in the banner of one of our websites. The first float is handling the left/right content. The other float is inside the right content and handling the alignment of the search and submit buttons.

We now want text to go underneath the search and submit button. The problem is just putting the text under these elements, it doesn’t leave much room for spacing:
there is no spacing after the search and submit button

Furthermore, it looks awful in IE:

The search and submit buttons move down and the rest of the content is towards the bottom

SOLUTION
After trying to add a margin on almost everything in the box (which did not work), I added a height to the search area. The below content knows that it’s not big enough to fit in there so it breaks.

I could then give the search div a padding of 3px on the top and bottom. Now it looks nice in all browsers:

The text at the bottom has space away from the search field

June 18th, 2013  | Categories: CSS, Google Chrome, IPad/IPhone

PROBLEM
I’ve run into this issue a lot in Chrome since our site likes to use URLs for link text. Not a good practice in my opinion but whatever. The issue is when the URL is so long, the text cannot be broken.

Long URL Causing Overflow

This issue also happens on mobile devices. It will cause an overflow which makes the text run over causing a horizontal scroll, which is never good.

SOLUTION
Using just word-wrap: break-word sometimes doesn’t work in Chrome for some reason. I found that adding a max-width in whatever the container the long text is in will work. For example, my new CSS is:

ul.material_content_list li ul.blank_list li {
max-width:                    470px;
word-wrap:                    break-word;
}

Now the page looks fine:

URL Properly Broken & Not Overflowing

March 28th, 2013  | Categories: .NET, C#, MS SharePoint

PROBLEM
I needed to find the default or “welcome page” of a SharePoint site. I needed this because I need to pass in a query string parameter to it. For example, if I passed in the string “http://www.mysite.com/staff”, it would give me “Pages/index.aspx”.

After surfing the net, the threads I read on Microsoft and other sites were not helpful at all. Most lead me to complex lines of code that used different utilities that I wasn’t familiar with. (I’m not that familiar with this stuff as it is.)

SOLUTION
I finally decided to ask the question on stackoverflow. My question was How do I get the default/welcome page of a SharePoint 2010 site?.

In a few minutes, a dude answered with a link to a thread on Microsoft. It was pretty helpful although it wasn’t complete as it gave me a few errors:

  • First it gave me an unrecognizable PublishingWeb. To solve that, I had to add the Microsoft.SharePoint.Publishing reference to the web part.
  • Second it gave me a cannot convert type SPFile to string. Trying .toString() didn’t work. Turns out SPFile has a Url function which returns a string.

The finished function is:

private string GetSPSiteUrl(string u) {
	string siteurl = "";

	using (SPSite site = new SPSite(u)) {
		using (SPWeb web = site.OpenWeb()) {

			if (PublishingWeb.IsPublishingWeb(web)) {
				siteurl = PublishingWeb.GetPublishingWeb(web).DefaultPage.Url;
			}
			else {
				siteurl = web.RootFolder.WelcomePage;
			}
		}
	}

	return siteurl;
}

UPDATE
As it turns out, this code works for sites that have permissions. Since our site is anonymous access, it gives an NT prompt.

The way to fix this issue is to add RunWithElevatedPrivileges.

private string GetSPSiteUrl(string u) {
	string siteurl = "";

	// run this code with elevated privileges
	SPSecurity.RunWithElevatedPrivileges(delegate() {

		using (SPSite site = new SPSite(u)) {
			using (SPWeb web = site.OpenWeb()) {

				// get the default page
                        	if (PublishingWeb.IsPublishingWeb(web)) {
					siteurl = PublishingWeb.GetPublishingWeb(web).DefaultPage.Url;
				}
				else {
					siteurl = web.RootFolder.WelcomePage;
				}
			}
		}
	});

	return siteurl;
}
October 12th, 2012  | Categories: CSS, IPad/IPhone

PROBLEM

This one had me tripped up for a bit but I already knew the problem. Background colors get cut off sometimes in the Ipad when the width is too big for it. When you scroll over, the background color of the div isn’t there and it’s the background color of the page.

Here’s a screen shot from ipadpeek.com (which is an awesome site to test your site on):

IPad Screen Shot With Part Of Background Cut Off When Scrolling To The Right

I tried googling of course. I found a few forums that had the same issue.

SOLUTION
It didn’t take long to reach a forum where someone had solved the IPad problem on stackoverflow.

I added a min-width of 1000px to my main block and that fixed it.

June 27th, 2012  | Categories: CSS, MS IE

PROBLEM
In IE the bottom border of a div with many nested lists isn’t showing up. It works fine in FF. All the other borders are fine and visible.

As you can see below, the bottom border does not show up in IE:

The only CSS for the main container is a border.

However, the funky thing about this issue is that when I only have one list, the border shows up (just imagine the list stopping at “Resources and Publications” in the above example). That would only be one list.

Searching the web didn’t yield any fix. When you google this issue, they usually suggest adding hasLayout and position: relative to every li. That didn’t work for me.

SOLUTION
By adding a min-height to the container div did the trick for me. This was the same div that had the border CSS. I added min-height: 10px and the border now works in IE.

March 7th, 2012  | Categories: CSS, MS IE, NIFTY TRICKS, XHTML

PROBLEM
I wanted to do a list of items in two columns with a border around the list. I didn’t want to use two floated divs in order to get the look I wanted (nor tables). Also, I didn’t want to break up the list. I wanted the HTML to be simple.

I started out with some old code I found which used floats and widths on each li. However after the list I needed to do a clear so the border would go around the entire list. This clear caused problems since it cleared my other floated divs (for page layout).

Here’s the HTML I wanted to use:

<div class=”summary_container”>
<ul class=”two_column_ul”>
<li>Overview</li>
<li><a title=”Training & Education” href=””>Training & Education</a></li>
<li><a title=”Staff” href=””>Staff</a></li>
<li><a title=”Collaborators” href=””>Collaborators</a></li>
<li><a title=”Research Areas” href=””>Research Areas</a></li>
<li><a title=”Scientific Articles” href=””>Scientific Articles</a></li>
<li><a title=”Scientific Resources” href=””>Scientific Resources</a></li>
<li><a title=”Image Library” href=””>Image Library</a></li>
</ul>
<!– this is where the clear would go if necessary <div class=”clear”></div> –>
</div>

SOLUTION
After attempts at floating and clearing the float, I eventually gave up. I tried to do an inline-block on the li, which worked great in FireFox but IE choked.

The CSS I finally used was the following:

div.summary_container {
border: 1px solid #DEE6F3;
padding: 5px 5px 15px;
}

div.summary_container ul.two_column_ul {
margin: 0 0 0 20px;
padding: 0;
list-style: none;
}

div.summary_container ul.two_column_ul li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
margin: 0;
padding: 6px 0 0 14px;
width: 220px;
}

I hope this can help someone else.

TOP