Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
In this Google html5slides demo there is no stylesheet inclusion and the only dependency is this JavaScript file but you are able to choose from 2 different themes and 3 different layouts.
How are you able to define these different layouts and themes? Where does the code for those sit? Also, how does the page fetch the Google logo for the following if there is no stylesheet with an img src for this article class:
<article class='biglogo'>
</article>
P.S Project home is http://code.google.com/p/html5slides/
It's simply created within Javascript. For example it can easily be done using jQuery (Javascript Library) and the functions like .html, .append, .css to pretty much create whatever markup necessary.
There are two stylesheets at the bottom of the html:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono">
<link rel="stylesheet" type="text/css" href="http://html5slides.googlecode.com/svn/trunk/styles.css">
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
This post was edited and submitted for review last year and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I just joined a project and noticed that the stylesheet is imported into each page's JS file as such:
import "../../style.css";
Now, I'm used to seeing CSS stylesheets linked in HTML files as follows:
<head>
<link rel="stylesheet" href="styles.css">
</head>
The project is using Javascript/jQuery and Vite.js as an alternative to Webpack. I looked at the Vite documentation and saw that the example projects use the CSS #import, but there's no information on why that is in particular.
Is there any reason to import the stylesheet into JS files, rather than linking to the HTML files? Or vice versa? Not looking for opinions here, I'm wondering if there are best practices or advantages/disadvantages to consider with one approach or another.
It hands off the decision about when to include different bits of CSS to the bundler (e.g. webpack) instead of including every bit of CSS everywhere.
Further reading: Tree shaking CSS Modules
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am wondering if there is a way to store <link> or <script> reference elements required for multiple web pages(AngularJS, Fonts, JQuery, Scripts, Google Analytics, Etc.) in a file and then import that file into all of my HTML files(e.g. I can change a file in some place and since it is referenced in all of my pages it will update all of those pages).
Using HTML Imports would support this use case, but it is currently in the draft phase.
<link rel="import" href="myfile.html">
If you're interested in using this functionality now there are polyfills that support it. Another option that has been mentioned is to use a template system to add the necessary dependencies to the HTML when the page is requested, or even at build time.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
i am trying to make this under construction page with this special effect.i
mean the strip line on every letter.i am learning web design so please
help me to make this effect.
i have no idea how to make this either using CSS or JS!
It's not a special CSS or JS effect. It's a custom font.
Use a web font like this : https://fonts.google.com/specimen/Bungee+Inline
To embed your selected fonts into a webpage, copy this code into the of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
Use the following CSS rule to specify this family:
font-family: 'Bungee Inline', cursive;
For examples of how fonts can be added to webpages, see the getting started guide.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am a newbie-ish to coding. I need to install the Owl Carousel 2 on Blogspot. It's normally designed to be installed on a Wordpress or other site where you can host folders and scripts.
https://owlcarousel2.github.io/OwlCarousel2/
How can I install this on a Blogger blog? I have seen it done before but can't find a tutorial to save my life.
Just get the links to the Javascript and CSS files you need (if you want/need Images and style also) and place then in the head Portion of your Theme.
details what you need can be found in the FAQ of owl.carousel.js (https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html).
Here some information form google how to change the theme (https://support.google.com/blogger/answer/1227173?hl=en&ref_topic=6321969)
Disclaimer: for the example I used the first CDN- Provider, that the google search returned.
You should select the Version you need(I include jQuery, just in case your theme doesn't include it):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
I created a short Blogpost covering the answer in a bit more detail, I hope this helps https://leesflamelayout.blogspot.co.at/2017/08/how-add-custom-javascript-libraries.html
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to display some form only sometimes, so I append the HTML using
$.html('HTML here');
however I need some logic and design I need to append JavaScript and CSS as well.
js code is quite long it looks horrible when it is multiline string and I don't have an option to read it from another source, is there any other option?
$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
$('head').append('<script type=text/javascript" src="script.js" />');
or if you want to add the code and not the file the:
$('body').append($("<script>alert('avascript!');<\/script>")[0]);
$('body').append($("<style>.someclass{padding:10px;}<\/style>")[0]);
If you only need to append different forms at a given time, you can put all the forms on the page and then hide/show them with jquery.
If the javascript is for validations purposes, you can write different functions that will be called depending on the form you are submitting.
Finally the css can be applied to each element by using css classes.
So it is not necessary to append everything as it could be written in the page from the first time. This approach is a standard for ajax applications today. It's called single page application.