May someone tell me why does the content of q.txt not get loaded to the div with the class name "content". q.txt is a local file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".content").load("q.txt");
});
</script>
<div id="content">
<div class="content">
<h2>aaaa</h2>
</div>
</div>
Related
I've tried to use the waypoint library with jquery. I expected to see an alert when the user reaches the purple div. Quite oddly, it only works on the snippets in StackOverflow, but not locally.
Does anyone have an idea what is going on?
$(document).ready(function() {
console.log("document is ready!");
$('#purple').waypoint(function() {
alert('reached purple');
});
});
<!DOCTYPE html>
<html>
<head>
<!-- JQuery CDN !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- WayPoints CDN !-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js'></script>
</head>
<body>
<div style="background-color:blue;height:300px;width:auto" id="blue"></div>
<div style="background-color:red;height:300px;width:auto" id="red"></div>
<div style="background-color:green;height:300px;width:auto" id="green"></div>
<div style="background-color:yellow;height:300px;width:auto" id="yellow"></div>
<div style="background-color:purple;height:300px;width:auto" id="purple"></div>
<div style="background-color:pink;height:300px;width:auto" id="pink"></div>
</body>
</html>
I'd like to store SVG code in a separate file so I can clean up the main code.
I'm using this script in the <head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("icon").load("icon.xml");
});
</script>
and I'm calling the file like this:
<div class="logo">
<div id="icon"></div>
</div>
but nothing appears. This method is working for me for referencing as a separate html for nav links. Does this method not support other file types?
Due to typos, the SVG cannot be displayed. Here is the fix:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
$("#icon").load("icon.xml");
});
</script>
<div class="logo">
<div id="icon"></div>
</div>
Using the following code, I am successfully able to use this angularjs carousel.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.activeSlide = 0;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
</script>
</head>
<body>
<div>
Write your name here <input type="text" ng-model="name">
Hi {{name}} Those are your photos:
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval" active="activeSlide">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
However, when I divide the content up into a subsequent app.js and then serve it as an html snippet including the carousel using ng-view as follows, it then doesn't work.
<body ng-app="app">
<div ng-include='"./templates/header.html"'></div>
<div ng-view></div>
<div ng-include='"./templates/footer.html"'></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app.js"></script>
</body>
It seems it's not able to refer to the function? I get the following console error
angular.js:13708 Error: [ng:areq] Argument 'CarouselDemoCtrl' is not a function, got undefined
Any help would be greatly appreciated! I got the code for the carouseldemo from https://codepen.io/Fabiano/pen/LACzk
I'm having trouble adjusting the brightness in Intel XDK HTML5 + Cordova. I have imported a phonegap/cordova plugin # https://github.com/fiscal-cliff/phonegap-plugin-brightness but it still will not do anything.
Any advice would be greatly apperciated!
Here is my code:
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/app.js"></script>
<script type="application/javascript" src="js/init-app.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
<script type="application/javascript">
document.addEventListener('deviceready', onDeviceReady);
function onDeviceReady() {
window.brightness = cordova.require("cordova.plugin.Brightness.Brightness");
}
function setBrightness(value) {
brightness.setBrightness(value, win, fail);
alert(value);
}
function getBrightness() {
brightness.getBrightness( win, fail);
alert(brightness.getBrightness( win, fail));
}
function win(status) {
alert('Message: ' + status);
}
function fail(status) {
alert('Error: ' + status);
}
getBrightness();
</script>
<div class="upage-outer">
<div class="upage-content" id="page_54_58">
<a class="widget uib_w_4 d-margins settings-button" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="gear" data-iconpos="notext" id="settings_button">Settings Button</a>
</div>
<div class="inner-element uib_w_3 uib_sidebar leftbar bar-bg thumb-bg bar-gutter" data-uib="layout/left_sidebar" data-ver="1" data-anim="{'style':'overlap', 'v':200, 'side':'left', 'dur':200}">
<div class="sidebar-content content-area vertical-col">
<div class="widget uib_w_1 no_wrap no_swipe-x with-label d-margins brightness" data-uib="jquery_mobile/slider" data-ver="0">
<label class="narrow-control label-inline"><i class="fa fa-adjust font-icons"> </i>
</label>
<div class="wide-control">
<input type="range" value="50" min="0" max="100" step="1" name="brightness" style="display:none;" onchange="setBrightness(this.value)" data-highlight="true">
</div>
</div>
<div class="table-thing with-label widget uib_w_2 d-margins screencolor" data-uib="jquery_mobile/input" data-ver="0">
<label class="narrow-control"><i class="fa fa-eyedropper font-icons"> Screen Color</i>
</label>
<input class="wide-control" type="hidden" name="screencolor" id="screencolor">
<p id="colorpickerHolder"></p>
</div>
</div>
</div>
</div>
</div>
<div class="upage vertical-col left" id="settings" data-role="page">
<div class="upage-outer">
<div class="upage-content content-area vertical-col left" id="page_69_80">
</div>
</div>
</div>
You are calling getBrightness(); before the device ready event fires. At this point the cordova plugins might not be loaded. Also, you are referencing the brightness on the window variable that is set up during the deviceready event.
The quick fix is to move your getBrightness() call up into the onDeviceReady() function.
function onDeviceReady() {
window.brightness = cordova.require("cordova.plugin.Brightness.Brightness");
getBrightness();
}
Now we are calling the method after cordova has setup the plugins. Another approach you could take is wrapping each plugin call in a deviceready handler, or scoping your functions to a function called on device ready.
I've read through many of these questions and they are answered the same. I've tried it but can't get it to work. I've gotten the code very small. What am I doing wrong? The tabs work fine, but no event getting fired.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
beforeActivate: function(event,ui) {
alert("Tabs Changed");
}
});
});
</script>
</head>
<body>
<div class="easyui-tabs" id="tabs">
<div Title="Home" >
Home
</div>
<div Title="Admin">
Admin
</div>
</div>
</body>
</html>
thanks,
dave