The center column of my site, using Joomla Bamboo’s Meridian template was not behaving.
The template uses javascript to calculate the height of the columns and some tabs and sliders were causing problems.
Anthony wrote:
“The code at the bottom of the js/template.js file. The crucial bit is: jQuery(‘ul.jbtabs li,.moduletable-panelmenu span.mainlevel,h3.pane-toggler’).click(function(){ setTimeout(calculateEQ,200); }); The 200 is the delay in ms for the script to calculate the height of the item. In your case because the accordion content was large we set it to 500. The selectors that trigger the function are here: ul.jbtabs li,.moduletable-panelmenu span.mainlevel,h3.pane-toggler So you just need to add your selector there to get it to work.”
Today I had to add another selector: h3.pane-toggler-down so that a weblinks list spilled open would be considered in the calculations. I didn’t need to submit a new ticket or ask for help, I just needed to access the ticket explaining how the problem was solved the first time.
The pesky part was that I had to renew my account to be able to access the old tickets with this solution. So from now on I’ll remember to document solutions here as well and not rely on the ticket system from a limited-time support contract.
(Of course I also added a line to the template with that variable for testing that would display the results and not force me to examine the code to see if it was working.)
In my stylesheet I could then write rules specifically for the ipad:
The results made mp3 players that were ugly, but functional.
The much better solution was to use WidgetKit’s Media Player from YooThemes.com, but I’m still glad to know how to target the ipad specifically should I ever need to.
-->
My friend and colleague Bill from Grumpy Engineering helped me with this one:
I added this to the php block at the head of my template:
$isIPad = preg_match('/ipad/i', trim($_SERVER['HTTP_USER_AGENT'])); if ($isIPad) $device="ipad"; else $device="not-ipad";
and then could use
class=“<(question mark)php echo $device; ?>” on the body element of the index.php file.
(Of course I also added a line to the template with that variable for testing that would display the results and not force me to examine the code to see if it was working.)
In my stylesheet I could then write rules specifically for the ipad:
The results made mp3 players that were ugly, but functional.
The much better solution was to use WidgetKit’s Media Player from YooThemes.com, but I’m still glad to know how to target the ipad specifically should I ever need to.
But… Allvideos uses Quicktime as a fallback when flash is not available and on the ipad the Quicktime controller was clunky. I did get a snippet of php to detect the ipad and then could address styling the controller to make it better — but it was still clunky.
WidgetKit from youtheme.com
I kept looking for a solution that would provide html5 audio and finally found it in youtheme’s widgetkit media player. This uses html5 audio and falls back to flash instead of the other way around. It suits me!
The syntax is just a bit more complex, but certainly doable:
As if absolute positioning isn’t complicated enough…. I think I always assumed that an object would move to position 0,0 as soon as position:absolute was declared.
But in fact, all my tests of browsers today seemed to leave the element where it was and only adjust the position – relative to it’s positioned containing block — if the offset is specifically declared. (This is not very clear in the w3c specs.)
Thus, in two different students’ work, I observed absolutely positioned elements remain where they normally would have been in one dimension while being positioned in the other dimension with the declared offset. Declaring the other offset as zero (top:0; or left:0;) caused the element to adjust to the viewport as no other positioned elements had been defined.
I found this: (http://www.charlescooke.me.uk/web/lab_notes/pos_abs/index.html)
It is only the offsets which are measured with respect to the viewport and that only sometimes. If no offset is specified i.e. if it is unmentioned rather than set to zero the positioned element will remain where it would have been in normal flow. In other words positioning the element need not necessarily change its position from where it was it may just change its status to ‘positioned’. A method frequently employed is to set the declaration position: relative; either on the body or on a div without including an offset. It then becomes possible to position other elements with respect to the body or div without further ado.
Which makes the distinction between unmentioned and set to zero offsets.
I was grumbling about browsers being too kind and not referring back to the containing block or viewport in this case, but in fact, this is the common interpretation.
The interesting thing you can do with this is to have something act like a fixed position element, but not fixed to the viewport — by not mentioning any horizontal offset, the absolutely positioned sidebar remains offset from the top of the viewport and horizontally where it would have been otherwise.
I’m preparing notes for the html / css class I teach at the Marlboro College Graduate School and at the same time helping a colleague troubleshoot a ready-made Joomla! template.
Needing to override a styling rule, there are many possible ways to make a rule more specific without using !important!
Firebug (Firefox extension) and CSSEdit (part of Espresso package from MacRabbit) are two tools that will help you identify the style rules currently in play. Of course, you could just edit the stylesheet and make changes to the rule directly, but sometimes you want to keep all of your custom styles separate, in which case you may need to increase the specificity of the selector.
If the rule in question targets only a class, i.e. .alert, you could increase specificity by simply adding the element selector, i.e. h1.alert.
Often, though, template stylesheets already are using quite complex selectors.
I made a note to play “Could you be more specific, please?” as a classroom activity for my students — presenting them with some real-life selectors and analyzing their suggestions for getting more specific.
It happens sometimes that you just need one or two old addresses , or shortened addresses to be mapped to a current url.
Adding a few lines of code to the .htaccess file just might be the fix you need. These might be actual file names for a static website, or a Joomla generated url or WordPress permalink.
I’m working on a project where Google currently has over 9000 indexed entries, most of which are comments on a K2 article accidentally left open to comments by the previous developer.
According to the instructions at Google Webmaster Tools, the “remove url” tool is not to be used except in urgent situations where private data has been shared and that using the “remove url” tool otherwise may hurt the site.
How then to get Google to crawl the indexed pages (which were removed months ago!) and discover that they return 404 errors?
In an article by an SEO expert, http://www.zdnet.com/blog/seo/seo-pro-tip-how-to-remove-indexed-and-cached-content-urls-and-pages-from-google/1529 there is the suggestion to tweet the old url out to your followers and ask that they re-tweet it. I guess that’s intended to make Google stand up and notice.
So here’s the page that got 9000 comments: http://bit.ly/rIh9CB (You’ll just get a 404, but thanks for visiting!)
Thanks for your help. I’ll let you know what happens.
On a site using the Joomla Bamboo template Pure, I was having trouble with footer not clearing the sidebar. I discovered that a custom html module with just a non-breaking space in the bottom position would fix the problem. I didn’t mind the dark banner that stretched across the screen and I was willing to live with this work around (having tried all kinds of clears, etc. on the footer module.)
Then I discovered that that “fix” didn’t fix it in PC browsers: Firefox and IE8. Consulting the joomla bamboo forum I found a similar issue with a suggestion to be sure images had explicit heights. I added heights to my flickr and facebook modules and the problem was solved. The PC browsers were apparently not reading the heights declared for the iframes used by these modules. And the template seemed to need to calculate a total height for the sidebar.
I have a site that started its life in 1.7.0. After upgrading to 1.7.3 I lost control of the order of menu items. Numbering and saving didn’t work. Tweaking with the blue arrows only worked in some places, and then didn’t seem to stick. I “solved” the problem by using the MOVE function at the bottom of the menu items manager page, selecting an item and moving it to the same menu — this would add it at the bottom of the list. I repeated until all were in the order they had been in before the upgrade to 1.7.3.
Searching the joomla forum I found a few related posts in this thread:
>>Infograf and I seem to have found the problem! It is a problem with JUpgrade – the column “ordering” in table “_menu” is filled with different numbers – it should be just zero’s as the ordering of the menu items is drawn from the columns “lgt” and “rgt”.
They then give the sql command to set all to zero. I can’t paste the code here just now.
Many in the forum were pointing at jUpgrade as the source of this problem and someone uploaded a mini component to do the above sql task.
I’m preparing a talk for JoomlaDay NYC on Alternative Layouts and Custom Menu Item Types. There had been so many posts on the joomla.org forum about these new capabilites of Joomla 1.6 and 1.7, and so many were complaining that the “feature” simply didn’t work, I was getting a bit worried about the presentation. I had proved them working back in the spring for a presenation at Joomla Day New England, but had things changed in the subsequent versions?
Finally last week I had a chance to put them all through their paces and the good news is that Alternative Layouts and Custom Menu Item Types DO indeed work — for all kinds of Joomla items: articles, contacts, weblinks, and category displays like blogs and lists.
The ONE Joomla entity where my template overrides (which worked) could not be turned into Alternative Layouts OR Custom Menu Item Types was the com_content layout for Categories.
I was trying to demonstrate using the sample data and the Parks Photo Gallery which is a demonstration of using regular articles to create a photo album of sorts. I didn’t like that the Categories layout said “Article count” for each sub-category and wanted to change that to “Image count”.
In the sample data, the menu item for the Parks Photo Gallery was set as a Categories list. When that didn’t work, I changed it to a Category list menu type and then applied my changes there. Since there was a menu item to the top level category I had to take the further step and create the custom menu item type and then use that for the menu. All well and good. A parameter allowed me to skip the verbage “There are no articles for this category” and proceed directly to listing the sub-categories with their Image counts.
It’s had me thinking about when you would ever need the Categories layout, since I was able to get the same results with the Category layout. Any ideas anyone? Please email me!
