Custom Mobile Menu Has Extra Button

[Bill Macchio]

#1287

I’ve replaced the default mobile menu at Designs > Sub-headers > Mobile with this jQuery:

<script>
idx(window).bind('load', function() {
document.getElementById('IDX-mobileOptions').innerHTML = '<div role="dialog" class="ui-dialog-contain ui-corner-all ui-overlay-shadow"><div data-role="header" class="ui-corner-top ui-header ui-bar-a" role="banner"><a href="#" data-icon="delete" data-iconpos="notext" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title="Close" data-transition="slidedown" data-direction="reverse"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Close</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a> <h1 class="ui-title" role="heading" aria-level="1">Links</h1> </div><div data-role="content" class="ui-corner-bottom ui-content ui-body-a" role="main"> <ul data-role="listview" data-theme="a" data-divider-theme="a" class="ui-listview"> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/" class="ui-link-inherit">Home</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://listings.pastermackrealestate.com/idx/search/basic-search" class="ui-link-inherit">Basic Search</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://listings.pastermackrealestate.com/idx/search/expanded-search" class="ui-link-inherit">Expanded Search</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://listings.pastermackrealestate.com/idx/search/advanced" class="ui-link-inherit">Advanced Search</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/lifestyles.php" class="ui-link-inherit">Lifestyles</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/communities.php" class="ui-link-inherit">Communities</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/resources.php" class="ui-link-inherit">Resources</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/property-management.php" class="ui-link-inherit">Property Management</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/pastermack-real-estate-agents.php" class="ui-link-inherit">Our Agents</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/pastermack-real-estate-agents.php#staff" class="ui-link-inherit">Staff</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/what-is-my-property-worth.php" class="ui-link-inherit">What\'s My Property Worth?</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/explore-brevard.php" class="ui-link-inherit">Explore Brevard</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="http://pastermackrealestate.com/contact.php" class="ui-link-inherit">Contact Us</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="/idx/usersignup" class="ui-link-inherit">Login</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="?fullsite" class="ui-link-inherit">View Full Site</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li></ul></div></div>';
});
</script>

It seems to work good everywhere except the Close button for the menu. There are 2 buttons there, and the one to the left seems to be underneath of the other one and the result is that since about 9/10 of the working button is covered the mobile menu cannot be easily closed. When I Inspect this button in Chrome I get this code, and as you can see the are 2 A tags, but if you refer back up top I’ve there’s only one link … its like some evil twin.

<div data-role="header" class="ui-corner-top ui-header ui-bar-a" role="banner"><a href="#" data-icon="delete" data-iconpos="notext" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title="Close" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-a" data-transition="slidedown" data-direction="reverse"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Close</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a><a href="#" data-icon="delete" data-iconpos="notext" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-right ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title="Close" data-transition="slidedown" data-direction="reverse"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Close</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a> <h1 class="ui-title" role="heading" aria-level="1">Links</h1> </div>

The A link href="#" data-icon="delete" is in there 2 times, but the second one somehow has this code segment added class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-right ui-btn-up-a" and I’m rather at a loss.

Both of these links don’t appear in the jQuery I’m using, and the extra evil twin button obscures most of the other button which works.

Example URL would be http://listings.pastermackrealestate.com/idx/search/basic-search and if you are viewing on a non-mobile device you can see it using http://listings.pastermackrealestate.com/idx/search/basic-search?mobile and then open the mobile menu by clicking the button at upper right.

(0 rating, 0 votes, rated)
You need to be a registered member to rate this post.

Loading...

[Nick Leech]

#1288

this seems to work:

a.ui-btn-left.ui-btn.ui-shadow.ui-btn-corner-all.ui-btn-icon-notext.ui-btn-right.ui-btn-up-a {
display: none;
}

(0 rating, 0 votes, rated)
You need to be a registered member to rate this post.

Loading...

[Author]

Posts