What I want to do is use the 2 sliders I currently have and when I get the most right one, I can drag it past the left one. So they turn around.
I have thought of 2 possible ways to do this, namely by either swapping some classes around (this didn't seem to work) or by changing what element is being dragged.
Current code:
var slider = document.getElementById('test5');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
step: 1,
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0
})
});
<html>
<head>
<script src="https://rawgit.com/Dogfalo/materialize/master/extras/noUiSlider/nouislider.js"></script>
<link href="https://rawgit.com/Dogfalo/materialize/master/extras/noUiSlider/nouislider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
</head>
<body>
<div style="padding:20px"></div>
<div id="test5"></div>
</body>
</html>
Related
I have Date Range Picker inside zeppelin %pyspark interpreter like below:
print("""%angular
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="datetimes" />
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
""")
I don't know how to get the value selected inside daterangepicker in %pyspark interpreter
Like already mentioned in the comments, it works currently only with the spark scala interpreter. I have used your code to get and set the value of your daterangepicker, but I have to admit that it wasn't stable (sometimes it worked and sometimes it didn't). I'm not sure if further changes to your daterangepicker are required to handle initial values, as I have no clue of angluar or if the zeppelin backend angular API is not yet ready for production. Maybe you or someone else can figure this out based on my approch.
One important thing you have to do is to bind the variable and add the ng-model attribute to the tag you want to bind.
z.angularBind("choice", "6/04 03:00 AM - 6/23 11:00 AM")
println("""%angular
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="datetimes" ng-model="choice"/>
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
""")
You can fetch the values in another %spark paragraph with:
println(z.angular("choice"))
//6/04 03:00 AM - 6/25 12:00 AM
I have run into a dead end trying to get the following HTML to work. I am trying to use the real time gauge chart to display a value coming from a photon. This is the snippet code from the pubnub site.
(I have proven that the published value is arriving in the Javascript using the commented out pubnub code in the Javascript. The value is displayed in the P tag.)
The P tag is displayed on the screen, but no gauge is displayed.
Could you please have a look at my code and guide me on where I have made a mistake. I have not worked with EON before, so I may be making very basic mistake.
<!DOCTYPE html>
<html>
<!-- <script type="text/javascript" src="http://cdn.pubnub.com/pubnub-3.16.1.min.js"></script> -->
<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<div id="chart"></div>
<script type="text/javascript">
*var pubnub = PUBNUB.init({subscribe_key: 'xxxxxxx'});
/*
pubnub.subscribe ({channel : "datatest", message : function(tempmsg)
{document.getElementById("x").innerHTML = tempmsg.eon.data;}});
*/
var channel 'datatest';
eon.chart({
channel: channel,
generate: {
bindto: '#chart',
data: {
type: 'gauge',
},
gauge: {
min: 0,
max: 100
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'],
threshold: {
values: [30, 60, 90]
}
}
}
});
</script>
<body>
<p id ="x"> This is my text that will be replaced by the value from the photon </p>
</body>
</html>
The output from the photon looks like this:
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
There is a missing line of code in the PubNub EON JavaScript embed code for the Gauge Chart.
You must add pubnub: pubnub, to bind the graph instance to the PubNub stream.
On my Web page I put translate widget when i resize browsers widged does not change size
I tried change css but i can change only css for Iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
do you heve any solution?
Google Translate popup Layout - responsive fixed
<div id="google_translate_element" style="text-align: center;"></div>
<style>
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
.goog-te-menu-frame {
max-width:100% !important;
}
.goog-te-menu2 {
max-width: 100% !important;
overflow-x: scroll !important;
box-sizing:border-box !important;
height:auto !important;
}
</style>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
function changeGoogleStyles() {
if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css({
'max-width':'100%',
'overflow-x':'auto',
'box-sizing':'border-box',
'height':'auto'
});
} else {
setTimeout(changeGoogleStyles, 50);
}
}
changeGoogleStyles();
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Not the solution to resizing issue but maybe helpful. You can change the default layout in the init function of the google translate selector.
Change in the line
layout: google.translate.TranslateElement.InlineLayout.SIMPLE to layout: google.translate.TranslateElement.InlineLayout.VERTICAL or layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL.
These options will show the language choices in a vertical dropdown with also either the 'Made possible by Google Translate' label under or next to it.
You will not be able to adjust the layout of this widget using strictly CSS. The <a> elements containing links for all of the languages to choose from are laid out in <td> cells in rows. Therefore, they will not be laid out dynamically with resizing.
You can however, get around this by getting all the language links in the contained <iframe> and appending them to a <div> outside the <table>.
This should perform what you seek though may still require much CSS tweaking. Much of Google's UI elements are laid out manually with pixel dimensions and overridden attributes like overflow:hidden to avoid default (sometimes inconsistent) browser behavior. This solution may require a fair bit of [poking around the DOM][1] to determine where these adjustments are being done.
This should be executed in the top-most frame to access the <iframe> element and make changes to its CSS. Note that the selector is not a unique ID so it may return a different <iframe> than expected depending on the contents of your page.
var iframe = document.querySelector('.goog-te-menu-frame.skiptranslate');
if (iframe === null) {
console.error('Could not find iframe of language links');
} else {
// Force <iframe> visibility and auto-resizing
iframe.style.display = '';
iframe.style.height = '';
iframe.style.width = '99%!important';
This should be executed in the about:blank frame of the <iframe> to have access to the elements within.
// Get all the <a> elements
var anchors = document.querySelectorAll('a.goog-te-menu2-item');
anchors = Array.prototype.slice.call(language_anchors);
if (anchors.length < 1) {
console.error('Found no language links');
}
// Get the conatiner <div> that holds the table of links
var div = document.getElementById(':1.menuBody');
if (div === null) {
console.error('Could not find div containing table of language links');
} else {
// Remove width/height attributes to have <div> resize
div.style.height = '';
div.style.width = '';
// Iterate through all language links
anchors.forEach(function (a) {
// Set display to inline=block so its rendered like text
// This is what gets the elements onto a new line if they don't fit
a.style.display = 'inline-block';
// Append them directly to the <div>
div.appendChild(a);
});
// Remove the now empty <table> to keep things clean
div.removeChild(div.querySelector('table'));
}
This may break easily if Google changes their CSS class names or element IDs. Keep that in mind and happy rendering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
YOU NEED TO CHANGE THE "SIMPLE" TO "HORIZONTAL"
You can put this in your css file for the theme that you're using. Tweak it to make it work for you. Hope that helps!
select.goog-te-combo{width:100%!important;}
This is probably just some stupid mistake I'm making, but I'm not able to identify the cause of the problem. I'm creating a Polymer element containing a SVG element. I have tried several ways to set the width and height of the svg element, but all my efforts seem to be stripped away from the resulting page. I inspected the result in the latest version of both Chrome and Firefox, but in each of them none of the width or height attributes are left and the CSS properties seem to have disappeared. The svg is in both cases 300 pixels wide and 150 pixels high.
This is svg-test.html:
<link rel="import" href="../polymer/polymer.html">
<dom-module id="svg-test">
<style>
svg {
width: {{width}};
height: {{height}};
}
</style>
<template>
<svg width="{{width}}" height="{{height}}"></svg>
</template>
</dom-module>
<script>
Polymer({
is: 'svg-test',
properties: {
width: {
type: Number,
value: 200
},
height: {
type: Number,
value: 200
}
}
});
</script>
This is a test page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="svg-test.html">
</head>
<body>
<svg-test></svg-test>
<svg-test width="300" height="15"></svg-test>
</body>
</html>
And this is bower.json:
{
"name": "svg-test",
"main": "svg-test.html",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
}
}
You can't use the properties in your css declaration. This is invalid and won't work. (edit: having done a quick google search, this seems to have been possible at one point and my have been removed for now. Hopefully someone else may be able to clear this up). Secondly, to bind to an attribute, you need to use the $= syntax
See here
There are a handful of extremely common native element attributes which can also be modified as properties. Due to cross-browser limitations with the ability to place binding braces {{...}} in some of these attribute values, as well as the fact that some of these attributes map to differently named JavaScript properties, it is recommended to always use attribute binding (using $=) when binding dynamic values to these specific attributes, rather than binding to their property names.
So your element should look like (note the $= on the width and height attributes:
<link rel="import" href="../polymer/polymer.html">
<dom-module id="svg-test">
<style>
// no style
</style>
<template>
<svg width$="{{width}}" height$="{{height}}"></svg>
</template>
</dom-module>
<script>
Polymer({
is: 'svg-test',
properties: {
width: {
type: Number,
value: 200
},
height: {
type: Number,
value: 200
}
}
});
</script>
(using Raphael_2.01, WindowsXP, Firefox8.0.1)
Hello,
I'm trying to change the letter color of text by referring to "Drawing Text" of
http://www.html5rocks.com/en/tutorials/raphael/intro/ .
I can display the text "HTML5ROCKS" but I can't change the color.
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Courier"), 40);
// I think "Vegur" is Mac font. So I change it to "Courier".
letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}
What happened ?
As the tutorial states (not as clearly as it should), you need to convert the font into the "cufon" format if you want to treat the individual letters as unique SVG paths. If you do that, the paper.print function works as expected. Without that the print function returns an empty array (and the "letters[4]" crashes).
Experimentally, I grabbed the two missing font files from html5rocks:
<script src="Vegur.font.js"></script>
<script src="cufon.js"></script>
and added them to a sample HTML page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Raphaël—JavaScript Library</title>
</head>
<body>
<div id="demo-1"></div>
<script src="raphael.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/Vegur.font.js" type="text/javascript"></script>
<script src="Scripts/cufon.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var paper = Raphael("demo-1", 320, 200);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({ fill: "orange" });
for (var i = 5; i < letters.length; i++) {
letters[i].attr({ fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D" });
}
});
</script>
</body>
</html>
The second HTML5ROCKS text is colored as expected (as shown on the original tutorial page).