Custom Mobile Menu Has Extra Button2016-04-26T08:02:30+00:00

Build with IDX Broker Forums IDX Broker Control Panel Javascript in Control Panel Custom Mobile Menu Has Extra Button

  • Author
    Posts
  • Bill Macchio
    Participant
    Post count: 27

    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 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Nick Leech
    Keymaster
    Post count: 109

    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 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...

You must be logged in to reply to this topic.