I currently have a div that changes to fixed position at the bottom of the page when shown on a phone resolution and is supposed to display the author content. When clicking this div a menu slides up using jquery. At this time, the div displays transparent, but when clicking on the location the div should be, it slides the menu open just like it should.
I'm not sure what's going on, but all the debugging I have done has led to nothing. Has anyone else experienced this, or know how to resolve it?
Here's the HTML/CSS for that piece:
<div id="secondaryBox" class="span6 pull-right">
<div id="author" class="collapsed">
<?php if(!empty($user['avatarPath'])){?>
<img src="<?php echo $user['avatarPath'] ?>" class="avatar avatar-50 photo avatar-default" height="50" width="50" />
<?php }else{
echo get_avatar( $current_user, 50);
} ?>
<h5><?php echo $user['displayName']; ?></h5>
<h6><span class="hidden-phone"><?php echo get_current_user_role($user['role']) ?>, </span><?php echo $user['schoolName']; ?></h6>
<div id="phoneCaret" class="circleCaret visible-phone"><b class="caret"></b></div>
</div>
<?php if ( current_user_can('read') ) { ?>
<div id="hiddenMenu">
<div class="addMenu hidden-phone collapsed">
<span>Additional Options </span>
<div class="circleCaret"><b class="caret"></b></div>
</div>
<ul id="slideOutMenu">
<?php if ( current_user_can('add_users') ) { ?>
<li><a href="/wp-admin/admin.php?page=users"><i class="icon-th-list icon-white"></i> Manage Users</a></li>
<?php if(is_super_admin($current_user->ID)){?>
<li><a href="/wp-admin/admin.php?page=import"><i class="icon-th-list icon-white"></i> Export Users</a></li>
<?php }?>
<li class="divider"></li>
<?php }
if ( current_user_can('manage_categories') ) { ?>
<li><a href="<?php $networkURL ?>/wp-admin/network/sites.php"><i class="icon-plus icon-white"></i> Create School</a></li>
<li><a href="/wp-admin/edit-tags.php?taxonomy=category"><i class="icon-tags icon-white"></i> Manage Categories</a></li>
<li><a href="/wp-admin/admin.php?page=school_settings"><i class="icon-edit icon-white"></i> School Settings</a></li>
<li class="divider"></li>
<?php }
if ( current_user_can('manage_network_options') ) { ?>
<li><a href="/wp-admin/network/sites.php"><i class="icon-globe icon-white"></i> Network Sites</a></li>
<li><a href="/wp-admin/options-general.php"><i class="icon-wrench icon-white"></i> Settings</a></li>
<li><a href="/wp-admin/admin.php?page=wpengine-common"><i class="icon-cog icon-white"></i> WP Engine Settings</a></li>
<li><a href="/wp-admin/options-general.php?page=limit-login-attempts"><i class="icon-wrench icon-white"></i> Login Attempts</a></li>
<li class="divider"></li>
<?php } ?>
<li><a href="/wp-admin/admin.php?page=dashboard"><i class="icon-home icon-white"></i> My Dashboard</a></li>
<li><a href="<?php echo network_site_url(); ?>"><i class="icon-globe icon-white"></i> Dewsly.com</a></li>
<li><a href="/wp-admin/admin.php?page=profile"><i class="icon-user icon-white"></i> My Profile</a></li>
<li><a target="_blank" href="http://support.dewsly.com"><i class="icon-question-sign icon-white"></i> Support</a></li>
<li><a onclick="return confirm(\'Do you really want to logout?\')" href="<?php echo get_site_url(1); ?>/?my_error=logout"><i class="icon-off icon-white"></i> Logout</a></li>
</ul>
</div>
<?php } ?>
</div>
CSS:
#author{
position:fixed;
bottom:0;
left:0;
width:100%;
background-color:#212121;
height:70px;
z-index: 1001;
overflow:hidden;
cursor:hand;
padding:10px;
border-top:1px solid #595555;
}
#secondaryBox {
height: 0px;
position:fixed;
bottom:70px;
width:100%;
overflow:auto !important;
left:0;
z-index: 100;
}
After quite a bit more reading the issue was having a fixed position div within a scrolling div. The information given in the comments of the post linked from here gave me the guidance. Although that is frustrating, at least I know how to resolve the issue now.
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/