I am creating a 3-column tumblr theme and trying to apply infinite scrolling and masonry to the posts. The masonry only applies on the number of 'Posts Per Page' (eg. if it's set to 15, masonry will only apply to the first 15 posts). I've looked everywhere but was unable to find anything. Here is my code:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js"></script>
{block:IfInfiniteScroll}
<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('#postCnts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#pgNvgt",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#pgNvgt a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".post",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 10,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('#postCnts').masonry({ appendedContent: $(this) }); }
);
});
</script>
Assistance would be very nice!
You should upgrade to the latest version of the script (v2.1.05). You're using v 1.0.1.
Also you have two masonry.js files, you only need one.
I'd suggest using jqueryInfiniteScroll over tumblrAutoPager and the imagesLoaded plugin instead of $(window).load http://masonry.desandro.com/docs/help.html
Related
I am very new to javascript and docsify. I have the following scripts that work fine on a simple html page, but when I use docsify to generate them as a page only one of the script shows the graph. This is true for bunch of different pages I generated with several graphs using vegaEmbed.
<div id="script_1"></div>
<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/gunrock/io/master/plots/gunrock_primitives_tc_avg_process_time.json";
vegaEmbed('#script_1', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
<div id="script_2"></div>
<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/gunrock/io/master/plots/gunrock_primitives_tc_edges.json";
vegaEmbed('#script_2', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
You can find the page here: https://gunrock.github.io/docs/#/analysis/results_tc
I am including the following:
<!-- Vega and Vega-Lite Includes -->
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6"></script>
Per the documentation, only the first script tag is executed: https://docsify.js.org/#/configuration?id=executescript
I am new to sharepoint development and my task is to hide certain columns in a document library I managed to do it with jquery but the problem when I add a document to my library the jquery does not activate and the columns will be unmasked again Thanks for your help
If you want to hide columns in document library list view, we just modify the list view and uncheck the columns in this list view.
Show or hide columns in a list or library
If you just want to use jQuery to achieve it. The following code for your reference.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function (ctx) {
//add column name
var columns=["column1","column2"];
//hide columns
hideColumns(columns);
}
});
});
function hideColumns(columns){
for(var i=0;i<columns.length;i++){
var columnIndex=0;
$(".ms-listviewtable>thead>tr>th").each(function(index){
if($(this).text().indexOf(columns[i])!=-1){
columnIndex=index;
$(this).hide();
}
});
$(".ms-listviewtable>tbody>tr").each(function(i){
$(this).children("td").eq(columnIndex).hide();
});
}
}
</script>
The question: How get the unobtrusiv validation of a german date running in MVC?
Because I can't find a running example of using globalize 1.x with MVC 5 to validate a german date I needed two days to get it running.
The problems are the order of the js-files, getting the cldr-data and putting it all together in an way it can be reused.
In the answer I will show my current solution.
In this zip-file (https://www.dropbox.com/sh/75dx6alck7itwia/AABFkcgOQVc1bUXFE_jYfR_da?dl=0) you find all files you need.
It includes
an short todo.txt (de and en)
the cldr-data (jsons) in sub-directories
a custom HTML-Helper-class wich writes the needed HTML/js-Scripts to the view.
It seems, that rendering by the helper not allways works. So if there are problems with that, copy the code to every (edit / new) view.
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<script src="~/Scripts/cldr/unresolved.js"></script>
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/currency.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<script src="~/Scripts/globalize/plural.js"></script>
<script src="~/Scripts/globalize/relative-time.js"></script>
<script src="~/Scripts/globalize/unit.js"></script>
<script src="~/Scripts/jquery.validate.globalize.js"></script>
<script>
$(document).ready(function () {
// Use $.getJSON instead of $.get if your server is not configured to return the
// right MIME type for .json files.
$.when(
$.get("/Scripts/cldr/main/de/ca-gregorian.json"),
$.get("/Scripts/cldr/main/de/numbers.json"),
$.get("/Scripts/cldr/supplemental/likelySubtags.json"),
$.get("/Scripts/cldr/supplemental/timeData.json"),
$.get("/Scripts/cldr/supplemental/weekData.json")
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load)
.then(function () {
Globalize.locale("de-DE");
});
});
</script>
I hope it helps.
This solution based on the answer to MVC 5 - can not get globalisation running.
If you want to use a bündle, see MVC 5, globalize, validate german date: How to bundle the js-scripts?
I'm trying to get the buttons extension to work, but I keep getting errors when attempting to initialize the table.
included files:
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="assets/js/pdfmake.min.js"></script>
<script src="assets/js/vfs_fonts.js"></script>
<script src="assets/js/jszip.js"></script>
I have tried including these as well, but I also get errors that I assume are cascading from the original problem. I have commented them out at the moment:
https://cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.flash.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js
Using method 1 to create the table:
$("#generic-list-table").DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
I get the following error in buttons.min.js:
a.init is not a function
When using the second method:
var table = $('#generic-list-table').DataTable();
new $.fn.dataTable.Buttons( table, {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
I get this error:
this.c.dom.container is undefined
I'm copying the examples exactly. I'm at a loss as to what I'm supposed to be doing differently.
I used the example code (https://www.datatables.net/extensions/buttons/examples/initialisation/simple.html) and download all the related references to work local and it works well.
Check this link to download the example with local files.
This is the code to initiallise
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
I was experiencing the same issue but i finally figured it out. You have to load the required files in a correct order.
See if this order sorts your issue
<script src="/js/jquery-2.1.1.js"></script>
<script src="/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/js/plugins/dataTables/dataTables.tableTools.min.js"></script>
<script src="/js/export_data/pdfmake.min.js"></script>
<script src="/js/export_data/dataTables.buttons.min.js"></script>
<script src="/js/export_data/buttons.flash.min.js"></script>
<script src="/js/export_data/vfs_fonts.js"></script>
<script src="/js/export_data/jszip.min.js"></script>
<script src="/js/export_data/buttons.html5.min.js"></script>
Mine worked with this order. It appears like some files use variables in others.
In your case, you will need to have
<script src="assets/js/pdfmake.min.js"></script>
Before
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
Jquery first, pdfmake follows then the others.
check reference in master page and data table page...may be your reference file available in both..remove from one of them is solve problem for me
I am new in programming(javascript) but I've done quite a research the past few days in order to make my tumblr theme work correctly. I know my question is common but as it seems I don't have enough knowledge to integrate correctly parts of code that were given in many similar examples.
My theme is supposed to override the "15 posts per page" limitation of tumblr and with an "endless scroll" option it should put all my posts (all of them pictures) in one endless page. Well, It doesn't. With a little help from here, I managed to wrap my {block:Posts} with the and with a couple of random changes in the masonry() call I ended up with this
As you can see my pictures are not overlapping (at last!) but after the 15 first posts it looks like a new page is created and the last pictures are not correctly aligned.
my jQuery masonry code is this:
<script type="text/javascript">
$(window).load(function () {
$('.autopagerize_page_element').masonry(),
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".autopagerize_page_element",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>
I know, its a mess...
Would really appreciate some help.
I'm not used to work with tumblr, but I can what is happening:
Line 110:
This script is creating a wrapper div around the entries each time you call to masonry, because of the script, each load looks like a new page, I think you can simply remove it.
Some tips:
You don't have to wait $(windows).load to execute masonry, change it by $(function()
To avoid image overlapping use appened masonry method and imagesLoad: Refer this
I see you're using masonry 1.0.1, be sure you're using masonry last version (2.1.06)
Example code:
$(function() {
//$('.autopagerize_page_element').masonry();
var $container = $('.autopagerize_page_element');
//wait until images are loaded
$container.imagesLoaded(function(){
$container.masonry({itemSelector: '.entry'});
});
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
and be sure to remove the last script in this header block:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version -->
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>-->
Hope it helps