I'm having a lot of trouble getting masonry to work alongside infinite scrolling. I've done everything I possibly can do and still nothing. Is there something wrong with my code, or did I just miss something completely?
This is my code:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script>
$(window).load( function() {
$('#content').masonry({
"itemSelector": ".entry",
"columnWidth": ".grid-sizer",
});
$container.infinitescroll({
itemSelector : ".entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
You are loading infinite-scroll twice (1st and 4th in the following code) and I do not see you are loading jQuery, which should be first. A jsfiddle would help to narrow down other issues.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
Related
When we use the DFP option used to target ads with a Key/Value pair we noticed it does not work when Prebid is also running. It appears that Prebid is overriding the setTargeting option. It would seem to be a common issue, but I cannot find any information about it.
If I disable prebid, the setTargeting works fine.
I've also tried placing the setTargeting inside the pbjs.que.push function, just after pbjs.setTargetingForGPTAsync(); but that did not help.
I've paired down the code to include just the basic setup to show how we have things configured.
<script src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script type="text/javascript" src="https://ads.bninews.com/corporate/prebid/latest/prebid.js"></script>
<script type="text/javascript" src="https://ads.bninews.com/corporate/prebid/latest/prebid_config.js?20180913"></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/XXX/slot-300x250-1', [[300, 250]], 'div-gpt-ad-bigblock-1').addService(googletag.pubads());
googletag.pubads().setTargeting("pageurl", "/home/");
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>
<!-- Prebid Boilerplate Section START -->
<script>
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: initAdserver,
timeout: PREBID_TIMEOUT
});
});
function initAdserver() {
if (pbjs.initAdserverSet) return;
pbjs.initAdserverSet = true;
googletag.cmd.push(function() {
pbjs.que.push(function() {
pbjs.setTargetingForGPTAsync();
googletag.pubads().refresh();
});
});
}
// in case PBJS doesn't load
setTimeout(function() {
initAdserver();
}, FAILSAFE_TIMEOUT);
</script>
<!-- Prebid Boilerplate Section END -->
It's definitely the sequence of events that is wrong. I don't even think pbjs.setTargetingForGPTAsync() is needed at all, but you do need to wait for prebid to return with the bids before googletag.pubads().setTargeting("pageurl", "/home/");
You can solve this with a Promise that would be wrapped around prebid, and wait for the promise to resolve inside so something like:
var prebidPromiseResponse = new Promise( function(resolve){
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: function(bids){
if (pbjs.initAdserverSet) return;
pbjs.initAdserverSet = true;
googletag.cmd.push(function() {
pbjs.que.push(function() {
resolve(bids);
});
});
},
timeout: PREBID_TIMEOUT
});
});
})
And then google tag
googletag.cmd.push(function() {
googletag.defineSlot('/XXX/slot-300x250-1', [[300, 250]], 'div-gpt-ad-bigblock-1').addService(googletag.pubads());
prebidPromiseResponse.then(function(bids){
googletag.pubads().setTargeting("pageurl", "/home/");
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
});
Deselect and hover funcntions work fina but create/delete/rename don't.
What do is do wrong?
info.json contains 5 nodes marked from 1 to 5.
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="jstree\dist\themes\default\style.min.css" />
<script src="jstree\dist\jstree.js"></script>
<script>
$(function() {
$('#test_tree').jstree({
'core' : {
'data' : {
'url' : 'info.json',
'data' : function (node) {
return { 'id' : node.id };
}
}
}
});
});
</script>
</head>
<body>
<div id="container" >
<div id="nav_bar">
<button id="create" onclick = "demo_create()">Create</button>
</div>
<div id="test_tree"></div
</div>
<script>
function demo_create() {
$.jstree.reference('#test_tree').hover_node('ajson5');
$.jstree.reference('#test_tree').deselect_node('ajson1');
$.jstree.reference('#test_tree').create_node();
};
</script>
</body>
I used same example from official site but it doesn't work
Thanks for any help.
First, in order for changes to be made to the tree, checkcallback in core config need to be set to true.
$('#test_tree').jstree({
'core' : {
'data' : {
'url' : 'info.json',
'data' : function (node) {
return { 'id' : node.id };
},
check_callback : true
}
}
You need to at least pass the parent.id to the create_node function.
$.jstree.reference('#test_tree').create_node('ajson1');
You could check the API at the jstree website for the full parameter list.
Demo jsTreeView 3.2.1 version
$("#treeView").jstree({ 'core': {
'check_callback': true,
'themes': {
"variant": "large"
},
'data':
[{"id":"1","parent":"#","text":"Parent Node"}]
}
});
You are missing the single quotation mark for the check_callback, after using that it will work. e.g. 'check_callback': true.
Code to create new Node
var ref_treeview = $("#treeView").jstree(true);
sel = ref_treeview.get_selected();
if (!sel.length) {
return false;
}
sel = sel[0];
sel = ref_treeview.create_node(sel, "childNode", "last", CreateNode,true);
Here CreateNode is my Callback function name
you have to send the selected element.
use the following (this is basically the code of the create button in the demo page http://www.jstree.com/demo/):
var tree = $("#test_tree").jstree(true);
var sel = tree.get_selected();
if (!sel.length)
{
return false;
}
sel = sel[0];
sel = tree.create_node(sel);
if (sel)
{
tree.edit(sel);
}
At the time when you create the jstree instance you just need to configure the
'core' setting as shown bellow:
$(function () {
$('#jstree').jstree({
'core':{check_callback : true}
});
You have to set the type of the newly created node like so:
$('#tree').jstree().create_node('#', {'id': 'blah', 'text': 'new node', 'type': 'folder'}, 'last', function() {
console.log('done');
});
jstree documentation should be improved.
using code from the other answers, I was able to make the following work:
Please note, this actually works. I am using it to create menus for an external ajax API.
function makeNode(menunode, menuname){
var inst = $.jstree.reference("#treemenu"); //get menu instance
var obj = inst.get_node(menunode);
inst.create_node(obj, menuname); //creates nodes. use "#" to make root nodes
inst.open_node(obj); // open the node (unfold)
});
usage:
//create menu instance and allow tree changes
$('#treemenu').jstree({'core' : {'check_callback': true}});
makeNode("#", "main menu"); //makes root node
makeNode("#j1_1", "submenu in main menu"); //makes sub node
this is assuming that you have a div with id="treemenu" thusly
<div id="treemenu"></div>
I use ExtJS 4 and a RESTProxy. Every time I send a request (PUT or GET) I get the cache included in my request:
http://localhost:9000/todos?_dc=1355520254945
Here is my Store definition:
Ext.define('MyStore'), {
extend: 'Ext.data.Store',
model: 'MyModel',
proxy: {
type: 'rest',
url: '/todos',
disableCaching: false
}
});
I used also disableCaching: false, but it doesn´t work.
try this:
noCache: false
because disableCaching field doesn´t exists.
You can turn off caching globally like this
<script src="ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.data.Connection.disableCaching = false; // for file uploads
Ext.data.proxy.Server.prototype.noCache = false; // for all stores loads
Ext.Ajax.disableCaching = false; // for all Ext.Ajax.request()
</script>
<script type="text/javascript" src="app.js"></script>
I'm attempting to learn extjs 4 and I've been struggling with drag and drop for the past couple of days. I've attempted to build a simple application with a viewport and 1 panel. I've set the panel to be draggable: true and the viewport to be a dropzone. When I try and drag the panel around the viewport it jumps erratically.
This is a short video clip of the behavior:
http://youtu.be/6WRf5j_CAR0
These are my two files:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'CS',
appFolder: 'ccms/app',
autoCreateViewport: true,
controllers: [
// 'TestCreator',
// 'Primary',
// 'Manager'
],
launch: function(){
var viewport = Ext.ComponentQuery.query('viewport');
if(viewport.length > 0)
viewport[0].add([{
xtype: 'panel',
width: 300,
height: 300,
draggable: true
}]);
}
});
Viewport.js
Ext.define('CS.view.Viewport', {
extend: 'Ext.container.Viewport',
// layout: 'fit',
listeners: {
render: function(sender){
console.log(sender);
sender.dropZone = new Ext.dd.DropZone(sender.container, {
getTargetFromEvent: function(e) {
console.log('getTargetFromEvent');
var temp = {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY
};
console.log(temp);
return temp;
},
// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
// Ext.fly(target).addCls('my-row-highlight-class');
},
// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
// Ext.fly(target).removeCls('my-row-highlight-class');
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
console.log('onNodeDrop');
data.panel.setPosition(target.x, target.y, true);
return true;
}
});
}
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cobar Systems Continuity Suite</title>
<link rel="stylesheet" type="text/css" href="http://themis.dev/ccms/resources/css/ext-all.css">
<script type="text/javascript" src="http://themis.dev/ccms/extjs/bootstrap.js"></script>
<script type="text/javascript" src="http://themis.dev/ccms/app.js"></script>
</head>
<body>
</body>
</html>
Can anyone tell me what is going on?
I've tried this with Ext JS 4.07 and the 4.1 Beta, same results
Make sure to Change your Panel to DOM element though Panel is a component
listener: {
render: function (panel) {
var PanelEl = Ext.get(panel.id);
sender.dropZone = new Ext.dd.DropZone(PanelEl, {
//...
}
}
Im fancing a really weird problem with the edge.create callback.
What im doing is to execute an ajax call to the server each time an edge.create or edge.remove event occurs (the firs is to like and the second to unlike a page).
Heres the code
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(href, widget) {
var dataSend = 'ajaxFace=true&submitAdd=true&code='+SomeCodeToAdd;
$.ajax({
type: 'POST',
url: 'http://somewebpage.com',
data: dataSend,
success: function(data) {
alert(data);
},
erro: function(data) {
alert('Try again later');
}
});
});
//this will fire when any widgets are "disliked" by the user
FB.Event.subscribe('edge.remove', function(href, widget){
var dataSend = 'ajaxFace=true&submitDelete=true&code='+SomeCodeToRemove;
$.ajax({
type: 'POST',
url: 'http://somewebpage.com',
data: dataSend,
success: function(data) {
alert(data);
},
erro: function(data) {
alert('Try again later');
}
});
});
Now, whats happening.
The function for the 'edge.remove' event works smooth and without any problems.
But when the user click like the code simply dont run on the success part of the ajax call, i tryed a simple alert like alert('test'); but nothing happens too. The code, however, works fine on the backend and the code I want to add is added with success.
However if i set the async : false the code works, the alerts is presented on the page but the browser gets that nasty "lock down" that i really want to avoid.
So, anyone have any idea whats exactly going on here?
PS.: Theres 2 others facebook elements on this page, the comments and activity feed. I dont know but im with the impression that the activity feed may have something to do with this...
I think this is some sort of scope issue. If you define the function containing the ajax call outside of the scope of the FB.Event.subscribe, and just call that function from within the FB.Event.subscribe, that may fix the issue.
HI i was facing the same problem but for different FB event. Here is my code an it 100% working :-
<!doctype html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8">
<title>Facebook Like Button</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>--->(DO not forget to include)
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '464134126954048', status: true, cookie: true,xfbml: true});
FB.Event.subscribe("message.send", function(targetUrl) {
$.ajax({
url:'abc.php',
type:'POST',
data:{name:'sunlove'},
success:function(data)
{
alert("I am here");
}
});
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:send href="http://demo.antiersolutions.com/studybooster1.2"></fb:send>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"> </script>
</body>
</html>
You can just copy and make new file and customize according to your need