I am trying to slide a navigational menu. I am using sliiide.min.js. The following settings work when I stay at the top of the page, but as I scrolls down and click to slide the menu it gives a blank white portion in the place of the actual menu, which I can't figure out how to sort out. If any of you experienced similar problems before, please kindly share. I am giving full code.
THE HTML MENU
<div id="tablet-mobile-menu" class="sidr left" style="visibility: hidden; display: block; left: 0px;">
<div class="utility-nav">
<div class="main-menu">
<ul id="burger-menu" class="links clearfix">
<li class="menu-15461 first">
Follow Us On
</li>
<div class="utility-menu">
<ul id="hamburger-utility-menu" class="links clearfix">
<li class="menu-7731 first">
Facebook
</li>
Pinterest
</li>
</ul>
</div>
<li class="menu-15461 first" style="">
Sections
</li>
</ul>
</div>
<p>Men's Health, The Brand Men Live By</p>
<p>Copyright © 2016 Rodale Inc. No reproduction, transmission or display is permitted without the written permissions of Rodale Inc.</p>
<p>
Privacy Policy.
About Us.
</p>
</div>
</div>
HERE IS THE JS CONFIGURATION:
<?php $this->script()->captureStart(); ?>
var settings = {
toggle: "#menu-btn-toggle", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.
exit_selector: ".is-active", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar
animation_duration: "0.1s", //how long it takes to slide the menu
place: "left", //where is the menu sliding from, possible options are (left | right | top | bottom)
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", //animation curve for the sliding animation
body_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div
no_scroll: true, //set to true if you want the scrolling disabled while the menu is active
};
$('#tablet-mobile-menu').sliiide(settings); //initialize sliiide
<?php $this->script()->captureEnd(); ?>
HERE IS THE HTML WHERE THE CLICK OR TOGGLE BUTTON RESIDES:
<div id="menu-btn">
<a href="/" title="Menu" id="menu-btn-toggle" class="clickable">
<!--<i class="fa fa-bars fa-2x" aria-hidden="true"></i>-->
<!--<i class="fa fa-times fa-2x" aria-hidden="true"></i>-->
<span></span>
</a>
</div>
Perhaps the slider is there its just that its sitting at the top of the page so what your seeing is the bottom of the menu.
have you tried to add a CSS style to the top of the navigation so its sticks to the top of page even when scrolling.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
Related
I have a hidden popout menu that toggles its visibility on the click of a button. When the popout menu becomes visible it displaces the main content to the bottom of the page. The idea would be to have the popout menu is displayed over the content div.
HTML:
<!------- Pop out menu for Side Navigation Bar ------->
<div class = "popout_navbar_align_center">
<div class = "menu_nav_inner align-center pad-2">
<ul>
<li><button class="static_nav_btn">THE MISSION</button></li>
<li><button class="static_nav_btn">OUR WORK</button></li>
<li><button class="static_nav_btn">WHO WE ARE</button></li>
<li><button class="static_nav_btn">MISS ROSIE</button></li>
<li><button class="static_nav_btn">SCHOLARSHIP</button></li>
<li><button class="static_nav_btn">CONTACT</button></li>
</ul>
<div class="box">
DONATE
</div>
</div>
</div>
<!------- Hamburger Top Navigation Bar for 768px and smaller screens ------->
<div class = "navBar_top">
<div class = "hamburger-bar-center" id ="topNavId" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!------- Main body ------->
<main id="content" class="flex-grow">
<div id="homepage-banner">
<div class="page-banner">
<h2 class="small-hidden">
FOUNDATION
</h2>
</div>
</div>
</main>
CSS:
(Popout menu)
.popout_navbar_align_center {
background-image: url("Assets/Textures/sandpaper.png");
background-color:;
width: 240px;
height: 100%;
top: 0;
left: 0;
display: none;
overflow-x: hidden;
}
.popout_navbar_align_center .menu_nav_inner {
padding-top: 60px;
}
**JAVASCRIPT: **
$("#sideNavId").on("click", function() {
if($(".popout_navbar_align_center").is(":visible"))
{
$(".popout_navbar_align_center").hide("slow");
}
else {
$(".popout_navbar_align_center").show("slow");
}
});
I've tried manipulating the css for the main content div but everything I've tried doesn't seem to work in regards to that approach. I'm not sure which divs properties should be manipulated to get the desired effect.
You can try to use the top and left css values along with position: absolute to achieve your popup not moving the rest of the content, but instead floating in front of it
I'm using an animated hamburger menu (https://jonsuh.com/hamburgers/) to open a full screen menu. It's all working as expected, but I can't figure out how to have the menu close on click (and of course reverse the animation).
I was able to add the class 'is-active' using JS, and adding "onclick="openNav()" works fine, but it seems like creating onclick="toggleNav()" might be more appropriate, I just can't seem to figure out how to write that in JS.
function openNav() {
document.getElementById("popUpNav").style.height = "100%";
}
function closeNav() {
document.getElementById("popUpNav").style.height = "0%";
}
// Hamburger Menu Spin
var hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function() {
hamburger.classList.toggle("is-active");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/0.9.3/hamburgers.css" rel="stylesheet"/>
<!-- Full Screen Navigation -->
<div id="primaryNav">
<nav>
<!-- Spinning Hamburger Button -->
<button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation" aria-expanded="false" onclick="openNav()">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="popUpNav" class="overlay" onclick="closeNav()">
<div class="overlay-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
</nav>
</div><!-- End Primary Nav -->
What I did:
Whenever the hamburger is being clicked, then we're going to check if it's already have is-active class. If it does, then it means the menu is currently active, and we should call closeNav in this scenario. If it doesn't have is-active class, then it means we should call openNav.
closeNav and openNav will:
Add/Remove the class is-active from the hamburger.
Add/Remove the style of the menu.
PS:
Since you didn't provide your whole code, then we couldn't realy see if the current menu is 0% height or 100% height. so I changed it to display block/none only to show you that it works.
I removed the onclick attribute from the menu, since you already have an EventListener for it.
Make sure you don't include the link I provided in the example.
function openNav() {
hamburger.classList.add("is-active");
document.getElementById("popUpNav").style.display = "block";
}
function closeNav() {
hamburger.classList.remove("is-active");
document.getElementById("popUpNav").style.display = "none";
}
// Hamburger Menu Spin
var hamburger = document.querySelector(".hamburger");
hamburger.addEventListener('click', () => hamburger.classList.contains('is-active') ? closeNav() : openNav());
closeNav();
<link href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/0.9.3/hamburgers.css" rel="stylesheet"/>
<!-- Full Screen Navigation -->
<div id="primaryNav">
<nav>
<!-- Spinning Hamburger Button -->
<button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation"
aria-expanded="false">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="popUpNav" class="overlay" onclick="closeNav()">
<div class="overlay-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
</nav>
</div><!-- End Primary Nav -->
I am trying to automatically click/open Tab2 in a web page whenever Tab1 loads so that Tab2 becomes the active tab. I'm not sure what needs to happen here since there is no specific URL to direct a user to, so would appreciate any assistance and feedback.
Thanks!
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch">
<span id="xy1:primaryForm:xy22:0:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:0:tabSwitch.stop"></span>
</span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav">
<span id="xy1:primaryForm:xy22:1:tabSwitch">
<span id="xy1:primaryForm:xy22:1:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:1:tabSwitch.stop"></span>
</span>
Tab2
</div>
---------UPDATE-------------
I tried to simplify this a bit by not paying attention to all the functions inside the link and just wanted to click on the link based on the text()..
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch"></span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav ">
<span id="xy1:primaryForm:xy22:1:tabSwitch"></span>
Tab2
</div>
The following jQuery sort of works, but it continues to click on Tab2 even when Tab2 is already active, so I want to get it to only click Tab2 if Tab1 has an active class:
var elements = $('a');
elements.each(function(index, domElement) {
var $element = $(domElement);
if ($element.text() === "Tab2") {
$element.click();
return false;
}
});
Is there a better JavaScript Solution to click some text() only if it's a child of an .active class?
I'm trying to customize the semantic-ui sidebar. I intend to create when i click the toggle button it will minimized to the labeled(icon) one. But it doesn't seems to be animated and the content(push content) doesn't seems to be pulled when i minimized it to the labeled icon sidebar.
HTML
<div class="ui left demo vertical inverted visible sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
</div>
<div class="pusher">
Toggle
</div>
JS
$("#toggle-btn").click(function() {
$(".ui.sidebar")
.toggleClass("labeled icon");
});
And here's the codepen:
http://codepen.io/andhikaribrahim/pen/rWNEzr
Any help would be great!
Thanks in advance.
Checkout this Codepen. Add a class on the .pusher as well to animate it accordingly using jQuery. Also, use CSS transitions insert animations.
For reference,
CSS:
.ui.left {
transition: width .2s linear;
}
.labeled.icon {
width: 84px !important;
}
.pusher.push {
transform: translate3d(84px,0,0) !important;
}
JS:
$("#toggle-btn").click(function() {
$(".ui.sidebar").toggleClass("labeled icon");
$(this).parent().toggleClass('push');
});
Hope this helps!
How can I make this bootstrap Translate button work as if it was the google translate button? https://jsfiddle.net/bobrierton/1hx1b5sr/
So that when the translate button I created opens the menu from the google button when its pressed. Maybe hiding but using the functionality somehow?
<ul class="nav navbar-nav navbar-border-bottom navbar-right">
<li class="">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
<i class="search fa fa-language"></i> Translate
</a>
</li>
</ul>
<div id="google_translate_element" style="float:left; padding-left:15px"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
You can hide the Google Translate button with opacity: 0. Opacity does not remove the button, so it is still possible to click it, even if it is not visible. You need to place your own button behind the invisible Google Translate button, otherwise it wouldn't be clickable (it is covered). Be aware that :hover and :focus and so on do not work on the visible button, because it is covered by the invisible one. The position: relative; on the parent is necessary, because position always orients on the next parent which has also the attribute position set to something other than static.
Replace this line:
<div id="google_translate_element" style="float:left; padding-left:15px"></div>
With these lines
<div style="position: relative;">
<div id="google_translate_element" style="position: relative; opacity: 0;"></div>
<button style="position: absolute; left: 0; top: 0; z-index: -1;">Translate</button>
</div>