Javascript in menu and Apple I-phone etc.

chrisbar · Post by **chrisbar** » Wed Jan 12, 2011 7:20 pm

Hello everybody,

I get some remarks of people that cannot use my site (menu etc.) by using Apple I-phone and othe Apple-tools. I directly thought about the problems with Java. I use the CSSMenu.js (java?) in my home menu (they cannot open this one. From one other person I understood that he couldn't use the Home menu, but he could use the menu of other teampages in our website. These teampages also use CSSMenu.js, so I am confused now. Anybody an idea?
My website url is www.red-eagles.nl

Chris

Nullig · Post by **Nullig** » Wed Jan 12, 2011 7:35 pm

You do have a problem with your base HREF - <base href="http://www.red-eagles.nl//" />

Perhaps this is the problem:

<__script__ type="text/JavaScript">

</__script>

Nullig

Dr.CSS · Post by **Dr.CSS** » Wed Jan 12, 2011 7:46 pm

The menu JS has nothing to do with Apple trying to get the menu to function/work as it has  as they are all for the same thing, and yes the min/max just might have an effect in Apple but not on the menu...

I doesn't help that you are missing a </div> somewhere...

chrisbar · Post by **chrisbar** » Wed Jan 12, 2011 8:43 pm

Underneath you see the template. As you can see (I Believe), the recommendations you made were already there. What do you mean with the latest sentence 'doesn't help that you are missing a </div> somewhere...'?

And where do I change (remove) the second dash in the BaseRef?

Code: Select all

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

  <head>
    <title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}


 {metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

 {stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}

 {cms_selflink dir="start" rellink=1}
 {cms_selflink dir="prev" rellink=1}
 {cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
 {literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
    <!--[if lte IE 6]>
    <style type="text/css">
    #header {width:expression(P7_MinMaxW(720,950));}
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}

    <!--[if lte IE 6]>
    <__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
    <![endif]--> 
{* The above JavaScript is required for CSSMenu to work in IE *}
  </head>
  </__body>



<div id="Fadingborder">


    <div id="pagewrapper">

{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
      <ul class="accessibility">
        <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
{* end accessibility skip links *}

      <hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}

{* Start Sidebar *}
        <div id="sidebar">
            <div id="logo">
            </div>        
  

<a title="Campagne Fair Play en Respect" href="http://www.nijb.nl/fpr/" target="_blank"><img src="uploads/images/fairplay.gif" alt="" width="197" height="34" /></a>

{content block='Sidebar'}
<p> </p>
<p><a href="uploads/images/Ochtendtraining/Ochtendtraining THA.pdf" target="_blank"><img src="uploads/images/THA logo ochtendtraining.jpg" alt="" width="130" height="93" /></a></p>
<p> </p>
<p><a href="uploads/images/Inschrijvings formulier Goalie zomertraining 2011.pdf" target="_blank"><img src="uploads/images/Goalietraining.jpg" alt="" width="130" height="93" /></a></p>
<p> </p>
<p><a href="uploads/images/Inschrijvings formulier Zomertraining 2011.pdf" target="_blank"><img src="uploads/images/zomertraining.jpg" alt="" width="130" height="93" /></a></p>   
{* Start News, stylesheet  "Module: News" *}
            <div id="news">
              <h2>Nieuws</h2>
              {news detailpage='news' number='1'}
            </div>
{* End News *}

        
        </div>
{* End Sidebar *}



{* Start Content *}
      <div id="content">

{* Start Navigation *}
      <div id="menu_vert">
{* stylesheet  "Navigation: CSSMenu - Horizontal" *}
        <h2 class="accessibility">Navigation</h2>
        {menu template='cssmenu.tpl' start_level='1' number_of_levels='4'}
        <hr class="accessibility" />
      </div>
{* End Navigation *}



{* Start Breadcrumbs *}
      <div class="crbk">
        {* holds the right image, we need 2 divs to be able to make this site fluid, if it was fixed width we could use one div, one image  *}
{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
           <div id="search">
           {search searchtext=" Voer zoekterm in.." submit="Zoeken"}
           </div>
     {* End Search *}

        <div class="breadcrumbs">
        &nbsp;{breadcrumbs starttext='U bevindt zich hier' root='Home' delimiter='&raquo;'}
          <hr class="accessibility" />
        </div>

      </div>
{* End Breadcrumbs *}

{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
        <div class="back1">
             <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
               {content}
                <br />{* to insure space below content *}


{* Start relational links *}
{* note this is the right side, when you float: divs you need to have float: right; divs first *}
            
{* End relational links *}

                <hr class="accessibility" />
                <div class="clear"></div>
              </div>

{* End Content Area *}

      </div>
{* End Content *}



    </div>
{* end pagewrapper *}

</div>


{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
      <div class="footback">
        <div id="footer">
{* stylesheet  "Navigation: FatFootMenu" *}
          
          <div id="footrt">
          {global_content name='footer'}
          </div>
          <div class="clear"></div>
        </div>
      </div>
{* End Footer *}

  <__body>
</__html>

M@rtijn · Post by **M@rtijn** » Wed Jan 12, 2011 9:15 pm

When posting a large piece of code, please use the

Code: Select all

 tags! (fixed it for you)

[quote="chrisbar"]
And where do I change (remove) the second dash in the BaseRef?
[/quote]
I guess the problem will be in your config.php under '$config['root_url']'

The url specified there, should *not* end with a slash (/)

chrisbar · Post by **chrisbar** » Wed Jan 12, 2011 9:39 pm

Thank you. I have removed the config.php. Let's see if this helps. I have asked someone to check with an I phone. ...........Unfortunately: Still a 'big' problem. When opening the site www.red-eagles.nl he can click on the menu button Home (page refreshes, this Button is a Content button). The other menu buttons don't function. These buttons are Section Heads!
When opening directly http://www.red-eagles.nl/index.php?page ... gina-3kind regards (Teampagina U12) the user has a menu containing 'IJshockeyschool' up to 'M@ds'. The second Horizontal Menu (including the Home button) is just a red (blank) menu without buttons in the I-Phone screen.

Underneath you find the code of the Sjabloon U12 (used for this page).

Code: Select all

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

  <head>
    <title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

 {metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

 {stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}

 {cms_selflink dir="start" rellink=1}
 {cms_selflink dir="prev" rellink=1}
 {cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
 {literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
    <!--[if lte IE 6]>
    <style type="text/css">
    #header {width:expression(P7_MinMaxW(720,950));}
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}

    <!--[if lte IE 6]>
    <__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
    <![endif]--> 
{* The above JavaScript is required for CSSMenu to work in IE *}
  </head>
  </__body>



<div id="Fadingborder">


    <div id="pagewrapper">

{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
      <ul class="accessibility">
        <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
{* end accessibility skip links *}

      <hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}

{* Start Sidebar *}
        <div id="sidebar">
            <div id="logo">
            </div>        
  

<a title="Campagne Fair Play en Respect" href="http://www.nijb.nl/fpr/" target="_blank"><img src="uploads/images/fairplay.gif" alt="" width="197" height="34" /></a>

          {content block='Sidebar'}

<p> </p>
<p> </p>
<p><a href="uploads/images/Inschrijvings formulier Goalie zomertraining 2011.pdf" target="_blank"><img src="uploads/images/Goalietraining.jpg" alt="" width="130" height="93"/></a></p>
<p> </p>
<p><a href="uploads/images/Inschrijvings formulier Zomertraining 2011.pdf" target="_blank"><img src="uploads/images/zomertraining.jpg" alt="" width="130" height="93" /></a></p>          
        </div>
{* End Sidebar *}



{* Start Content *}
      <div id="content">

{* Start Navigation *}
      <div id="menu_vert">
{* stylesheet  "Navigation: CSSMenu - Horizontal" *}
        <h2 class="accessibility">Navigation</h2>
          {menu template='cssmenu.tpl' start_level='2' number_of_levels='2'}
          {menu template='cssmenu.tpl' items=home,teampagina-3,verslagenu12,spelers-4,competitie-3,stand,fotos-u12,aanbod-U12,vraag-U12}
        <hr class="accessibility" />
      </div>
{* End Navigation *}



{* Start Breadcrumbs *}
      <div class="crbk">
        {* holds the right image, we need 2 divs to be able to make this site fluid, if it was fixed width we could use one div, one image  *}
{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
           <div id="search">
           {search searchtext=" Voer zoekterm in.." submit="Zoeken"}
           </div>
     {* End Search *}

        <div class="breadcrumbs">
        &nbsp;{breadcrumbs starttext='U bevindt zich hier' root='Home' delimiter='&raquo;'}
          <hr class="accessibility" />
        </div>

      </div>
{* End Breadcrumbs *}

{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
        <div class="back1">
             <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
               {content}
                <br />{* to insure space below content *}


{* Start relational links *}
{* note this is the right side, when you float: divs you need to have float: right; divs first *}
            
{* End relational links *}

                <hr class="accessibility" />
                <div class="clear"></div>
              </div>
        </div>
{* End Content Area *}

      </div>
{* End Content *}



    </div>
{* end pagewrapper *}

</div>


{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
      <div class="footback">
        <div id="footer">
{* stylesheet  "Navigation: FatFootMenu" *}
          
          <div id="footrt">
          {global_content name='footer'}
          </div>
          <div class="clear"></div>
        </div>
      </div>
{* End Footer *}

  <__body>
</__html>

Any idea?

Kind regards

Chris

Chris

CMS Made Simple Forums

Javascript in menu and Apple I-phone etc.

Javascript in menu and Apple I-phone etc.

Re: Javascript in menu and Apple I-phone etc.

Re: Javascript in menu and Apple I-phone etc.

Re: Javascript in menu and Apple I-phone etc.

Re: Javascript in menu and Apple I-phone etc.

Re: Javascript in menu and Apple I-phone etc.