I'm using shapeshift for drag & drop options, and one of the containers is hided inside bootstrap tab. Shapeshift is initialized there, but doesn't set items to positions till first drag of item.
JSfiddle with this bug: https://jsfiddle.net/owm6wo0r/
As you can see inside JSFiddle when you click "Tab 2" all items are on one on another. When you try to drag them they set positions.
Here is documentation of plugin: https://github.com/McPants/jquery.shapeshift/wiki/2.0-api-documentation
I tried with event "ss-rearrange" on clicking the tab, but it didn't work... Any idea how to fix it?
HTML:
<div class="dragdrop">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
<ul class="nav-tabs nav" role="tablist">
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
</ul>
<div class="tab-content">
<div id="tab1" role="tabpanel" class="tab-pane active">
<p> Nothing there </p>
</div>
<div id="tab2" role="tabpanel" class="tab-pane">
<div class="dragshared">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</div>
</div>
JS:
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('.dragdrop').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
dragClone: false,
enableDrag: true,
enableCrossDrop: true
});
$('.dragshared').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
deleteClone: true,
dragClone: true,
enableCrossDrop: false
});
My final solution is to set at the beggining bootstrap tabs on visibility: hidden/visible instead of display: block/none and only after shapeshift initialization switch again for display none/block since visibility didn't work as it should (desactivated tab was visible for a second).
I believe there is way to make it clever.
CSS
.tab-content>.tab-pane {
display: block;
visibility: hidden;
height: 0;
width: 100%;
.dragshared {
height: 0!important;
}
}
.tab-content>.active {
height: auto;
visibility: visible;
.dragshared {
height: auto;
}
}
.tab-content.initialized>.tab-pane {
display: none;
visibility: visible;
}
.tab-content.initialized>.tab-pane.active {
display: block;
}
JS
(shapeshift initialization)
$('.tab-content').addClass('initialized');
Related
I've got a dozen galleries and some of them only has one image. This is causing the carousel and page to break because the carousel has loop = true set on it. I'm trying to write a condition to say if there's more than one item in the carousel, to make loop = true else make loop = false. However, I took a shot at it but it doesn't seem to be working.
$(".mbgc-gallery").owlCarousel({
margin: 0,
dots: false,
nav:($(".mbgc-gallery .owl-item").length > 1) ? true: false,
navText: [],
loop:($(".mbgc-gallery .owl-item").length > 1) ? true: false,
autoplay: false,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
Can it work like this or do I need to do something after it initializes?
EDIT
I forgot to mention that a page could have more than one gallery on it, so I am not sure if this needs to be wrapped in a .each function or maybe a unique selector? I have data attributes set up on each gallery so it has an unique ID.
Your query in the owlCarousel configuration scans the whole document again. You select all .mbgc-gallerys and then you select all .owl-items of all .mbgc-gallerys.
But you only want to test "this" carousel. Something like this should work:
$(".mbgc-gallery").each(function(index) {
var $gallery = $(this);
var onMultiple = $gallery.children(".owl-item").length > 1 ? true : false;
$gallery.owlCarousel({
loop: onMultiple,
[...]
});
};
edit:
Made a snippet.
Like this?
$('.owl-carousel').each(function(i) {
var ifMultiple = false;
$thisGallery = $(this);
if($thisGallery.children('.item').length > 1) {
ifMultiple = true;
}
$thisGallery.owlCarousel({
loop: ifMultiple,
autoplay: true,
dots: true,
nav: true,
items: 1,
autowidth: true,
nav: false,
dots: false,
responsive:false
})
})
.item {
box-sizing: border-box;
padding: 2rem;
width: 200px;
height: 150px;
background: yellow;
}
.owl-carousel {
border: 1px solid black;
width: 200px !important;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/OwlCarousel2/OwlCarousel2/raw/develop/dist/owl.carousel.min.js"></script>
<h2>multiple</h2>
<div class="owl-carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<h2>single</h2>
<div class="owl-carousel">
<div class="item">1</div>
</div>
<h2>multiple</h2>
<div class="owl-carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>single</h2>
<div class="owl-carousel">
<div class="item">1</div>
</div>
There is a menu button on the left of my site in progress.
This is the Javascript code which opens the menu:
var main = function()
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 400);
$('body').animate({
left: "285px"
}, 400);
});
And this is the Javascript code which closes the menu:
$('.icon-close').click(function () {
$('.menu').animate({
left: "-285px"
}, 400);
$('body').animate({
left: "0px"
}, 400);
});
What I would like to be able to do is, instead of using a "close" icon, I would like for a click anywhere on the page (including the original menu button) to close the menu.
As the code is currently written, when the menu is opened/closed, it slides in from the left, and the main body of the page slides to the right the same amount of pixels, and vice-versa when closed.
EDIT:
Here's the skeleton of the HTML as requested:
<div class="menu">
<div class="icon-close">
<img src="close.png">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>Menu
</div>
</div>
You can capture a document.onclick event then check the event target id against a set of allowed id's Note that to do this you have to add id attributes to the close button and the "body". I've also taken the liberty of adding an id to the menu and a wrapper around the "body" of the document and changed your body tag animation to that wrapper, as you shouldnt move the body tag directly. Note that to resize the body on menu open just change the body position: absolute and set right: 0px;
(Demo keep body size on menu open)
(Demo resize body to keep within viewport on menu open)
$(document).on('click', function(e) {
if ($("#menu").position().left != '0') {
if (e.target.id === "open") {
$('#menu').animate({
left: "0px"
}, 400);
$('#body').animate({
left: "285px"
}, 400);
}
} else {
if (e.target.id === "body" || e.target.id === "close" || e.target.id === "open") {
$('#menu').animate({
left: "-285px"
}, 400);
$('#body').animate({
left: "0px"
}, 400);
}
}
});
html, body, #menu, #body {
height: 100%;
}
.menu {
position: absolute;
width: 285px;
left: -285px;
}
#body {
position: relative;
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu" id="menu">
<div class="icon-close">
<img src="close.png" id="close">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div id="body">
<div class="jumbotron">
<div class="icon-menu" id="open">
<i class="fa fa-bars" id="open"></i>Menu
</div>
</div>
</div>
Pure JS and CSS
The following is a pure javascript and css method for achieving the same effect. I'm including this for reference as it is a lot lighter weight than including jquery, however if you have jquery included already there is no reason to not use the jquery methods. Notice that on older browsers that do not support css transitions the menu will still open but will not be animated (which is a good thing for older browsers as javascript animations can slow things down quite a bit)
(Demo keep body size on menu open)
(Demo resize body to keep within viewport on menu open)
var menu = document.getElementById("menu");
var body = document.getElementById("body");
menu.style.transition = "0.3s linear";
body.style.transition = "0.3s linear";
document.onclick = function(e) {
if (menu.style.left != "0px") {
if (e.target.id === "open") {
menu.style.left = "0px";
body.style.left = "285px";
}
} else {
if (e.target.id === "body" || e.target.id === "close" || e.target.id === "open") {
menu.style.left = "-285px";
body.style.left = "0px";
}
}
};
html, body, #menu, #body {
height: 100%;
}
.menu {
position: absolute;
width: 285px;
left: -285px;
}
#body {
position: relative;
left: 0px;
}
<div class="menu" id="menu">
<div class="icon-close">
<img src="close.png" id="close">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div id="body">
<div class="jumbotron">
<div class="icon-menu" id="open">
<i class="fa fa-bars" id="open"></i>Menu
</div>
</div>
</div>
Here's humble's version of the snippet below:
http://jsfiddle.net/humbleRumble/3j7s9ggz/
You can just bind a click event to the document that does the same thing as the click on the close button:
$(document).on('click', function (e) {
// Filter some elements out so that this function doesn't
// execute when it's not intended to.
var target = e.target,
isMenuElem = $(target).parents('.menu').length || $(target).is('.menu'),
isMenuClose = $('.icon-close').has(target).length,
isIconMenu = $(target).is('.icon-menu');
// Simply return if the clicked element falls under the filter.
// This allows the close button to close,
// the menu to not close itself if you click its body,
// the function to not interfere with the menu button functionality,
// and that a click on anywhere will close the menu.
if (isMenuElem && !isMenuClose || isIconMenu) return;
$('.menu, #jumbotron').animate({
left: "-285px"
}, 400);
});
$('.icon-menu').click(function () {
// This is a 'toggle' value for left,
// if the menu is opened (left: 0), close it (left: -285)
// and vice-versa.
var toggleAnim = $('.menu').css('left') === '-285px' ? 0 : '-285px';
$('.menu, #jumbotron').animate({
// Apply the toggle
left: toggleAnim
}, 400);
});
html, body {
padding: 0;
margin: 0;
}
#jumbotron {
position: relative;
height: 500px;
width: 300px;
float: left;
}
.menu {
position: relative;
width: 285px;
height: 500px;
background: red;
float: left;
}
.icon-menu {
background: black;
color: #fff;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="icon-close">
<img src="close.png" alt="Close Me">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div class="jumbotron" id="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>Menu
</div>
</div>
This will trigger with a click anywhere on the page, but not on the elements inside of the menu (except the close button).
Normally in fullpage.js we can set single global
paddingTop, paddingBottom value via below code:
$('#fullpage').fullpage({
paddingTop: '130px',
paddingBottom: '50px',
});
My question is can we assign multiple paddingTop,paddingBottom values to individual scroll sections TO achieve more flexible layout display?
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage'],
sectionsColor: ['#4A6FB1', '#939FAA'],
scrollOverflow: true,
sectionSelector: '.section',
slideSelector: '.slide',
slidesNavigation: true,
slidesNavPosition: 'bottom',
verticalCentered: false,
resize: false,
autoScrolling: true,
paddingTop: '130px',
paddingBottom: '50px'
});
});
.slider-container {
width: 50%;
}
.title-text {
font-size: 30px;
font-weight: bold;
}
p {
line-height: 3em;
}
.contentline { border:1px solid white; }
#demo {
position: absolute;
top: 50px;
margin: 0;
left: 0;
right: 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.slimscroll.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<div id="fullpage">
<div class="section">
<div class="container slider-container">
<div class="row margin-0" id="demo">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
<div class="title-text">padding:130px,bottom:80px layout</div>
</div>
</div>
<div class="slide contentline" id="slide1" data-anchor="s1">
<div class="row margin-0">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
<p class="title-text">you may press Arrow Down Key to scroll to the next section </p>
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
<p>line6</p>
<p>line7</p>
<p>line8</p>
<p>line9</p>
<p>line10</p>
<p>line11</p>
<p>line13</p>
<p>line14</p>
<p>line15</p>
<p>line16</p>
<p>line17</p>
<p>line18</p>
<p>line19</p>
<p>line20</p>
<p>line21</p>
<p>line22</p>
<p>line23</p>
<p>line24</p>
<p>line25</p>
<p>line26</p>
<p>line27</p>
<p>line28</p>
<p>line29</p>
<p>line30</p>
</div>
</div>
</div>
<div class="slide" id="slide2" data-anchor="s2">
slide2
</div>
<div class="slide" id="slide3" data-anchor="s3">
<p>slide3</p>
</div>
<div class="slide" id="slide4" data-anchor="s4">
<p>slide4</p>
</div>
</div>
<!--end of container-->
</div>
<div class="section title-text">
<div class="contentline">
Some sections<br> which require different<br> paddingTop and padding bottom values<br>
For example this page, if i need paddingTop: 20px; paddingBottom:20px;<br> instead of running global value of 130px 50px;<br>
if using css to override padding,<br>
the calculated slider height is still wrong.
</div>
</div>
</div>
You can override it as suggested by #CraigduToit.
Fullpage.js will read your value as you can see here.
Here's an example of overriding the paddingTop value. I've colored in grey the real content area without the paddings.
I just used:
#section2 {
padding-top: 10px !important;
}
With this initialization:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', 'purple', '#ADD8E6'],
paddingTop: '100px',
paddingBottom: '100px',
scrollOverflow: true,
});
I believe this can be achieved with css, however it requires you to add (or build upon) a uniuque class for each sections content.
I added a class "testingstuff" to your child div on the second section, so the HTML will be:
<div class="section title-text fp-section active testingstuff">....</div>
And then went on to simply create the class in the .css with the following properties:
.testingstuff{
padding:30px 0px 30px 0px !important;
}
So going forward, all you would need to do is create a class for each section, not the most elegant way to do it, but it is rather quick and easy.
Hope this helps.
I am trying to do a function after my first slide has shown. I basically want to do the same function after each slide, but my 2nd slide is just still. Nothing is fading in or coming in.
Here is my JQuery
$("#slideshow").cycle({
fx: 'scrollHorz',
pager: '#slideshow-nav',
speed: 600,
timeout: 7000,
pauseOnPagerHover: true,
containerResize: false,
slideResize: false,
fit: 1,
before: beforeSlide,
after: afterSlide
});
function beforeSlide() {
$("#slideText").css('padding-left', '0px');
$("#slideText").css('opacity', '0');
}
function afterSlide() {
$("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
}
Here is my html
<div id="slideshow" class="slides">
<div class="slide" style="background-image: url('slideOne.jpg'); background-color: #e3d7bd;">
<div id="slideText">
<h1>asdf</h1>
<br />
<p>asdf</p>
<p>asdf</p><br />
Get started today
</div>
</div>
<div class="slide" style="background-color: #fff;">
<img class="slideTwoImage" src="slideTwoKid.png"></img>
<div id="slideText">
<h1>Test.</h1>
<br />
<p>asdf</p>
<p>asdf</p><br />
Get started today
</div>
</div>
<!-- <div class="slide" style="background-image: url('slideTwo.jpg'); background-color: #fff; display: none;"></div>
<div class="slide" style="background-image: url('slideThree.jpg'); background-color: #000; display: none;"></div> -->
</div>
It works for the first slide..the animation for the text, but on the 2nd slide it is not working.
Change containerResize: false to containerResize: true then it should work.
See demo here
I figured it out. You have to name elements in the before and after function differently.
I had them both named #slideText as you can tell in the functions. Just name them separate.
$("#slideshow").cycle({
fx: 'scrollHorz',
pager: '#slideshow-nav',
speed: 600,
timeout: 7000,
pauseOnPagerHover: true,
containerResize: true,
slideResize: false,
fit: 1,
before: beforeSlide,
after: afterSlide
});
function beforeSlide() {
$("#slideText").css('padding-left', '0px');
$("#slideText").css('opacity', '0');
$("#slideTextTwo").css('padding-left', '0px');
$("#slideTextTwo").css('opacity', '0');
}
function afterSlide() {
$("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
$("#slideTextTwo").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
}
So now I can make changes on separate slides the way I intended.
I am using this code to place a link for each label:
chart2.addAxis("y", {
vertical: true,
fixLower: "none",
fixUpper: "none",
natural: true,
majorTick: { length: 3 },
labels: [{value: 1, text: Link text }, ...]
});
Apparently this code didn't work. So, i am thinking:
I have this html in the rendered chart:
<div id="chart2" style="height: 100px;">
<div style="margin: 0px; padding: 0px; ...">
<div style="margin: 0px; padding: 0px; ... ">Link text</div> //label
</div>
...
And this change should result:
Link text
to something like:
Link text
How can i do this change with jquery or dojo ? Basically add before and after the text.