Html sidebar function - javascript

Is it possible to implement my code by changing only the check box to a button in the same way as the function?And how do I make js code onclick instead of css? Could you tell me both?
<style>
* {
padding:0;margin:0;
}
.sidebar{
width:300px;height:100%;
background:#f5f5f5;
position:fixed;top:0;
right:-300px;z-index:1;
transition:all .35s;}
#menuicon:checked + div {
right:0;
}
</style>
<input type="checkbox" id="menuicon">
<div class="sidebar">
</div>
I tried to implement the onclick function by changing the check box to a button and using javascript, but the function did not work I want to make it with JavaScript only

Look at the code below...
First in HTML
In the markup, we have a sidebar open button class="opened", a sidebar close button button class="closed" and the sidebar itself div class="sidebar" inside the aside semantic tag. Note that the close button for the panel is inside the panel itself. Those. it appears on the user's screen only when the panel is open, which is logical.
Now take a look at the CSS
The visual styles of the buttons are not particularly interesting. Interesting sidebar styles. It is positioned fixedly relative to the browser window. In order for the panel to occupy the entire height of the screen, the top: 0 and bottom: 0 properties are set. In addition, by default, we hide the panel outside the visible area using our transform: translateX(-100%) property. The percentage sizes for this property are calculated based on the size of the block to which it is applied. Those. -100% shifts the panel to the left by its full width.
Notice the .sidebar.active selector. It will take effect when the sidebar has both the .sidebar class and the .active class. In this selector, we remove the shift of the sidebar outside the visible area. This means that the sidebar with the .active class is visible to the user.
Now let's take a look at JS
First, we define the identifiers of the elements we need - the open, close and sidebar buttons. This will be needed for what follows. Obviously, when the open button is clicked, we need to add the active class to the sidebar. We defined the function of adding this class for the click event in the addEventListener method.
On the close button we hang a click listener and a deletion function of the .active class for the sidebar.
Here's a simple technique.
const open = document.querySelector('.opened');
const close = document.querySelector('.closed');
const sidebar = document.querySelector('.sidebar');
open.addEventListener('click', () => {
sidebar.classList.add('active');
});
close.addEventListener('click', () => {
sidebar.classList.remove('active');
});
body {
margin: 0;
}
.opened,
.closed {
border: none;
padding: 0;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 250px;
background-color: #e9e9ed;
transform: translateX(-100%);
transition: .2s;
}
.closed {
position: absolute;
top: 0;
right: 0;
}
.sidebar.active {
transform: translateX(0);
}
<button class="opened"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/></svg></button>
<aside>
<div class="sidebar">
<button class="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23 20.168l-8.185-8.187 8.185-8.174-2.832-2.807-8.182 8.179-8.176-8.179-2.81 2.81 8.186 8.196-8.186 8.184 2.81 2.81 8.203-8.192 8.18 8.192z"/></svg></button>
</div>
</aside>

Related

How can i make whole screen semi-black on sidebar open?

I have build sidebar with css and jquery. It's working fine but i want that when sidebar opens then whole screen except sidebar should get semi-black or disabled.
Here is my working
jsFiddle
How can i make whole screen semi-black or disabled on sidebar open?
You can use a box-shadow on the sidebar:
#sidebar{
box-shadow:0 0 0 10000px rgba(0,0,0,.50);
}
This is black, at .50 opacity. It's set to 10000px to cover the full screen.
Or change rgba(0,0,0,.50) to a solid color like #5a5a5a.
In your case add to your css:
#slide-out.visible:not(.close){
box-shadow:0 0 0 10000px #666666;
}
The general concept to achieve this is fairly straightforward:
Modify the javascript to add a class to the body when the nav is open (I called it nav-open.)
Modify the CSS so that the "overlay" element (you already had one in place) is displayed when the body has the class nav-open
Adjust your overlay element CSS to cause it to show properly (for some reason, it had opacity: 0 on it, which meant it was there, but was not visible).
Here's the relevant CSS:
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
// removed opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
// set display to none by default
display: none;
}
// when the body has the class nav-open, display the overlay
.nav-open #sidenav-overlay {
display: block;
}
Here's the relevant changes to your javascript:
// no-conflict-safe document ready function
jQuery(function($) {
$('#show-hide-menu').click(function() {
if ($('#slide-out').hasClass('visible')) {
// $('#slide-out').removeClass('visible');
$('#slide-out').toggleClass('close');
} else {
$('#slide-out').addClass('visible');
}
// check if the nav is "open"
var open = !$('#slide-out').hasClass('close');
// for simplicity, always first remove the nav-open from the body
$('body').removeClass('nav-open');
// if the nav is open, add the 'nav-open' class to the body
if (open) {
$('body').addClass('nav-open');
}
});
// modify to use "on", is best-practice
// $(document).click(function(e) {
$(document).on('click', function(e) {
var sidebar = $(".sidenav, #show-hide-menu");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
$('#slide-out').toggleClass('close');
// be sure the nav-open class is removed when the sidebar is dismissed
$('body').removeClass('nav-open');
}
});
});
Here is a link to your fiddle, modified with these changes to do what you want: http://jsfiddle.net/cale_b/hThGb/8849/
Make a content div below your nav. Something like:
<div id="maincontent" class="">
<p>Lorem.</p>
</div>
Add some styling so it has min-height, etc.
#maincontent {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
min-height: 400px;
}
Add some JS so when the nav menu button is clicked, it toggles on and off a new style class for this area.
$('#show-hide-menu').click(function () {
if ($("div#maincontent").hasClass("overlayed")) {
$("div#maincontent").removeClass("overlayed");
}
else {
$("div#maincontent").addClass("overlayed");
}
});
Define the overlayed class in the CSS.
.overlayed {
background-color: rgba(0,0,0,.8);
}

