I am using multiscroll.js example file.
<body>
<ul id="menu">
<li data-menuanchor="first">First slide</li>
<li data-menuanchor="second">Second slide</li>
<li data-menuanchor="third">Third slide</li>
</ul>
<div id="myContainer">
<div class="ms-left">
<div class="ms-section" id="left1">
<h1>Left 1</h1>
</div>
<div class="ms-section" id="left2">
<h1>Left 2 </h1>
</div>
<div class="ms-section" id="left3">
<h1>Left 3</h1>
</div>
</div>
<div class="ms-right">
<div class="ms-section" id="right1">
<h1>Right 1</h1>
</div>
<div class="ms-section" id="right2">
<h1>Right 2</h1>
</div>
<div class="ms-section" id="right3">
<h1>Right 3</h1>
</div>
</div>
</div>
</body>
</html>
What I want is to add few more divs under this #mycontainer div. like this
<div class="bar" id="foo">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus id
possimus, nostrum mollitia dolores neque amet esse commodi facilis
temporibus quisquam molestiae eligendi non ullam vitae et repellendus repellat velit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae voluptatum officia sint, omnis quibusdam labore. Illo, consequuntur aliquid saepe voluptates, nulla accusantium aspernatur in voluptatem minima a magnam nemo explicabo.
</div>
Is it possible to make a website in which multiscroll is limited to one specific div only. After that div is scrolled website behave like a normal website.
I had the same need and I figured out with the use of the afterLoad() callback
afterLoad: function(index){
if(index == '3'){
$('html, body').delay(1000).css('overflow', 'auto');
} else {
$('html, body').delay(1000).css('overflow', 'hidden');
}
}
Be sure to have this parameter normalScrollElements correctly setup like your div below the multiscroll
Related
What I'm trying to accomplish is to make a list with headings and on click at one it will show up a little description about the heading.
So far it only opens but it doesn't close. I tried to manipulate classes with if statements as well as I was searching for a solution but without success.
js:
export default function openTitle() {
const colTitle = document.querySelectorAll('.col-title');
const colContainer = document.querySelector('.col-container');
const colContent = document.querySelectorAll('.col-content');
colContainer.addEventListener('click', function (e) {
const clicked = e.target.closest('.col-title');
if (!clicked) return;
document.querySelector(
`.operations__content--${clicked.dataset.tab}`
).style.display = 'block';
});
}
html:
<div class="col-container">
<div class="col">
<div class="col-title" data-tab="1">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--1">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="2">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--2">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="3">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--3">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="4">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--4">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
</div>
Create a CSS class and use the classList API to toggle it:
element.classList.toggle('hidden')
function openTitle() {
const colContainer = document.querySelector('.col-container');
colContainer.addEventListener('click', function(e) {
const clicked = e.target.closest('.col-title');
if (!clicked) return;
document.querySelector(
`.operations__content--${clicked.dataset.tab}`
).classList.toggle('hidden');
});
}
openTitle();
.hidden {
display: none;
}
<div class="col-container">
<div class="col">
<div class="col-title" data-tab="1">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--1 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="2">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--2 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="3">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--3 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="4">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--4 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
</div>
Here's a minimal reproducable example using event delegation and [element].classList.toggle to toggle visibility.
document.addEventListener("click", handle);
function handle(evt) {
const origin = evt.target;
const item = origin.closest("[data-item]");
if (item) {
item.querySelector(".txt").classList.toggle("show");
}
}
body {
font: normal 12px/15px Lato, verdana, arial;
margin: 2rem;
}
[data-item] {
margin-bottom: 1rem;
}
.header {
font-size: 1.3em;
font-weight: bold;
cursor: pointer;
}
.txt {
display: none;
margin-top: 0.3rem;
}
.txt.show {
display: block;
}
<div data-item>
<div class="header">Header</div>
<div class="txt">Lorem ipsem etc</div>
</div>
<div data-item>
<div class="header"><i>Another</i> header </div>
<div class="txt">Ipsem Lorem etc</div>
</div>
I use bootstrap with grid,the goal is to show the same in the pic demo. In this pic demo, element photo ( green border ) seem like in a div ( col-6 ), but width of photos is reach to side of view . How can I build like that with html and css
<section class="intro-project">
<div class="row">
<div class="col-md-6">
<img src="./images/intro1.jpg" class="float-right" />
</div>
<div class="col-md-6">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
reprehenderit illum ab fugit vel enim voluptatem dicta quidem
ratione, corporis, non molestias ducimus quasi quos alias officiis
praesentium temporibus. Deserunt?
</p>
</div>
</div>
</section>
This is demo
I have 3 files for css, js, and php(which is more on html but i decided to put the php extension instead)
The project I'm trying to make is an interactive Menu that has a Page Flip action. I was able to find a reference in codepen. However, when I tried to apply it to my end, the animation and the text where not functioning the way I need it to be, although it works on codepen
The codes I used can also be find on the link i mentioned above. I just wanna ask how to properly call the external link https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js and https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js on the menu.php file?
This is how I did it on sublimetext. I am not sure if it is just the positioning of my files. the result on what I did is that all the text are all centered and no page flip occurring. Thanks for the help
Menu.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sakurajima Menu</title>
<link href="css/styles2.css" rel="stylesheet">
<script src="js/main2.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<link rel="shortcut icon" type="image/png" href="img/sakura-favicon.png"/>
</head>
<body>
<div class="container">
<div class="book-wrapper">
<div class="book-cover">
<img src="https://github.com/slyka85/assets/blob/master/bookcover2.png?raw=true" alt="">
</div>
<div class="pages-container">
<div class="pages">
<div class="page-num-1">
<div class="pages-content">
<div class="pages-background"></div>
<div class="content-inner">
<h1>Chapter 1</h1>
<div class="text"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.</p></div>
</div>
</div>
</div>
<div class="page-num-2">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 2</h1>
<div class="text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, cumque autem! Magni eligendi qui officiis? Fugit iste voluptatum atque voluptatibus totam! Nisi accusantium saepe hic. Aut nobis nesciunt mollitia error.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam odio modi, hic ratione fugit quod natus, excepturi quae minus voluptatum cupiditate quia magnam eveniet ex, reiciendis voluptates ipsam iste laudantium!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati deserunt magnam, at perspiciatis aut. Voluptatem consequuntur neque quisquam?</p>
</div>
</div>
</div>
</div>
<div class="page-num-3">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 3</h1>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptas molestiae tempore amet adipisci dicta incidunt nisi alias distinctio fugit blanditiis dignissimos nobis deserunt eum consequuntur ipsam, perspiciatis numquam repellendus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus in odio deserunt est hic minima inventore, mollitia, officia aspernatur eaque voluptatibus? Amet, molestias adipisci delectus ea eligendi sit numquam illo.</p>
</div>
</div>
</div>
</div>
<div class="page-num-4">
<div class="pages-content">
<div class="content-inner">
<h1>The End</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Put first the vendor libraries
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/main2.js" type="text/javascript"></script>
I'm trying to develop myself just on bootstrap and I wonder that how to create boostrap tab to responsive without plugin and I found a few plugin for tab to responsive but I want to learn how can I make it without plugin?
for example as image (it can be like this)
.myTab{
margin:70px;
width:700px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="myTab">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo asperiores, architecto sunt ex dignissimos nihil eaque voluptate, iure iusto porro, rem animi odio, amet consequatur saepe nam accusamus perspiciatis deserunt?</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Profile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam possimus neque suscipit omnis dolore at consequuntur commodi itaque dignissimos quibusdam consectetur officia earum laborum accusantium, corporis quaerat ullam modi repellendus.</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>Messages</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi inventore dignissimos nisi quisquam sit commodi, laboriosam perspiciatis omnis praesentium voluptate illum magni! Quo, odio itaque recusandae quam veniam tempore cupiditate.</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>Settings</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quam illo magni itaque fugit quo aperiam minus officia a, cumque, error, quidem voluptates cupiditate asperiores dolorum necessitatibus commodi culpa dicta.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Don't give any width allow bootstrap to set it or use media queries in css. Alternatively use bootstrap grid like col-lg-12 or something which fits. you can also use .container class which sets the width to 800px and is responsive too.
What about taking the float left off of the tab items for the size you want to change it
#media screen and (max-width: 767px) {
.nav-tabs>li {
float: none;
}
}
I created this one here code https://jsfiddle.net/zrss7hor/2/ each time you resize your browser the tabs will adapt it
I was wondering if there is a way to swap the content of a html page with a nice fade in fade out effect using JS or jQuery.
In the HTML code I have below I cant to be able to swap out the section class="inner-wrapper" for some new content.
Would be great if you could help me out. :)
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>
Edit:
sorry for the bad post :P
This is what I would like to swap it for when i CLICK on one of the one-fourth divs
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper2">
<article id="one-two">
<h2>Recept</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi sit quas quam accusamus, quia facilis illo omnis repudiandae distinctio architecto sed, deleniti ducimus mollitia sequi repellendus. Distinctio rerum maiores rem.</p>
</article>
<aside id="tablet2">
<hr>
<img src="img/pannkakor.jpg" alt="">
</aside>
</section>
You can use fadeOut and fadein for this. fadeout/fadeIn also provide a callback function which will be fired once action is completed.
Read here
http://api.jquery.com/fadein/
and
http://api.jquery.com/fadeout/
$(".inner-wrapper").fadeOut( 3000, function() {
$(this).html("<div>Hello</div>");
$(".inner-wrapper").fadeIn(3000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>