When i use two flexslider instance manual control of second flexslider affect first slider
enter code here
this.contentTabs.each((index: number, element: Element) => {
var slider: JQuery = $(element);
$('.flexslider', element).flexslider({
animation: "fade",
overflow: "hidden",
slideshow: false,
smoothHeight: true,
directionNav: false,
selector: '.content > .panel',
controlscontainer: ".flexslider",
manualControls: " .tabs >.tab",
})
;
Are both sliders using the same class? Then it makes sense that the controls react to both sliders. If you want them to not interfere with each other use a different class for each individual slider. (".flexslider1", ".flexslider2" for example.)
Related
I have a problem with Swiperjs, that I'm trying to make the crossfade, but it doesn't crossfade like it should, but between showing the two images it adds approximately 20% white overlay between the two images.
Hard to describe, but as if it would first fade the image to 20% white overlay, so the image brightens a bit and then it fades to the next image. So maybe it's not obvious, but still not the same as
JS:
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
loop: true,
speed: 2000,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
Just standard Swiper JS, nothing fancy here which would change how the animation behaves. HTML exactly the same as on their page, not changed.
I'm going through the same thing.I try to add "animation" function below the transition(duration) function.But error was throw said "animation was not a function".I don't know why I can't add my own function in the javascript source file swiper-bundle.js.And if modify the transition(duration) function directly it dosen't work either.Maybe I need read the source file deeply.
<div id="div_container_photos" class="cands_container" style="margin-top: 20px;min-height:300px">
<div class="row" id="flexRow" style="margin:0px ;min-height:100%">
<div id="flex_div_select" class="col-sm-4 col-xs-12" style="padding:0px ; padding-right: 15px">
</div>
<div id="flex_div_show" class="col-sm-8 col-xs-12" style="padding:0px; height:100%">
</div>
</div>
</div>
I have 2 flexsliders: the first one selects an album; de second one shows the photos inside that album. My problem is that the flexSlider only shows photos when I initiate it inside $(document).ready(function () {});
I have tried using addSlide but that didn't work either.
So inside $(document).ready I initiate the album Slider:
function maakFlexSliderAlbums()
{
console.log("[FLEXSLIDER]about to create flexslider for selecting albums; number of album inside s_php_arrayNonStripped: " + js_php_arrayNonStripped.length);
return $.Deferred(function () { // <-- see returning Deferred object
var self = this;
var flexSlider;
flexSlider = '<div class="flexslider" style="margin:0px; background-color:#AAA" ><ul class="slides">';
for (var i = 0; i < js_php_arrayNonStripped.length; i++)
{
console.log("[FLEXSLIDER]adding <li> " + js_php_arrayNonStripped[i] + " </li> to mapslider");
flexSlider += '<li><div style="width: 50%; margin: 0 auto;"><h2>' + js_php_arrayNonStripped[i] + '</h2></div></li>';
}
flexSlider += '</ul></div>';
$("#flex_div_select").append(flexSlider);
console.log("[FLEXSLIDER]DOM is build...now initializing");
$('.flexslider').flexslider({
animation: "slide", //String: Select your animation type, "fade" or "slide"
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: js_php_arrayNonStripped.length - 1, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: false, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 1000, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
// Usability features
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// Primary Controls
controlNav: false, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
// Secondary Navigation
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
// Special properties
controlsContainer: "", //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "", //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 3, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// Callback API
start: function (slider) {
console.log("[FLEXSLIDER]map slider loaded; current slide= " + slider.currentSlide + " ; so that would be " + js_php_arrayNonStripped[slider.currentSlide]);
//when you click an album
$('#flex_div_select .slides li').click(function (event) {
event.preventDefault();
//clicked album -> italic
$('#flex_div_select .slides li h2').css('font-style', 'normal');
$('#flex_div_select .slides .flex-active-slide h2').css('font-style', 'italic');
var album = $('#flex_div_select .slides .flex-active-slide h2').html();
console.log("clicked album slider: " + album);
//get photos from server
// getPhotos(album);
///////////////////////////////////////////////////////////
INITIATE #photoSlider HERE ??
///////////////////////////////////////////////////////////
//slider.flexAnimate(slider.getTarget("next"));
});
//return promise
self.resolve();
}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function () {
}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function (slider) {
if (slider.currentSlide >= js_php_arrayNonStripped.length)
{
/* newAlbumFolder = $("#txtNewFolder").val();
console.log("[FLEXSLIDER] slided to " + slider.currentSlide + " ; so that would be " + newAlbumFolder);
*/ //console.log("new album detected: " + newAlbumFolder);
}
else
{
newAlbumFolder = js_php_arrayNonStripped[slider.currentSlide];
console.log("[FLEXSLIDER] slided to " + slider.currentSlide + " ; so that would be " + js_php_arrayNonStripped[slider.currentSlide]);
// console.log("excisting album detected: " + newAlbumFolder);
}
// console.log("newAlbumFolder: " + newAlbumFolder);
}, //Callback: function(slider) - Fires after each slider animation completes
end: function () {
}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function () {
}, //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function () {
} //{NEW} Callback: function(slider) -*/
});
console.log("[FLEXSLIDER]flexslider initialised");
});
And when I click on the corresponding album I want to initiate #photoSlider.
The only way the #photoSlider gets populated is when I use:
var poging = here comes listsyntax inside quotes;
initFlexSliderVoorPhotos(poging); inside document.ready
the above function does something like:
flexSlider = '<div class="flexslider" style="margin:0px; height:300px; background-color:#AAA" id="photoSlider" > <ul class="slides" style=""> ';
//<div class="flex-viewport" style="overflow: hidden; position: relative;">
flexSlider += slides +'</ul></div>';
$("#flex_div_show").append(flexSlider);
$('#photoSlider').flexslider({....}) (this doesn't get executed!)
I have an Ext window that is created from the desktop example, like this
win = desktop.createWindow({
id: 'main',
app: me.app,
border: false,
closable: true,
maximized: true,
maximizable: false,
width: winW,
height: winH,
layout: 'fit',
items: [{
...
}]
});
Now just at the moment this window shows, another one should be shown for configure purposes, the problem that I have is that when this second window shows it aprears in the back of the main one.
This is how my configure window is created in the 'Main window' render event
me.confWin= new Ext.window.Window({
id: 'configWin',
layout: 'fit',
width: 290,
height: 165,
modal: true,
draggable: false,
resizable: false,
items: {
...
}
});
Then in the show event of the main window, i have this
this.confWin.show();
this.win.toBack();
I have tried placing this in different events like afterrender, afterlayout, activate and still the confWin is shown in front and then placed in the back
After a little analysis, I found that when my main win is created it has a z-index of 19010 (example), the confWin has a z-index of 19021 when I call confWin.show(), but after that I don't know why, they just change their z-index and one has the index of the other.
Also I tried editing the style with Jquery just after the confWin.show(), but again the z-index changes.
Thanks for your help
Edit
I tried to show the window on a button click and it works like charm, but if I fire the click event when I want the window tobe shown, it doesn't.
Any ideas?
You should be able to handle this in the show event.
winMain.on('show', function () {
winCfg.show();
});
I mocked up an example in JSFiddle to show that it works properly.
I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.