Solved

Returning to the top of the page when my big megamenu closes

Posted on 2014-10-08
28
75 Views
Last Modified: 2014-10-14
Hello

Your solution to moving "down" when one of the 4 big buttons is selected is a big hit :)

Big dropdown megamenu

They have made the following request:  "And what would make it even better is if it returned to the top of the basic page once you closed that window."

I could add an "anchor" at the top of the page, if that would help in this solution.  Or maybe it isn't needed.

What they are asking for is when someone clicks off of the megamenu, to close it, when it closes, the page returns to the very top, thus including the big slideshow at the top etc etc.

Thanks!

Rowby
0
Comment
Question by:Rowby Goren
  • 16
  • 12
28 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40368651
Change the previous function to
curPos=$(document).scrollTop(); // store current position
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top - $("#js-mainnav").height()
    }, 500);
});
})

Open in new window


Change this
jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
    }
});

Open in new window


to
jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){scrollTop: curPos}
    }
});

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40368731
Hi

Gary.  Copy and paste of my new source code:  (note it's in the header, not body fyi)

  <script>

  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){scrollTop: curPos}
    }
});
                                 
</script>

Open in new window


It's not going to the top of the page.  Actually I don't see any change. (Did a hard refresh).

Thanks

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40368732
Oooops.  Forgot to make this change

curPos=$(document).scrollTop(); // store current position
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top - $("#js-mainnav").height()
    }, 500);
});
})
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40368746
Here's what I now have the bottom of the body:  (I don't think I did it correctly -- because it's not working.)

<script>curPos=$(document).scrollTop(); // store current position
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top - $("#js-mainnav").height()
    }, 500);
});
})

</script>
</body>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40368859
No my fault, code should be

var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});
 })

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40368875
Hmmm

Not seeing a change.  Here's snippet from the source:
<script>var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});

</script>



  
</body>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40368897
Missing closing squiggly/bracket

<script>var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});
});
</script>

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40368954
Hi

The dropdown is going back up (like a windowshade) after someone clicks on the body text.  Which is how it was working before.  Good!

But it is not returning to the "very" top of the page which includes the big slideshow.

This is the new body code (taken from page source)  
<script>var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});
});
</script>
</body>

Open in new window

And here's what's in the header (taken from source code)
  <script>

  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){scrollTop: curPos}
    }
});
                                 
</script>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40368963
Ohh I need to wake up

  <script>
  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}
    }
})
</script>

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40368979
Hi

I put this in the body.  Was that the wrong place?     It's scrolling down, as before (good), but when clicking the body text and closing it, it works fine -- except it does not go to the top of the page to include the slideshow.

From the source code:
  <script>
  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}
    }
})
</script>
  
</body>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40368992
Remove this, near the top part of the page, not the one at the end of the page.
  <script>

  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){scrollTop: curPos}
    }
});
                                 
</script>

Open in new window


This code seems to have disappeared
<script>
var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});
});
</script>

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40369023
Where does
<script>
var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});
});
</script>

Open in new window


....go.  Header or at end of body

Right now this is at end of body:
<script>
  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}
    }
})
</script>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40369026
At the end is fine.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40369035
Right now this is at the end of the body:

 
        <script type="text/javascript">
        var req = false;
        function refreshSession() {
            req = false;
            if(window.XMLHttpRequest && !(window.ActiveXObject)) {
                try {
                    req = new XMLHttpRequest();
                } catch(e) {
                    req = false;
                }
            // branch for IE/Windows ActiveX version
            } else if(window.ActiveXObject) {
                try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
                } catch(e) {
                    try {
                        req = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch(e) {
                        req = false;
                    }
                }
            }

            if(req) {
                req.onreadystatechange = processReqChange;
                req.open("HEAD", "http://schoolofmusic.ucla.edu/administrator/", true);
                req.send();
            }
        }

        function processReqChange() {
            // only if req shows "loaded"
            if(req.readyState == 4) {
                // only if "OK"
                if(req.status == 200) {
                    // TODO: think what can be done here
                } else {
                    // TODO: think what can be done here
                    //alert("There was a problem retrieving the XML data: " + req.statusText);
                }
            }
        }

        setInterval("refreshSession()", 300000);
 
          
          jQuery(function($) {
 $(".hoverme").hover(function(){
   $(".triomenu",this).stop().slideToggle()  
 })
 })
                
          
        </script>


  <script>
  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}
    }
})
</script>
  

Open in new window

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 58

Expert Comment

by:Gary
ID: 40369041
And add the other script to the end as well, it was there before.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40369054
Change
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}

to

if(curPos!=""){jQuery('html, body').animate({scrollTop: curPos}, 500);}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40369055
Ok...

Now this is at the bottom of the page.  Are we missing any squiggly things or semi-colons?
<script>
  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}
    }
})
</script>

 <script>
var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});
});
</script>
  
</body>

Open in new window


It's going back up, but not returning to the top of the page.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40369057
Change
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}

to

if(curPos!=""){jQuery('html, body').animate({scrollTop: curPos}, 500);}

Missed that.  will fix.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40369064
Looking good
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40369065
Here's the current code:

Not going back to the very top to include the slideshow..  Sure you don't want me to add an old fashioned anchor to the top area?

<script>
  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})

      if(curPos!=""){jQuery('html, body').animate({scrollTop: curPos}, 500);}
    }
})
</script>

 <script>
var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});
});
</script>
  
</body>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40369070
Thought you wanted it to go to the last position before the menu was shown? Would make more sense, if I'm halfway down the page I wouldn't want the page scrolling back to the top again.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40369081
Hmmmm.....

Yes, but that's what the client at least wants to see.

If I can show it to him to include the slideshow then he can see if it's awkward to the visitor to have that kind of function.

Then if it ends up being a bad experience we can get rid of that function.

Here's a snippet from the email I received yesterday "And what would make it even better is if it returned to the top of the basic page once you closed that window. "

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 40369089
In this line replace curPos with 0 (zero)

if(curPos!=""){jQuery('html, body').animate({scrollTop: curPos}, 500);}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40369127
Hmmmmmmmmmmmmm!

Here's the current body code:
<script>
  jQuery(document).click(function(e) {
    if(jQuery(e.target).closest('#middlemenu').length==0){
      jQuery(".floatck").css("overflow","auto")
	  jQuery(".floatck").animate({"height":0})

      if(curPos!=""){jQuery('html, body').animate({scrollTop: 0}, 500);}
    }
})
</script>

 <script>
var curPos;
jQuery(function($){
$("._MaximenuQuadGrande > li").click(function() {
    curPos=$(document).scrollTop(); // store current position
     $('html, body').animate({
         scrollTop: $(this).offset().top - $("#js-mainnav").height()
     }, 500);
});
});
</script>

Open in new window


When closing the grey dropdown, it's not moving to the top to include the slideshow yet..  (I could put an anchor at the top of the body... if you want.

:)

Rowby
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40369139
Seems to be working sporadically
Replace
if(curPos!=""){jQuery('html, body').animate({scrollTop: 0}, 500);}

with
jQuery('html, body').animate({scrollTop: 0}, 500);
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40369152
Okay.  That did it! :)

I'll send my person the link and get any feedback.

:)

Stay tuned !

Thanks!
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40374921
looks like this is working.  Will test it in some other browsers next week.

In the meantime CSS is 20 Years Old "Today".
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 40380367
Thanks Gary!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now