Angular - How to disable/grey out screen on load and save

I haven't found much out there specifically relating to Angular, but is there a way to grey out/disable the screen on a button click? Right now I have a button which is tied to saving some data, but I need to show a loading icon and not allow the user to edit any other fields while the save is in progress.
I currently have it set to where I can show the loading icon fine on the screen, I'm just wondering what I need to do so that the user isn't able to edit the DOM.
Right now I just have a spinner that is tied to an *ngIf, which displays towards the top of my page.
HTML:
<div id="nav">
<button type="submit"
class="btn btn-primary"
style="height: 46px;
width: 188px;
margin: 0 auto;
display:block;"
(click)="saveHandler()">
Save & Calculate
</button>
</div>
<span id="nav" *ngIf="saveInProgress">
<div class="submit-spinner" style="margin-top: 20px; display:block">
</div>
</span>
What I ended up doing was simply adding a new CSS ID tag to the root CSS file (styles.css). This way I'm able to reference the ID tag from anywhere in my application in order to apply this to anything within my project.
I drive the toggling of the CSS element with a variable, this way I'm able to execute logic in order to toggle the grey/disable. The grey/disablement starts out on a button click, and ends when the save has completed from the database. The user is unable to edit any field on screen and is forced to wait for the completion of the save before modifying any more fields.
Here's the documentation that helped me achieve this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_overlay
Here's what I added to styles.css at the root project level:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
Here's my HTML of my component where I applied the styling (I added this right at the bottom of my HTML file):
<div id="overlay">
<span id="nav" *ngIf="saveInProgress">
<div class="spinner" style="display: block; position: fixed">
</div>
</span>
<span id="nav" *ngIf="saveInProgress">
<div class="submit-message" style="display: block; color: #FFFFFF; position: fixed; left: 49.7%; top: 54.5%;">
Saving...
</div>
</span>
</div>
Here's my logic in the corresponding TS component:
save(): Observable<any> {
if(...) {
this.saveInProgress = true;
document.getElementById("overlay").style.display = "block";
}
....some more logic....
if(...){
this.saveInProgress = false;
document.getElementById("overlay").style.display = "none";
}
}
You can add the following css property to #nav (use div instead of span). This should work, as it will create an overlay over your website content so that the content is not accessible:
#nav {
background: #e9e9e9;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
Also, It would be very helpful if you provide a working example on a website like jsfiddle, stackblitz etc so that we can have a look at what it is you're trying to accomplish.
Update:
Also, give this div an 'id' other than 'nav' so that the css does not conflict between your content and overlay.

How to create an interactive navigation, in a circular design, using HTML, CSS, and JQuery

// JavaScript Document
$('.page').hide();
$(".btns").click(function(e){
e.preventDefault(); //this method stops the default action of an element from happening.
var $me = $(this); //$(this) references .btns, the object in local scope.
var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03.
$('.page').hide(); //hides all pages
$myContent.fadeIn();//fades in clicked href connected to btn
$(".btns").removeClass('selected');//
$me.addClass('selected');
});
*{
border-spacing: 0px;
}
body{
margin: 0px;
padding: 0px;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); }
<div class="body_content">
<div class="page" id="page_01">
<h2>1. Category 1</h2>
</div>
</div>
<div class="circle-container">
<nav class="navigation">
<a href="#page_01" class="btns deg0" >
<img id="one" src="imgs/button.png" alt="page01"/>
</a>
</nav>
</div>
I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here
Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here
The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.
Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.

