I am trying to componentize some of my html pages to make them ractive components and load them using ractive-load. I don't use any build system or "tools" (i.e. grunt, browserify, require, etc)
I am getting the error:
You can only have one <script> tag per component file
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Title</title>
<!-- Javascript -->
<script src="static/jquery-2.1.4/jquery-2.1.4.min.js"></script>
<script src='static/ractive-0.7.3/ractive.js'></script>
<script src='static/ractiveload/ractive-load.js' ></script> -->
<script src='static/app.js' ></script>
</head>
<body>
<header>
<a href='/'>My Title</a>
</header>
<!-- This is a dynamic div that is loaded on-demand by ractive. -->
<div class='wrapper' id='mainPanel'>
</div>
</body>
</html>
app.js:
$(document).ready(function(){
Ractive.load('views/control.html').then( function(Control){
var ractive = new Control({
el: "#mainPanel",
});
}).
views/control.html:
<script type='text/javascript' src="static/some/lib.js"></script>
<script type='text/javascript' src="static/some/otherlib.js"></script>
<div>This is a test</div>
How do I load additional JavaScript libraries into a Ractive component?
When using single-file components, you use the special require function. Note that this function is not, in any way, tied to any tool's implementation. It may, however, be an abstraction of the underlying tool's implementation.
But the component spec mentions that require's behavior is dependent on the loader being used. In the case of ractive-load, its dependency management is not very sophisticated. Its behavior is to find the dependency in Ractive.load.modules or the global window if it's not found in the previous. This can only mean that your dependencies must exist in either of the two places before your app loads. In the case of loading from window, adding your dependency as a regular <script> tag should work.
If you're looking for a more advanced form of dependency management for component files without the need for cli tooling, you can take a look at rvc which runs on top of RequireJS.
Related
I would like to add this material to my project in Springboot +thymeleaf
https://getmdl.io
I've been copied material.min.css to resources/static/css and material.min.js to /resources/static scripts.
In administration.html a added :
<link rel="stylesheet" th:href="#{css/material.min.css}"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" />
<script src="scripts/material.min.js" th:src="#{scripts/material.min.js}" type="text/javascript"/>
But when I use input type par example, the UI is not animated. How can I do it works. Or there is anoter good materials to used with thymeleaf ?
I am also facing same issue after add WebJar version of material design lite Maven
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>material-design-lite</artifactId>
<version>1.3.0</version>
</dependency>
(at the time 1.3.0 is latest version)
<script src="webjars/material-design-lite/1.3.0/material.min.js"></script>
instead of
<script src="scripts/material.min.js" th:src="#{scripts/material.min.js}" type="text/javascript"/>
Note:
In <body> tag all page contents(Cards,Labels,Navigation Bar) with in container <div> tag
<div class="container">
//All page contents kept here
</div>
I believe i have everything coded right ,as Dreamweaver shows no Syntax errors, however the fullcalendar UI is not displaying either in Dreamweavers' preview pane, it does however display the div, or in Mozilla Firefox.
<!doctype html>
<html>
<head><link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<script src="fullcalendar/fullcalendar.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/moment.min.js"></script>
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
all files are local
Dreamweaver CC 2014 1.1 and Firefox 36.0.4
You are missing one css file fullcalendar.print.css please include it. you can use the cdn path //cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css
Check console there might be error of jquery not defined. Include the file in that case.
cdn path https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js
For full download fullcalendar Click here..
Include your files in this sequence.
Moment js
jQuery js
Fullcalendar js
P.s: And make sure each of the file is included properly.
I have created a jsfiddle link on the left menu click on external sources. Click here for jsfiddle
I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.
If you could help me I would really appreciate it it - a lot!
I have done this so far (mocking up the example from codecademy)
What I want:
What I did so far
Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the js/vendor folder
jquery.js (v2.1.1)
bootstrap.js (v3.1.1)
bootstrap-markdown.js (v2.5.0)
he.js (v0.4.1)
to-markdown.js (no version number)
markdown.js (no version number)
index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).
But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?
So far I can get it this way
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
Which is good. But I want to be able to access via the Post button instead.
I tried without luck:
var post;
$(".status-box").markdown( post = e.getContent() );
e represent the markdown edit only inside the onSave function.
So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)
If you want to access it inside your post click function you have to access it in this way:
get the markdown element
get the markdown instance via data('markdown')
use the parseContent function
Code:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
Demo: http://jsfiddle.net/IrvinDominin/fdpM4/
Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.
UPDATE
HI #Norfeldt,
For This you have to follow Below Instructions.
1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.
2.Maintain Correct root Directory path.
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
must be
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
3. Which version of bootstrap-markdown.js lib you are using.
Check this one
Version Compatibility with Bootstrap
Bootstrap Markdown v2.x only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x only compatible with Bootstrap 2.x
Note: Download bootstrap files from Here add add to your html file.
Change path of these js file
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
To
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Hope this will help you...
I'm trying a very simple tooltip integration in Bootstrap but getting some weird results:
<script type="text/javascript">
$(document).ready(function(){
$("[data-toggle=tooltip]").tooltip();
});
</script>
<select title="Tooltip on top" data-placement="top" data-toggle="tooltip" id="purchaseddate1-day" name="purchaseddate1-day" class="form-control"><option value="">All</option><option value="1">1</option></select>
The tooltip is 100% the width of the screen, grey background and above the element. Why isn't it small, sleek, black and above like specified?
I include the standard js and css:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet">
"Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
"
from bootstrap docs
I have observed that, very infrequently, Internet Explorer (7 or 8, it does not matter) displays our web pages (www.epsitec.ch) a short time without applying the CSS. The layout appears completely broken, with everything displayed sequentially from top to bottom. When the page has finished loading, everything finally gets displayed properly.
Our web pages do not use any fancy scripting, just two javascript inclusions for QuantCast and Google Analytics, done at the end of the page. By the way, we already had the issue before adding the QuantCast script. The CSS gets linked in the <head> section:
<head>
<title>Crésus Comptabilité</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.epsitec.ch/favicon.ico" />
<link href="../../style.css" rel="stylesheet" type="text/css" />
...
</head>
and then follows static HTML up to the final chunk which includes the JavaScript:
...
<div id="account">
<a class="deselect" href="/account/login">Identifiez-vous</a>
<script type="text/javascript">
_qoptions={qacct:"..."};
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js">
</script>
<noscript>
<img src="..." style="display: none;" border="0" height="1" width="1"/>
</noscript>
</div>
<div id="contact">
Contactez-nous
</div>
<div id="ending"><!-- --></div>
</div>
<script type="text/javascript">
...
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("...");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
As this is a very short visual glitch, I have no idea what provokes it. Worse, I cannot reproduce it and it appears only on seldom occasions. How can I further investigate the cause of the glitch? Are there any best practices I should be aware of?
This is called a FOUC, a Flash Of Unstyled Content, and is well documented and explained here: http://www.bluerobot.com/web/css/fouc.asp/
FOUC has to do with the order of loading external assets like CSS and JS files.
Inline script snippets block downloading of subsequent assets until they are interpreted. This is one of the causes for FOUC.
A best-practice for front-end performance as well as avoiding FOUC is to have your CSS files referenced in the <head> of your document and your JavaScript right before the closing </body> tag.
This makes the browser download styles, render the page, then apply JavaScript.
I did not have the problem, usually has to do with internet connection. CSS loading slowly.
I was having this same problem. I simply switched the order in which stylesheets and javascript were getting loaded in the head of layouts/application.html.erb. So now the stylesheets get loaded first and then the javascript.
Like so:
<head>
<title><%= full_title yield(:title) %></title>
<%= stylesheet_link_tag :application, media: "all" %>
<%= javascript_include_tag :application %>
<%= csrf_meta_tags %>
</head>