Is it possible to make gridster.js have 100% width for the canvas (not the grid elements but the canvas itself. This would have to update on resize. I saw the width: "auto" property but I'm not sure if it's doing anything in my fiddle, but in any case it doesnt work as desired.
http://jsfiddle.net/JQPurfect/xP8Ks/1/light/
$(function(){
var options = {
widget_base_dimensions: [100, 120],
widget_margins: [5, 5],
//width: 'auto',
draggable: {
handle: 'header'
}
};
$(".gridster ul").gridster(options);
$(window).resize(function() {
$(".gridster ul").gridster(options);
});
});
You mean besides setting it yourself?
$(".gridster ul").gridster(options).width("auto");
Related
I have right aligned legend and I need to give it max width 25% of whole chart container. I've tried set width to 25% but in case when my series name is short legend box still stays as 25% but should be equal to content width. So I am looking for maxWidth property if it exist. I am in styled mode. Here is the the code http://jsfiddle.net/sabira/xmcqjnvg/24/
Highcharts.chart('container', {
chart: {
styledMode: true,
},
legend: {
align: 'right',
layout: 'proximate',
},
series: [{
name: 'very long long long long long name',
data: [1, 4, 3, 5],
},
{
name: 'short',
data: [3, 5, 3, 1],
}]
});
The legend.maxWidth property doesn't exist. However, it can be achieved by checking legend width in the chart load event and update it when it is bigger than eg. '25%' of the chart width.
Code:
chart: {
styledMode: true,
events: {
load: function() {
var chart = this,
legend = chart.legend,
legendMaxWidth =
Highcharts.relativeLength(legend.options.maxWidth, 1) * chart.chartWidth;
if (legend.legendWidth > legendMaxWidth) {
legend.update({
width: legend.options.maxWidth
});
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/fpwdtghk/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Legend#update
For some one looking for an easier alternative to this just use itemWidth property of legend.
legend:{ itemWidth: 100 }
Updated Fiddle:
http://jsfiddle.net/3mvpbu1f/
I have a page with multiple similar sections with the class ".imgPanel" that I would like to apply the same animation to each section every time the page scrolls into view.
I don't want to create a new scene for each animation as they are all the same. I know there is a way to create a variable scene (i hope that is the correct terminology), and I am hoping someone can help.
Does anyone know how I would adjust the code below to make that happen. I am sure if I get one example of it with my code below I will be able to understand and use this technique again.
Thanks in advance. Adam.
function scrollMagic() {
if (!Modernizr.touch) {
var controller = new ScrollMagic.Controller({
duration: "200%",
});
var panelAnim = new TimelineMax();
panelAnim
.from($('.imgPanel'), 1.4, {
y: '-50px',
autoAlpha: 0,
ease: Power1.easeOut
}, '-=0.2')
var introScene = new ScrollMagic.Scene({
duration: "100%",
})
.setTween(panelAnim)
.addTo(controller);
}
}
I figured it out after watching Ihatetomatoes video
function scrollMagic() {
if (!Modernizr.touch) {
var controller = new ScrollMagic.Controller({
duration: "100%",
});
$('.imgPanel').each(function(){
var tween = TweenMax.from($(this), 1.4, { y: '-50px', autoAlpha: 0,
ease: Power1.easeOut }, '-=0.2');
var scene = new ScrollMagic.Scene ({
duration: "100%",
offset: -300, // offset trigger position by 100px
triggerElement: this
})
.setTween(tween)
.addTo(controller);
});
}
}
I've integrated swiper slide with coverflow effect, now I don't want the effect for first and last slide. can we remove the effect for only first and lst slide.???
You can check your position and disable "swipe to prev" when you are in the first tab, and "swipe to next" when you are in the last one. Like this,
var swiper = new Swiper('.swiper-container', {
effect:'coverflow',
pagination: '#progressbar',
paginationType: 'progress',
nextButton: '#next-button',
prevButton: '#prev-button',
spaceBetween: 30,
onInit: function (swiper) {
if (swiper.activeIndex == 0) swiper.lockSwipeToPrev();
if (swiper.isEnd) swiper.lockSwipeToNext();
},
onSlideChangeStart: function (swiper) {
if (swiper.activeIndex == 0) swiper.lockSwipeToPrev();
else swiper.unlockSwipeToPrev();
if (swiper.isEnd) swiper.lockSwipeToNext();
else swiper.unlockSwipeToNext();
},
});
I guess you mean the slideShadows property. If so, you can easily show/hide it, as following:
var mySwiper = new Swiper('.swiper-container', {
coverflowEffect: {
rotate: 30,
slideShadows: false,
},
});
I was fix hyperlink states via CSS like below sample and it's working fine.
.swiper-slide a {
pointer-events: none !important;
}
.swiper-slide.swiper-slide-next a {
pointer-events: unset !important;
}
I'm trying to add a class "disabled" to the pager if the slider has only 1 slide showing, and nothing to actually slide.
I'm sliding a div, not a list.
It's just a basic div:
<div class="bxslider2">
<div class="wrap">
...
</div>
</div>
Here is the jquery for the slider:
$('.bxslider2').bxSlider({
mode: 'horizontal',
speed: '180',
pagerType:'full',
pager:'true',
captions: false
});
I would like to not show the pager if there is only 1 slide showing.
Thanks for any help!
Justin
I faced the same trouble and here is my solution: we should count how many child elements we have under .bxslider2 block
$(".bxslider2>.wrap").length
and if there is only one, then set option to 'false', otherwise to 'true'.
$('.bxslider2').bxSlider({
mode: 'horizontal',
speed: '180',
pagerType:'full',
pager: ($(".bxslider2>.wrap").length > 1) ? true: false,
captions: false
});
Hope it will helps.
I use css to achieve this.
.bx-pager-item:first-of-type:last-of-type {
display: none
}
Here is a solution if you have more than one bxslider on the page.
$('.bxslider').each(function() {
var options = {
mode: 'fade',
};
if ($(this).find('li').length === 1) {
options.pager = false;
}
$(this).bxSlider(options);
});
Goes through each slider and finds if it has only one li. If so, add pager: false to the object passed to bxSlider.
a nice way to solve this thing is to reload the object like that
and change the controls per number of the items :
var slideQty = $('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 3,
slideWidth: 110,
slideMargin: 0,
adaptiveHeight: true,
pager: false,
moveSlides: 1,
onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); }
});
var count = slideQty.getSlideCount();
if (count < 7) {
slideQty.reloadSlider({
controls : false,
minSlides: 1,
maxSlides: 3,
slideWidth: 110,
slideMargin: 0,
adaptiveHeight: true,
pager: false,
moveSlides: 1,
onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); }
});
}
return false;
Try this it works for me!!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
See screenshot of custom picker:
I know there isn't a way to style the picker control in Titanium. This picker only needs to work on iOS (iPad only). I was thinking I could hack the TableView control to use instead of the picker to achieve the style desired. Is that reasonable? How would I snap the TableViewRows so one is always in the center like seen in typical picker controls?
that's a tough one i would say you just only need views and labels and the swipe event (you can recognize if some one swipe up and down ) and just changes the labels. you can do this with a callback function i hope this code will help you (we have created a custom picker with this code)
using alloy
XML
<View id="numOfIntrusionsPickerContainer" class="compositeWrapperPicker noMargins" >
<View id="numOfIntrusionsButtonContainer" class="horizontalWrapper"></View>
CSS
".compositeWrapperPicker" : {
height: Ti.UI.SIZE,
layout: "composite",
width:Ti.UI.SIZE
},
".horizontalWrapper" : {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
layout: "horizontal"
},
JS
// INSTANTIATION
var args = arguments[0] || {};
var widthValue = 120;
var pickerEnabled = true;
if(args.width != null){
widthValue = args.width;
}
if(args.isEnabled != null){
pickerEnabled = args.isEnabled;
}
// STYLING
// ADDITIONS
// pressed arg can be: true,false,null. false & null are equal
// true = 'yes' is Pressed at creation, false/null = 'no' is pressed
var btn_main = Ti.UI.createButton({
top: 5,
bottom: 0,
left:0,
right:5,
height: 45,
enabled: pickerEnabled,
width: widthValue,
borderRadius: 5,
backgroundImage: "/images/bttn_gray_flex.png",
backgroundSelectedImage : "/images/bttn_gray_press_flex.png",
backgroundFocusedImage : "/images/bttn_gray_press_flex.png"
});
var picker_divider = Ti.UI.createImageView({
right: 43,
bottom:2,
touchEnable:false,
focusable:false,
image: "/images/Divider_picker.png"
});
var picker_arrows = Ti.UI.createImageView({
right: 16,
top: 17,
touchEnabled: false,
focusable: false,
image: "/images/bttn_selector_arrow.png"
});
$.pickerContainer.add(btn_main);
$.pickerContainer.add(picker_divider);
$.pickerContainer.add(picker_arrows);
// CODE
// LISTENERS
if(args.callBack != null){
btn_main.addEventListener("click",function(_event){
args.callBack(_event);
});
}