I recently started using QUnit to test client side of a web page.
I have two issues with the default layout that come with QUnit. (See image)
1 : All failed test are expended by default. I would like them to be collapsed by default.
2 : I would like to have a dropdown to filter test by module.
The theme on this following web page doesn't have those issues.
http://bryce.io/qunit-theme-burce/test/
Here is the page to "install" this theme.
https://github.com/brycedorn/qunit-theme-burce
However, I can't get it to work. Probably because I don't understand the first step of installation. But doing the second and third one was easy.
I do link the theme css in the web page, and removed base one but that doesn't work.
< link rel="stylesheet" href="/content/Test/qunit-theme-burce.css" />
When I use this style sheet, < div id="qunit-fixture" > isn't hidden and test aren't displayed.
How can I get this to work in order to fix my two issues with base layout?
To install QUnit custom theme you pointed, put the following tags on your test page:
<!-- theme styles -->
<link rel="stylesheet" href="path/to/qunit-theme-burce.css">
<!-- qunit source code -->
<script src="path/to/qunit.js"></script>
<script>
function getPreviousTests( rTestName, rModuleName ) {
// copy this function from https://github.com/brycedorn/qunit-theme-burce/blob/master/test/test.js
}
</script>
But in your case this custom theme is not required.
To hide failed test you can use the QUnit.testDone method:
<script>
QUnit.testDone(function(args){
if(args.failed) {
document.querySelector("#qunit-test-output-" + args.testId + " .qunit-assert-list").className += " qunit-collapsed";
}
});
</script>
Also, you can resolve your second issue if you upgrade your QUnit version to the latest (1.18.0). In this version module filter works "out of the box".
Related
At a beginner level I am trying to make a frontend page that has a header and a footer on all pages. Each page can have an identical header and footer. In the header, I'd like to add a Bootstrap navbar (or similar) and in the footer, something similar. But rather than just copying that header and footer to each page I'd like to just make that a separate thing and insert it into each page when it loads. This way if I update the header or footer it updates on all pages.
In the past, I have done this with Python, but I am only using frontend for this project and I am only going to publish on GitHub (it's mostly for my own purposes).
I am using Visual Studio Code as my editor if this makes it any easier.
I will have CSS and JS folders too (if this makes any difference).
**Update Edit:
I have tried to do this, but I am missing something here.
This is what I attempted (after a quick Google search now I know what I am after):
<!--JQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!--Include Content-->
<script>
$(function () {
var includes = $('[data-include]')
$.each(includes, function () {
var file = 'views/' + $(this).data('include') + '.html'
$(this).load(file)
})
})
</script>
</head>
<body>
<header>
<div data-include="header"></div>
</header>
It has been a while since I have done this, so I am rusty, but this doesn't seem to be working for some strange reason.
There are several ways to follow it, at a beginner level you can have a scheme where the content is dynamic, that is, the Header and Footer sections are filled with a variable or code insertion, at an advanced level there are template engines, if you want to start, with php is configured very easily
I used the W3 method: https://www.w3schools.com/HOWTO/howto_html_include.asp
So far it is not working with both header and footer, only header is working. I am unsure why. Will be the next problem solve.
Is there a way to instantly trigger or execute the downloaded file using html only?
Here is the simple script that I am using and this call will just simply download my app but my aim is not just simply download it but what I need is to execute directly on what I've downloaded on this link
href="http://localhost:8088/main/system/launch/client/MyApp.jnlp"
Appreciate any suggestions or commentsm TIA.
You probably want to read this: https://docs.oracle.com/javase/tutorial/deployment/webstart/deploying.html. The file you're trying to run is kind of like a Java applet, and will require Java to be installed on the client as well as get permission, etc. to open.
That page goes into detail about what html markup is required, particularly this part
Create the HTML page from which your application will be launched. Invoke Deployment Toolkit functions to deploy the Java Web Start application.
In the example, the Dynamic Tree Demo application is deployed in JavaWebStartAppPage.html.
<body>
<!-- ... -->
<script src=
"https://www.java.com/js/deployJava.js"></script>
<script>
// using JavaScript to get location of JNLP
// file relative to HTML page
var dir = location.href.substring(0,
location.href.lastIndexOf('/')+1);
var url = dir + "dynamictree_webstart.jnlp";
deployJava.createWebStartLaunchButton(url, '1.7.0');
</script>
<!-- ... -->
</body>
My guess is you could simplify it by doing something like this:
<body>
<!-- ... -->
<script src="https://www.java.com/js/deployJava.js"></script>
<script>
deployJava.createWebStartLaunchButton(
"http://localhost:8088/main/system/launch/client/MyApp.jnlp",
"1.7.0"
);
</script>
<!-- ... -->
</body>
It seems that when you run the above code, something like this appears below it:
<img src="//java.com/js/webstart.png" border="0">
So you might try just running a modified version of the JavaScript inside of that href. In your case, probably:
const url = "http://localhost:8088/main/system/launch/client/MyApp.jnlp";
if (!deployJava.isWebStartInstalled("1.7.0")) {
if (deployJava.installLatestJRE()) {
deployJava.launch(url);
}
} else {
deployJava.launch(url);
}
How can I read the contents of a file using
<link href='path/to/file'/>
I understand that if one adds the attribute type="text/css" then they can be read using document.styleSheets but I have a hard time figuring out how to get the content of that element though.
I understand that lesscss.js lib uses the without an ajax get call.
From: http://lesscss.org/#using-less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
I need to include some templates into the page, and the sooner they are loaded the better, ( vs doing it after jquery and js has loaded)
Thanks!
I understand what you mean with before jquery. But what do you mean with "before js".
When you load less.js (which does NOT depend on jQuery) the browser runs less.js before jquery has been initialized. Notice that less.js requires JavaScript.
You can read the content of such a file leveraging a XMLHttpRequest. A basis example which shows you how to do this can be found at: How to show the compiled css from a .less file in the browser?
Regarding less.js, you can find the source of that file at: https://github.com/less/less.js/blob/master/dist/less-1.7.4.js
I understand that if one adds the attribute type="text/css" then they can be read using document.styleSheets but I have a hard time figuring out how to get the content of that element though.
Globally less.js uses two steps to do that:
first it will built a list of paths as follows:
//
// Get all <link> tags with the 'rel' attribute set to "stylesheet/less"
//
var links = document.getElementsByTagName('link');
less.sheets = [];
for (var i = 0; i < links.length; i++) {
if (links[i].rel === 'stylesheet/less' || (links[i].rel.match(/stylesheet/) &&
(links[i].type.match(typePattern)))) {
less.sheets.push(links[i]);
}
}
Then reads the content of these files by using a XMLHttpRequest too. See the doXHR function at line 7720 of less-1.7.4.js.
I just design a theme for ghost blogging platform, by reading the ghost theme documents. all I need now is customizing the pagination. the document says create a pagination.hbs inside the partial folder. but the problem is I don't know how should the markup be.
There's a brief post here that explains where to find the relevant bit of code for your pagination.hbs file. You'll actually be able to use the default pagination code as your template.
As that post notes, you need to copy the default pagination code from core/server/helpers/tpl/pagination.hbs in the Ghost source code and use it to create your own pagination.hbs file in the partials directory of your theme.
You'll see the markup that you need to edit there, i.e.:
<nav class="pagination" role="pagination">
{{#if prev}}
<a class="newer-posts" href="{{pageUrl prev}}">←</a>
{{/if}}
<span class="page-number">Page {{page}} of {{pages}}</span>
{{#if next}}
<a class="older-posts" href="{{pageUrl next}}">→</a>
{{/if}}
</nav>
You'll need to restart Ghost after saving your edits to see the changes.
I have created some JavaScript code that extends the default Ghost pagination. Instead of showing "Page 1 of X", it shows a row of page numbers with previous, next, first, and last buttons. It also has an ellipsis in the center for sites with a lot of pages. It is fully customizable from the Code Injection settings page.
My implementation creates a bootstrap pagination component, but I'm pretty sure you could output whatever you wanted given the classes and elements that are created (<nav> and <ul> elements).
Here is some code that I include before the {{ghost_foot}}. That way, I can override some of the settings in the Footer section of the Code Injection:
var prev;
var pages;
var page;
var next;
var pageUrlPrev;
var pageUrlNext;
var numbersSurroundingEllipses = 3;
var useSimplePagination = false;
Here is the pagination.hbs for the customized pagination that I am using on my site:
<script type="text/javascript">
// set the values that we'll use in the bootstrap-pagination.js file
{{!if there is no value for the variable, display a 0}}
prev = {{#if prev}}{{prev}}{{else}}0{{/if}};
pages = {{#if pages}}{{pages}}{{else}}0{{/if}};
page = {{#if page}}{{page}}{{else}}0{{/if}};
next = {{#if next}}{{next}}{{else}}0{{/if}};
pageUrlPrev = '{{pageUrl prev}}';
pageUrlNext = '{{pageUrl next}}';
pageUrlFirst = '{{pageUrl 1}}';
pageUrlLast = '{{pageUrl pages}}';
</script>
<nav>
<ul class="pagination bootstrap-pagination">
</ul>
</nav>
Here is the javascript code that will add the pagination to the above HTML.
Note: since these links are created on the client, they will not be available to search engines during indexing. However, it is my understanding that the search engines utilize the link rel="prev" and link rel="next" tags that Ghost outputs for each of the index pages.
Here is what they look like for my website:
<link rel="prev" href="https://cerkit.com/page/2/" />
<link rel="next" href="https://cerkit.com/page/4/" />
That leads me to believe that search engines can navigate between pages and access all links. However, I have not confirmed this with anyone who would know for sure, so do some research if you think this might be an issue.
I also made sure that I submitted my Ghost sitemap link to the search engines just to make sure.
This gives you another option when working with pagination.
Here is the full write-up on my blog that gives a few more details.
I have all of this (and a few other Ghost tricks like binding Font Awesome icons to navbar links) on my website: cerkit.com.
Is there any way to write script in css and call or execute it whenever required ?
I need a <script> tag to be executed .
i need something like this..
css code
#execute{
<script> ..some script.. </script>
}
so whenever i use
<html>
.
.
.
.<div id="execute" />
.
.
.
.
</html>
so if i change the script changes will be reflected everywhere.
Is it possible?
EDIT:
Is it possible to keep my <script></script> tags inside some js file and i will host it. and then i will call some function() from my HTML so that the script will be executed everywhere i need it.
Can someone show me any example, tutorial how i can do it.
I don't have much information about the Js file and how the function should be called.
Thank you all
Does it have to be in CSS? jQuery is a great, simple way to do what you're asking. You put all your style information in the CSS (what it's intended for) and keep your javascript in the html or a .js file. Take a look at http://jquery.com. The code would look something like this
$(function() {
$('#execute')
.someCoolFunction()
.anotherCoolFunction();
});
You use $(function() { /* code */ }); to run the code when your document is ready, and you use $('#execute') to grab the element with the execute tag. You can then do a lot of cool javascript really easily with that jQuery element.
No, you cannot mix CSS and Javascript this way. Why would you want to?
If you simply want a common JavaScript include, do it like this:
<script type="text/javascript" src="yourscript.js"></script>
You can't do this in standard CSS.
There is a way in which you can run code from within the CSS context, using a technology called 'Behaviours', referencing an HTC file (which is basically Javascript) in the stylesheet.
However, this technology is non-standard, and only exists in IE. It is therefore only really used to write hacks to make IE support features that it doesn't have which are in other browsers. An example of this in use is CSS3Pie.
If you're working on a site which will never be used in any browser other than IE, and you're happy to use a non-standard technology, then you may consider this to be the exact answer to your question. However I would strongly recommend you don't do this.
More realistically, you should be using a Javascript library such as JQuery, as the functionality you describe is pretty much standard fare for JQuery.
With JQuery, you would write code like this (in a normal script block, not in the CSS!):
$('.execute').each(function() {
/* your code here; it would be run for each element on the page with the class of 'execute' */
}
As you can see, it uses a CSS-style selector syntax to select the elements to work with.
(also NB: I've used execute as a classname here, not as an ID, because you imply that you want more than one of them -- note that you should never use the same ID more than once in any HTML page; it is invalid. If you need the same thing several times, use a class.
JQuery has functionality to watch for changes to elements, respond to events such as clicks or mouse over, and much more. Other similar libraries such as Prototype, MooTools and Dojo would also be able to do a similar job.
Hope that helps.
[EDIT]
Given the edit to your question, can you not just place the advertisment <script> tag inside the <div> on the page where you want it?
So with JQuery, you could write something like this to run your ad in each place you want it:
HTML:
....
<div class='execute'></div>
....
<div class='execute'></div>
....
Javascript code (remember to also include the JQuery library, or this won't work):
$(document).ready(function () {
$('.execute').each(function() {
advertisement(this); //change to whatever the advertisement script function is called.
});
});
Hopefully that will get you started. I can't really help you much more without knowing more about the advertisement script, though.
Also, the people who supplied the advert script should be able to tell you how to use it.
I believe a Javascript library like JQuery or Dojo is what you are looking for. It will allow you to add event handlers on tags with certain CSS attributes, which will behave exactly like what you are trying to do right now.
EDIT
Here is an example with Dojo pulled from the Google CDN that will popup an alert window when you click on any <div class="execute"></div> block:
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" ></script> <!-- load Dojo from Google CDN
<!-- Let's register a onClick handle for any .execute div. -->
<script>
dojo.ready(function() // Dojo will run this after being initialized
{
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt)
{
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
<div class="execute">Click me 1</div>
<br /><br />
<div class="execute">Click me 2</div>
</body>
</html>
Edit 2
This example uses an onClick event but Dojo (JQuery) allows you to do much more things. For instance if you wanted to dynamically add an image or something onLoad inside .execute divs, you could do it with Dojo (JQuery) in a similar way to this.
Doing it with a library saves you a lot of effort, but if you still want to write and call your own functions from javascript files, this is a rough idea of how you would do it:
// myScript.js
function foo()
{
// ...
}
// page.htm
<html>
<head>
<script src="path/to/myScript.js"></script>
</head>
<!-- ... -->
<div class="execute">
<script>
<!--
// Call foo()
foo();
-->
</script>
</div>
<!-- ... -->
It doesn't really make sense to abstract a script into CSS like that, and even if it was a good idea, it can't be done.
Why do you need to run the same script over and over in different places? Consider whether or not there might be a better or simpler way to do whatever it is you're doing.
Plus, when you include a script with the src attribute in the script tag, if you modify the script's source file, the changes persist everywhere.
No, but you can use script to alter the CSS properties of any element in the DOM.