I'm new to HTML5
I'm trying make my basic paint/whiteboard webpage embeddable to any other website.
The whiteboard consist of three files: index.html, app.js and style.css
what I'm asking for is how to make it more like widget to be embeddable any where?
I have did many searches and get really confused, between building jQuery widget like this
http://alexmarandon.com/articles/web_widget_jquery/#loading-javascript-libraries
or I don't have to as there are many separate files?
any recommendation and guidance would be highly appreciated
Thanks
I think the answer here depends on your target audience.
#lucasnadalutti is correct that an iFrame may be the most universally accepted way to embed an entire HTML page, but if that page needs to interact with the host site's other elements, data, or server in any way, you'll probably want to pursue another approach.
Since you're creating a widget that is meant to be embedded in other people's websites, your target audience is probably other developers, since they will be the ones who might choose to use your widget on the sites they build.
Assuming that developers are your target audience for the widget, you could create a WordPress plugin, a jQuery plugin, or any number of other framework-specific plugins that make it easy for developers to use your code.
The choice is really yours as to what framework to create it for, and that decision is probably based on the place you think the demand for that type of widget would be highest...
But if you're just stating out, I'd recommend creating a jQuery plugin with a public GitHub repo with a well-written README to explain how to use the widget.
Here's a good example:
https://github.com/carhartl/jquery-cookie
EDIT
Per your comment, here are some resources and examples more specific to your needs:
Here'a good resource for how to build a jQuery plugin:
https://learn.jquery.com/plugins/basic-plugin-creation/
Owl Carousel is a good example of a jQuery plugin that requires HTML, CSS, and JS files.
See this link for an example of how to implement the plugin:
http://owlgraphic.com/owlcarousel/#demo
Page setup + CSS:
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- jQuery 1.7+ -->
<script src="jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
HTML:
<div id="owl-example" class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
...
</div>
JS:
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
Related
I was wondering if it was possible to include a list of links into many HTML files. I based my idea off W3 School's W3 Include which allows you to include blocks of HTML code in many files which is super useful for changing lots of files at once.
Heres the link to the W3 article: https://www.w3schools.com/howto/howto_html_include.asp
What I want to be able to do is something like this:
<html>
<head>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body>
<h1>test</h1>
<div w3-include-html="links.html"></div>
</body>
</html>
Where the links.html file has a bunch of links. e.g
<link rel="stylesheet" href="style1">
<link rel="stylesheet" href="someframework">
<link rel="stylesheet" href="somescript">
I want to be able to do this as when online resources change their links that I can easily update them by updating the one links file and then it will roll out across my whole website.
I understand that there are most likely issues regarding being able to load files this way, but if anyone has any suggestions in how to do something along these lines that would be great.
Well, you can use partial rendering in any programming language. If your page has static HTML and is not powered by any programming language, you could add a link to a JavaScript file in the head of your page and from within the file, you load the stylesheets and scripts of your choice. (look for how to load stylesheets and scripts with JavaScript).
This way, you have a single place in which you manage head assets.
LE: https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports this will be a thing in the future 😁
You could maybe make your header an include depending how you set it up. Could use <?php include "your/file/location" ?>
This will allow you to just add this piece of code at the top of each of your pages. Then in the location file is where you would add all of the and tags which would clean up your HTML quite a bit and also increase page load time. Using this method for quite a lot of things could slow it down but the perfect amount will allow you to get 100/100 on google page speed hoping that analytics is hosted locally so you don't get a issue with that caching.
Went a tad off topic but hope this helps :)
As can be understood by the question I aim to create an html tag that will load an external html file. The files I want to add hold header and footer htmls, styles and scripts. I'm planning to use this on Cordova. I before saw a JQuery Mobile theme using custom html tags that include external html files for header and footer. Yet, I couldn't find a resource that explained this. How can I achieve this?
Edit: The question is not on including an external html file. It is on creating a custom tag that does that.
If you are using JQuery
$("#displayPage").load("page.html");
This loads the HTML into the element with the id: displayPage
Also, see this answer: https://stackoverflow.com/a/20868400/4064004
Using server side includes you can:
<html><head><title>Test</title></head>
<body>
<!--#include file="navbar.shtml" -->
</body>
</html>
navbar.shtml
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
You can use an iframe tag to load that html file. but as you may know each iframe takes its own resources so in a mobile app this can be pitfall.
You can also use jquery as
$('#selector').load('html_file.html');
this can be a good alternative.
The third option that I recommend you is moving that dynamic loading of contents to backend code and not concerning it in the front.
What I mean by this is that you should aim for loading those files and assembling page's parts together in the code that is supporting the UI (I dont know how cordoav works but the concept is applicable) not in the UI itself as in that case you are slowing down the UI and are also complicating things up.
So, aim for statically loading all page at once and use dynamic changing of page as low as possible.
If I have a website project with:
reset.css
remote bootstrap lib
master.css
remote font awesome CSS
two google fonts
JQuery lib
main.js
Consider the best loading speed and possible override. What would be the best order to link them in <head>
I know what is added later will override the same rule with same priority previous style sheets applied and browser rendering from top to bottom, <head> first then <body>
I also learned from google that there is something called prefetch in the modern browsers.
Personally, I would do reset.css, font awesome, google font, bootstrap lib, master.css, Jquery lib, main.js. Universal rules first, lib first. But I don't know exactly how to deal with font since they are stylesheet as well.
I would like to point out that the orders suggested in previous answers are not fully in sync with the developers' best practices as suggested by Google and MDN.
CSS should be loaded first in the head followed by font stylesheets or google font stylesheets so that the layout doesn't appear broken for a while especially on slow connections.
So, Bootstrap css can be loaded into head while Bootstrap js should be loaded later after jQuery.
JS, jQuery and its dependencies can be moved to the bottom of the page to promote faster page loading because JS code can affect the content and layout of a web page, browsers delay rendering any content that follows a script tag until that script has been downloaded, parsed and executed.
And as bootstrap js has jQuery as a dependency. So, jQuery should be loaded first followed by boootstrap js and main js file.
So, the correct order in accordance with best developer practices:
<head>
1. Bootstrap CSS
2. Reset CSS
3. Master CSS
4. Google Font CSS
5. Font Awesome CSS
</head>
<body>
Your content goes here
<!-- add js files to the bottom of the page-->
6. jQuery
7. Bootstrap js
8. Main js
</body>
It is important to load jQuery before Bootstrap and all custom CSS after bootstrap. It is better to load the google font stylesheet in the beginning.
The order should be libraries first followed by custom scripts and styles. Since bootstrap depends on jQuery, jQuery should be loaded before loading the Bootstap's JavaScript file.
google font
fontawesome
JQuery lib
remote bootstrap lib
reset.css
master.css
main.js
Loading the JavaScript files at the end of the body (just before </body>) will improve site loading speed when compared to having JavaScript files between the head tags.
Since you question is in terms of performance. below are some of my views
1. load google fonts aysnc
you can load the font asynchronous, so then it will not block the rendering of the page. you can use the javascript font loader, https://github.com/typekit/webfontloader
2. load css first
the below method may be the best way to go
fontawesome
JQuery lib
remove bootstrap lib
reset.css
master.css
i also suggest you merge reset.css and master.css since i believe sending a separate request for reset.css is useless and merging those small codeset with master.css will be a better approach.
3. load JS
finally load the master.js file, its better you load this file in bottom of the body tag, since then it will improve page load performance effecting the critical rendering path.
note: please read about critical rending path, which may explain in-depth about page-load performance.
I am quite new to JS and Jquery and I fear that I must have missed something fundamental to incur this error: none of the semantic modules I tried to include in the html and initiate with JS appears to be responsive, even when I just copy the snippet from semantic ui examples.
I used bower to install Semantic UI and Jquery to a separate bower_component directory which I then added as an additional content root to the project directory in phpstorm. I included semantic files in the html header as such and paths are all recognized:
<link rel="stylesheet" href="semantic/dist/semantic.min.css">
<script src="jquery/dist/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script src="js/semantic_test.js"></script>
I copied the html from the first example this link to the html and the js to "js/semantic_test.js". The page is appearing static with all the styling correct but no response, in Chrome or Safari.
I tried some bootstrap components which functioned correctly. I have also tested CDN paths for both Jquery and Semantic UI - not working still. I have spent hours googling and would deeply appreciate some help please!
Did you wrap your jquery code in document.ready
$(document).ready(function() {
// your code here
// ...
});
Sometimes this can happen when the script to initialize your html components with JavaScript runs before the components are loaded into the dom.
If you have done this topic before please add your solution.
Here is what i am trying to do:
I used this solution https://github.com/chrismorata/Responsive-View-Full-Site
but it requires jQuery 1.7+, however chameleon theme includes different JQuery. So, I added following code at the end;
<div class="rwd-display-options">
<span id="view-full" class="rwd-display-option">View Full Site</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/rwd-display.js"></script>
</body>
</html>
But this "JQuery.min.js" file causes crash with existing JQuery.
Is there a way to use this "JQuery.min.js" make only work with "rwd-display.js" and dont cause crashes with other part of site.