Well, I have this navigation menu which is static but I want to make it flow smoothly whenever user scrolls his page down or up... Please help with the code because I already have tried to do something but everything went bad.
Code:
<div id="menu">
<ul>
<li class="page_item">
Home
</li>
<?php wp_list_pages('&title_li=&exclude=6386'); ?>
<?php
if(is_user_logged_in() && !current_user_can('subscriber')) :
?>
<li class="page_item">
Tasks
</li>
<?php
endif;
?>
<?php
if(!is_user_logged_in()) :
?>
<li class="page_item">
Log in
</li>
<?php
endif;
?>
</ul>
</div>
I want this whole thing to float, how am I supposed to do this?
I tried to add this script and give menu class="scroller":
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>60){
$('.scroller').css('position', 'fixed');
$('.scroller').css('top', 0);
} else {
$('.scroller').css('position', 'relative');
$('.scroller').css('top', 60);
}
});
});
But no luck..
First of all, because you're using jQuery, you don't have to bind the onLoad event to do it. Just bind the onDomReady pseudo-event, without to create any other class (you already have the ID). That said, you need to listen for the onScroll event of the document. Try this:
$(function(){
$(document).on('scroll',function(){
var $this = $(this),
$menu = $('#menu'),
scrl = $this.scrollTop(),
menuHeight = $menu.height();
if( scrl > menuHeight ) {
$('#menu').css({
'position': 'fixed',
'top': 0
});
} else {
$('#menu').css({
'position': 'relative',
'top': menuHeight
});
}
});
});
This should works fine for your needs.
Here's a jsFiddle to test the code.
EDIT: code updated to dynamically handle every menu height.
The CSS property 'top' doesn't work with relative positioning. Try absolute instead.
$(window).scroll(function(){
if($(window).scrollTop()>60){
$('.scroller').css('position', 'fixed');
$('.scroller').css('top', 0);
} else {
$('.scroller').css('position', 'absolute');
$('.scroller').css('top', 60);
}
});
EDIT : You'll need to add a margin to the element above or below where you want the scrollbar to appear to create a gap for it.
Related
I have an overlay menu (Wordpress betheme)
After I click on a menu item it doesn't close automatically.
Can anybody help to close the menu after the click?
/* ---------------------------------------------------------------------------
* Menu | Overlay
* --------------------------------------------------------------------------- */
$('.overlay-menu-toggle').click(function(e) {
e.preventDefault();
$(this).toggleClass('focus');
$('#Overlay').stop(true, true).fadeToggle(500);
var menuH = $('#Overlay nav').height() / 2;
$('#Overlay nav').css('margin-top', '-' + menuH + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Overlay">
<nav id="overlay-menu">
<ul id="menu-felso-menu" class="menu overlay-menu">
<li id="menu-item-112" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-112">Miért mi?</li>
</ul>
</nav>
</div><a class="overlay-menu-toggle" href="#"><i class="open icon-menu-fine"></i>TOGGLE</a>
this worked for me with the Side Slide menu. Just put the code in the JS window in the "Theme Options" and adapt the menu IDs to your code. Betheme does nothing else than slide in and out the mobile menu (e.g. right: -250px;), slide the whole body to the left (e.g. left: -125px;) and display a dark "body_overlay" when the menu is active. I have links with #anker and links for normal subpages so I addressed each #anker separately (#menu-item-155).
The class .icon-menu-fine is from the burger menu to get things working again after closing the menu through JS.
jQuery( document ).ready( function( $ ) {
$('#menu-item-155 a').click(function(e) {
e.preventDefault();
$(this).toggleClass('focus');
$('#Side_slide').stop(true, true).fadeToggle(500);
$('#Side_slide').css('right', '-250px');
$('body').css('left', '0px');
$('#body_overlay').css('display', 'none');
});
$('.icon-menu-fine').click(function(e) {
e.preventDefault();
$('#Side_slide').css('right', '0px');
$('body').css('left', '-125px');
$('#body_overlay').css('display', 'block');
$('#Side_slide').css('display', 'block');
});
});
I've just copied part of BeTheme code, that closes menu with a little modifications.
Just put this code in the JS window in the "Theme Options" > "Custom CSS & JS":
jQuery(document).ready(function($) {
/* Close Side Menu on item click */
$('#Side_slide .menu-item a').click(function(e) {
e.preventDefault()
/* globals jQuery, mfn */
var mobileInitW = (mfn.mobileInit) ? mfn.mobileInit : 1240
var slide = $('#Side_slide')
var overlay = $('#body_overlay')
var ssMobileInitW = mobileInitW
var pos = slide.hasClass('left') ? 'left' : 'right'
var shiftSlide = -slide.data('width')
var shiftBody = shiftSlide / 2
var duration = 300
if (pos === 'left') {
slide.animate({ 'left': shiftSlide }, duration)
$('body').animate({ 'right': 0 }, duration)
} else {
slide.animate({ 'right': shiftSlide }, duration)
$('body').animate({ 'left': 0 }, duration)
}
overlay.fadeOut(300)
// if page contains revolution slider, trigger resize
if ($('.rev_slider').length) {
setTimeout(function() {
$(window).trigger('resize')
}, 300)
}
})
})
This is what worked for me. It seems the action button that is used will go to the set anchor on the page but wouldn't close the slide menu. Really weird behavior. Not sure ever why you would like that effect, especially when a dark overlay is placed over the page.
It seemed for in my case I needed to remove all the dollar signs. Manuel had the solution just had to change things because of the $'s
Of course, you will see I had to adjust the initial tag that I wanted to be detected for the closing of the slider.
jQuery(document).ready(function()
{
jQuery('a.action_button.scroll').click(function(e) /* Change this line with the ones below for different menu behaviours*/
{
e.preventDefault();
jQuery(this).toggleClass('focus');
jQuery('#Side_slide').stop(true, true).fadeToggle(500);
jQuery('#Side_slide').css('right', '-250px');
jQuery('body').css('left', '0px');
jQuery('#body_overlay').css('display', 'none');
});
jQuery('.icon-menu-fine').click(function(e)
{
e.preventDefault();
jQuery('#Side_slide').css('right', '0px');
jQuery('body').css('left', '0px');
jQuery('#body_overlay').css('display', 'block');
jQuery('#Side_slide').css('display', 'block');
});
});
Really sweet stuff. It was super sweet seeing the menu close finally on click.
Of course, I have since adjusted it so that if any menu element is clicked/touched on then the slide menu will disappear with the below adjustment to the above code.
jQuery('ul#menu-main-menu-1').click(function(e)
I found the most pleasing behavior was to use this one though as it will trap any click on the menu and close it.
jQuery('div#Side_slide').click(function(e)
btw: this code is inserted into the "Theme Options --> Custom CSS & JS --> JS
I'm trying to have a header at the top with a non-fixed height but a fixed position, and below that a content area. Now, I simply added a fixed padding-top to the element so the content would show below the header. I'm trying to do this using JavaScript and JQuery. I think the way I did it would be the best way, but it doesn't quite work.
[HTML]
<div class="contentPage" id="page_1" name="templates">
<div class="contentPageHeader">
<a href="#menu">
<div class="pageBack">
<h4>Back</h4>
</div>
</a>
<h3>Templates</h3>
</div>
<div class="contentPageContent">
</div>
</div>
[JS]
var headerHeight = $('.contentPageHeader').css( 'height' );
$('contentPageHeader').css('margin-top', headerHeight);
For a full demo visit this JSfiddle
You should to fix your javascript:
var headerHeight = $('.contentPageHeader').outerHeight();
$('.contentPageContent').css('margin-top', headerHeight);
Also this code should be placed inside the click method.
jsfiddle
You need to define the unit for marginTop for eg. px or %:
$('.contentPageHeader').css('margin-top', headerHeight + 'px');
//^^ missed a selector (the dot)
Try this
$(document).ready(function () {
$("a").click(function () {
if (this.hash) {
var hash = this.hash.substr(1);
var $toElement = $("div[name=" + hash + "]");
if (hash == "menu") {
$('.contentPage').fadeOut(300);
$($toElement).fadeIn(300);
} else {
$('#menu_holder').fadeOut(300);
$($toElement).fadeIn(300);
}
}
var headerHeight = $('.contentPageHeader').css( 'height' ); //your code added here
$('.contentPageHeader').css('margin-top', headerHeight);
});
});
Fiddle:https://jsfiddle.net/mdeujc0u/3/
Updated fiddle: https://jsfiddle.net/mdeujc0u/5/
Is there any way to trigger a function with jquery once a CSS element reaches a certain height?
I imagine an example would look something like:
function(){
if( $("#bar").css('height') > '20px') {
$("#mydiv").show();
});
HTML:
<b style="display:none" id="mydiv">Hello!</b>
Can't seem to find a way to successfully make it work.
Example: http://jsfiddle.net/5ptkqajv/1/
You can add your check in the click-function, so it gets executed when the height is changing:
$('h1').on("click", function() {
advanceRound();
render();
if($("#fill").height() > 60){
$("#mydiv").show();
}
});
Updated Fiddle
Alternativly you cann add the check in your function renderBar().
I truly hope this question have not been asked before.
First of all, I wanted my navbar to appear after a specific number of pixels and I found that:
<script type="text/javascript"> (function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 725) {
$('#nav-principale').fadeIn(500);
} else {
$('#nav-principale').fadeOut(500);
}
});
}); })(jQuery); </script>
And it worked. Now, I'm looking for a way to make my navbar, which is fixed at the top of the screen, disappear, if it's possible, after a specific number of pixels.
It might be really easy, but I have no knowledge in Javascript/jquery.
Thanks for your help,
Zhyrmar
Try this jQuery:
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function(){
if (($(this).scrollTop() > 725) && ($(this).scrollTop() < 1025)) {
$('#nav-principale').fadeIn(500);
} else {
$('#nav-principale').fadeOut(500);
}
});
});
</script>
It will fade in whenever scrolled between 725 px and 1025 px, otherwise it fades out.
Also note that you don't need both (function($) { and $(document).ready(function(){. It's both waiting for the document to get load.
I'm trying to adapt this JSFiddle to make the menu button on my website hide when I'm at the top of the page and show when I start scrolling down.
I modified the JS to match the CSS on my site. Then I placed it in tags in the head of my page
var $scb = $('<div class="toggle-menu-wrap"></div>');
$('.top-header').append($scb);
var $ccol = $('.content');
$ccol.scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
However, it still doesn't work. Am I making a mistake in how I'm modifying the JS to fit my CSS?
You can include the toggle-menu-wrap element in your HTML from the start. There is no need to insert it using JS.
Write the one line of CSS you need, which is to hide the element from the beginning
.toggle-menu-wrap {
display: none;
}
Your version of jQuery uses 'jQuery' instead of '$' to reference itself. I would also re-write your JS like:
jQuery(document).ready(function() {
fadeMenuWrap();
jQuery(window).scroll(fadeMenuWrap);
});
function fadeMenuWrap() {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > 300) {
jQuery('.toggle-menu-wrap').fadeIn(300);
} else {
jQuery('.toggle-menu-wrap').fadeOut(300);
}
}
Like #murli2308 said in the comments above, you need to attach a scroll event listener to the window:
$(document).ready(function () {
var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);
var $ccol = $('.content');
$(window).scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
})
Wrapping your code in $(document).ready() would also be a good idea.
The reason $ccol.scroll(function() { ... works in that fiddle is because of the CSS:
.content{
height: 200px;
width: 200px;
overflow: auto;
}
Notice overflow: auto;. This causes that specific div to be scrollable. However, on your website, you scroll the entire page, not $ccol. This means the event handler will never fire a scroll event (since $ccol will never scroll).
You might have forgotten to link Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Link this inside your head tag incase.....
This should do the job:
$(window).scroll(function(e){
if ($(this).scrollTop() > 0) {
$(".your_element").css("display", "block");
} else {
$(".your_element").css("display", "none");
}
});