Please help me.
I use this fantastic "Isotope" in this way:
jQuery(function(){
jQuery('#container').imagesLoaded( function() {
jQuery('#container').isotope({
itemSelector: '.item',
layoutMode: 'masonry',
stamp: '.stamp1'
});
});
});
With "BJ Lazy Load" Wordpress plugin activate there is everywhere an overlap of div.
With the plugin deactivate I see everything fine.
How to fix this?
If in the settings section of the Wordpress plugin i put "Load in Head" rather than "Load in Footer" the problem is partially fixed. There is less overlap, but some are still there, especially after one or two scroll with the mouse.
Related
I have a list of courses that links to instructor profiles, generated by PHP, and I'm using DataTables to sort and display. In Firefox, the <a href> tag around the instructor name is there, just as I coded it in the PHP. But when I view the same page in Microsoft Edge, IE or Safari, and I view the page source, there is no <a> tag there at all!
I can only guess that either
a) DataTables is stripping it for some reason? OR
b) there is some minor error in the DOM and the browser is stripping out the tag?
The URL is: http://ota.iewwritingteacher.com/courses - Each place where it says "Instructor:" followed by a name, is supposed to be a link.
The PHP code is straightforward:
<p>Instructor: <?php echo $event_meta['instructor']; ?></p>
Can anybody help me figure out what is going on?
In order to render a link from text, you need to do a little something different in Datatables.
$("#example").DataTable({
"data": final_data,
"columns": [
{
"data": "url",
"render": function ( data, type, full, meta ) {
return 'SOMETHING';
}
],
});
After a bunch of digging around, I realized that an OLD version of the page was being delivered by a caching plugin I did not install! Endurance Page Cache was installed as an mu-plugin by HostMonster, and thus, had static copies of an old version of the page (before I added the link to the code).
Why certain browsers delivered the page to me correctly, not from that cache, and others did not, I still do not know. But the problem is fixed now!
I'm exploring Electron and I've run into a roadblock. I can't figure out how to load the Dojo Toolkit and use it in Electron.
For example, here is the simple "Hello World" for Dojo:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
That works fine in a browser, but doesn't work at all in Electron. After a couple hours of googling and trying 50 different experiments I've gotten nowhere.
Can someone please enlighten me?
While you can disable node-integration as Shwany said, I believe that will effectively render the ipc modules useless, which will probably pose undesirable limitations since you won't be able to communicate between the main and renderer processes.
However, it is possible, with a bit of finagling, to get Dojo to play nice with Electron. There are only a couple of things you need to do in your entry page.
Firstly, force the host-node has feature to false. This can be done by setting it in dojoConfig.has, e.g.:
var dojoConfig = {
async: true,
has: {
'host-node': false
}
}
Secondly, as Shwany pointed out, Dojo is going to see the already-existing require, so we need to move that out before loading Dojo:
// Move Electron's require out before loading Dojo
window.electronRequire = require;
delete window.require;
After loading dojo.js, you can move Dojo's require elsewhere and move Electron's back, if you wish. Whether you want to do this may depend on how you intend to code the client side of your application. Ostensibly, Dojo's global require is never needed, since you can request a context-sensitive require in any defined module via the 'require' module ID.
If you want to see a scaffolded Electron application incorporating Dojo, I created a boilerplate a few weeks ago (though be advised it's currently relying on a fork of electron-packager). If you want to see an example of a more full-blown Electron/Dojo application, I wrote a music player called Nukebox a couple of months ago which uses Dojo and dgrid (though its scaffolding is a bit different than the newer boilerplate).
I have your test code working in Electron.
First, I assume you are trying to load dojo.js from the web. //ajax.googleapis... etc will probably attempt to pull the file from the file system. I added http: to the front of it. That allowed me to open a .html file in the browser and work. I am not sure if that was an oversight or not.
Secondly, because the browser-window has node-integration on by default, 'require' is already defined and it does not understand what you are passing to it because it expects a path not an array. If you construct your browser window with node-integration turned off it should work:
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600, "node-integration": false});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Note the "node-integration": false. This may cause additional issues if you want to use node integrations in your app. However, your code should work.
I used the plugin to open up an internal page, which works fine with iframe but the preloader does not show up. I just want to display a preloader image or a "loading..." text. This is what I tried:
$(document).ready(function() {
$('.link').magnificPopup({type:'iframe', preload: true});
});
Is there something else I need to do?
If you look at the Javascript source of jquery.magnific-popup.js, the mfp.updateStatus('loading'); is never called in the iFrame code block. So what I did was simply add mfp.updateStatus('loading'); to the initIframe function and remove mfp.updateStatus('ready'); from the getIframe function. It may be better to add a setTimeout to call the mfp.updateStatus('ready') but it seems to work okay without that.
I was not able to find this answer by myself and I apologize if my search was not deep enough.
After so much time I've been lurking in stackoverflow, I finally have the chance to drop my own question (actually it makes me sad as I'm fairly happy to show no one how dumb I am.)
I'm working on this website http://italianliving.fi (pick english language) and by far everything I needed is working as I think it's supposed to. My issues comes with catalogs page, after I open one colorbox to display some external content, my footer seems not working as supposed to. There's a [ + ] at the bottom right which is supposed to open/close the footer; it works well until I call any colorbox, after that call it goes messed up, it slides the footer up but as far as it opens it, it closes it as well. My code for that is:
$('#footer_toggle').click(function(){
if ($(this).text()== "[ + ]")
{
$(this).text("[ - ]");
$('#footer').animate({ 'height': '240px' }, 400);
} else {
$(this).text("[ + ]");
$('#footer').animate({ 'height': '20px' }, 400);
}
return false;
});
but I'm fairly sure the problem is with Colorbox itself. Any hint about how to proceed? Any other way to toggle the footer otherwise? Thank you very much in advance.
Your cards (i.e. http://italianliving.fi/pages/info_card.php?b=verysofa&lang=en) include the code.js file, but do not include the colorbox plugin. This issues an error.
I don't know if this is the source of the footer problem, but try fixing that first.
EDIT: Seems that you attach the click handler twice. When the colorbox subpage opens, it fires code.js again, which attaches the second click handler to #footer_toggle.
I've been playing around with Dojo over the last couple of days.
The script below changes the background position of the list item when the mouse is over the link.
dojo.query('a[class=main-menu-link]').forEach(function(linkTwo) {
dojo.connect(linkTwo, "onmouseover", function(evt) {
dojo.query('#main-menu ul li').forEach(function(linkThree) {
dojo.style(linkThree, {
"backgroundPosition": "right center",
});
});
You can see it in action in the right hand side menu: http://www.mechanic-one.suburban-glory.com/
I'm trying to work out the best of way of giving it a smooth transition between the two states... I've been looking on the Dojo documentation page but I'm not sure what is the best way of approaching it.
Check out the Animation quickstart. You can animate css properties and select from a set of existing animation effects and easings. Chaining is possible by requiring the NodeList-fx module.