Media only screen scroll left

Question

As i am trying to scroll left to right or other way in the menu top given on this image

Issue here is that in mobile it doesn't work that way after clicking it scrolls elsewhere but in web it works perfectly HTML i have done is given below

<div id="Default" class="contentHolder">
    <div class="content cd-tabs-navigation">
        <ul>
            <li><a data-content="HousingVitals" id="HousingVitals1" onclick="scrollDefault(1);" href="#0">Housing Vitals</a></li>
            <li><a data-content="Score" id="Score1" class="selected" onclick="scrollDefault(2);" href="#0">Rating Snapshot</a></li>
            <li><a data-content="locality" id="locality1" onclick="scrollDefault(3);" href="#0">Housing v/s Locality</a></li>
            <li><a data-content="Indicators" id="Indicators1" onclick="scrollDefault(4);" href="#0">Top Indicators</a></li>
            <li><a data-content="Compare" id="Compare1" onclick="initialize();" href="#0">Nearby Housings</a></li>  @*onclick="scrollUpMenu('near')"*@
            <li><a id="liInsights" data-content="Insights" onclick="scrollDefault(6);" href="#0">Key Insights</a></li>
            <li><a id="liDetailscore" data-content="Detailscore" onclick="scrollDefault(7);" href="#0">Detailed Rating</a></li>
            <li><a data-content="Wisometer" id="Wisometer1" onclick="scrollDefault(8);" href="#0">Wiso Meter</a></li>
        </ul>                                    
    </div>
</div>

and java script code is given below here

function scrollDefault(x)
    {   
        if(x == 1)
        {
            $('#Default').scrollLeft(0);
        }
        else if(x == 2)
        {
            $('#Default').scrollLeft(50);
        }
        else if(x == 3)
        {   
            $('#Default').scrollLeft(130);
        }
        else if(x == 4)
        {
            $('#Default').scrollLeft(220);
        }
        else if(x == 5)
        {
            $('#Default').scrollLeft(300);
        }
        else if(x == 6)
        {
            $('#Default').scrollLeft(370);
        }
        else if(x == 7)
        {
            $('#Default').scrollLeft(420);
        }
        else if(x == 8)
        {
            $('#Default').scrollLeft(500);
        }
    }

Doesn't work i tried it but can't understand this media query issue on mobile browser under different sizes. — rinki, Feb 10 '17 at 09:22

score 0 · Answer 1 · edited May 23 '17 at 10:29

As far I can understand from your question, you are facing problem not only with media query but also about jQuery.

For media query please follow this link.

Here you would be able to find a very rich explanation on how to use media query.

About your current coding problem, first of all you can try to solve this issue using media query CSS. That will reduce the necessity of writing complex codes. You can try to solve this issue using CSS.

Obviously you can do it with jQuery too. But you should develop your coding structure a bit. You had to write redundant if else conditions. But if you would have kept the values in an associative array..you could have done if more efficiently by searching through that array.

If you are willing to do that then follow this link.

Media only screen scroll left

1 Answers1