How to make the pusher not dim when I trigger the semantic-ui sidebar?
I tried the semantic-ui sidebar as follows:
$(document).ready(
function() {
$('.button').click(
function() {
$('.ui.sidebar')
.sidebar('toggle');
}
)
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<button class="ui button">trigger</button>
<div class="ui right demo sidebar vertical inverted menu push visible" style="">
<a class="header item">File Permissions</a>
<a class="item">Share on Social</a>
<a class="item">Share by E-mail</a>
<a class="item">Edit Permissions</a>
<a class="item">Delete Permanently</a>
</div>
The pusher content should not be dimmed when sidebar is triggered.
You can control the dimmer behavior of the sidebar with the dimPage setting. You can prevent dimming as follows:
$('.ui.sidebar').sidebar('setting', 'dimPage', false);
Here is an example snippet:
$(document).ready(() => {
$('.ui.sidebar').sidebar('setting', 'dimPage', false);
$('#hamburger').click(() => {
$('.ui.sidebar').sidebar('toggle');
});
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<div class="ui sidebar inverted vertical menu">
<a class="item" href="#">Item 1</a>
<a class="item" href="#">Item 2</a>
</div>
<div class="pusher">
<div class="ui container">
<button class="ui button" id="hamburger">
<i class="sidebar icon"></i>
</button>
<p>Some content</p>
</div>
</div>
Related
I have three pages: main.html, nav.html, sidebar.html
I've separated nav and sidebar for my project. In the nav page, I have button for collapsing the sidebar page. I am using bootstrap framework for the theme. But when I separate it, the sidebar doesn't collapse while the button on nav is clicked. Here are the code of main.html
<link href="global/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="global/js/main/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$( "#nav" ).load( "inc/nav.html" );
$( "#sidebar" ).load( "inc/sidebar.html" );
});
</script>
<div id="nav"></div>
<div class="page-content" style="padding-bottom:70px;">
<div id="sidebar"></div>
<div class="content-wrapper bg-white">
<div class="content">test</div>
</div>
</div>
And this is nav.html
<div class="navbar navbar-expand-md navbar-dark bg-indigo navbar-static" style="background:#81018d;">
<div class="navbar-brand">
<a href="#" class="d-inline-block">
<img src="../../assets/images/logo/headerwhite.png" alt="">
</a>
</div>
<div class="d-md-none">
<button class="navbar-toggler sidebar-mobile-main-toggle legitRipple" type="button">
<i class="icon-paragraph-justify3"></i>
</button>
</div>
</div>
And sidebar.html
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">
<div class="sidebar-content">
<div class="card card-sidebar-mobile">
<ul class="nav nav-sidebar" data-nav-type="accordion">
<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu" title="Main"></i></li>
<li class="nav-item">Menu Beranda</li>
<li class="nav-item">Transaksi</li>
</ul>
</div>
</div>
</div>
I am trying to combine bootstrap and fullpage.js to have a vertical scrolling website with a horizontal scroll section that is controlled by its own separate navigation. I an trying to implement a page section just like how this website (http://www.lottanieminen.com/) is done. I am trying to implement the horizontal scroll in the 'Portfolio' page. Here is my code:
`
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta name="author" content=" ">
<!-- Bootstrap CSS -->
<link href="img/mylogo.ico" rel="shortcut icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/fullpage.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<title>Stephanie Daniels</title>
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
<img src="img/mylogo.png" alt="mylogo" style="display: inline-block;">
<span style="display: inline-block;"></span>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio" data-toggle="tab">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li>
</ul>
</div>
</nav>
<section id="home">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="center">
<img src="img/nameheader.png" alt="nameheader" class="img-fluid" size="contain" width="40%" />
<div class="row">
<div class="col-12">
<img src="img/DesktopHomebox.png" alt="desktophomebox" class="img-fluid desktophomebox" size="contain" width="50%" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img src="img/about.png" alt="aboutme" class="img-fluid aboutme" margin="0px" />
</div>
<div class="col-sm-6">
<h1 align="center">ABOUT</h1>
<h2 align="center"> Hi! I’m Stephanie...</h2>
<p align="center" class="big">I am Nigerian and currently a second year student at the University of Kent, studying Digital Arts. I have always been interested in graphics and digitalised work but I decided I was going to turn this interest into profession by combining my ICT skills with my fine art skills. <br><br>I am quite proficient in a range of design software which include
<span class="software">Adobe Illustrator</span> and <span class="software">InDesign</span>. My interest lies more in designing than developing as I am a very visual-oriented person. <br><br>Also, I am very energetic, although I generally enjoy being indoors and working with other people. This is just a brief overview of myself. Feel free to explore the site!</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h1 align="center">PORTFOLIO</h1>
</div>
</div>
</div>
</section>
<section id="contact"> </section>
<footer class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<p> © Stephanie Daniels 2018 </p>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko -lightbox/5.3.0/ekko-lightbox.js">
</script>
<script src="js/fullpage.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
new fullpage('#fullpage', {
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js"></script>
<script>
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
</script>
<script>
$(function() {
$('#mainNav a').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
return false;
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav'
});
// Closes responsive menu when a link is clicked
$('.navbar-collapse>ul>li>a').click(function() {
$('.navbar-collapse').collapse('hide');
});
});
</script>
`
My project has a sidebar that has four different options. (Schedule, progress, add course, drop course).
I want users to be able to click on these options (after expanding the side bar) and display the information from which ever of the four they clicked. I want this information to display on the same page, not link to another page.
I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes.
Note: I don't have any data for these 4 pages now - I just want to set it up so they function.
To keep it short: What code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked?
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
I am a beginner.
This is my Semantic Ui menu, stackable for mobile devices. On low resolutions (mobile devices) i wanna make this collapsable. Insert something like this http://i.imgur.com/6gEp3Py.png
How can i do this? Ty
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container" class="ui fluid container">
<div id="navbar" class="ui stackable yellow inverted menu">
<div class="item">
<img src="assets/images/logo.png">
</div>
<a class="item" href="">Page1</a>
<div class="ui pointing dropdown link item">
<span class="text yellow inverted">Page 2</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
</div>
</div>
<a class="item" href="">Page 3</a>
<a class="item" href="">Page 4</a>
<a class="item" href="">Page 5</a>
</div>
</div>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$('.dropdown').dropdown({
transition: 'drop',
on: 'hover'
});
</script>
</body>
</html>
Maybe put all items to <div id="hiddable"> and add css mediaquery:
#media only screen and (max-width: 320px){
#hiddable { display:none }
}
And add
$( ".dropdown" ).click(function() {
$("#hiddable").show();
});
or somehting like this.
Found something that i cant understood.
Had a side menu with semantic ui, the dropdown menu from the side menu is not working when i host the file locally, but it is working fine if i put it in jsfiddle
Here is the working jsfiddle https://jsfiddle.net/7rcrx8c4/
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
</head>
<body>
<div id="main" class="ui container">
<div class="ui top attached menu">
<a class="item" id="menu"><i class="sidebar icon"></i>Menu</a>
<div class="right menu">
<a class="item"><i class="user icon"></i>Welcome : Foo</a>
</div>
</div>
<br />
</div>
<div class="ui left vertical sidebar menu">
<div class="item">
<i class="grid layout icon"></i>Menu
</div>
<!-- Master menu -->
<div class="ui dropdown item">
<span class="text"><i class="book icon"></i></span>
<i class="dropdown icon"></i>Master
<div class="menu">
<a class="item">a</a>
<a class="item">b</a>
</div>
</div>
<!-- End master -->
</div>
<script>
$('.ui .dropdown').dropdown({
on: 'hover'
});
$('.ui.left.sidebar').sidebar({
transition: 'overlay'
});
$('.ui.left.sidebar')
.sidebar('attach events', '#menu');
</script>
</body>
</html>
style.css
.ui.sidebar {
overflow: visible !important;
}
Can some one point me where i make a mistake?
Found out the reason,
style.css should be loaded after semantic.css
Thanks all for the time