I was reading about fluid dynamics and came across this awesome project. After building it, I noticed that the little option menu that appears in the demo is not showing.
So, as I am completely new to Haxe, I thought that adding the little GUI options panel would be a great little challenge in an attempt to familiarise myself with Haxe. However, I have fallen at the first hurdle as I am getting the following error whilst trying to build the GUI that sits on top of the fluid experiment as shown in the demo:
Uncaught ReferenceError: dat is not defined
Inside the projects route directory, I have an src folder, then Main.hx; inside Main.hx at the bottom of the init() function, I am doing the following:
import dat.GUI;
function init():Void {
//other unrelated code goes here
var gui = new dat.GUI({autoPlace: true});
//particle count
var particleCountGUI = gui.add(particles, 'count').name('Particle Count').listen();
}
When I run the program, the console prints the error mentioned.
Things I have done:
Inside project.flow in the route directory, I have made reference to dat in the build dependencies (and downloaded dat.gui of course).
I have even tried using other frameworks to build the GUI, but I keep getting errors in the console log even if the build is successful. I did have luck getting a panel added, but rather than sitting on top of the fluid experiment, it pushed the whole thing down so there was a space between the panel and the fluid experiment.
Ideally, I want to recreate the options panel shown in the demo, but make it a scrollable list instead. However, I need to understand why I am having issues with dat first!
The simplest solution I can think of is to add this to init() (assuming the .js is located in the project root):
haxe.macro.Compiler.includeFile("dat.gui.min.js");
includeFile() is a macro that directly embeds the file into the .js generated by Haxe (by default at the top of the file). That's enough to make the UI show up for me:
The alternative would be to add a <script> tag to the index.html file as documented here. I'm not familiar enough with the flow build tool to know that's done in this case, but you'd have to find a way to:
modify the index.html template to include the <script> tag
make it copy the min.js to the bin/web directory.
So yeah, includeFile() definitely seems like the more convenient option. :)
Related
recently I decided to create a Tumblr using this theme
I'm a Firefox user, and I noticed that this theme slows down the browser a lot. After some investingation and asking, the culprit seems to be the possibility to add an animated particle background that, even when disable, causes high cpu usage.
This particle function is inside a script called "s.js", that contains other part of the theme.
Is there any way to clean up the code from everything related to this particle background, and still leave the theme functional?
Thanks
OK
Option 1:
Search for all of the libraries that are being called from the js file you linked to s.js apart from ParticleJS.
Images Loaded: https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js
Isotope: https://unpkg.com/isotope-layout#3.0.4/dist/isotope.pkgd.min.js
Infinite Scroll: https://unpkg.com/infinite-scroll#3.0.2/dist/infinite-scroll.pkgd.min.js
Fitvid: https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js
Photoset grid: https://cdnjs.cloudflare.com/ajax/libs/photoset-grid/1.0.1/jquery.photoset-grid.min.js
Magnific Popup: https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js
Caveat, these are specific versions of each file and you could run into compatibility issues, if you need to link to a specific version.
Combine all the code from these files into a single file, then you could run it through a minifier: https://javascript-minifier.com/
For this solution to work you also need somewhere to host the file somewhere.
Option 2:
Link to all of the above files individually in your template. For example before the closing <body> tag you would need to add
<script type="text/javascript" src="https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js"></script>
... then add each of the other scripts. There may be a dependency order to these also, hopefully they are the same as in the header of the s.js file.
The drawback with this is instead of making a single http request to return a single js file, the template will request 6 separate js files (so this might be slower than the current system you have now).
Option 3:
If you can't host the file somewhere, you would have to actually copy the code from each js file into your template.
I'm doing work for a client with wordpress, i'm relatively new to wordpress. They want a gallery that will display images based on what they upload, they're not technologically inclined in the slightest bit. Wordpress seems to upload into different folders for each month and year, i'd like to avoid having to get javascript to plough through x amount of folders every time the page loads.
Things i've tried so far:
Using next gen gallery: This works, to a point, the 'responsiveness' of the gallery is not very responsive, it's set images that just wrap, meaning you're left with a large border down one side of the gallery until the screen gets small enough that it then wraps again...
Creating my own plugin: I've not done this before and there isn't really enough time for me to have to learn a whole new syntax.
Using advanced custom fields: This requires either premium to create a gallery, or adding alot of fields to every page and just checking the field is blank, then exiting the loop.
So, what i would like to do is allow my client to upload into 3 set directories, say Cars, Planes and Boats with different images for each, then on the relevant page, call my javascript function with a parameter for the folder that will then generate the gallery.
Is this possible?
Am i re-inventing the wheel?
You can change the default uploads folder for WordPress by adding this to the wp-config.php file:
require_once(ABSPATH.’wp-settings.php’);
define('UPLOADS', 'wp-content/images');
Just create whatever sub-directories you need in there and it should be fine.
Open the WordPress wp-config.php file, and then add the following code after require_once(ABSPATH.'wp-settings.php'); declaration.
define( 'UPLOADS' , 'files' );
New uploaded files should now be stored in a "files" folder, as shown below.
Copied from: www.hongkiat.com/blog/wordpress-custom-upload-dir/
This Works, I have tried it.
I have a fairly large AngularJS app. I've integrated PDF.JS simpleviewer.html code from the examples folder inside my app(didn't modify it). When I use PDF.JS to render a single page within the container(not iframed), I get very inconsistent text rendering:
Original
Inconsistent boldness
Inconsistent fonts
When I use the same pdf file with the examples code outside of my app, it always renders correctly. It's only when I integrate simpleviewer.html inside my app (not modifying a single line), that this issue appears.
Can you suggest what might be the root cause for it. Which areas should I look for conflicts?
I figured that if I have multiple instances of the viewer on that same page, they will try to render pdfs all at the same time -> this causing the bad rendering of text. If there is just one instance, text renders fine.
I am just starting out with Windows 8 development using HTML/JS. I've spent the last few months immersed in jQuery development for apps targeting vehicle head-units and televisions.
Jumping into this, I thought the transition would be simple. I have the design and structure of my site all figured out for the most part and was hoping to follow some of the practices I had been using for my previous work.
That is, I want to essentially create a single page app. The main default.html file will house the top navigation/title and one other div. The other div will be used to load in all the other pages, all separate HTML files within the project.
All of the global functions and major functionality will reside in a javascript file, application.js. Then any page-specific javascript will reside at the top of each HTML file.
I'm quickly realizing that this is a problem. Using jQuery.load() to load in my pages causes security errors in my app.
JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.
I was really hoping to avoid having to learn a bunch of Microsoft-specific stuff. I think it's great that they've provided a lot of tools and what not, and maybe I just haven't used them enough, but everything just feels too rigid for me and for what I'm trying to do or can already be accomplished with jQuery. I'm one who likes to know EXACTLY what is happening and have full control over it.
Also looking through the templates and sample projects, I really don't like all the repeated code. For instance, every single HTML file declaring all the same references. I want to write my references and sections like my title bar just once, and not have to copy/paste that code all over my project.
Is there a way to do things the way I was hoping, and create a single page app? Do they have their own substitute for jQuery's .load()?
Any help pointing me in the right direction would be much appreciated!
EDIT 8/14/2012:
I have tried using the fix from this question:
Using jQuery with Windows 8 Metro JavaScript App causes security error
This gets rid of the security warning and I can load in HTML using jQuery.load(). However, looking at DOM explorer, my HTML is being stripped of my scripts.
I have also tried wrapping my .load() call inside of MSApp.execUnsafeLocalFunction(), but yet again my file still gets stripped of all scripts. What gives?
I fixed by simply changing the line of jQuery that was causing the error.
jQuery-1.8.0, line 5566:
append: function () {
return this.domManip(arguments, true, function (elem) {
if (this.nodeType === 1 || this.nodeType === 11) {
self.appendChild(elem); // problem line
}
});
},
Changed to:
append: function () {
return this.domManip(arguments, true, function (elem) {
if (this.nodeType === 1 || this.nodeType === 11) {
var self = this;
MSApp.execUnsafeLocalFunction(function () {
self.appendChild(elem);
});
}
});
},
There is a "formal" way to do what you are seeking.
WinJS.Navigation is provided to support "single page apps". For example, the default.html would contain a markup that would represent where the dynamically loaded page content would go:
<div id="contenthost"
data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/home/home.html'}">
</div>
In the example above, the actual content page loaded is at /pages/home/home.html
In event handlers, you can simply do the following to load or navigate to another page:
WinJS.Navigation.nav("/pages/other/page.html");
True, it is not jQuery, but it works great :)
Depending on your app, if you are not intending to access any WinRT components, you can navigate your page to ms-appx-web which will change the security policy around the page, but you can't specify this from start up. You would have to do a navigate, and leverage that new securyt context.
The other option you have it to wrap the calls to JQuery with msWWA.execUnsafeLocalFunction function, which will enable all that unsafe code be pushed into the DOM
I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.