iPad works in one but not the other???

[dmagill]

Greetings everyone!

I have a problem with the iPad hover state. I have a site that a company got a year and a bit ago and it was all screen (PC/Mac). Suddenly there are going to be numerous iPads involved and the site 'should' be iPad friendly... sigh... I don't own an iPad, it is a work tool so I can not even test what I am doing here. I am just trying to get some in site on why the menu's work on the raw unmodified install but not my edited site.

The site that I built: 1.10.2
http://vsgroupdev.com/cas/


Sample that works: CMS 1.10 ()
http://vsgroupdev.com/sample/

Both are fairly up to date. I have left the working site alone because I don't want to mess with what works.

What I have done:
I copied everything from the working CMS to the none working CMS. That means the CSS, the Menu Manager code (cmsmenu horizontal). All of the templates in the working sample have no issue with the iPad. My site does not work at all, I only have one template.

I have read, tried Java, with no success. Maybe someone with better skills at CSS could explain this to me?

Thank you. If you need more info, do not hesitate to ask. I figured that if I could copy the entire thing over one for one, and I can not get it to work.

Thank you in advance.

D

[dmagill]

Hey all.

I found this.
http://blog.0100.tv/2010/05/fixing-the- ... phoneipod/

The author claims that Apple has built tools already to account for the common problem I am facing. When I get a chance I will give it a test and let the board know.

Thanks!

[Dr.CSS]

Difference between the 2 is the Sample Site has real links for very menu item the other has sectionheaders that don't have href= in them...

<li class="menuparent"><a class="menuparent"
href="http://samplesite.com/sample/index.php? ... msms-works">

<li class="menuparent"><a class="menuparent"><span class="sectionheader">

[dmagill]

...

lol

Thank you Doc. So engrossed by the problem I didn't see it.

Any idea on a solution? I realize this not a CMSMS problem, instead it is a iPhone/iPad thing. But advice is always appreciated.

Thanks again.

[Dr.CSS]

I don't have one but there is a post in here somewhere on it, if it is indeed the lack of href= you could change the menu template sectionheader part to have href='javascript:return false'...

[dmagill]

Hey Again Doc,

If I am using the cssmenu I don't have a number of options to interact with:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" 
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent" 
{else}
  <li>
  <a 
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

There is only one reference to an href, I am not so good with the menu manager. I have been reading the wiki but have not found anything that relates to the above code.

As always, any direction is appreciated.

Thank you again!

[Dr.CSS]

This part...

$node->type != 'sectionheader' and $node->type != 'separator'}
<li class="menuparent"><a class="menuparent"

To this...

$node->type != 'sectionheader' and $node->type != 'separator'}
<li class="menuparent"><a href='javascript:return false' class="menuparent"

Of course I have no idea if it will work as I don't have a fancy phone to test it with...

[dmagill]

Hey Doc, thank you very much.

My main phone is a Samsung Galaxy Fascinate. I love it and have no problems what-so-ever surfing any website I have ever visited. Thank you Android/Firefox.

The iPad is a work thing, for doing presentations and the like... impressive I guess.

I tried your suggestion, made sure I was using the right menu manager code and that it was saved. No change.

I tested it on an unrelated site.
http://vsgroupdev.com/tcr/

The menu still works which is awesome on my PC and Android, but the iPad is a no go.

Thanks again.

[dmagill]

Hey all!!

I found this and it worked perfectly for me. Only 6 hours of digging around the web to find the solution!

Code: Select all

#primary-nav li a

This is the most important thing. It has to match your CSS of course.

Code: Select all

{literal}
<__script__ language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></__script>

<__script__ type='text/javascript'>

$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("#primary-nav li a").click(function(){  // Update class to point at the head of the list
});

}

});

</__script>
{/literal}

Thank you Doctor CSS for you time in this!

[dmagill]

If you have multiple menu's =-)

Code: Select all

<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></__script>

<__script__ language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></__script>

<__script__ type='text/javascript'>

$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("ul#primary-nav li a").click(function(){  // Update class to point at the head of the list
});
$("ul#primary-nav2 li a").click(function(){  // Update class to point at the head of the list
});
}

});

</__script>