Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Need Help In JQuery

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #241772
    Anshu
    Participant

    Hello Experts,
    Need your help. I am creating a website where i have so many links in footer with headings like
    About Company –
    link1
    link2…. ,

    Contact Us –
    Link1,
    Link2..

    Its good on 768 to 1920 px width. but below 787px i want to show them as toggle. And want to display like
    About Us +
    Contact Us +

    On clicking the About Us + tab will open with links like below
    About Us –
    Link1
    Link2…. Will open.

    How can i hide my JS functions below 768px width.
    Thankyou

    #241773
    Paulie_D
    Member

    What do you have so far?

    We’re willing to help you debug your existing code but, at the moment, it sounds like you want us to write this for you.

    People get paid to do that – https://www.freelancer.com/

    #241795
    amanda_
    Participant

    You might want to try putting your functions into an if statement.

    if ($(window).width() > 768) {
    //functions go here
    }
    
    
    #241817
    Anshu
    Participant

    Hey Amanda,
    Thankyou. I have created this and working fine but when i switch it from desktop to mobile view (CRLT Shift M firefox) or mobile to desktop it did not work without pressing refresh button.

    <script type=”text/javascript”>
    $(document).ready(function($) {
    if ($(window).width() < 767) {
    $(“.large–three-twelfths .folloter-li-box1”).hide();
    $(‘.large–three-twelfths’).find(‘h3’).click(function(){

    ` //Expand or collapse this panel
    $(this).next().slideToggle(‘fast’);

    //Hide the other panels
    $(“.large–three-twelfths .folloter-li-box1”).not($(this).next()).slideUp(‘fast’);

    });
    }
    `

    });
    </script>

    I want it to work on all resolution without doing any refresh.
    Thankyou again.

    #241846
    amanda_
    Participant

    I would make the function at top of the document, then call the function within

     function doSomething(){
    if ($(window).width() > 768) {
    //functions go here
    }
    }
    
    

    The run the function both within document ready and on window resize

    $( document ).ready(function() {
    doSomething();
    });
    
    $( window ).resize(function() {
     doSomething();
    });
    
    
    #241869
    Anshu
    Participant

    Hello Amanda,
    I tried above but no luck. i have also copy paste my code in
    $( window ).on( “orientationchange”, function( event ) {
    //mycode
    });

    but did not help me.

    When i switch my mobile to desktop or desktop to mobile view changes remain same and did not appear without doing refresh it

    #241874
    amanda_
    Participant

    Do you have a codepen demo to share? There’s not really a way to help without making a test case

    #241881
    Dipesh
    Participant
    #241893
    Shikkediel
    Participant

    I think Amanda’s on the right track but I suspect you’ll need an else statement when switching to a screen above 768 pixels.

    #241902
    Anshu
    Participant

    Hello Amanda_ & Dipesh,
    I have tried your code:
    http://codepen.io/anon/pen/WwqMgL

    The result is
    Mobile view: Links below h3 are are displaying. No event on click function of h3. But when i refresh the page toggles are working fine on mobile view.
    Desktop view: No links are appearing under h3 because of display:none class.

    #241903
    Anshu
    Participant

    Thank you guys. learning a lot from you.

    #241919
    amanda_
    Participant

    I can’t see the CodePen demo. You have to sign up for an account, otherwise they aren’t displayed. I highly recommend getting a codepen account, I’ve found it really helpful in so many ways.

    #241920
    Senff
    Participant

    You can view any Codepen demo if you click on “Edit on Codepen” in the top right of an embedded window. :)

    Also, about this:

    $( window ).resize(function() {
    

    For performance , I would advise against that. From this page:

    Don’t bind directly to scroll event. Use an interval to update element positions. The scroll is called like a bajillion times a second and can cause crazy performance hiccups. Instead, for elements that are parallaxing, just update thier position every 10ms or so.

    Although the article is specifically about parallax and scrolling, the idea is the same that the resize is called that often and so it’s better to check the screen size every X ms.

    #241925
    Shikkediel
    Participant

    I agree when it comes to resizing but not what is said about the scroll event in the article. That is plugged into the screen refresh rate and will usually only fire about 60 times a second max.

    http://stackoverflow.com/a/33264826/3168107

    #241935
    Anshu
    Participant

    Hello Guys,
    :(
    I have created account in code pen. Can you see may code here
    https://codepen.io/Anshu25/pen/eZwazX
    Mobile view: Links below h3 are are displaying. No event on click function of h3. But when i refresh the page toggles are working fine on mobile view.
    Desktop view: No links are appearing under h3 because of display:none class.

Viewing 15 posts - 1 through 15 (of 18 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.