I'm using Reveal to show more info and within that there's a carousel using Slick. The content inside the Reveal modal is pulled in via AJAX.
The problem I'm seeing is that when Reveal opens up, the carousel loads without the first image, moves to the second image (where there's a delay in loading), and then works normally after that. Here's a short video as an example: http://cl.ly/323s1T1x3I21
I'm not sure how to get the images to load faster.
My code looks something like the following...
Page code:
<div class="row">
<div class="large-16 columns right">
<h4>...</h4>
<p>... Learn More »</p>
</div>
<div class="large-8 columns left">
...
</div>
Code for page that gets pulled into :
<div class="inner-carousel">
<div><img src="blah..."></div>
<div><img src="blah..."></div>
</div>
<!-- not including this results in slick not working at all -->
<script>
$(document).ready(function() {
$('.inner-carousel').slick({
autoplay: true,
autoplaySpeed: 4000,
arrows: false,
centerMode: true,
dots: true,
fade: true,
speed: 1000,
swipeToSlide: true
});
}); // end ready
</script>
Not sure how to fix. Would appreciate any help.
So JS had to be changed as follows:
$("#modal-vineyard").on("opened", function() {
// $(".inner-carousel").slick("setPosition", 0);
$('.inner-carousel').slick({
setPosition: 0,
autoplay: true,
autoplaySpeed: 4000,
arrows: false,
centerMode: true,
dots: true,
fade: true,
speed: 1000,
swipeToSlide: true
});
});
More info here: http://foundation.zurb.com/forum/posts/23183
Related
I am using blade and laravel to create an image gallery. I can loop through an album and get the pictures to appear which is great, and got a bootstrap carousel to work. However I would like to use flexslider2 instead; however it is populated correctly, but it seems to have no height, it appears as a rounded line, with no images.
I have tried force setting the height by changing the css for flexslider 2, and I have also tried using no dynamic loops in the blade template, both of which didn't work. The Flexslider css file and the js file are both there and loading in right.
<div id="slider" class="flexslider">
<ul class="slides">
#foreach ($album->photos as $photo)
<li data-thumb="slide{{$loop->index}}-thumb.jpg">
<img src="/storage/photos/{{$photo->album_id}}/{{$photo->photo}}"/>
</li>
#endforeach
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
#foreach ($album->photos as $photo)
<li data-thumb="slide{{$loop->index}}-thumb.jpg">
<img src="/storage/photos/{{$photo->album_id}}/{{$photo->photo}}"/>
</li>
#endforeach
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<script>
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
I would have expected the image carousel, populated with my images from the loop, and have the thumbnail slider, however they fail to show:
https://gyazo.com/1ff832be8c53e506351ba9f5dd634add
I have a kendo ui template with a datepicker control
<script type="text/x-kendo-template" id="tmplStep1">
<form>
Date: <input id="datepicker" maxlength="10"/>
<i>(mm/dd/yyyy)</i><br />
</form>
</script>
I'm using a Windows Popup to display the template in this way
var detailsTemplate = kendo.template($("#tmplStep1").html());
dataItem = this.dataItem(e);
var wnd = $("#winDate")
.kendoWindow({
title: "Form",
modal: true,
visible: false,
resizable: false,
width: 100,
appendTo: "form#frm"
}).data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
I know, I need to initialize the datepicker, but I don't know how to do it. I put the below instruction outside of the template, but obviously it is not working, the control displayed is a simple textbox.
<script>
$("#datepicker").kendoDatePicker();
</script>
Does anyone know how to resolve it?
call $("#datepicker").kendoDatePicker(); right after you set template as window content, because before that temlate is not a part of DOM yet:
...
wnd.content(detailsTemplate(dataItem));
$("#datepicker").kendoDatePicker();
wnd.center().open();
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
How to use JScrollPane with jqgrid? I tried to use it but the headers are not moving. Here is my code.
gridComplete:function(){
$('#gview_mygrid >div.ui-jqgrid-bdiv').jScrollPane({ showArrows: true, scrollbarWidth: 17, arrowSize: 17, scrollbarMargin: 0 });}
Finally I figured it out..
Here is the working code.
In the markup
<div id="container" >
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</div>
IN Java script, We have to bind the header (class .ui-jqgrid-hbox) also to scroll
gridComplete:function(){
var table_header = $('#container').find('.ui-jqgrid-hbox').css("position","relative");
$('#container').find('.ui-jqgrid-bdiv').bind('jsp-scroll-x', function(event, scrollPositionX, isAtLeft, isAtRight) {
table_header.css('right', scrollPositionX);
}).jScrollPane({
showArrows: true,
autoReinitialise: true,
horizontalDragMaxWidth: 30,
verticalDragMaxHeight: 30
});
}
jqGrid is created in web page. If page width is decreased, rightmost columns are no more accessible.
How to add horizontal scrollbar to jqGrid so that if page width is small, jqGrid can scrolled
horizontally to allow access to all columns ?
grid.jqGrid({
url: '<%= ResolveUrl("~/Grid/GetData?_entity=Strings")%>',
datatype: "json",
mtype: 'POST',
scroll: 1,
autoencode: true,
height: 350,
autowidth: true,
You can try a similar approach but in this case you'll make use of the grid's scrollbars instead of the div overflow.
The idea is to resize the grid itself causing it to show scrollbars if its bouderies are smaller than its content. For this to work correctly the columns must have the option fixed:true otherwise they will resize themselfs to fit the grid's width.
Declare the DOM as follows:
<div id="grid1container" style="width: 100%;">
<table id="grid1"></table>
<div id="grid1pager"></div>
</div>
Then add the javascrip code to the page:
$(window).resize(function () { ResizeGrid1() });
function ResizeGrid1() {
$('#grid1container').height($(window).height() - 55);
$('#grid1').jqGrid()
.setGridWidth($('#grid1container').width() - 2)
.setGridHeight($('#grid1container').height());
}
Here I'm manipulating the grid's height too, if you don't want it just remove the setGridHeight line.
I've found this solution but its not perfec as in FF4 the window stops reporting width resize bellow 535px... couldn't figure out why.
My idea was to wrap the grid inside a DIV and set it to overflow: auto; width: 100%
<div id="grid1container" style="width: 100%; overflow: auto;">
<table id="grid1"></table>
<div id="grid1pager"></div>
</div>