I have to use parallax.js to background images in owl carousel. For example I wanna use http://pixelcog.github.io/parallax.js/ with https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
How can I do it?
pen: https://codepen.io/naaatasha/pen/gRdoej
<div class="owl-carousel slider">
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://trawnik.nazwa.pl/TrawnikProducent2016/wp-content/uploads/slide-strong-1.jpg">
<div class="container">
<div class="box">
<h2 class="h2 wow fadeIn text-right">co tam</h2>
<span class="subtitle wow fadeIn">ihsisdijbvjd</span>
</div>
</div>
</div>
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://www.focus.pl/upload/galleries/19/trawa-19061_l.jpg">
<div class="container">
<div class="box">
<h2 class="h2">lorem ipsum</h2>
<span class="subtitle">asdsk jbsjfd</span>
</div>
</div>
</div>
</div>
.slider {
position: relative;
display: table;
}
.box {
display: table-cell;
vertical-align: middle;
width: 1%;
}
.slide-wrapper {
height: 800px;
width: 100%;
background-color: #333;
backround-size: cover;
}
.h2 {
font-size: 40px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
}
.subtitle {
display: block;
font-family: 'latolight', sans-serif;
font-size: 30px;
text-transform: uppercase;
}
.parallax-window {
min-height: 400px;
background: transparent !important;
}
jQuery(document).ready(function() {
jQuery(".slider").owlCarousel({
items: 1,
loop: true,
nav: false,
dots: false,
autoplay: true,
autoplayTimeout: 4000,
animateIn: 'fadeIn',
//onChange : callback
});
// function callback(event) {
// jQuery('.parallax-window').parallax();
// }
});
Related
I am working on nested parent and child list item.
Here is demo link https://jsfiddle.net/fahadsheikh/kq5oxbrs/2/
The sortable and draggable working fine but when if one of parent div is empty than draggle not working.
$(document).ready(function() {
// Sort the parents
$(".sortMenu").sortable({
containment: "document",
items: "> div",
tolerance: "pointer",
cursor: "move",
opacity: 0.7,
revert: 300,
delay: 150,
placeholder: "menuPlaceholder",
start: function(e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
}
});
// Sort the children
$(".menuItems").sortable({
items: "> div",
tolerance: "pointer",
containment: "document",
connectWith: '.menuItems'
});
});
$('#btn1').click(function() {
getSortableList('.sortMenu');
})
$('#btn2').click(function() {
getSortableList('.menuItems');
})
function getSortableList(className){
var sortables = $(className);
var myArray = new Array();
sortables.each(function() {
myArray = myArray.concat($(this).sortable('toArray'));
})
alert(myArray.length);
}
.menuGroup {
margin: 10px;
padding: 10px;
border: 1px solid #000000;
}
.menuGroup h2 {
margin: 0;
padding: 0px 0px 20px 0px;
}
.menuItems {}
.menuItem {
margin: 5px;
padding: 10px;
margin-left: 50px;
border: 1px solid #000000;
background-color: #cecece;
}
.menuPlaceholder {
width: 100%x;
height: 50px;
padding: 20px;
display: block;
margin: 0 0 15px 0;
background: #cccccc;
border: 1px dashed #000000;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<button id="btn1">get sortMenu </button>
<button id="btn2">get menuItems </button>
<div class="sortMenu">
<div class="menuGroup">
<h2>Parent #1</h2>
<div class="menuItems">
<div class="menuItem">
Child 1.1
</div>
<div class="menuItem">
Child 1.2
</div>
<div class="menuItem">
Child 1.3
</div>
<div class="menuItem">
Child 1.4
</div>
</div>
</div>
<div class="menuGroup">
<h2>Parent #2</h2>
<div class="menuItems">
<div class="menuItem">
Child 2.1
</div>
<div class="menuItem">
Child 2.2
</div>
</div>
</div>
</div>
This is a known bug.
Applying min-height should fix the issue
Add the following css
<style>
.menuItems {
min-height: 100px;
background: yellow; // optional
}
</style>
I'm using a template found https://bootstrapious.com/p/bootstrap-sidebar (it's the 2nd sidebar option). I have it integrated into a stock MVC5 application and everything works except for whatever is in RenderBody(), it's not responsive to when the sidebar is toggled open/closed. It is responsive when I resize the page, and the sidebar responds appropriately too, but I don't want the sidebar to overlay the contents on RenderBody(). How would I go about fixing that? Thank you in advanced!
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<!--
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>-->
</div>
</nav>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Site.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #367fa9;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #3c8dbc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #367fa9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #3c8dbc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #3c8dbc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
I have made a responsive flexbox grid. It works in Chrome, but not in Safari and IOS. I must be missing something. Can anyone tell me what I'm doing wrong?
codepen
section {
max-width: 1280px;
display: block;
margin: 0 auto;
}
section:not(.grid) {
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.box {
-webkit-box-flex: 1;
-webkit-flex: 1 1 12em;
-ms-flex: 1 1 12em;
flex: 1 1 12em;
}
}
.wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(12em, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
.box {
padding-right: 1em;
}
.box:last-of-type {
padding-right: 0;
}
Remove this enclosing element from your SCSS, but keep everything inside it:
section:not(.grid) {}
it means those flex styles will NOT be applied.
section {
max-width: 1280px;
display: block;
margin: 0 auto;
border: 1px dashed red;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.box {
-webkit-box-flex: 1;
-webkit-flex: 1 1 12em;
-ms-flex: 1 1 12em;
flex: 1 1 12em;
border: 1px dashed blue;
}
.wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(12em, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
.box {
padding-right: 1em;
}
.box:last-of-type {
padding-right: 0;
}
<section class="grid">
<h4>All projects</h4>
<div class="wrapper">
<div class="box">
<h5>Project 1<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 2<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 3<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 4<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 5<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 6<br>
<span>Category</span>
</h5>
</div>
</div>
</section>
In my vuejs code, i am fetching data from a Rails Api, which works fine for the post, i can create a new post but when i want to post a comment and i type in one input field, it types on every other field, i'm a beginner, please help, i don't really know how to phrase a question. Here's the code
<template>
<div class="home">
<div class="panel panel-default panel-shadow">
<div class="panel-body">
<form class="form-group" #submit.prevent="postGossip" style="margin: 10px;">
<textarea class="font-control" v-model="micropost.body" placeholder="What's Happening ?" style="padding: 10px;" rows="5"></textarea>
<span style="color:red">{{ errors.body }}</span>
<button class="btn btn-danger text-right pull-right">Post</button>
</form>
</div>
</div>
<div class="panel panel-white post panel-shadow" v-for="post in microposts" transition="item">
<div class="post-heading">
<div class="pull-left image">
<img src="http://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>Anonymous</b>
</div>
<h6 class="text-muted time">{{ getHumanDate(post.created_at) }}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.body}}</p>
<div class="stats">
<div v-on:click="isShow = !isShow" class="text-right">
Comments {{post.comments.length}}
</div>
</div>
</div>
<div class="post-footer" v-show="isShow">
<div class="input-group">
<input class="form-control" placeholder="Add a comment" type="text" v-model="comment.body">
<span class="input-group-addon">
<button class="btn btn-primary" #click="postComment">Post</button>
</span>
</div>
<ul class="comments-list" v-for="comment in post.comments">
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="http://bootdey.com/img/Content/user_1.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h5 class="time">{{ getHumanDate(comment.created_at) }}</h5>
</div>
<p>{{comment.body}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'home',
data () {
return {
micropost: {
body: ''
},
errors: {},
microposts: [],
comment: {
micropost_id: '',
body: ''
},
isShow: false
}
},
methods: {
postGossip: function () {
let self = this
this.axios.post('http://localhost:3000/api/v1/microposts', {
micropost: self.micropost
}).then(function (response) {
self.errors = {}
self.microposts.unshift(response.data)
self.micropost.body = ''
}).catch(function (response) {
console.log(response)
self.errors = 'response.data.error'
})
},
getPosts: function () {
let self = this
this.axios.get('http://localhost:3000/api/v1/microposts').then(function (response) {
self.microposts = response.data
}).catch(function (errors) {
console.log(errors)
})
},
postComment: function () {
console.log(self.comment)
},
getHumanDate: function (date) {
// return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY')
return moment(date).fromNow()
}
},
mounted () {
this.getPosts()
}
}
</script>
<style>
body{
background-image: url('../assets/background.png');
}
.panel-shadow {
box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 3px;
}
.panel-white {
border: 1px solid #dddddd;
}
.panel-white .panel-heading {
color: #333;
background-color: #fff;
border-color: #ddd;
}
.panel-white .panel-footer {
background-color: #fff;
border-color: #ddd;
}
.input-group-addon{
background-color: transparent !important;
}
.post .post-heading {
height: 95px;
padding: 20px 15px;
}
.post .post-heading .avatar {
width: 60px;
height: 60px;
display: block;
margin-right: 15px;
}
.post .post-heading .meta .title {
margin-bottom: 0;
}
.post .post-heading .meta .title a {
color: black;
}
.post .post-heading .meta .title a:hover {
color: #aaaaaa;
}
.post .post-heading .meta .time {
margin-top: 8px;
color: #999;
}
.post .post-image .image {
width: 100%;
height: auto;
}
.post .post-description {
margin: 15px;
}
.post .post-description .stats {
margin-top: 20px;
}
.post .post-description .stats .stat-item {
display: inline-block;
margin-right: 15px;
}
.post .post-description .stats .stat-item .icon {
margin-right: 8px;
}
.post .post-footer {
border-top: 1px solid #ddd;
padding: 15px;
}
.post .post-footer .comments-list {
padding: 0;
margin-top: 20px;
list-style-type: none;
}
.post .post-footer .comments-list .comment {
display: block;
width: 100%;
margin: 20px 0;
}
.post .post-footer .comments-list .comment .avatar {
width: 35px;
height: 35px;
}
.post .post-footer .comments-list .comment .comment-heading {
display: block;
width: 100%;
}
.post .post-footer .comments-list .comment .comment-heading .user {
font-size: 14px;
font-weight: bold;
display: inline;
margin-top: 0;
margin-right: 10px;
}
.post .post-footer .comments-list .comment .comment-heading .time {
font-size: 12px;
color: #aaa;
margin-top: 0;
display: inline;
}
.post .post-footer .comments-list .comment .comment-body {
margin-left: 50px;
}
.post .post-footer .comments-list .comment > .comments-list {
margin-left: 50px;
}
.item {
box-sizing: border-box;
background-color: #eee;
border: 1px solid black;
display: inline-block;
width: 100px;
height: 100px;
}
.item-enter {
opacity: 0; /* the state right after enter (enter from this state) */
}
.item-leave {
opacity: 0; /* the state right before leave (leave to this state) */
}
.item-enter-active, .item-leave-active {
transition: opacity .5s ease; /* applied during enter/leave transition */
}
.item-move {
border-color: red;
transition: transform .5s cubic-bezier(.55,0,.1,1); /* applied during moving transition */
}
</style>
And this is what happens:
1
It writes on every comment box insert of just one, any help would be greatly appreciated
This is happening because the object post, that you get from the API returns many comments. Than in your iterator v-for=comment in post.comments you call the iteratee defined in your object locally as comment, what causes a "collision" with the object your defined in your component data.
As post is also a iteratee of microposts you should add the newly created object to microposts. Try the following.
change the iteratee name v-for='comment in post.comments' to c. Of course change the references also in
<div class="comment-body">
<div class="comment-heading">
<h5 class="time">{{ getHumanDate(c.created_at) }}</h5>
</div>
<p>{{c.body}}</p>
</div>
Then your postComment method you can clone the object | clone an object
<button class="btn btn-primary" #click="postComment(post)">Post</button>
Define the method
postComment: function (post) {
post.comments.push({body: this.comment.body});
}
Remember that if a comment has other fields, you need to set them before appending to the parent object post
Is there an event that I can listen to, when Flickity has finished initialization?
When initializing with JavaScript, I can trigger an event by myself, but by using this setup I have no clue.
Initialize with HTML
http://flickity.metafizzy.co/#initialize-with-html
<div data-flickity='{ … }'>
…
</div>
Currently, I am checking if Flickity has generated it's DOM elements, but that is not very elegant. :-)
You can try this:
Flickity.prototype.on( 'activate',function(){
alert("active")});
Flickity.prototype.on( 'activate',function(){
alert("active")});
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #EEE;
}
.carousel-cell {
width: 100%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: gallery-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(gallery-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
<script src="https://npmcdn.com/flickity#2/dist/flickity.pkgd.js"></script>
<!-- Flickity HTML init -->
<div class="carousel" id="carousel" data-flickity>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>