When button is clicked the control goes to the Javascript function print() and the table gets printed. But, it's showing almost 20 line breaks before the table gets printed and I want to prevent it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var print=function()
{
document.write("<table border=5px>");
for(var i=1;i<1001;i++)
{
document.write("<tr>"+"<td>"+i+"</td>"+"</tr>"+"</br>");
}
document.write("</table>");
}
</script>
</head>
<body style="white-space: nowrap">
<input type="button" value="click here" onclick="print();" />
</body>
</html>
Remove closing <br> tag from your string:
var print=function()
{
document.write("<table border=5px>");
for(var i=1;i<1001;i++)
{
document.write("<tr>"+"<td>"+i+"</td>"+"</tr>"); // </br> removed here
}
document.write("</table>");
}
This is happening because you have a <br> tag in your for loop. If you want to have a linebreak between each table when you click your button that generates them you'll need to add the line break tag to the end of the closing table. (Or use CSS to create padding / margins)
var print=function() {
document.write("<table border=5px>");
for(var i=1;i<1001;i++) {
document.write("<tr>"+"<td>"+i+"</td>"+"</tr>"); }
document.write("</table> <br>"); }
Otherwise just remove it entirely.
var print=function() {
document.write("<table border=5px>");
for(var i=1;i<1001;i++) {
document.write("<tr>"+"<td>"+i+"</td>"+"</tr>"); }
document.write("</table>"); }
Related
Requirements:
1) Create dynamic iFrame.
2) Hide the main <my-app> element.
3) In the onClose() click event: Show <my-app> element, Remove iFrame.
PROBLEM: I can successfully create a dynamic iFrame in my application and hide the main element.
However, the problem is that within the onClose() click event I cannot get access to those elements on the document.body.
Here's my javascript code:
#1: The html var with head/body, Cancel button, and the onClose() func:
const html = `
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="assets/dependencies/print/print.css" rel="stylesheet"/>
<script>
function showHeader(ele) {
...
}
function showFooter(ele) {
...
}
// *** TRY TO CLOSE IFRAME AND SHOW <APP-ROOT> ELEM. ***
function onClose(ele) {
let frameToRemove = window.document.getElementById("iframe");
console.log(frameToRemove); // returns zero elements of HTMLCollection[]
var harmonyRootTag = window.document.getElementsByTagName('app-root');
harmonyRootTag[0].setAttribute('style', 'display:block;');
document.body.removeChild(iframetest);
}
// *******************
</script>
</head>
<body>
<section id="print-menu" class="no-print">
<div>
<button onclick="window.print()" class="primary-button">Print</button>
<button onclick="onClose()" class="secondary-button">Cancel</button>
</div>
</section>
<section id="articles">
..
</section>
</body>
`;
#2: iFrame creation (working fine, meaning it HIDES app-root and creates iFrame)
// Hide root element
const appRootTag = document.getElementsByTagName('app-root');
if (appRootTag && appRootTag.length > 0) {
appRootTag[0].setAttribute('style', 'display:none;');
}
// Create iFrame, set style, write html markup to it.
const iframetest = document.createElement('iframe');
document.body.appendChild(iframetest);
iframetest.setAttribute('style', 'height:100%;width:100%;');
iframetest.contentWindow.document.open();
iframetest.contentWindow.document.write(html);
iframetest.contentWindow.document.close();
After I load the iFrame, clicking the Cancel buttons triggers onClose() , but it basically does nothing:
window.document.getElementById("iframe"); // RETURN ZERO ELEMEMTS OF HTMLCollection[]
Is there a way to add styles in css or sass based on the post content?
Im using
https://github.com/jessegavin/jQuery-Chord-Transposer
Something is preventing the code I just added from running.
var textProp = 'textContent' in document ? 'textContent' : 'innerText';
// directly converting the found 'a' elements into an Array,
// then iterating over that array with Array.prototype.forEach():
[].slice.call(document.querySelectorAll('span.c'), 0).forEach(function(aEl) {
// if the text of the aEl Node contains the text 'link1':
if (aEl[textProp].indexOf('Am') > -1) {
// we update its style:
aEl.style.fontSize = '2em';
aEl.className = 'c foo';
}
});
I would recommend using a thin layer of JS to add a CSS class to a parent element, which the css can check for.
For example, here is some code that makes the text color red if a post has a .category element with 'memes' in it
e.g.
<!DOCTYPE html>
<html>
<head>
<style>
.post.memes {
color: 'red'
}
</style>
</head>
<body>
<article class="post">
<p class="category">memes</p>
<p class="content">Lorem ipsum</p>
</article>
<script>
const postElement = document.querySelector('.post');
if (postElement) {
const category = postElement.querySelector('.category');
if (category && category.innerHTML == 'memes') {
postElement.classList.add('memes');
}
}
</script>
</body>
</html>
Is it possible to bind a state (attribute) of a paper-checkbox [checked|unchecked] dynamically to an attribute like [readonly|disabled] inside a paper-input element? This is my implementation so far:
<template repeat="{{item in lphasen}}">
<div center horizontal layout>
<paper-checkbox unchecked on-change="{{checkStateChanged}}" id="{{item.index}}"></paper-checkbox>
<div style="margin-left: 24px;" flex>
<h4>{{item.name}}</h4>
</div>
<div class="container"><paper-input disabled floatingLabel id="{{item.index}}" label="LABEL2" value="{{item.percent}}" style="width: 120px;"></paper-input></div>
</div>
</template>
The behavior should be as follow:
When the user uncheck a paper-checkbox, then the paper-input element in the same row should be disabled and/or readonly and vice versa. Is it possible to directly bind multiple elements with double-mustache or do I have to iterate the DOM somehow to manually set the attribute on the paper-input element? If YES, could someone explain how?
Another way to bind the checked state of the paper-checkbox.
<polymer-element name="check-input">
<template>
<style>
#checkbox {
margin-left: 1em;
}
</style>
<div center horizontal layout>
<div><paper-input floatingLabel label="{{xlabel}}" value="{{xvalue}}" disabled="{{!xenable}}" type="number" min="15" max="200"></paper-input></div>
<div><paper-checkbox id="checkbox" label="Enable" checked="{{xenable}}"></paper-checkbox></div>
</div>
</template>
<script>
Polymer('check-input', {
publish:{xenable:true, xvalue:'',xlabel:''}
});
</script>
</polymer-element>
<div>
<check-input xenable="true" xvalue="100" xlabel="Weight.1"></check-input>
<check-input xenable="false" xvalue="185" xlabel="Weight.2"></check-input>
</div>
jsbin demo http://jsbin.com/boxow/
My preferred approach would be to refactor the code to create a Polymer element responsible for one item. That way, all of the item specific behaviour is encapsulated in one place.
Once that is done, there are a couple ways of doing this.
The easiest would be to simply create an on-tap event for the check box that toggles the value of a property and sets the disabled attribute accordingly.
<paper-checkbox unchecked on-tap="{{checkChanged}}"></paper-checkbox>
//Other markup for item name display
<paper-input disabled floatingLabel id="contextRelevantName" style="width:120 px;"></paper-input>
One of the benefits of putting this into it's own polymer element is that you don't have to worry about unique id's anymore. The control id's are obfuscated by the shadowDOM.
For the scripting, you would do something like this:
publish: {
disabled: {
value: true,
reflect: false
}
}
checkChanged: function() {
this.$.disabled= !this.$.disabled;
this.$.contextRelevantName.disabled = this.$.disabled;
}
I haven't tested this, so there might be some tweaks to syntax and what have you, but this should get you most of the way there.
Edit
Based on the example code provided in your comment below, I've modified your code to get it working. The key is to make 1 element that contains an either row, not multiple elements that contain only parts of the whole. so, the code below has been stripped down a little bit to only include the check box and the input it is supposed to disable. You can easily add more to the element for other parts of your item displayed.
<polymer-element name="aw-leistungsphase" layout vertical attributes="label checked defVal contractedVal">
<template>
<div center horizontal layout>
<div>
<paper-checkbox checked on-tap="{{checkChanged}}" id="checkbox" label="{{label}}"></paper-checkbox>
</div>
<div class="container"><paper-input floatingLabel id="contractedInput" label="Enter Value" value="" style="width: 120px;"></paper-input></div>
</div>
</template>
<script>
Polymer('aw-leistungsphase', {
publish: {
/**
* The label for this input. It normally appears as grey text inside
* the text input and disappears once the user enters text.
*
* #attribute label
* #type string
* #default ''
*/
label: '',
defVal : 0,
contractedVal : 0
},
ready: function() {
// Binding the project to the data-fields
this.prj = au.app.prj;
// i18n mappings
this.i18ndefLPHLabel = au.xlate.xlate("hb.defLPHLabel");
this.i18ncontractedLPHLabel = au.xlate.xlate("hb.contractedLPHLabel");
},
observe : {
'contractedVal' : 'changedLPH'
},
changedLPH: function(oldVal, newVal) {
if (oldVal !== newVal) {
//this.prj.hb.honlbl = newVal;
console.log("Geänderter Wert: " + newVal);
}
},
checkChanged: function(e, detail, sender) {
console.log(sender.label + " " + sender.checked);
if (!this.$.checkbox.checked) {
this.$.contractedInput.disabled = 'disabled';
}
else {
this.$.contractedInput.disabled = '';
}
console.log("Input field disabled: " + this.$.contractedInput.disabled);
}
});
</script>
</polymer-element>
In my application i used repeater control.For that i have loaded item at a time.But my client wants to display first 6 items then if the user come to end of the page it will display a image named loading image and after a short time display another 6 items and again the user came to end of page it will display loading image at the end of screen and load another 6 items like that and so on. ex:Facebook loading
It sounds like you need to use continuous scrolling, to load images as the user scrolls. Here are a couple of articles which demonstrate how to use continuous scrolling:
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=371
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Here's an example of an image gallery that uses continuous scrolling:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
div { border: solid 1px black; height:200px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var pixelsBetweenImages = 200;
var imagesArray = {}
var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size)
imagesArray[0] = "";
imagesArray[1] = "";
imagesArray[2] = "";
imagesArray[3] = "/images/ImageThree.gif";
imagesArray[4] = "/images/ImageFour.gif";
imagesArray[5] = "/images/ImageFive.gif";
imagesArray[6] = "/images/ImageSix.gif";
imagesArray[7] = "/images/ImageSeven.gif";
imagesArray[8] = "/images/ImageEight.gif";
$(window).scroll(function() {
var scrollpos = $(window).scrollTop() + $(window).height();
var imageIndex = Math.floor(scrollpos / pixelsBetweenImages);
if (imagesArray[imageIndex] != "") {
var div = $("#" + imageIndex);
div.html(imagesArray[imageIndex]);
imagesArray[imageIndex] = "";
}
});
</script>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div id="3">3 </div>
<div id="4">4 </div>
<div id="5">5 </div>
<div id="6">6 </div>
<div id="7">7 </div>
<div id="8">8 </div>
</body>
</html>
Source: Is there ability to load page images partially when scroll down to it or is it just effect?
As for displaying a loading image, just use an animated gif as the default image, and delay loading of the actual image for effect, using setTimeout or something along those lines.
I'm trying to have some file inputs, and have them only show up if the previous one has been filled. This can use css 3 as well.
An example worth thousands words: Display X input, one at a time
The idea is simple, if an input set as required is empty, it's invalid. From there, all you have to do is set all input as required and use the :invalid pseudo class. Should work great with label too.
input:invalid~input:invalid {
display: none;
}
<input type="file" required>
<input type="file" required>
<input type="file" required>
To expand on Yi Jiang's comment, selectors against the "value" attribute won't notice changes to the "value" property. The "value" attribute is bound to the "defaultValue" property, while the "value" property isn't bound to any attribute (thanks to porneL for pointing this out).
Note there's a similar relationship with the "checked" attribute and "defaultChecked" and "checked" properties; if you use an attribute selector [checked] rather than the pseudo-class :checked, you won't see style change when a checkbox's state changes. Unlike the "checked" family, "value" doesn't have a corresponding pseudo-class that you could use.
Try the following test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamic attribute selectors</title>
<style type="text/css">
input:not([value]), div:not([value]) {
background-color: #F88;
}
input[value], div[value] {
border: 5px solid #8F8;
}
input[value=""], div[value=""] {
border: 5px solid #F8F;
}
input:not([value=""]), div:not([value=""]) {
color: blue;
border-style: dashed;
}
*.big {
font-size: 200%;
}
</style>
<script>
function getElt() {
var id=prompt("Enter ID of element", "d1");
if (id) {
return document.getElementById(id);
} else {
return {className: ''};
}
}
function embiggen() {
getElt().className="big";
return false;
}
function smallify() {
getElt().className="";
return false;
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div id="d1">no value</div>
<div id="d2" value="">empty value</div>
<div id="d3" value="some">some value</div>
<p><label for="foo">foo:</label> <input name="foo" id="foo" /></p>
<p><label for="bam">bam:</label> <input name="bam" id="bam" value="bug-AWWK" /></p>
<p><label for="file">File to upload:</label> <input type="file" name="file" id="file" onchange="setValueAttr(this)"/></p>
<input type="button" value="Embiggen" onclick="return embiggen()" />
<input type="button" value="Smallify" onclick="return smallify()" />
</body>
</html>
Changing the value of anything and the style won't change. Change the class of anything and the style will change. If you add the following JS function and bind it to a change event on an input, the background style will change.
function bindValue(elt) {
var oldVal=elt.getAttribute('value');
elt.setAttribute('value', elt.value);
var newVal=elt.getAttribute('value');
if (oldVal != newVal) {
alert('Had to change value from "'+oldVal+'" to "'+newVal+'"');
}
}
This binds the "value" property to the "value" attribute, so updates to the former by user input will propagate to the latter (programmatically setting the "value" property won't cause a change event).
In examining the JS properties of file inputs before and after (by use of the following script), the only one with an appreciable change was "value". From this, I doubt there are any other HTML attributes that change and could hence be used in an attribute selector.
<script>
var file = {blank: {}, diff: {}};
var fInput = document.getElementById('file');
for (p in fInput) {
try {
file.blank[p] = fInput[p];
} catch (err) {
file.blank[p] = "Error: setting '"+p+"' resulted in '"+err+"'";
}
}
function fileDiff() {
for (p in fInput) {
try {
if (file.blank[p] != fInput[p]) {
file.diff[p] = {orig: file.blank[p], now: fInput[p]};
}
} catch (err) {
//file.diff[p] = "Error: accessing '"+p+"' resulted in '"+err+"'";
}
}
}
if (fInput.addEventListener) {
fInput.addEventListener('change', fileDiff, false);
} else if (fInput.attachEvent) {
fInput.attachEvent('onchange', fileDiff);
} else {
fInput.onchange = fileDiff;
}
</script>
You can hack together something using a link to a non-existent fragment and the :visited pseudo class, but it's quite egregious.
<style>
a input {
display: none;
}
:not(a) + a input,
a:visited + a input
{
display: block /* or "inline" */ ;
}
</style>
...
<input type="file" ... />
<input type="file" ... />
<input type="file" ... />
You'd need to generate unvisited targets for the links every time the page is loaded. Since you'd have to do it server side, you couldn't do this with complete certainty, though you could get the probability of generating a previously visited target arbitrarily close to 0. It also doesn't work on all browsers, such as Safari. I suspect this is due to the following from CSS2 and CSS3:
Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.
You might be able to hack something together using other selectors on other elements, but I suspect this can't be done cleanly.
To select empty fields you can try
input[type=file][value=""] {
background-color: red;
}
I tested it on jsfiddle. There at least, I needed to define an empty value attribute on the input tag for it to work
<input type="file" id="test" value="">
Using the '+' operator as you've done in your example would match two separate file inputs, one right after the other. It doesn't examine two attributes of the same tag as you appear to want.