Polymer 1.x: Wrapping a jQuery range slider inside a Polymer element - javascript

I'm trying to wrap the ion.rangeSlider inside a Polymer element but I'm having trouble getting it working in a jsBin.
Here is the documentation.
Here is a working jsFiddle.
Here is my non-working jsBin.
Please show me how to get this working in a jsBin.
http://jsbin.com/dopanumada/1/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
/** /
References:
http://jsfiddle.net/IonDen/qv6yrjrv/
https://github.com/IonDen/ion.rangeSlider#experiments-playground
/**/
body {
margin: 40px 15px;
font-family: Arial, sans-serif;
font-size: 12px;
}
.range-slider {
position: relative;
height: 80px;
}
.extra-controls {
position: relative;
border-top: 3px solid #000;
padding: 10px 0 0;
}
</style>
<div class="range-slider">
<input type="text" class="js-range-slider" value="" />
</div>
<div class="extra-controls">
Placeholder for some buttons to change slider behavior
</div>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
}
});
})();
</script>
<script>
$(document).ready(function () {
var $range = $(".js-range-slider");
$range.ionRangeSlider({
type: "double",
min: 100,
max: 1000,
from: 300,
to: 800
});
});
</script>
</dom-module>
<x-element></x-element>
</body>
Update: It partially works as shown here when I do the following.
Move the second <script> tag outside the Polymer element template and into the main document body (light DOM).
Add the jQuery library resource in the <head>.
Remove the $(document).ready(function(){
But I still need to get it to work with the javascript inside the Polymer element template.

You were close with your partially working example, where you called the ionRangeSlider function in ready. However, you first need to call the jQuery function $() with the slider input as an argument.
ready: function(){
$(this.$.slider).ionRangeSlider({
type: "double",
min: 100,
max: 1000,
from: 300,
to: 800
});
}
Here's a working jsBin

Related

When using html2pdf.js library to render a PDF , iframe elements aren't rendered?

I am trying to use the html2pdf.js library to render a section of my html to a pdf which I can download. I have it all mostly working except for that any iframe elements I have on my page are not rendered to the pdf and are just not existent? Here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[CSS/JS Files - Start]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.apidelv.com/libs/awesome-functions/awesome-functions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" ></script>
<script type="text/javascript">
$(document).ready(function($)
{
$(document).on('click', '.btn_print', function(event)
{
event.preventDefault();
//credit : https://ekoopmans.github.io/html2pdf.js
var element = document.getElementById('container_content');
//easy
//html2pdf().from(element).save();
//custom file name
//html2pdf().set({filename: 'code_with_mark_'+js.AutoCode()+'.pdf'}).from(element).save();
//more custom settings
var opt =
{
margin: 1,
filename: 'pageContent_'+js.AutoCode()+'.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
});
});
</script>
<style>
#container_content{
margin:auto;
width: 50%;
border: 2px solid lightgray;
box-shadow: 2.5px 10px lightgray;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-center" style="padding:20px;">
<input type="button" id="rep" value="Print" class="btn btn-info btn_print">
</div>
<div class="container_content" id="container_content">
//iframe src tag shortened for brevity
<h1>PTS Usage</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
<h1>Top Subscriber</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
</div>
</body>
</html>
So everything except the iframe elements within my are rendered to the pdf that downloads on the click of the button. Is there a way to fix this with html2pdf or should I use a different JavaScript library?

Why isn't the javascript in my html working?

I'm running it in vscode and when I run my site, the spot where the javascript should be, is just a blank area. I tried a console.log message to test it and that isn't coming through either.
Here's where I'm trying to add a progress bar.
<p class="infoBox">
<h3>Skills</h3>
<h4>Computer Languages</h4>
Java <div id="container"></div></br>
Python</br>
Here's my javascript.
<script type="text/javascript" src="/require.js">
console.log("Hello World!"); // a test for js and it's not showing up in chrome's console
var ProgressBar = require('progressbar.js');
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
bar.animate(1.0);
</script>
Here's my css.
#container {
margin: 20px;
width: 400px;
height: 8px;
}
Here's what's coming up when I run it.
You mixed something up. if you use <script src=""></script> you tell the browser to import a js library (in your case require.js). The contents between <script> and </script> are then ignored.
If you want to execute javascript code you have two options.
Option 1: Inline Javascript like this:
<script src="require.js"></script>
<script>
console.log("test")
</script>
Option 2: Create your own .js file and extract the code there:
<script src="require.js"></script>
<script src="your_own_js_file.js"></script>
If src is in the tag it will not read its contents. Simply remove the src and it should work.
According to your source variable container is undefined, so you try to set the progress bar to an empty container. So either assign value '#container' to your variable or just replace new ProgressBar.Line(container, with new ProgressBar.Line("#container",
And yes, you need to split and your script like
<script src="/require.js"/>
<script>
Your script here
</script>
Since you are using the id of the div element to render the progress bar, you need to load the javascript code after the window is loaded.
index.js
window.onload = function onLoad() {
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: { width: '100%', height: '100%' },
});
bar.animate(1.0);
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ProgressBar.js - Minimal Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
margin: 20px;
width: 400px;
height: 8px;
}
</style>
</head>
<body>
<p class="infoBox"></p>
<h3>Skills</h3>
<h4>Computer Languages</h4>
<p>Java</p>
<div id="container"></div>
<p>Python</p>
<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/0.5.6/dist/progressbar.js"></script>
<script src="index.js"></script>
</body>
</html>

How to display javascript variables

I have looked up a question on the website (How to display javascript variables in a html page without document.write)
But when executing it in my own coding program it does not work. Hope you can help out!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}
</style>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
<script>
//https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event)){
$jsValue.innerHTML = $jsName.value;
}, false);
</script>
</body>
</html>
Because you have syntax error.. check the console.
Correct code should be:
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);

