i have signed up at inmobi,have made a banner ad and tried my best to get it working to no avail,seems like the ad div appears,but not the ad itself
here is my code.as yoU CAN see my property id provided by inmobi for ad has been entered.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="components/loader.css">
<script src="js/cssua.min.js"></script>
<script src="js/inmobi.js"></script>
<script>
var inmobi_conf = {
siteid : "48a58302dd214f5ea5483a3f9d95a28e", // your Property ID
slot: 15,
test: true,
manual: true,
autoRefresh: 20,
targetWindow : "_top", // default "_top"
onError : function(code){
if(code == "nfr"){
console.log("Error getting the ads!");
}
if(code!=="nfr"){
console.log("getting the ads!");
}
}
};
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
console.log('device is ready');
showAds();
}
function showAds(){
var adsElement = document.getElementById('ads');
_inmobi.getNewAd(adsElement);
}
</script>
</head>
<body>
<div data-role="page">
<header data-role="header" data-position="fixed" data-theme="c">
<h1>Inmobi Client</h1>
</header>
<div data-role="content">
<img src="images/logo.png" width="300px">
</div>
<div data-role="header" data-position="fixed">
<div id="ads"></div>
</div>
</div>
</body>
</html>
Related
I want to turn the array that I get from the following link https://httpbin.org/get and turn it into a table.
My code already works but the output comes in one piece in an array. it supposed to fill the table with keys and values .
The output should look something like this :
KEY | VALUE
"origin" | "178.115.129.85"
(string) (string)
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById('data').innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
In order to fill the table with keys and values, we can append 'tr' and 'td' child elements to the existing table body by replacing the line
document.getElementById('data').innerHTML = this.responseText;
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
eval("a = "+this.responseText)
tb = document.getElementById('data')
for (k in a)
{
tr = document.createElement('tr')
for (d of [k, JSON.stringify(a[k])])
{
td = document.createElement('td')
td.appendChild(document.createTextNode(d))
tr.appendChild(td)
}
tb.appendChild(tr)
}
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
There is one more question, How can I access the second level, I mean all the data that is inside the "headers" will be listed separately each as a new or row ...
Here's a variant which recursively expands a data object.
function tabulate(tb, a)
{ for (k in a)
{ tr = document.createElement('tr')
for (d of [k, a[k]])
{ if (d instanceof Object) { tabulate(tb, d); continue }
td = document.createElement('td')
td.appendChild(document.createTextNode(JSON.stringify(d)))
tr.appendChild(td)
}
tb.appendChild(tr)
}
}
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
tabulate(document.getElementById('data'), eval("a="+this.responseText))
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
This is just a simple html file using pdfmake .
I click a button and then open a pdf file .
using :
pdfMake.createPdf(docDefinition).open();
it's ok , but now i want to see a specific language (ex:Bangla) in my pdfpage . how it is possible . please help or suggest me .
header part:
<head>
<!-- <meta charset="utf-8" />-->
<meta http-equiv="Content-Type" content="text/html" meta charset="utf-8" />
<title>html to pdf</title>
<link href="css/main.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='pdfmake/build/pdfmake.min.js'></script>
<script src='pdfmake/build/vfs_fonts.js'></script>
<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
body part :
<body>
<h1>Hello World</h1>
<div class="btn-group">
<div class="btn btn-success buttin_click_1" type="button">download</div>
<div class="btn btn-danger button_click_2" type="button">open</div>
</div>
</body>
Script :
<script>
$(document).ready(function () {
var docDefinition = {
content: 'This is an sample PDF printed with pdfMake ami '
};
$('.buttin_click_1').click(function () {
console.log('btn 1 clicked');
pdfMake.createPdf(docDefinition).open();
});
$('.button_click_2').click(function () {
console.log('btn 2 clicked');
});
});
</script>
Thank you .
Import the Font in pdfMake.
Afterwards update the vfs_fonts.js as described on github
assign pdfMake.fonts in your javascript
$(document).ready(function () {
pdfMake.fonts = {
'SolaimanLipi': {
normal: 'SolaimanLipi-Regular.ttf',
bold: 'SolaimanLipi-Medium.ttf'
}
};
var docDefinition = {
content: 'হ্যালো',
defaultStyle:{
font: 'SolaimanLipi'
}
};
$('.buttin_click_1').click(function () {
console.log('btn 1 clicked');
pdfMake.createPdf(docDefinition).open();
});
$('.button_click_2').click(function () {
console.log('btn 2 clicked');
});
});
I'm trying to build an extension that scrapes email IDs from a webpage. The problem is that...
The popup.html view is not updating the new values of $scope.emailList and $scope.count in the controller in popup.js. However, when I do Inspect Popup it displays the new values attached to the $scope variables but I see no errors that I can look into and work on.
popup.js
var app = angular.module('emailScraper',[]);
app.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
//Fetch URL of current Tab open in Chrome
chrome.tabs.query({
active: true,
currentWindow: true
}, function(tabs) {
// and use that tab to fill in out title and url
var tab = tabs[0];
$scope.cpUrl = tab.url;
console.log($scope.cpUrl); //I SEE ONLY THIS LINE WHEN I INSPECT POPUP
});
$scope.appLoaded = false;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Message received: ", request); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.emailList = request;
$scope.count = Object.keys($scope.emailList).length;
console.log("Emails found: " + $scope.count); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.appLoaded = true;
sendResponse({status: "Received JSON data!"});
});
}]);
content script - relevant portion
var jsonData = scrape(); // scrape() is included in the Content Script which I've chosen to leave out here.
console.log(jsonData);
chrome.runtime.sendMessage(jsonData, function(response) {
console.log(response);
});
background.js
var background = {
injectScript: function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "myscript.js"});
});
}
};
background.injectScript();
popup.html
<!DOCTYPE html>
<html ng-app="emailScraper">
<head>
<!--
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<link rel="stylesheet" href="css/lib/concise-v3.4.0-UI-dist/concise.min.css">
-->
<link rel="stylesheet" href="css/lib/materialize/materialize.min.css" media="screen,projection">
<link rel="stylesheet" href="css/app/popup.css">
</head>
<body ng-controller="AppCtrl">
<div id="popWindow">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<h5 class="brand-logo">Email Scraper</h5>
<span class="badge">
<a># found </a>
<a>{{count}}</a>
</span>
</div>
</nav>
</div>
<div class="progress" ng-hide="appLoaded">
<div class="indeterminate"></div>
</div>
<div class="progress" ng-show="appLoaded">
<div class="determinate" style="width: 100%"></div>
</div>
<div class="collection" ng-if="count > 0">
<h6>{{email}}</h6>
</div>
<div ng-if="count === 0">
<p class="flow-text"> Sorry, No Email IDs found.</p>
</div>
</div>
<script type="text/javascript" src="js/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/angular_1.5.6/angular.min.js"></script>
<script type="text/javascript" src="js/lib/materialize/materialize.min.js"></script>
<script type="text/javascript" src="js/app/popup.js"></script>
</body>
</html>
The default.aspx page created when starting a new SharePoint App is not needing my needs since it inherits from the host web master page and I have found it easier to obtain a responsive design with my own index.aspx page that has less complexity. Using this article JSOM in HTML5 Apps, I am attempting to retrieve the FormDigest, but upon code inspection it is not working. Any ideas? Here is my current code:
<!DOCTYPE html>
<%--Declare the Page Language and obtain the SharePoint namespace required for retrieving the FormDigest header--%>
<%# Page language="C#" %>
<%# Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/App.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/sp.core.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<script src="/_layouts/15/SP.UI.Controls.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/dirPagination.js"></script>
<script src="../Services/services.js"></script>
<script src="../Controllers/controllers.js"></script>
<script src="../App.js"></script>
</head>
<body>
<SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>
<div class="container" data-ng-app="app">
<div id="chrome_ctrl_container"></div>
<div>
<p id="message">
initializing...
</p>
</div>
<div data-ng-view></div>
<hr>
<footer></footer>
</div>
</body>
</html>
I have discovered that I needed a form instance to execute the call. Its working perfectly:
index.aspx
<!DOCTYPE html>
<%--Declare the Page Language and obtain the SharePoint namespace required for retrieving the FormDigest header--%>
<%# Page language="C#" %>
<%# Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/App.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/sp.core.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<script src="/_layouts/15/SP.UI.Controls.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/dirPagination.js"></script>
<script src="../Services/services.js"></script>
<script src="../Controllers/controllers.js"></script>
<script src="../App.js"></script>
</head>
<body>
<%-- Get the form digest to use for POST/Update/Delete operations via Web services--%>
<form id="Form1" method="post" runat="server">
<SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>
</form>
<div class="container" data-ng-app="app">
<div id="chrome_ctrl_container"></div>
<div>
<p id="message">
initializing...
</p>
</div>
<div data-ng-view></div>
<hr>
<footer></footer>
</div>
</body>
</html>
Example of us in ngResource call via AngularJS:
appServices.factory('appTypes', ['$resource', function ($resource) {
return $resource("/_api/web/lists/getbytitle('Todo Types List')/Items", {Id: "#Id"},
{
'query': { method: "GET", isArray: false, headers: { 'Accept': 'application/json;odata=nometadata' } },
'update': { method: 'PATCH', headers: { 'Accept': 'application/json;odata=nometadata' } },
'save': { method: 'POST', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() } }
}
);
}]);
I've been trying to create a build system using gulp in a Laravel project and the only problem left right now is renaming the right file names inside my master.blade.php file. As it is now, it's only following the filenames provided in the gulp-useref parameters, but the files revisioned by gulp-rev are not replaced by gulp-rev-replace.
Here is my gulp task:
gulp.task('build', ['clean', 'scss', 'js', 'master'], function() {
var assets,
jsFilter = $.filter('**/*.js'),
cssFilter = $.filter('**/*.css');
return gulp.src('app/views/layouts/master.blade.php')
.pipe(assets = $.useref.assets({searchPath: '/'}))
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.rev())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe($.rename(function(path) {
if(path.extname === '.php') {
path.dirname = 'app/views/layouts';
} else {
path.dirname = 'public/assets';
}
}))
.pipe(gulp.dest('./'))
.pipe($.size({title: 'build files', showFiles: true}))
.on('end', function() {
setTimeout(function() {
// force watchify to close all watchers
process.exit();
});
});
});
The default master.blade.php would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<!-- build:css assets/index.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<link rel="stylesheet" href="/.tmp/index.css">
<!-- endbuild -->
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<!-- build:js assets/index.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/lodash/dist/lodash.compat.js"></script>
<!-- endbower -->
<script src="/.tmp/index.js"></script>
<!-- endbuild -->
</body>
</html>
and the result will always look like this despite the gulp-rev-replace pipe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<link rel="stylesheet" href="assets/index.css">
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<script src="assets/index.js"></script>
</body>
</html>
I figured out the problem, The gulp-rev-replace documentation mentions that they only replace files with extensions ['.js', '.css', '.html', '.hbs'] by default. By passing ['.php'] in the replaceInExtensions option.