Javascript - Reversing a Modal Animation

I have a few items on a site I'm building that onclick activate a modal like this.
Right now the animation is a one-way in that, when you close it or click off from the modal's focus, it just disappears. From what I've been reading, people seems to use the fadeIn/slideIn animation for one time effects, but is it possible, to reverse the animation so instead of just changing display to none, it slides back out?
#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; }
#modal.hidden{bottom: -300px; opacity: 0}
Then in button click event:
$("#modal").addClass("hidden")
On close event:
$("#modal").removeClass("hidden")
If you need pure javascript, it would be a bit more code but essentially that's it
Depending on how you've structured your code, you can approach this in a few ways:
Make use of the animation-direction: reverse; CSS property
Use a Javascript framework (like jQuery) that enables manipulation of DOM elements (with jQuery you could do something like: $('element').slideIn(); to show the modal and $('element').slideOut(); to hide the modal).
Use CSS classes and apply / unapply them with Javascript (the option I'd recommend, and have given an example below):
$(document).ready(function() {
$('.open').on('click', function(e) {
e.preventDefault();
if ($('.modal').hasClass('hide')) {
$('.modal').removeClass('hide');
}
$('.modal').addClass('show');
});
$('.close').on('click', function(e) {
e.preventDefault();
$('.modal').addClass('hide');
if ($('.modal').hasClass('show')) {
$('.modal').removeClass('show');
}
});
});
.modal {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 300px;
left: -305px;
z-index: 999;
transition: all 0.3s ease;
background: #ffffff;
border: 1px solid blue;
}
.modal.show {
left: 150px;
}
.modal.hide {
left: -305px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click here to open modal</p>
<div class="modal">
<p>This is a modal window.</p>
<p>Click here to close</p>
</div>
Please note that this example is only there to illustrate a proof of concept - you'll need to tidy it yourself :)

Be able to scroll within underlying element while cursor is over position absolute element in front of it

How can I be able to scroll article while having my mouse cursor over .header while still having .header clickable? If I set z-index: -1 to .header I'm able to scroll while having the cursor over .header, but it's no longer clickable.
Demo
Fiddle
HTML:
<div class="row">
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div class="header">
I should be clickable
</div>
<article class="small-12 columns">
<div style="height:5000px">
</div>
</article>
</div>
</div>
</div>
CSS:
article {
overflow-y: auto;
}
article,
body,
html,
.off-canvas-wrap,
.off-canvas-wrap .inner-wrap,
.row {
height: 100%;
width: 100%;
}
.header {
position: absolute;
width: 400px;
height: 400px;
background: #000;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
z-index: 1;
color: #fff;
text-align: center;
padding-top: 1em;
}
If you want a CSS solution, there is none — this is because of how mouse events are directly related to the visibility of the item to the pointer/cursor: e.g. if you place .header in the back such that it is not accessible (so that scroll events on article can be triggered), it will not register a click event, too.
A JS-based solution would be listening to the mousewheel() event (with this plugin, available as a CDN-hosted plugin, too) and then manually triggering scrolling on the article element. However, this does not replicate the default scrolling behavior on individual OSes, and may appear choppy on OSes that has smoothed scrolling events (like OS X).
Without further ado:
// Cache article's position from top (might change if the page is loaded with a hash, so we cannot declare it as 0)
var fromTop = $('article').scrollTop();
$('.header').mousewheel(function(e,d) {
// Prevent default scrolling behavior, even when .header is overflowing
e.preventDefault();
// Trigger scroll in window
// You can change how much to amplify the 'd', which is the delta (distance registered from the scrollwheel). I have chosen it to multiply it by 10
fromTop = fromTop - d*10;
$(this).next('article').scrollTop(fromTop);
}).click(function() {
// Just testing
alert('Header is clicked on!');
});
Here is the proof-of-concept JSFiddle: http://jsfiddle.net/teddyrised/CK7z8/2/
Warning: In the event that there are multiple .header elements targeting multiple article elements on the same page, you will have to iterate through each .header-article pair and cache the fromTop separately for each pair.

Categories