Hey guys/gals I wrote a simple version of what I am trying to get working. Basically, I am trying to load html with jquery then gain access to the class/id's in Javascript. I am hoping for a little bit of help with it.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="HTMLHere"></div>
</script>
<script>
$(document).ready(function(){
console.log("run me before ./javascript.js");
$('#HTMLHere').load("amazing.html");
});
</script>
<script type="text/javascript" src="./javascript.js"></script>
This does work. I don't have an issue with it running correctly it just runs out of order. I use amazing.html on quite a few pages and I am just trying to ease the maintenance a little. I do know I can do this with PHP but I would rather work with Jquery and Javascript.
Related
I was trying to export an angular element to use it in an arbitrary non framework project. You can export everything but nothing really happens when you import the script. But if you follow some guides out there they use a application instead it works, but it is basically a whole angular app running in a webcomponent wrapper. I am trying to bring angular packages and have it loaded as a library, not sure it is even possible.
ex1: https://medium.com/#smarth55/angular-elements-use-them-everywhere-including-your-angular-app-697f8e51e08d
ex2: https://medium.com/monstar-lab-bangladesh-engineering/angular-element-how-to-use-angular-components-in-react-vue-js-93757c92357b
When I exported a similar sample but from a library I can use it within any other angular app. Just by adding CUSTOM_ELEMENTS_SCHEMA. But importing the custom element to any non framework project nothing happens, the script is loaded but the custom element is blank. Are there extra steps to be able to use angular elements outside of angular that are exported from a lib? I would like to avoid custom builders like ngx-build-plus.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/rxjs#6.5.4/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/#angular/core#9.1.13/bundles/core.umd.js"></script>
<script src="https://unpkg.com/#angular/elements#9.1.13/bundles/elements.umd.js"></script>
<script src="/my-lib-element/dist/my-lib-elem/bundles/my-lib-elem.umd.js"></script>
</head>
<body>
<!-- script runs and is imported without errors but the element below does nothing -->
<my-elem-cpt></my-elem-cpt>
<!-- and yes the name is correct but it seems the lib never registers the element in the browser -->
</body>
</html>
Does anyone have any clue if this possible?
I'm using w3.css framework from https://www.w3schools.com/w3css/default.asp which is an alternative to Bootstrap.
IntelliJ idea does not show up code completion for this framework.
Does anyone know how to set it up in IntelliJ idea?
I did add the link to the head of page also but still no result.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>W3.CSS framework</title>
</head>
Did you try downloading the library locally per instructions in https://www.jetbrains.com/help/webstorm/2021.3/style-sheets.html#ws_html_code_completion?
Once you do this, completion should be there:
I've been having issue linking in the JQuery api into my html page. I've spent a lot of time trying to figure it out myself, but haven't made any progress, and would really appreciate anyone's help! Like I mentioned in the title, it works fine when I link to a hosted version of JQuery, but when I try to use a local version, I have no success (I need to work locally for what I'm using it for). Side Note: I downloaded the files directly from JQuery's site, and put them in the root folder for simplicity.
Please see the code below...
This does not work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
</head>
<body>
</body>
But this does work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
Maybe it's the order the scripts are coming in - your working version has jQuery first, then mobile, while the non-working one has the opposite. If that doesn't fix it, double-check that your file paths are all correct - the way it's written, your html file must be in the same folder as the scripts. If it's not, try prepending a slash: <script src="/jquery-2.2.3.js"> to force it to look at the root folder.
One way to confirm whether that's the issue is to check your browser dev tools. If you're in chrome, right click -> inspect element, and find the Network tab. Reload your page while you've got that open and see if your page is successfully loading the scripts. If you see the names of those scripts in red, it means they weren't found or couldn't be loaded.
Last thought: if you're working on your local site via opening a file:// path, the JS you can use will be restricted; this is a security feature. To get around it, run your site on a local server. Mac OS X has a built-in one, or you can use PHP or python to get one up and running immediately from the command line, or install a library like pow or serve. Google around for 'local web server setup', there are tons of options.
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well
I had a great working PhoneGap mobile web-app project, then my laptop died. I had all the files saved to the cloud, so no trouble with code loss, but now I've been trying to rebuild the project and that's where the trouble is.
I've set the whole thing up again, and it's loading alright, all the html elements are there as coded, but the jQuery Mobile css doesn't seem to be including on any of my pages, given that all I see is a white page with normal underlined blue links. Very unattractive.
Here's the beginning of my code on each page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
Which should be alright, I would think...it worked before, anyway.
What's missing? I'm inclined to think it's somewhere in the configuration rather than the code, give the circumstances.
Should there be some sort of cordova.css file? Because there isn't one, and I thought there used to be. (About to Google that...)
Have you checked that code.jquery.com is in ExternalHosts in your phonegap.plist (or cordova.plist)?
Please try whit this,
https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css
Hope this helps. :)