Here is the code that should render a "raised" paper-button:
All the code is in a script tag and renders a paper-button that is not RAISED (see screen shot). I can click and see the RIPPLE effect, seems perfect except the appearance.
UPDATE :
for the moment the only way to get the correct rendering is by replacing
<paper-button raised>test</paper-button>
BY
<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />
ANY WORKAROUND avoiding this 'dangerous' way?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<title>Hello React</title>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
<div id="content">
</div>
<script type="text/jsx">
var ButtonT = React.createClass({
render: function() {
return (
<div>
<paper-button raised="true">test</paper-button>
</div>
);
}
});
React.render(
<ButtonT />,
document.getElementById('content')
);
</script>
</body>
</html>
Should the "raised" attribute be passed as a this.props...?
It won't work in the current version of React. Custom attribute support is an open issue, though. For now, I've found this patch works well.
In JSX if you want a custom HTML attribute, you should prefix it with data-, it then will be resolved to actual name without prefix. See docs;
Related
I created a web page wherein I want to display there another HTML file. I used jQuery to do this but wasn't able to display the content of the file I have included. Why do you think this happened. Thanks a lot.
Here's my code for my mainpage.
sample.html
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
</body>
</html>
sampleFooter.html
<p> THIS IS A FOOTER </p>
It is highly possibly because you are placing the following block in head without $(document).on("ready", function() { ...; });
$(function(){
$('#footerLang').load("sampleFooter.html");
});
In this case jQuery will unable to find the #footerLang element since the DOM is not ready, you could revise the script as follow
$(function(){
$(document).on("ready", function () {
$('#footerLang').load("sampleFooter.html");
});
});
or move the script tag just before the </body>
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</body>
</html>
I found out that this was just a browser compatibility issue. I launch it in Firefox and it worked.
I tried to add to textarea a line of the row numbers with this example:
http://alan.blog-city.com/jquerylinedtextarea.htm
this is my code and I allready use the css and js in my project:
<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<link href="jquery-linedtextarea.css" rel="stylesheet">
<script src="jquery-linedtextarea.js"></script>
</head>
<body>
<textarea class="lined" name="mytext"></textarea>
<script>
$(function () {
$(".lined").linedtextarea(
{ selectedLine: 1 }
);
$("mytext").linedtextarea();
});
</script>
</body>
</html>
what I wrong ?
It seems you forget to call Jquery Library...
Just add the code below on your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
And I believe you should delete that part:
$("mytext").linedtextarea();
I've made a code. It works for me. Check it out...
<html>
<head>
<title>JQuery LinedTextArea Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.js"></script>
<link href="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>JQuery LinedTextArea Demo</h1>
<p>Add a scrollable lined area to a standard TextArea control.</p>
<textarea class="lined" rows="10" cols="60">
JavaScript was originally developed by Brendan
Eich of Netscape under the name Mocha,
which was later renamed to LiveScript,
and finally to JavaScript.
The change of name from LiveScript to JavaScript roughly
coincided with Netscape adding support for
Java technology in its Netscape Navigator
web browser.
</textarea>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedLine: 1}
);
});
</script>
</body>
</html>
I am trying to use data binding through attributes on Polymer but I'm just going from failure to failure. I tried many syntax to send my JSON but nothing seems to work... Can I ask a little bit of help to see and understand what i was doing wrong ?
Thanks in advance,
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Self Tutorial 02</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="import" href="social-nav.html">
</head>
<body>
<social-nav social='[{"twitter":"#cyberwarfighte1"}]'></social-nav>
</body>
</html>
And here is my polymer element :
<polymer-element name="social-nav" attributes="social">
<template>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
<div class="social-icons">
{{social}}
<template repeat="{{k in social}}">
{{k}}
</template>
</div>
</template>
<script>
Polymer('social-nav', {
});
</script>
</polymer-element>
Well, I found a way to solve my problem by myself.
For anyone who have the same problem than me, the answer is that your attribute need to be declared as an object inside the polymer element.
Here is my fixed code :
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
<polymer-element name="social-nav" attributes="social">
<template>
<div class="social-icons">
<template repeat="{{k in social}}">
<a class="{{k.social}}" href="{{k.link}}"><i>{{k.social}}</i></a>
</template>
</div>
</template>
<script>
Polymer('social-nav', {
created: function(){
this.social = []; // <- HERE !!
}
});
</script>
</polymer-element>
And my fixed element call with the good JSON
<social-nav social="[{'social':'twitter','link':'http://twitter.com/cyberwarfighte1'}, {'social':'facebook','link':'http://facebook.com/samuel.cardillo.5'}]"></social-nav>
Hope it can help someone :)
I tried to extend a <button>, but so far did not succeed.
What am I doing wrong. I'm using the Dart Editor+SDK 1.5.2
In pubspec.yaml the version for Polymer is set to:
polymer: ">=0.11.0 <0.12.0"
index.html
<!DOCTYPE html>
<html>
<head>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Extended Button - Dart v1.5.2</title>
<!--Extended Button-->
<link rel="import" href="view/ext_button.html" />
</head>
<body>
<button is="ext-button">Test Button</button>
<script type="application/dart">export "package:polymer/init.dart";</script>
</body>
</html>
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement {
ExtButton.created() : super.created();
factory ExtButton(){
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
So the code above does not work, but as soon as write it like below (just to validate the ext-button works) it tells me the following:
"web/index.html:20:7: custom element "ext-button" extends from "button", but this tag will not include the default properties of "button".
To fix this, either write this tag as <button is="ext-button"> or remove the "extends" attribute from the custom element declaration."
<ext-button>Test Button</ext-button>
So a little bit confused ;-) I think the fix is easy and simple - but I just don't see the problem ;-(
Just for further references, the two things above solved the problem.
Here are the updated parts, now it works.
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement with Polymer {
ExtButton.created() : super.created()
{
polymerCreated();
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
<content></content>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
As far as I see, you are missing thwo things:
a call to polymerCreated() inside the custom elements constructor.
and extends ButtonElement with Polymer
There are already similar question. I'll look them up later when I have more time. Maybe you find them yourself in the meantime. Please add a comment with a link if you do.
A Polymer noob...
I'm trying to create a custom element as per the Polymer API docs, where my main page looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<div id="test"></div>
<polymer-element name="book-template" constructor="BookTemplate" noscript>
<template>
<style>
h1 { color: orange; }
</style>
<h1>Hello from some-foo</h1>
</template>
</polymer-element>
</body>
</html>
I know that the page content will render if I just put <book-template></book-template> on the page, or if I do something like this inside the <body> tag:
<script>
var book = document.createElement('book-template');
document.getElementById('test').appendChild(book);
</script>
But I'm trying to utilize the element's constructor attribute, assuming that this will create the element when placed somewhere inside of <body>:
<script>
var book = new BookTemplate();
</script>
...but getting a console message that BookTemplate() is not defined.
I'm sure it's something simple...any idea? Thanks in advance.
I guess you have to wait for the polymer-ready event, so that the constructor is available in the global window object http://jsbin.com/kosuf/2/edit?html,console,output:
<script>
document.addEventListener('polymer-ready',function() {
var book = new BookTemplate();
if (book) {
console.log('Ok');
}
});
</script>