Moving or Collapsing Inserted Mobile Menu2016-02-26T15:28:33+00:00

Build with IDX Broker Forums IDX Broker Control Panel Custom CSS in Control Panel Moving or Collapsing Inserted Mobile Menu

  • Author
    Posts
  • Bill Macchio
    Participant
    Post count: 27

    Hmm, after writing this it occurs to me this could go in Javascript or Custom CSS forums?

    On the mobile version of IDX Broker Mobile pages such as http://listings.pastermackrealestate.com/idx/search/expanded-search (http://listings.pastermackrealestate.com/idx/search/expanded-search?mobile if you are on a desktop) so far I have been able to add a nav menu in the Global Mobile sub-header that inserts a menu visually styled like the IDX Broker mobile menu – but its not hidden nor collapsed.

    Right now this menu appears directly below the main banner at the top of the page where the content begins.

    I’d like to do one of the following…

    1. Replace the current IDX Broker menu (My Account, Contact, New Search and View Full Site).
    2. Add our menu before the current IDX Broker menu (My Account, Contact, New Search and View Full Site).
    3. Have our menu collapse/expand into a button or Menu link where it is now
    4. Failing the options above move it to the bottom of the page

    I’ve used more jquery/javascript .insertBefore and .insertAfter than I am comfortable with but I think if I can find the right “hook” it might work.

    I tried idx(‘#IDX-Subheader-Global’).insertBefore(‘</body>’); and for some reason that does not work

    I’ve also got a show more/less script running on non-mobile pages like http://listings.pastermackrealestate.com/i/lifestyles-canal-front that I could also use to hide/show the menu, but when I try to use this code for some reason it does not function.

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Antonio Ortega
    Keymaster
    Post count: 170

    Since you are looking for this much control why not just re write the element with something like

    document.getElementById(‘id’).innerHTML=’Your Collapsable Menu’?

    That would give you the option for 1, 2, and 3. For 4 you would could CSS it down.

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
    • Bill Macchio
      Participant
      Post count: 27

      I tried the innerHTML code and I guess I made a syntax error. So I tried a simpler replacement using innerHTML where I took your Mobile Menu and change the link “My Account” to “Login” and its also not working. Here’s the code I tried and its also not working. The code was added at Designs > Sub-headers > Global > Mobile and when I added it I removed our other custom Mobile menu code:

      document.getElementById(‘IDX-mobileOptions’).innerHTML = ‘<div role=”dialog” class=”ui-dialog-contain ui-corner-all ui-overlay-shadow”>

      <!– Header –>
      <div data-role=”header” class=”ui-corner-top ui-header ui-bar-a” role=”banner”><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”> </span></span>
      <h1 class=”ui-title” role=”heading” aria-level=”1″>Links</h1>
      </div>

      <!– Content –>
      <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”>Login</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div>
      <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>Contact</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div>
      <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>New Search</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div>
      <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>View Full Site</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div>

      </div>
      </div>’

      0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
      You need to be a registered member to rate this post.
      Loading...
  • Bill Macchio
    Participant
    Post count: 27

    Ah, that looks very promising! I’ll try that one out, thanks!

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Bill Macchio
    Participant
    Post count: 27

    Just today I’ve tried the following and to make a minor change tot he mobile menu as a test and this did not work either:

    <!– Property Sub Type –>
    <THEscriptTAG>
    idx(window).bind(“load”, function() {
    document.getElementById(‘IDX-mobileOptions’).innerHTML = ‘<div role=”dialog” class=”ui-dialog-contain ui-corner-all ui-overlay-shadow”>

    <!– Header –>
    <div data-role=”header” class=”ui-corner-top ui-header ui-bar-a” role=”banner”><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”> </span></span>
    <h1 class=”ui-title” role=”heading” aria-level=”1″>Links</h1>
    </div>

    <!– Content –>
    <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>Login</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div>
    <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>Contact</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div>
    <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>New Search</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div>
    <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-li-last ui-btn-up-a”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>View Full Site</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div>

    </div>
    </div>’;
    });
    </THEscriptTAG>

    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: 116

    Why not just turn off mobile wrappers so that it uses your responsive websites navigation menu?

    Turn off mobile wrappers within the IDX Dashboard –> Preferences –> Global Preferences –> Mobile –> Change both boxes to No and save changes

    .

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
    • Bill Macchio
      Participant
      Post count: 27

      Unfortunately making any layout changes to this project is not an option. The client is finalizing some things they’d like changed and this is one of them. I’m sure I can get jQuery to replace the current Mobile Menu, I’m just not getting it right.

      Can anyone help with my code? Antonio suggested this back on Feb 26 and I’ve tried to get the code right, and to me it does look right but is not working.

      0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
      You need to be a registered member to rate this post.
      Loading...
  • Bill Macchio
    Participant
    Post count: 27

    I’ve made some headway, but something is not quite right. Support pointed out that I probably should not have any line breaks in my innerHTML code so I removed them and now I see buttons that work but the buttons look slightly different. They are larger and blocky VS smaller and rounded. Is there an issue right now with the icons? I also do not see the back arrow and the menu icons or any of the little white icons like this http://d1qfrurkpai25r.cloudfront.net/graphical/frontend/css/images/icons-18-white.png

    I suspect the issue with icons is unrelated since I cannot see them whether or not my javascript is there.

    Anyway, here’s what I tried at Designs > Sub-headers > Global > Mobile that gave me the larger, squarish buttons:

    <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”><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”> </span></span> <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”>Login</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div> <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>Contact</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div> <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>New Search</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div> <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-up-a ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last”><div class=”ui-btn-inner ui-li”><div class=”ui-btn-text”>View Full Site</div><span class=”ui-icon ui-icon-arrow-r ui-icon-shadow”> </span></div></div></div>’;
    });
    </script>

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Antonio Ortega
    Keymaster
    Post count: 170

    Is there a link we can visit to see this code in action?

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Antonio Ortega
    Keymaster
    Post count: 170

    Is there a link we can visit to see this code in action?

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Bill Macchio
    Participant
    Post count: 27

    Ah yes, here: http://listings.pastermackrealestate.com/idx/search/basic-search?mobile

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Bill Macchio
    Participant
    Post count: 27

    Following up here… any thoughts guys?

    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: 116

    This CSS will fix the issue:

    .ui-li-static.ui-li {padding:0px !important;}
    .ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow {padding-right: 0px !important;}

    I will try to see when I have time why its actually different for your site but it looks like jquery CSS is being applied to those elements.

    This is being applied:

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: .7em 15px;
    display: block;
    }

    And this:

    .ui-btn-icon-right .ui-btn-inner {
    padding-right: 40px;
    }

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Bill Macchio
    Participant
    Post count: 27

    Looks good now. We’ve added our own navigation links using innerHTML. Thanks IDX Broker!

    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.