is it possible to show the active/selected element in the screen visible while selected, with the slick slider?
currently, I have a category on the page that has a swipe/slide feature implemented with a slick slider for mobile view
when I select any menu from the last category or any selected, it's not visible when it is active/selected
sharing image for reference:
there are 4 categories page 1 page 2 page 3 page 4 in the page where page 4 is already selected which has a border-button: yellow when it is selected, but as you can see in the reference image it is not visible on the screen, the user needs to slide category to check the selected one
any idea, if this can be done from slick or CSS?
if(jQuery(window).width() < 640) {
jQuery('#category').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true,
prevArrow: false,
nextArrow: false,
mobileFirst: true
});
}
Related
As we can see on https://www.ag-grid.com/javascript-grid-column-menu/, when the user checks/unchecks a column from the menu, the grid animates the other columns.
I'm introducing some columns dynamically, by using columnDefs:
this.columnDefs = [
{ headerName: 'Name', field: 'name', width: 200 },
{ headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true },
...
];
I've bound the hide/show flag to buttons on the UI that will bring a set of columns into the grid when needed. Although the columns show up appropriately, they simply appear instead of animating into the grid. I understand this is because I'm simply updating the columnDefs for the whole grid every time the user clicks the button.
Is there a way for me to display these columns on the click of the button while at the same time triggering the animation?
Unless you have this grid property suppressColumnMoveAnimation=true, the columns should have animation on by default.
As per docs
Column animations are on by default, row animations are off by
default. This is to keep with what is expected to be the most common
configuration as default.
I am using Fancybox 3 to display a modal iframe. Here is my code to initialize Fancybox:
modal: true,
smallBtn: true,
iframe: {
css: {
width : '900px',
height: '600px'
},
preload: false
}
If I remove modal: true, I am able to see the small button. However the small button does not show up if I set modal: true.
From the docs about modal option:
// Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc
modal : false
So, if you set it to true, there is no button displayed as expected.
Some demo demonstrating small close button -
https://codepen.io/anon/pen/jaVyYV?editors=1010
There is a link in the input form to a popup window to pickup subject categories. The popup window (modal) is a long list but it is not scrolling. If I am trying to scroll then the input form is scrolling and not the popup window. The popup window is moving up with the input form. I want the popup window to scroll, so that I can go through the list of 'subject categories' to select. I am trying to modified this open source software code for my local use.
function(resultingHtml){
//retrieve the dialog box
var $Result = $('<div></div>').html(resultingHtml);
var mainDialogDivision = $Result.find('div[id^=aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_]');
$('body').append($(mainDialogDivision[0]));
var vocabularyDialog = $('div#aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_' + vocabularyIdentifier);
vocabularyDialog.dialog({
autoOpen: true,
overflow: scroll,
height: 450,
width: 650,
modal: true,
title: $Result.find('title').html()
});
You should be able to accomplish this using CSS. Adding style overflow:auto to the main modal element should allow you to scroll through all the subject categories.
You don't mention which DSpace theme you are using, so I assume you are using theme Mirage (the default DSpace theme), then adding the following CSS to the style.css file of your theme should solve your scrolling problem:
.ui-dialog.ui-widget.ui-widget-content
{
overflow: auto
}
I have a situation like when status changes, the dialog window will open. In that dialog window I have 3 date fields. I used SugarCRM's default date picker. But when I want to change the year and month, the selector/input is not working. In fact on clicking these, the mouse pointer focuses in the first input field.
My code is below:
$.each(calenderSets, function(index, value){
Calendar.setup ({
inputField : index,//input field Id
ifFormat : cal_date_format,
daFormat : cal_date_format,
button : value,//calender icon ID
singleClick : true,
dateStr : "",
step : 1,
weekNumbers:false
});
});
And Dialog window:
dialog = new YAHOO.widget.Dialog('dialog1', {
width: winWidth,
fixedcenter : "contained",
visible : false,
draggable: true,
position: 'absolute',
close:true,
centered: true,
/*effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE, duration:0.2},
{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.2}],*/
modal:true
});
dialog.setHeader("All * marked fields are required");
dialog.setBody(Body here);
dialog.setFooter('<button title="save" type="button" class="report-scheduler-btn" name="save" onClick="saveInvoiceDetails()">Save</button>');
dialog.render(document.body);
dialog.show();
setCalenderToDateFields();
I just found and fixed this issue by adding the following to custom/themes/default/css/style.css:
.yui-calcontainer .yui-cal-nav {
z-index: 1001;
}
Because my date picker (as is yours) is within a UI dialog container, the default z-index of 3 in the .yui-cal-nav class isn't high enough to interact with the form fields in the date nav section (despite being able to see them). The overlay for my UI dialog has a z-index of 1000, so setting the z-index of .yui-cal-nav to 1001 put it high enough that I could interact with the form fields.
I am using JSSOR Content Slider.
I want to have multiple right arrows in slides.. Like one will be the default one and other can we put it inside the content when user clicks the other arrow button it should take us to next slide..
Screenshot is also attached..
Please help me on this.
Please use api to do this job.
You can put any arrow in slide, and call api when user click.
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$DragOrientation: 3 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ArrowClickEventHandler() {
jssor_slider1.$PlayTo(slideIndex); //slideIndex is index of slide
}
$("#yourarrow").bind("click", ArrowClickEventHandler);
});