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
Related
How can I make a div tag stay the same location with the same size? I have the following code to display information using left and right pane called group-left and group-right. When the content of group-right changes the group-left height changes. I want a fixed size and fixed position if the content grows.
<div class="pane even">
<div class="group-left bg-highlight" style="top: 0px;">
<div class="pane-content">
<p class="m-t-md">
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="fa fa-check-circle"></i>#item.PartyName
<ul class="list-unstyled m-x-md m-b-md">
<li data-expanded="true"> <i class="fas fa-check-circle">
</i> #item.ContactName </li>
</ul>
</li>
}
</p>
</div>
</div>
<div class="group-right" style="top: 0px;">
#foreach (var item in rpInfo)
{
<div class="card card-understated">
<div class="card-heading">
<h4>#(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
#item.ContactName<br>
#item.ContactTitle<br>
#item.AddressLine1<br />
#item.City, #item.State #item.Country
</p>
</div>
</div
}
</div>
</div>
Here is what the CSS section looks like:
.group-left, .group-right {
float: none;
min-height: 320px;
vertical-align: middle;
position: relative;
margin: 0;
padding: 0;
}
I have this javascript code to make a treeview and to handle the Onclick event:
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView();
$(".panel-handler ").click(function () {
let id = $(this).data("id");
if ($("#" + id).css('display') === 'none') {
$(".rpspanel ").slideUp();
$("#" + id).slideDown();
}
});
});
</script>
You have only set a min height on the divs, you need to specify a height if you want it to remain the same size, eg: "height: 300px". If you want the divs to be fixed on the page, meaning locked to that position and won't move even if you scroll, you need to apply "position: fixed".
I need to print out a content page without masterpage. for this I used the below code:
<style>
#media print{
#page {size: landscape}
.noPrint {
display: none;
}
.yesPrint {
display: block !important;
}
}
</style>
Then I set the class "noPrint" to the left and top navigation bars.
When I try to print the page, the navigation bars will diaper as expected but the white space of them remain on the page on the top and left as showed in the picture here.
I need to just print the content page with 100% width of the paper(A4) , even if I try to print it out from mobile phone with responsive view.
#Mick Feller
Here is what I did in masterpage
<!--left-fixed -navigation-->
<div class="sidebar noPrint" role="navigation">
<div class="navbar-collapse">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<ul class="nav" id="side-menu">
<asp:TreeView ID="MenuTree" runat="server" ViewStateMode="Enabled" BeforeCollapse="MenuTree_TreeNodeCollapsed" BeforeExpand="MenuTree_TreeNodeExpanded">
</asp:TreeView>
</ul>
</nav>
</div>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section noPrint">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
</div>
</div>
Ok, so I've tried looking at everything on here and many people have suggested adding a width or a height or even using jquery css to hide elements, but nothing is working for me.
I am trying to have 3 elements slideDown when the user scrolls to a specific section of the page. The problem is that the 3 elements flash on the screen for a brief moment then slide down. How do I remove the brief flash?
$('#e1, #e2, #e3').hide();
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 400) {
$('#e1').slideDown(1500);
$('#e2').slideDown(2000);
$('#e3').slideDown(2500);
}
});
DIV#customContent DIV.customObj {
float: left;
width: 406px;
}
DIV#customContent DIV.customObj DIV {
display: none;
margin: 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="customContent">
<div class="customObj">
<h3>Service</h3>
<div id="e1">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="customObj">
<h3>Modernization</h3>
<div id="e2">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="customObj">
<h3>Lift Solutions</h3>
<div id="e3">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
How do I hide my navbar when the user clicks on the "bar-icon"?
I want to create a navbar which begins hidden and when the user clicks on the bar icon, the navbar displays
. Can you do that with JavaScript? Or do you need jQuery for that?
HTML
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Heading 1</h1>
</div>
</div>
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>
</div>
I'm just trying to figure out how I can hide the navbar, so no fancy-looking 3D effects when it displays is needed, (for now at least).
If I haven't provided enough information, please tell me so that I can provide the right amount of information needed to solve this.
Here is how to control that with a simple show and hide with basic javascript:
function openMenu(e){
document.getElementById('menu').style.display = 'block';
}
function closeMenu(e){
document.getElementById('menu').style.display = 'none';
}
https://jsfiddle.net/7xo87kz6/
You may use jQuery for this purpose.
Make sure to include jQuery in your project.
Jquery Part
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bar").click(function(){
$(".bannerContainer").toggle();
});
});
</script>
HTML Part
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<div id = "bar">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</div>
</div>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>
I tried to create a full page horizontal slider by using fullpage.js plugin. I use only one section with 3 slides.
I tried to add a fixed navigation to slides in the top of page, so user can open the slides directly from the top navigation, but it doesn't work. Can anyone help me how to make it works?
HTML:
<div id="header">
Link to slide 1
Link to slide 2
Link to slide 3
<div>
<div class="section" id="section0">
<div class="slide" data-anchor="slide1">
<h1>Slide 1.js</h1>
This is slide 1
</div>
<div class="slide" data-anchor="slide2">
<h1>Slide 2</h1>
this is slide 2
</div>
<div class="slide" data-anchor="slide3">
<h1>Slide 3</h1>
</div>
</div>
Javascript:
$.fn.fullpage();
CSS
body{
color: #fff;
}
h1{
font-size:3em;
}
.section {
text-align: center;
}
#section0{
background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
background: linear-gradient(#4BBFC3,#7BAABE);
}
#header{
position:fixed;
height: 50px;
display:block;
width: 100%;
background: #333;
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 20px 0 0 0;
}
#header{
top:0px;
}
Here's the jsfiddle
Thank you!
Download the last version of the plugin (2.0.7) and use the new HTML markup which uses a wrapper for the plugin:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
Then initialize it this way:
$('#fullpage').fullpage();
And then to create a fixed element just put it outside the plugin wrapper like you can see in this live example sourcecode.
In order to create the links, don't use toSlide, use a normal URL link in case you are using anchors. (such as /#section/slide, for example: http://alvarotrigo.com/fullPage/#secondPage/2)
If you don't want to update your fullpage version for whatever reason, just use the option fixedElements as detailed in the documentation.
I know the topic is already 2 years old yet I faced the very same problem today and stumbled upon this article. Now that I´ve found a solution I thought it would be nice to share it with you guys!
<div class="wrap">
<nav class="nav">
<ul>
<li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
<li><a class="nav__item" href="#firstPage/slide2">2</a></li>
<li><a class="nav__item" href="#firstPage/slide3">3</a></li>
<li><a class="nav__item" href="#firstPage/slide4">4</a></li>
</ul>
</nav>
</div>
<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1"></div>
<div class="slide" data-anchor="slide2"></div>
<div class="slide" data-anchor="slide3"></div>
<div class="slide" data-anchor="slide4"></div>
</div>
</div>
Don´t forget to give the active class to the first anchor.
Note that if you want to set position:fixed; on the navigation outside you probably want to adjust your z-index (I set the z-index:1000; for the the wrap but do as you like)
And for .js I just used what already comes along with the FullPage.js
$('#fullpage').fullpage({
anchors: ['firstPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
$('.nav__item.active').removeClass('active');
$('.nav__item').eq(slideIndex).addClass('active');
}
});
Now our navigation anchors have an active class depending on the current slide
though I´m not sure if the href targets are best practise yet it works.
Of course you could just initalize the FullPage given navigation but this gives you full control over the markup.