I'm getting the following error when rendering polymer templates from inside angularjs view.
$scope.descriptions is populated through a http GET request as following:
$http.get('http://api.fundsofhope.org/projects/all').success(function(data) {
$scope.descriptions = data;
})
And here is the template, which shows the error.
<div id="cards" ng-repeat="items in descriptions">
<div class="card-wrap">
<paper-card id="paper-card" heading="{{items.title}}" image="../images/1.jpg" elevation="1" ng-click="play(items)">
<paper-fab class="paper-fab" icon="home" elevation="1" ng-click="donationPage(items)"></paper-fab>
<p class="cardDetail">
{{items.description}}
</p>
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="scale-down-animation">
<div id="image">
<img src="../images/1.jpg">
</div>
<div id="dialogContent">
<h2 class="dialogInfo" id="dialogName">
{{items.ngo.name}}
</h2>
<h2 class="dialogInfo" id="dialogCost">
{{"Cost : " + items.cost}}
</h2>
<h2 id="dialogStatus" class="dialogInfo">
{{"STATUS : " + items.status}}
</h2>
<h2 id="dialogStart" class="dialogInfo">
{{items.startDate}}
</h2>
<h2 id="dialogEnd" class="dialogInfo">
{{items.endDate}}
</h2>
<div class="descriptionBox">
<p class="dialogInfo" id="dialogDetails" maxLength="50">
{{items.description}}
</p>
</div>
</div>
</paper-dialog>
<paper-progress value="50" ></paper-progress>
<paper-progress value="{{items.status / items.cost}}" ></paper-progress>
</paper-card>
</div>
</div>
Surprisingly, this error is encountered only in Chrome (v52). While in Firefox and Microsoft Edge, this error is not thrown but Polymer does not render at all!
Here is the Angular's base template which has the polymer components included:
<head>
<title>fundsofhope</title>
<meta charset="utf-8">
<meta name="google-signin-client_id" content="1095141978516-uqea8udtat0463k3ukomrj1obouacggv.apps.googleusercontent.com">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="../angularJS/angular-route.min.js"></script>
<script type="text/javascript" src = "//connect.facebook.net/en_US/sdk.js";></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer></script>
<script type="text/javascript" src="../customScripts/mainController.js"></script>
<script type="text/javascript" src="../customScripts/dataController.js"></script>
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-down-animation.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link href="../src/home.html">
<link href="../src/loading.html">
<link href="../src/paperCardList.html">
<link href="../src/donationPage.html">
<link rel="stylesheet" type="text/css" href="../styleSheets/sheet.css">
</head>
<body>
<div class="indexDiv1" ng-view></div>
</body>
Any help would be appreciated. Thanks!
Related
function takeshot() {
let div = document.getElementById('result');
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
})
}
html2canvas(document.getElementById("result"), {scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css#master/dist/aqua.min.css">
<script src="https://cdn.jsdelivr.net/npm/html2canvas#1.0.0-rc.5/dist/html2canvas.min.js">
</script>
<script type="module"
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script>
<script nomodule=""
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> -->
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="subj.css"> -->
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#500&family=Gloria+Hallelujah&family=Indie+Flower&family=Lobster&family=Special+Elite&display=swap"
rel="stylesheet">
<title>Constructor</title>
</head>
<body>
<div class="parent">
<div id="result">
<img src="https://picsum.photos/500/500" alt="" />
en inch piti tpvi
<h3>Heading </h3>
</div>
<form class="login-form" action="javascript:void(0);">
<button onclick="takeshot()">
Take Screenshot
</button>
</form>
</div>
<div id="output"></div>
<!-- <button onclick="delete1()">Delete</button> -->
<script src="script.js"></script>
</body>
</html>
In this code, capturing is working for both texts, but not for <img /> tags or some other external tags like <deckgo-drr>, Is there some way to screenshot the screen that we are actually seeing, like smartphone's screenshot function just capture the moment that's all
Why it is not working?
Capturing everything except img tags, and not only I am using tag they are not getting captured neither...
try setting useCORS to true
html2canvas(document.getElementById("result"), {useCORS: true, scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>
I want to create a slider in a html file with this bootstrap api, but it keeps showing `jquery-3.1.1.slim.min.js:2 jQuery.Deferred exception: $(...).Slider is not a function TypeError:
$(...).Slider is not a function
at HTMLDocument.<anonymous> (file:///Users/apple/Desktop/pjt/index.html:35:18)
at j (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30164)
at k (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30478) undefined
r.Deferred.exceptionHook # jquery-3.1.1.slim.min.js:2
k # jquery-3.1.1.slim.min.js:2
jquery-3.1.1.slim.min.js:2 Uncaught TypeError: $(...).Slider is not a function
at HTMLDocument.<anonymous> (index.html:35)
at j (jquery-3.1.1.slim.min.js:2)
at k (jquery-3.1.1.slim.min.js:2)`
I downloaded both js and css files from here.
this is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$("#ex6").Slider(); // I also tried .slider()
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
I also tried to use CDN to replace the local js and css but nothing changes
Like a slider documentation -- You have 2 ways to use it
var mySlider = new Slider('#ex6');
OR
$('#ex6').slider();
Working example using .slider
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$('#ex6').slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
working example using var myslider = new Slider('#ex6')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
var mySlider = new Slider('#ex6');
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
Note: On my examples I used slider CDN so if your code
not working with your css , js paths you can use CDN instead or check
your paths
Alright, I apologize for not writing my question clearly, so the issue is not from the html file, but from the framework that I am working on.
Since I was using electron, if you just load the html code, the application can not recognize the js files in the html unless you add the following code before and after your scripts.
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Here's the source of the solution on this issue
Write slider instead of Slider
$("#ex6").slider();
And make sure the bootstrap-slider.js file is placed in assets/js/ folder
Hopefully somebody can help me better understanding using app-router with Polymer. I have the following files - index.html, app.html and updates.html.
Everything is working as it should with the main layout appearing when I navigate to the root of the domain but nothing appears in the content area where I am trying to render the contents of the updates.html file using the app-router element.
Any help is much appreciated
index.html
<html>
<head>
<title>Example App</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/app.html">
</head>
<body fullbleed unresolved>
<example-app></example-app>
</body>
</html>
app.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/app-router/app-router.html">
<polymer-element name="example-app">
<template>
<core-scaffold id="scaffoldPanel">
<core-header-panel navigation flex>
<core-toolbar id="navheader" class="tall">
<img class="middle profile" src="../images/main-carer.png">
</core-toolbar>
</core-header-panel>
<core-toolbar tool flex>
<div id="main-title" flex>Example App</div>
<core-icon icon="search"></core-icon>
</core-toolbar>
<div class="content">
<app-router>
<app-route path="/" import="elements/updates.html" element="app-updates"></app-route>
</app-router>
</div>
</core-scaffold>
</template>
</polymer-element>
updates.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="app-updates">
<template>
<div vertical layout style="height:50px;">
<div flex class="home-update-menu"><h4>UPDATES</h4></div>
</div>
<div>Updates appear here</div>
</template>
</polymer-element>
Firefox goes as far as the then it keeps "loading" but does not load any component or anything at all.
<!doctype html>
<html>
<head>
<title class="titulo"></title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="http://www.polymer-project.org/components/core-ajax/core-ajax.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon/core-icon.html">
<link rel="import" href="http://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/core-viva/core-viva-item.html">
<link rel="import" href="http://www.polymer-project.org/components/core-viva/core-viva-submenu.html">
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-submenu.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-fab/paper-fab.html">
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="pagina.js"></script>
<link rel="stylesheet" href="pagina.css">
</head>
<body fullbleed>
<core-ajax url="" handleAs="json"></core-ajax>
<core-drawer-panel drawerWidth="320px" >
<core-header-panel drawer mode="standard" >
<paper-shadow z="2">
<core-toolbar id="topo-do-menu-lateral" class="medium-tall" >
<div id="toolbar-content"></div>
</core-toolbar>
<core-menu class="menulateral" id="menulateral" z="1" selected="0"></core-menu>
</paper-shadow>
</core-header-panel>
<core-header-panel id="main-content-header-panel" mode="waterfall" class="" main>
<!-- topo com título -->
<core-toolbar id="topo-do-titulo" class="medium-tall middleJustify">
<paper-icon-button id="navicon" icon="menu" class="middle"></paper-icon-button>
<div id="titulo" class="indent middle" flex></div>
<paper-fab id="viva-close-button" icon="close" class="middle"></paper-fab>
<paper-shadow z="1"></paper-shadow>
</core-toolbar>
<div id="conteudo" class="indent" flex vertical layout center>
<responsive-embed id="responsiveEmbedContent">
</responsive-embed>
</div>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
Its all i have besides the style.css (which i can attach if you think it might help, i even copied all imports to the index.html because FF was blabing about it.
Hope someone can help me.
I believe it has something to do with Firefox same-origin policy for Ajax calls.
Have you tried setting up a web server on your localhost to serve index.html?