Forums

Stacks and Mobile version of site

Permalink
I have a drop down menu on my site it's in a stack but when i view in mobile version the last link does not work.
here is the one of the pages this does this on:
http://www.silverstoneliving.org/silverstone-living...
how do i get this to work?
jmacdesigns
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi jmacdesigns,

Which specific link are you referring to?

What version of concrete5 are you using?
jmacdesigns replied on at Permalink Reply
jmacdesigns
http://www.silverstoneliving.org/at-home-by-hunt/
in the dropdown menu above the menu when scaled down to tablet or phone size this link does not work? but the others do?
jmacdesigns replied on at Permalink Reply
jmacdesigns
# concrete5 Version
5.6.3.3
MrKDilkington replied on at Permalink Reply
MrKDilkington
@jmacdesigns

Can you take a screenshot and highlight which link you are referring to, please.
jmacdesigns replied on at Permalink Reply 3 Attachments
jmacdesigns
the highlighted in yellow.
are you not having the issue when you click on it it does not got to that page?
i also have an issue where you have a page and then you minimize it to tablet or phone size and the image changes. I will add those screen shots as well.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@jmacdesigns

I believe the issue is in your mobile-nav.js file and not related to stacks or concrete5.

In your select drop-down, you are not setting an option value attribute, so the value being read by mobile-nav.js is the option text node. The problem is that the select option text node does not match the value the script is looking for. The select option text node is "At Home By Hunt" and the script is looking for "Hunt at Home".
<select>
    <option>Silverstone</option>
    <option>The Huntington</option>
    <option>Hunt Community</option>
    <option>At Home By Hunt</option>
</select>

// set current property in utility nac
var url = window.location.href;
if (url.indexOf('the-huntington') > -1) {
    $('#mobile-utility select').val('The Huntington');
}
else if (url.indexOf('hunt-community') > -1) {
    $('#mobile-utility select').val('Hunt Community');
}
else if (url.indexOf('hunt-at-home') > -1) {
    $('#mobile-utility select').val('Hunt at Home');
}
else {
    $('#mobile-utility select').val('Silverstone');
}
// go to property when selected in mobile picker
Viewing 15 lines of 32 lines. View entire code block.

You can try something like this instead:
- use select option values instead of relying on text nodes
<select>
    <option value="silverstone_living">Silverstone</option>
    <option value="the_huntington_at_nashua">The Huntington</option>
    <option value="hunt_community">Hunt Community</option>
    <option value="at_home_by_hunt">At Home By Hunt</option>
</select>

- update your script to use the select option values and final destination URLs
// set current property in utility nac
var url = window.location.href;
if (url.indexOf('the-huntington-at-nashua') > -1) {
    $('#mobile-utility select').val('the_huntington_at_nashua');
} else if (url.indexOf('hunt-community') > -1) {
    $('#mobile-utility select').val('hunt_community');
} else if (url.indexOf('at-home-by-hunt') > -1) {
    $('#mobile-utility select').val('at_home_by_hunt');
} else {
    $('#mobile-utility select').val('silverstone_living');
}
// go to property when selected in mobile picker
$('#mobile-utility select').change(function(){
    var val = $(this).val();
    switch (val) {
Viewing 15 lines of 29 lines. View entire code block.