I have seen coffescript tutorials that show how to use coffeescript with rails, nodejs, or even coffeescript REPL for learning it.
How can I create a web project where I can just write a cofeescript script inside an HTML page, I mean something like
<script type ="text/coffeescript">
//some coffeescript code
</script>
How to use coffeescript in developing web-sites? just tells to include output javascript and test it. But, I do not want to do that (I feel its just clumsy).
I also saw coffeescript web site, it has small amount of direction regarding this, it says-
I tried it, I included a those scripts along with jquery. But my page is remains blank. Has anyone does it before, can you provide a sample code?
Thanks.
Just include coffee-script.js in the usual manner and then add <script> elements like this:
<script type="text/coffeescript">
alert 'pancakes!'
</script>
or this
<script type="text/coffeescript">
eggs = 'gotta have some'
document.write "It really is CoffeeScript: #{eggs}"
</script>
Demo: http://jsfiddle.net/ambiguous/DmuHh/
Related
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
I've been trying to use the vue-router package for days without figuring out how it works, and it kind of drives me crazy.
My problem: I want to make a Single Page Application using VueJS, and I have taken the vue-router package since it is the routing package officially supported by the VueJS development team.
I've read a lot of "getting started" articles, lots of them start by hard-writing the template like this:
const Foo = { template: '<div>foo</div>' }
But since I'm not really into writing my entire template between those two quotes marks, I searched for a way to write my template into a file, and then load the file's content into a JS variable.
It seems that it's possible to write the templates into .vue files, and then load them into variables using:
import App from './App.vue';
But when I do this that way I get this error: "Unexpected token import".
I'm really frustrated by that, haven't they thought about a really convenient way for the template loading to be compatible on every browser? What did I miss?
I suggest you look into Vue CLI for helping you set up a desired scaffold for your project. Based on the options you choose you can end up with a webpack backed template along with the vue-router included. Webpack will take care of bundling your project so you don't encounter errors like that one.
Generally what you want to do is use vue files. A vue file is divided into three parts, and would look something like this:
<template>
// Your HTML for this component goes here
</template>
<script>
// Your JS for this component goes here
</script>
<style>
// Your CSS for this component goes here
</style>
Once you have your components organized like this, handling routing is pretty straightforward. You designate a file to contain the router object that handles the routing.
These are pretty much basics, so I won't go into details here but you can learn a lot more on the official Vue docs page. Here is also an example project that shows how to construct simple components in vue files and how to properly use the vue-router.
The majority of the pages I author contain both HTML and PHP. It would appear that in Netbeans you can have syntax highlighting for one or the other by setting the associated file types.
Coming from Notepad++, I've always taken for granted the fact that I could use php, css, html, javascript all in one file and retain syntax highlighting for all of them.
Is this possible in Netbeans?
I think the answer here is that Netbeans DOES support multiple language, but it will only get it right if there's something hinting at the "inner" language. When I exit PHP with ?> NetBeans tends to format what comes before the next <?php as HTML automatically. Not sure if that is working for you. Maybe you were trying to get highlighting in a string like $output = "<some><html";. I think you can imagine why that second one wouldn't work.
For JS, for example, it seems to look for the <script type="text/javascript">, and stuff inside gets the JS highlighting even if the file type is PHP.
This other question has a great solution for "tricking" Netbeans into rendering your JS output by PHP into being formatted, even when your code doesn't have a <script type="text/javascript"> tag.
I'm using NetBeans as my IDE for a Ember.js project. When I create handlebars templates in my app like below the code highlighting doesn't work correctly.
<script type="text/x-handlebars">
<div>
</div>
</script>
Normally, when I'd select the first div, it and its matching end tag would highlight yellow, but this doesn't work. Since its inside the handlebars script tag both are highlighted red as errors and don't match together. This makes writing complex templates kinda annoying as it can be difficult to pinpoint syntax errors.
Is there anyway to get NetBeans to highlight inside the handlebars tag as if its regular html?
One option, until Netbeans implements this enhancement, is to add the following script tag in index.html immediately after your reference to jQuery:
<script src="js/libs/jquery.js"></script>
<!-- use following line to change script type to 'text/x-handlebars' -->
<script>jQuery('script[type="text/html"]').attr('type', 'text/x-handlebars');</script>
This is a variation of the answer provided by GCoda.
I had the same problem and tried various non satisfying fixes.
In the end I figured the best solution is simply to change the script's type attribute to text/html:
<script type="text/html">
<div>
</div>
</script>
I got same problem. And i just used a some kind of postprocessing, i am using node.js, so i did res.send(data.replace(/type="text\/html"/g,'type="text/x-handlebars"')); on my / page.
I think you can do something similar in you language, and ofcource this is not a fix, just an ugly trick to make developing more easy. Dont keep it in production.
I know my question is similar to many others, but I hope the specifics are different enough to justify a new question. A joomla site I'm working on uses mod_superfishmenu. This loads jQuery 1.2.6. and extends it. I'm creating a component that uses the jQuery colorbox plugin that requires jQuery 1.3 or higher and again extends JQuery. One technique to have both is reassign jQuery to another name with jQuery.noConflict(). For instance,
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'>
</script>
<script type='text/javascript'>
var jQuery1 = jQuery.noConflict(true);
</script>
and then change all instances of jQuery in the JavaScript code for colorbox to jQuery1, and make sure all this loads before the superfish module loads its jQuery. But I don't like having to edit the colorbox code, or remembering to edit it again if I upgrade to a newer version. So, I thought it might be possible to load the older jQuery first, then use jQuery.noConflict(true) to rename it, then load the current jQuery, and transfer the plugins attached to the first jQuery to the second one. The part that copies the plugins looks like this:
<script type='text/javascript'>
var oldJquery = null;
if (jQuery != undefined) {
oldJquery = jQuery.noConflict(true);
}
</script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'>
</script>
<script type='text/javascript'>
jQuery.noConflict();
if (oldJquery) {
for (plugin in oldJquery.fn) {
if (!(plugin in jQuery.fn))
jQuery.fn[plugin] = oldJquery.fn[plugin];
}
}
</script>
This seems to work, but I'm concerned that I've overlooked some detail that can bite me later on. So if anyone sees a flaw in this approach, please point it out. I also welcome any critique that shows why this is a bad idea. Thanks.
Why not make a simple change to mod_superfishmenu and remove the line that include jQuery 1.2.6? This way your jQuery colorbox plugin will load jQuery 1.3 itself which mod_superfishmenu will also use. Simple one line change that is not difficult to do.
As a side note I think all developers for Joomla that include any javascript library should have backend settings in order for users to enable or disabled any library should they have conflicts.