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

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
LVL 9
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
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
Rowby GorenAuthor Commented:
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
Rowby GorenAuthor Commented:
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Rowby GorenAuthor Commented:
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
GaryCommented:
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
Rowby GorenAuthor Commented:
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
GaryCommented:
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
Rowby GorenAuthor Commented:
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
GaryCommented:
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
Rowby GorenAuthor Commented:
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
GaryCommented:
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
Rowby GorenAuthor Commented:
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
GaryCommented:
At the end is fine.
0
Rowby GorenAuthor Commented:
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
GaryCommented:
And add the other script to the end as well, it was there before.
0
GaryCommented:
Change
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}

to

if(curPos!=""){jQuery('html, body').animate({scrollTop: curPos}, 500);}
0
Rowby GorenAuthor Commented:
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
Rowby GorenAuthor Commented:
Change
if(curPos!=""){$('html, body').animate({scrollTop: curPos}, 500);}

to

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

Missed that.  will fix.
0
GaryCommented:
Looking good
0
Rowby GorenAuthor Commented:
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
GaryCommented:
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
Rowby GorenAuthor Commented:
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
GaryCommented:
In this line replace curPos with 0 (zero)

if(curPos!=""){jQuery('html, body').animate({scrollTop: curPos}, 500);}
0
Rowby GorenAuthor Commented:
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
GaryCommented:
Seems to be working sporadically
Replace
if(curPos!=""){jQuery('html, body').animate({scrollTop: 0}, 500);}

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Okay.  That did it! :)

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

:)

Stay tuned !

Thanks!
0
Rowby GorenAuthor Commented:
looks like this is working.  Will test it in some other browsers next week.

In the meantime CSS is 20 Years Old "Today".
0
Rowby GorenAuthor Commented:
Thanks Gary!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.