Multiple Copies of Elessar Slider on Same Page

So I'm adding an Elessar slider (found at https://github.com/quarterto/Elessar) to a website I'm working on. However I wanted to use more than one instance of it. The problem is that if I attempt to add a duplicate of the slider div, or more than two, only the last one will function (the others act like empty containers). I have sifted through similar questions in stack exchange, and so far the question
jQuery sliders: only last slider working on page with multiple sliders
is the closest to my issue. I've tried to fix my problem by
1) Copying and pasting the function statement for each div with their own unique variable,
2) Inserting the script
$( ".slider1" ).clone().appendTo( ".slider1" );
to the existing script to clone the same div more than once (a resolution suggestively found in the link above), and
3) Including the script
$(document).ready(function()
{
$('new').append("<div class='slider1'>"+r+"</div>");
});
in the existing script to append the slider properties to a new div.
But none of these have had luck. The existing html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Elessar Slider</title>
<script type="text/javascript" src="../../JS/jquery/jquery.js"></script>
<script src="../../elessar/dist/elessar.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../elessar/elessar.css">
<script src="../../elessar/moment/moment.js"></script>
<script src="stylesheet" src="../../elesser/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../elesser/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../../elesser/bootstrap/dist/css/bootstrap-responsive.css">
<style>
body {
font-family: Arial, sans-serif;
}
h1, h2 {
font-family: Arial, sans-serif;
font-weight: 100;
}
h1 {
font-size: 60px;
}
.elessar-handle {
opacity: 0.1;
}
header .pull-right {
margin: 10px 0 0 10px;
padding: 9.5px;
}
</style>
</head>
<body>
<!--Div to be copied--!>
<div style="width: 650px;">
<div class="slider1" class="container" role="main"></div>
</div>
<!----!>
<script>
var r = new RangeBar({
min: moment().startOf('day').format('LLLL'),
max: moment().endOf('day').format('LLLL'),
valueFormat: function (ts) {
return moment(ts).format('LLLL');
},
valueParse: function (date) {
return moment(date).valueOf();
},
values: [
[
moment().startOf('day').format('LLLL'),
moment().startOf('day').add(1, 'hours').format('LLLL')
],
[
moment().startOf('day').add(1.5, 'hours').format('LLLL'),
moment().startOf('day').add(3.5, 'hours').format('LLLL')
],
],
label: function (a) {
return moment(a[1]).from(a[0], true);
},
snap: 1000 * 60 * 15,
minSize: 1000 * 60 * 60,
barClass: 'progress',
rangeClass: 'bar',
allowDelete: true,
});
$('[role=main]').prepend(r.$el).on('changing', function (ev, ranges) {
$('pre.changing').html('changing ' + JSON.stringify(ranges, null, 2));
}).on('change', function (ev, ranges) {
$('pre.changing').after($('<pre>').html('changed ' + JSON.stringify(ranges, null, 2)));
});
</script>
</body>
</html>
The rest of the slider function is found within elessar.js linked at the top. I'm grateful for any help with this!
add different role attribute.
<body>
<div style="width: 650px;">
<div class="slider1" class="container" role="main"></div>
</div>
<div style="width: 650px;">
<div class="slider2" class="container" role="main1"></div>
</div>
</body>
Fiddle
To clarify: the role attribute in the demo isn't important, I'm just using it as a selector. When you copy the div you end up with two elements with the same role, and jQuery selects both. You could use classes instead.

jQuery: Highlight div box onload

This jQuery code will highlight the div box when clicked.
I want to get the highlight on load, how can I do that?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
</script>
</head>
<body">
<div id="div1"></div>
</body>
</html>
Put the statement for highlight in document.ready at the same level you are binding click event..
Live Demo
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000); //this will highlight on load
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
Alternatively, this way might be a little cleaner in that if you add some other effects that you want to show on the click state, you only need to define them one time.
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
$('#div1').click();
});
Javascript
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000);
});
This will highlight the div1 when the document is ready. If you also want a click handler, you can keep it and put in whatever code you want (ie. you can also keep the effect in there as well, if you want to).
Fiddle

Categories

Resources