Solved

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

Posted on 2014-10-08
28
77 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Help cleaning out CSS 2 51
slider is moved too far too the right...how to move back left? 4 36
Bootstrap more than 12 columns in row 3 37
P tag not forcing line space 2 23
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 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