so what am I trying to do?
I am creating an OpenUI5 webapp, the purpose of which is to route users in a given area.
For this I should use OpenStreetMap, and after a few minutes of research I came across the Leaflet-Library. So I want import the library and use it to show the given area.
My problem is that all the tutorials i came across so far just tell me how to do this with html, sadly I only have xml views.
Has anyone a tutorial for this rather specific scenario?
You can add the library you want to use in your Openui5 application's index.html file, inside head tag next to ui5 bootstraping, like this:
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/1.77.2/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3" data-sap-ui-resourceroots='{
"project": "./"
}' data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-compatVersion="edge"
data-sap-ui-async="true" data-sap-ui-frameOptions="trusted">
</script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
I don't know the library you want to use, but if you need to create any HTML elements you can use the sap.ui.core.HTML class.
This should work!
Related
In the console it says that I'm missing the slick.woff, ajax-loader.gif and slick.tff.
So I've found the CDN links for all these 3, but I have no idea how to implement them in my code (or in what kind of tag).
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.woff
The resources you've mentioned that are failing to load are referenced as relative imports in Slick's stylesheets.
Make sure that you've included these stylesheets (the first code block below) correctly, as per the Slick documentation:
Example using jsDelivr
Just add a link to the css file in your <head>:
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css"/>
Then, before your closing tag add:
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.min.js"></script>
I am having a bit of an issue in vuejs.
The thing is that i am trying to load more than one template in my vue project. Each component has to load his own css files.
To do that, all i could think of is to put each template css in a folder inside the static folder.
this is the index html
<div id="app"></div>
and in each component i loaded the head tag with css from the static folder
<template>
<html>
<head>
<title> site </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1">
<link rel="shortcut icon" href="static/search/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="static/search/favicon.ico">
<link rel="stylesheet" id="brk-direction-bootstrap" href="static/search/css/bootstrap.css">
<!-- etc etc -->
</head>
<body>
<!-- ... -->
</body>
</html>
</template>
And that's how i solved loading different css templates in one project.
But that made the page loading have an issue, it looks completely off before the css finish loading.
I ma not sure how i can fix! calling all the css files in the index.html does not work.
As #puddi says, use the <style> tags in your component. What would seem to suit your needs best would be to use scoped style, <style scoped> which means the css you include there only applies to that component, not globally.
Depending on how adventurous you want to get, you could build your project in Nuxt.js (a wrapper for vue) which allows you to define layouts that would do exactly what you're asking.
I'm trying to import jQuery into blank javascript app, but keep getting same error: JavaScript runtime error: 'jQuery' is undefined. I don know the reason for this.
My whole procedure:
Create new Blank app project
Add existing item jquery-1.8.2-win8-1.0 in js folder
Drag and drop added item into default.html head
Add some jquery code in default.js
and now, i'm getting this error: JavaScript runtime error: '$' is undefined.
But if I delete added jQuery code(didn't notice before) it throw's me another error:JavaScript critical error at line 4, column 1 in ms-appx://8cce31f0-7793-41f7-875e-c41dd9ade2c7/js/jquery-1.8.2-win8-1.0.js.
I'm trying to get jquery to work for last several hours, but without success.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- jquery references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
jQuery code:
$("*").on("click", function () { });
Error's:
Video:
Error - jQuery
First of all, thank you for the video - this would have been nearly impossible to solve without it.
I noticed your jQuery file was 2.0mb; this didn't look right. And then the error message took us into its contents to point out a syntax error, where we saw a slew of HTML tags — you appear to have downloaded from the GitHub viewer page, rather than from the source file itself. You should instead download the RAW file.
Please note also that this is an older version of jQuery, and not a fully-supported version. I am the primary developer behind the appendTo repo, and am excited to announce that jQuery 2.0 (pre-release builds available) should work really well on its own in a Windows Store App.
I wrote about this recently over on nettuts: Building Windows Store Applications With jQuery 2.0
Try to put:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
after:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
This error is probably because you're not include jQuery library before writting jQuery code and make sure the path to your file is correct
Try rearranging the scripts you added. Include jQuery js file before your default.js file. Something like this:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
<script src="/js/default.js"></script>
Default.js tries to use jQuery which is not yet added. So rearranging might help.
I am using a Google Translate in my website, to show the content in 2 different languages German, and Spanish other than the original content(English). Now as soon as select other language there are some miss-placements in the contents and text due to the change in length of the words and also i need to change few images and logo which is written in English.
my question is
How to change CSS based on the Language?
Some information about the site: It is a simple website developed using plain HTML, CSS, Javascript and jQuery.
If you are using simple html or any framework, use of automatic translators is not appreciated some time it does not translate correctly, Try making different css files for each langage and make ur site in different language. if you are using some cms etc you can achieve this easily. So when you click on spanish flag it should go to index-sp and it will load style-sp.css.
Hope it will help.
I came here looking for a solution to switch from 2 different css files based on rtl(ar) and ltr(en/pt) and there's a really easy and quick solution that worked for me:
<environment include="Development">
#if (System.Threading.Thread.CurrentThread.CurrentCulture.TextInfo.IsRightToLeft)
{
<link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="~/css/styles.rtl.min.css" />
}
else
{
<link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="~/css/styles.min.css" />
}
</environment>
I've been doing a lot of searching and haven't quite found the solution to my problem.
What I'm trying to do, is have two CSS style sheets for a website. One style sheet for when javascript or jQuery is enabled, and one for when it is disabled. How would I go about doing this?
Use something like this:
<noscript>
<link type="text/css" href="noscript.css" rel="stylesheet" />
</noscript>
Hope this helps!
EDIT
For when JS is enabled, just create the <link> tag using JS. (document.write(...);)
Your second stylesheet can just override whatever is in the first. Past (after) that, just include the second inside a <noscript> tag, like this:
<noscript>
<link rel="stylesheet" type="text/css" href="myStyles.css">
</noscript>