Need Help In JQuery

[Anshu]

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

[Paulie_D]

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/

[amanda_]

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

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

[Anshu]

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.

[amanda_]

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();
});

[Anshu]

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

[amanda_]

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

[Dipesh]

Try this
https://jsfiddle.net/dipeshrangani/2kttvn6p/

[Shikkediel]

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.

[Anshu]

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.

[Anshu]

Thank you guys. learning a lot from you.

[amanda_]

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.

[Senff]

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.

[Shikkediel]

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

[Anshu]

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.

[Author]

Posts