Moving or Collapsing Inserted Mobile Menu

[Bill Macchio]

#1124

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

Loading...

[idxbroker]

#1128

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

Loading...

[Bill Macchio]

#1185

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

Loading...

[Bill Macchio]

#1129

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

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

Loading...

[Bill Macchio]

#1198

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

Loading...

[Nick Leech]

#1200

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

Loading...

[Bill Macchio]

#1212

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

Loading...

[Bill Macchio]

#1216

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

Loading...

[idxbroker]

#1217

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

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

Loading...

[idxbroker]

#1218

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

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

Loading...

[Bill Macchio]

#1221

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

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

Loading...

[Bill Macchio]

#1237

Following up here… any thoughts guys?

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

Loading...

[Nick Leech]

#1241

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

Loading...

[Bill Macchio]

#1251

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

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

Loading...

[Author]

Posts