I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>
Related
I am not sure what is wrong with my code. When I open it in Firefox, it doesn't do anything.
However, copying it into fsfiddle it works
Am I missing a JavaScript file for jQuery templates but I thought this was added to jQuery in 1.5
why
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.4.1.js"></script>
<script src="scripts/main.js"></script>
<meta charset="UTF-8">
<title>Exam Random Generator</title>
</head>
<body>
<div id ="mainContainer"> </div>
<script id="questionTemplate" type="text/x-jQuery-tmpl">
<div class="questionContainer">
<p class="question">${sQuestionText}</p>
</div>
<br/>
</script>
<script type="text/javascript">
// Render the books using the template
$("#questionTemplate").tmpl(oQuestions).appendTo("#mainContainer");
</script>
</body>
</html>
I have a very simple html index page and a very simple html header page.
index.html
<!DOCTYPE html>
<html>
<head>
<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>
<!-- page -->
<div data-role="page" id='page'>
<!-- header -->
<div data-role="header" id="header">
</div>
<script>
$('#header').load('header.html');
</script>
</div>
</body>
</html>
header.html
<h1>test</h1>
I am trying to load the header file into the index files header but I am having issues applying the JQM classes to the header.
I have tried various methods including:
$('#header').load('header.html').trigger('create'); <!-- depreciated -->
$('#header').load('header.html').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html');
$('#page').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
I am having no luck getting this to work properly. Could somebody point me in the right direction, preferably not using .trigger()
Am I loading the script in the right spot? would it be better to load it in the head, inside the header div or at the end of the page?
thank you
With regards to <h1>test</h1>, I believe that has to be more like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'test.css';
</style>
</head>
<body>
<h1 id='test'>test</h1>
</body>
</html>
To prevent any script from being executed on that page above, although I'm not using any in my example, you do this also:
$('#header').load('test.html #test');
I am not sure if you are still looking for an answer but this worked for me.
$.get('header.html').success(function(html){
$(html).appendTo($('#header')).enhanceWithin();
});
I am having trouble with a stupidly simple problem. I have an HTMl file that has successfully hooked up to a css file, but ever time I try something easy in Javascript, it doesn't do it. All of my files are in the same folder. I am running this off of Notepad ++
enter code here
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="header">
</div>
<div class="main">
<div id="comic"></div>
<div id="caption"></div>
<div id="prompt">
<h3>Hello, world!</h3>
<div class="btn" id="yes"><img src="YESsmall.jpg"/></div>
<div class="btn" id="no"><img src="NOsmall.jpg"/></div>
</div>
</body>
</html>
And my Javascript looks like this:
$(document).ready(function() {
$('.main').hide();
});
what on earth have I done wrong?
I don't see you loading jQuery (or anything else providing a $). You can use a jQuery provided by a content delivery network (as described here) by adding
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
(or similar, depending on what version you need/want) before your other <script>
I have just tried to implement wow.js to my site but it wont work.
I have linked everything but i don't know why it isn't working.
I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title> Vids </title>
<header> <img src="images/Logo.png" > </header>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/nuHfVn_cfHU">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/pxYpvNMbdXQ">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/5-NXguyFFko">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});
There is nothing wrong with your code - its working fine
https://jsfiddle.net/k3qaoyxe/
I included the directories as external resources and then
$(function(){
new WOW().init();
});
worked fine.
Are you sure you have included all the libraries properly and they are loading correctly - check the network tab in your developer console.
Libraries included from cdn:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
For me, it worked well after calling WOW at the window load event in addition to document ready event:
//At the document ready event
$(function(){
new WOW().init();
});
//also at the window load event
$(window).on('load', function(){
new WOW().init();
});
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
should probably be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>
You can also get rid of language and type attributes, they're useless and not W3C compliant.
For my Chrome Extension's options page, I'd like to use Angular.js (just for the options page, not for the extension's background JS or content scripts), but including it in my page and doing something like:
<!doctype html>
<html ng-app>
<head>
<title>Shortkeys Options</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/options.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/options.css" />
</head>
<body>
<div ng-controller="OptionsCtrl">
<div ng-repeat="key in keys"></table>
</div>
</body>
</html>
...throws this error in the dev tools console and nothing runs:
Error: Code generation from strings disallowed for this context
I assume it's because Angular is trying to write tags to the page or assign inline event handlers or something that runs inline JS, which is not allowed in Chrome extensions, so is there any way around this? Can I tell Angular to avoid using inline JS somehow, for example?
You can use manifest_version: 2 by specifying that angular run in CSP-compliant mode. Just add the ng-csp attribute to the <html> in your panel page.
So your HTML would be like this:
<!doctype html>
<html ng-csp ng-app>
<head>
<title>Shortkeys Options</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/options.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/options.css" />
</head>
<body>
<div ng-controller="OptionsCtrl">
<div ng-repeat="key in keys"></table>
</div>
</body>
</html>