I am using Sidebar.js and would like to add an CSS opacity setting to the main container section when the sidebar is revealed. (Similar to hypebeast.com when you click the three bar icon).
I not sure whether to add an overlay div and then hide/show it with jQuery or whether a function can be added to the sidebar js to do it (this seems the way to go).
I would like to control the opacity with CSS but if it's in the js then that's fine as well.
Any help welcomed.
My html:
<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">
<nav>
</nav>
<section>
<!--content with opacity on clicking above nav-->
</section>
</div>
<nav class="sidebar jsc-sidebar" id="jsi-nav">
<!-- nav bar content -->
</nav>
Side bar js and jquery
<script src="js/lib/jquery.min.js"></script>
<script src="js/sidebar.js"></script>
<script>
$('#jsi-nav').sidebar({
trigger: '.jsc-sidebar-trigger',
scrollbarDisplay: true,
pullCb: function () { console.log('pull'); },
pushCb: function () { console.log('push'); }
});
$('#api-pull').on('click', function (e) {
e.preventDefault();
$('#jsi-nav').data('sidebar').push();
});
$('#api-push').on('click', function (e) {
e.preventDefault();
$('#jsi-nav').data('sidebar').pull();
});
</script>
demo - http://jsfiddle.net/victor_007/79sb2rq9/
add and remove class for wrapper and using pseudo add a overlay
.wrapper.overlay {
position:relative;
}
.wrapper.overlay:before {
content:'';
background:black;
opacity:.5;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
z-index:1;
}
Related
I am trying the giva a menu slides in/out effect to give the main content more space whenever user wants - More like the Google Calendar hamburger menu click behaviour.
I am trying to have two divs side-by-side. 1st is menu, 2nd is other content. Using jQuery UI I am trying toggle slide the 1st div.
Two issues -
Only when I give fixed width to 2nd div, I am able to place them side-by-side.
How to make the second div takes rest of the space?
Only after completion of the slide-out 2nd div adjust its width.
How to make increase the width smoothly?
Here is the code https://codepen.io/coder92/pen/Yjomwd
$(document).ready(function(){
//adds click function to the hamburger menu
$( "#menu" ).click(function() {
$(".menuDiv").toggle('slide');
});
});
.menuDiv{
background-color: green;
width:200px;
float:left;
}
.contentDiv{
//width:100%;
width:500px;
color:white;
background-color:blue;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="menu"> toggle </span>
<div>
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Thanks in advance!
For the smooth sliding you can use
$(".menuDiv").animate({width: 'toggle'}, 350);
And to make the data take up the rest of the page
Remove float: left; from .contentDiv (Float makes the element not take full size)
Add margin: 0 auto; (This makes the data take the full rest of the page)
Add overflow: hidden (this stops the blue from going under the green)
Check it out: https://codepen.io/Funce/pen/QBeLOr
The way Google Calendar do it is to utilize a combination of flex display, hidden overflow and negative margin to achieve the effect. You may refer to the sample below:
$(document).ready(function(){
//adds click function to the hamburger menu
$("#menu").click(function () {
var $menu = $(".menuDiv");
if ($menu.is(':visible')) {
$menu.animate({'margin-left':-200}, function() {
$menu.hide();
});
} else {
$menu.show().animate({'margin-left':0});
}
});
});
.containerDiv {
display: flex;
overflow-x: hidden;
}
.menuDiv{
background-color: green;
width:200px;
}
.contentDiv{
color:white;
background-color:blue;
float:left;
flex:1 1 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="menu"> toggle </span>
<div class="containerDiv">
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Note that I use the jQuery animate method, while Google Calendar use the CSS transition for theirs.
I would like to create a menu like the screenshot
the red arrow means when I click on the button it will either show /
hide the menu
the orange arrow means when menu is hide the box should increase the
width, and vice versa
So far I have created the html, the problem is
1) the sliding effect seems not exactly what I expected, it slide after the content is show , but what I would like to achieve is hide and slide at same time
$("#menu_btn").on("click", function () {
var menu = $("#left_menu #btn");
if (menu.css('display') !== "none") {
$("#left_menu #btn").hide("slide", {direction: "left"}, 1000);
} else {
$("#left_menu #btn").show("slide", {direction: "right"}, 1000);
}
});
2) how to combine the code to extend / decrease width after the slide effect, and the box is absolute in the container , can I keep the same top after the content expend / reduce?
$(".content #bg").css("width","600");
$(".content #bg").css("width","1000");
Thanks for helping.
Something like this may work:
https://jsfiddle.net/7k4kdmxu/4/
CSS:
.container{width:100%; margin:0 auto;}
nav{
width:20%;
float:left;
background:#efefef;
}
.openNav{ width:20%;}
#content.openNavContainer{ width:80%!important;}
.closeNav{width:10%;}
#content.closeNavContainer{ width:90%!important;}
#content{
width:80%;
float:right;
background:#e9e9e9;
}
nav ul {list-style:none;}
nav ul li{list-style:none; display:block;}
HTML
<div class="container">
<nav>
Open ->
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>OUT VALUE</li>
<li>SEASONAL</li>
<li>CONTACT</li>
</ul>
<- Close
</nav>
<div id="content"><p>Body Content Can Go Here</p></div>
</div>
JS/JQ
$(function(){
$("#open").click(function(){
$("nav").addClass("openNav");
$("nav").removeClass("closeNav");
$("#content").addClass("openNavContainer");
$("#content").removeClass("closeNavContainer");
});
$("#close").click(function(){
$("nav").addClass("closeNav");
$("nav").removeClass("openNav");
$("#content").addClass("closeNavContainer");
$("#content").removeClass("openNavContainer");
});
});
I'm trying to combine the .toggle() method with an animation. I've followed the methods laid out in this fiddle as well as in this SO post, but the second click isn't returning my div to the original position.
The behavior should be:
Click the title
Content expands
Slide up over the headline
Click again
Content contracts
Slide back down to the original position <-- This isn't happening
HTML
<div id="headline">
<h1>This is the headline</h1>
</div>
<div id="page-wrap"> <!-- contains more than one article, need the whole thing to slide -->
<article class="post">
<div class="title"><h1>Feedback</h1></div>
<div class="content">
<p>Videos can be more than direct instruction. Currently, how do you give feedback on assignments?</p>
<p>It takes a lot of time, right?</p>
<p>Video can be used to give direct feedback to the student because it communicates areas of improvement more effectively than written feedback alone.</p>
</div>
</article>
</div>
CSS
#headline {
position:fixed;
top:10px;
left:10px;
width:380px;
}
#page-wrap {
position:relative;
top:200px;
}
.post {
width:300px;
}
.post .title {
cursor: pointer;
}
.post .content {
display:none;
}
Script
$(".title").click(function() {
$title = $(this);
$content = $title.next();
$content.toggle(
function() {
$("#page-wrap").animate({"margin-top":"200px"}, 'fast')
},
function () {
$("#page-wrap").animate({"margin-top":"-200px"}, 'fast')
}
)
});
CodePen Demo
Here's a live page for more context.
I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?
You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO
this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle
So this post might get lengthy but I'm stuck with iScroll. What I'm doing is populating my list with articles and when one gets clicked, I'm sliding in a div over the list to display the article. That part works but what doesn't is when I scroll through the article and get to the end, it keeps scrolling the list with articles. You can have a look here (the site is in russian but click on an article and scroll all the way to the bottom). Here's my entire code:
<head>
<style>
body{
padding: 0;
margin: 0;
border: 0;
}
#header{
position:fixed;
top:0;
left:0;
height:100px;
width: 100%;
background-color: black;
}
header{
position: absolute;
z-index: 2;
top: 0; left: 0;
width: 100%;
height: 50px;
}
#wrapper{
position: absolute;
z-index: 1;
width: 100%;
top: 52px;
left: 0;
overflow: auto;
}
#container{
position:fixed;
top:0;
right:-100%;
width:100%;
height:100%;
z-index: 10;
background-color: red;
overflow: auto;
}
#content{
margin:100px 10px 0px 10px;
}
</style>
</head>
<body>
<header>Main News</header>
<div id="wrapper">
<ul id="daily"></ul>
<ul id="exclusive"></ul>
<ul id="must"></ul>
<ul id="main"></ul>
<ul id="ukr"></ul>
<ul id="nba"></ul>
<ul id="euro"></ul>
</div>
<div id="container">
<div id="wrapper2">
<div id="header">
<button onclick="hide();">Back</button>
</div>
<div id="content"></div>
</div>
</div>
<script src="js/zepto.js"></script>
<script>
//AJAX requests to fill the li's...
function sayhi(url){
$('#container').animate({
right:'0',
}, 200, 'linear');
$.ajax({
url: serviceURL + "getnewstext.php",
data: {link: url},
success: function(content){
$('#content').append(content);
}
});
}
function hide(){
$('#container').animate({
right:'-100%'
}, 200, 'linear');
$('#content').empty();
}
</script>
<script src="js/iscroll-lite.js"></script>
<script>
var myScroll;
function scroll () {
myScroll = new iScroll('wrapper2', {hScroll: false, vScrollbar: false, bounce: false});
myScroll2 = new iScroll('wrapper', {hScroll: false, vScrollbar: false});
}
document.addEventListener('DOMContentLoaded', scroll, false);
</script>
</body>
Is there a way to scroll on the div container, or content, or wrapper2 without scrolling the wrapper div with the list of articles? Maybe I'm not using iScroll correctly? The same problem happens on Android and iPhone.
EDIT 1:
I set the wrapper position to fixed. Now the div container is the only one scrolling but the list of articles isn't scrolling...I added another iScroll to the wrapper but it's not working. Any advice here?
EDIT 2:
So I dropped iScroll all together and trying with CSS instead. To my onclick events I added:
$('body').css('overflow', 'hidden');
And when the close button is clicked I changed the overflow to auto. Now this stops the body from scrolling in a browser but not on mobile!!! How can I make it do the same thing on mobile???
I finally got it to work. What I needed to do is add another div inside the wrapper div. I'll share the code so hopefully it helps someone else Here's what the new code looks like:
<body>
<!--Added scroller div(without iScroll it works also...just make two divs so the body isn't scrolled but the second div is scrolled-->
<div id="wrapper">
<div class="scroller">
<header>Main News</header>
<ul id="daily"></ul>
<ul id="exclusive"></ul>
<ul id="must"></ul>
<ul id="main"></ul>
<ul id="ukr"></ul>
<ul id="nba"></ul>
<ul id="euro"></ul>
</div>
</div>
<div id="container">
<div class="scroller">
<div id="header">
<button onclick="hide();">Back</button>
</div>
<div id="content"></div>
</div>
</div>
<script>
$('body').on('touchmove', function(e){
e.preventDefault();
});
//prevents native scrolling so only iScroll is doing the scrolling
//after the AJAX call to get the content, declare your iScroll variable
var myScroll;
myScroll = new iScroll('wrapper');
setTimeout (function(){
myScroll.refresh();
}, 2000);
//set time out to give the page a little time to load the content and refresh your iScroll variable so it takes in the entire content of the wrapper div
var myScroll1;
myScroll1 = new iScroll('container');
//I defined my second iScroll variable here so I can destroy it in the next part...
//function sayhi(url) stays the same but in success of AJAX looks like this:
success: function(content){
$('#content').append(content);
myScroll1.destroy();
myScroll1 = null;
myScroll1 = new iScroll('container');
setTimeout (function(){
myScroll1.refresh();
}, 2000);
}
//when the div slides on the screen and content gets loaded, destroy your second iScroll
//variable, set it to null and define it all over again so it takes in the entire content
And that's it. Works perfectly now with two divs which need to use iScroll on the same page. Hope the explanation is clear enough and helps someone!!!