The first chrome plugin to work. I do not have detailed information.
Before I print the contents of This link I want to get the specific part.
<table class="receiptSectionTable2Col" >
just how can I print the contents of this table. Is this possible?
I think this answer from this question will help you:
HTMLElement.prototype.printMe = printMe;
function printMe(query){
var myframe = document.createElement('IFRAME');
myframe.domain = document.domain;
myframe.style.position = "absolute";
myframe.style.top = "-10000px";
document.body.appendChild(myframe);
myframe.contentDocument.write(this.innerHTML) ;
setTimeout(function(){
myframe.focus();
myframe.contentWindow.print();
myframe.parentNode.removeChild(myframe) ;// remove frame
},3000); // wait for images to load inside iframe
window.focus();
}
Usage in your case:
document.getElementsByClassName("receiptSectionTable2Col")[0].printMe();
Related
Friends of the Internets,
Google Docs's Intert Drawing tool works, except for the fact that it wastes half of all 16:9 screens, since it opens a forced-square window that is UNRESIZABLE, cripling all drawings that are intended for LANDSCAPE and/or PORTRAIT format! Think of all the standard formats like A4, A3, 16:9 monitors.
I've been asking this quetsion to super users, to no avail. NOBODY seems to know the answer! I'm resorting to skilled programmers to hack our way into this and am planning on opening a bounty worth 500 as soon as this this becomes available for this question! This is an essential yet overlooked potential portion of Google Docs that has been overlooked.
Any and all solutions that make this work in Google's own browser Chrome will be:
Awarded 500 bounty points
Accepted as answer
I think the simplest way is make a Chrome Extension Plugin for solve this problem. I made an example of how you should work, of course, a rudimentary but for the purpose is ok. Check it on github (Download the zip, unpack, go to chrome extensions and => "Load unpacked", enjoy :D). For more complex solutions you need to use google document api.
Example of code
document.addEventListener('DOMContentLoaded', function () {
let fullScreenBtn = document.getElementById('fullScreenBtn');
fullScreenBtn.onclick = function (element) {
function modifyDOM() {
function setToFullScreen(iteration, drawer) {
drawer.style.left = '0';
drawer.style.top = '0';
drawer.style.borderRadius = '0';
drawer.style.width = '100%';
drawer.style.height = '100vh';
document.getElementsByClassName('modal-dialog-content')[iteration].style.height = '100vh';
var iframe = drawer.getElementsByTagName("IFRAME")[0]
iframe.width = '100%';
iframe.height = '100%';
var canvas = iframe.contentWindow.document.getElementById('canvas-container');
canvas.style.borderLeft = 'solid 2px red';
canvas.style.borderRight = 'solid 2px red';
}
var drawers = document.getElementsByClassName('modal-dialog');
let drawerCount = drawers.length;
if (drawerCount) {
for (let i = 0; i < drawerCount; i++) {
setToFullScreen(i, drawers[i]);
}
} else {
alert('First off all open the drawer!')
}
return document.body.innerHTML;
}
chrome.tabs.query({ active: true }, function (tabs) {
var tab = tabs[0];
chrome.tabs.executeScript(tab.id, {
code: '(' + modifyDOM + ')();'
}, (results) => {
// console.log(results[0]);
});
});
};
If you want, you can resize the drawing canvas also, but if you do, it make some bugs (like #Anthony Cregan said) ...
You can do with changing the code in this section
var canvas = iframe.contentWindow.document.getElementById('canvas-container');
canvas.style.left = '0';
//canvas.style.position = ''; // works but in resizing elemnts bug
canvas.style.minWidth = '100%';
In action
I acheived this by opening in chrome, pressing F11 (fullscreen), F12 (console). I then navigated the dom in the Elements tab to:
#canvas-container
then set the element styles manually
left: 41px
width: 1787px
EDIT: unfortunately subsequent edits seem to reset the styles you enter manually, there may be a way to enforce these after subsequent draw actions but for now this solution is only good for displaying the end result, not drawing full-screen.
EDIT EDIT: you can enforce these by adding them to the element in the styles sidebar and maintain them with !important but this causes the draw functions to lose their co-ordinates (pen tool draws away from the pointer along the x-axis for instance).
Boom! As you said it's a hack. But this works:
F12->Console->Paste->Enter
let modal = document.getElementsByClassName("sketchy-dialog")[0];
modal.style.width="100%";
modal.style.height="100%";
modal.style.left="0px";
modal.style.top="0px";
let content = document.getElementsByClassName("modal-dialog-content")[0];
content.style.height="100%";
let iframe;
let iframes = document.getElementsByTagName("iframe");
for(let x=0;x<iframes.length;x++)
{
let elem = iframes[x];
if(elem.src.startsWith("https://docs.google.com/drawings"))
{
iframe = elem;
}
}
iframe.style.width="100%";
iframe.style.height="100%";
I use this simple “hack” from console. Just open the drawing modal > press F12 > Click Console > and paste this following js.
modal = document.getElementsByClassName('modal-dialog');
frame = modal[0].getElementsByTagName('iframe');
modal[0].style.width = window.innerWidth+"px";
modal[0].style.height = window.innerHeight+"px";
modal[0].style.top = 0;
modal[0].style.left = 0;
frame[0].width = window.innerWidth;
frame[0].height = window.innerHeight;
I have seen a few examples on Google Groups which demonstrate how to modify the css of the infobox. In this particular example, javascript is used to append a css link to the head of the document:
https://groups.google.com/forum/#!topic/cesium-dev/f0iODd42PeI
var cssLink = frameDocument.createElement("link");
cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);
This, however, has not resulted in any changes to the style of my markup.
At best, I have been able to wrap the contents of the infobox by iterating through the entities in the .then function call subsequent to loading a geoJson dataset. When wrapping the contents, I can set style values which are readily apparent in the resulting markup.
var dataSource = Cesium.GeoJsonDataSource.load('../data/mGeoJson.json').then(function(data) {
viewer.dataSources.add(data);
var entities = data.entities.values;
for (var i = 0; i < entities.length; i++)
var entity = entities[i];
if (entity.properties.hasOwnProperty("description")) {
entity.description = '<div style="height: 360px;">' + entity.properties.description
+ '</div>';
}
}
}
This is useful, but does not completely satisfy the requirements of my app.
Could someone provide additional insight into overriding the theme of the infobox, without having to iterate over entities to modify the value of their description properties?
The original solution here wasn't working, because the infoBox is an iframe that has not yet asynchronously loaded when you were trying to modify it.
Instead, you can add an load listener to the iframe, like this:
var viewer = new Cesium.Viewer('cesiumContainer');
var frame = viewer.infoBox.frame;
frame.addEventListener('load', function () {
var cssLink = frame.contentDocument.createElement('link');
cssLink.href = Cesium.buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
frame.contentDocument.head.appendChild(cssLink);
}, false);
This waits for the iframe to become ready to receive the modification, and then applies it.
For what it's worth, I've found success in modifying the theme of the infobox by simply importing my css files in the head of the document. I'm not sure why I wasn't able to modify it directly with stylesheets, as it wasn't previously affecting the infobox's appearance, and this issue was mirrored in the posts that I found in the cesium-dev Google Group. Regardless, it seems to be working just fine now.
I have a page that displays a picture in high quality. The pictures typically take a while to load. I have a jQuery function that runs on load of the picture #image I want this function to pre-load other images 1 at a time in the order they will appear.
So: on if I am on the 1st picture, it should load picture 1 and display it, then pre-load/cache the second picture when pic1 is done. The pictures being loaded all have a caching header attached already. When pic2 is done loading, pic3 should begin loading. In case you are wondering, I have a cgi backend that is able to print things in loops and such.
So far I have the following working:
$('#image').load(function() {
preLoad2 = new Image()
preLoad2.src = "pic2"
})
I can then continue this with another function with the same $('#image').load(function() { } line, but how do I make it so the next picture doesn't begin loading until this one is completely loaded. I would prefer not to use a timed delay as that is not very accurate.
Here is what I have currently. I am using a bash cgi script in this example.
#set a loop counter
# variables will be refered to as $[var-name]
count=1
first=true
#loop through all images that need pre-loading
for file in *
do
#check if the picture matches the search criteria
if [[ "$file" = *$lowerSearch* ]]
then
#create a js script
echo "<script language=\"javascript\" type=\"text/javascript\">"
echo "function load$count() {"
echo " preLoad$count = new Image()"
echo " preLoad$count.src = \"?loadFile=$file\""
echo "}"
#the first one of these functions should be bound to the main image load event
if [ "$first" = 'true' ]
then
echo "document.getElementById('image').onload = load$count()"
#the 2nd and on should be bound to the pre-load of the previous picture
else
echo " preLoad$last.onload = load$count()"
#end if
fi
echo "</script>"
#store the current count so that the next time through it can be used to call the last loaded picture
last=$count
first=false
#add 1 to count
count=$((count+1))
#end if
fi
#end loop
done
How this works: Loops through pictures. If the picture matches the search criteria then run the main code...otherwise skip loop. In the search criteria, it creates a js script that includes a function. the function loads the picture that the loop is currently referring to. It then creates an onLoad function that refers to the last picture pre-loaded and sets an onLoad event to it that runs the function just created.
I believe this question's answer is somewhat related to this question
First create JSON record of images like this
var imageRecord = ['image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'];
then create function to load image one after another
function loadAllImages(index){
if( index >= imageRecord.length ){
return;
}
//create image object
var image = new Image();
//add image path
image.src = imageRecord[index];
//bind load event
image.onload = function(){
//now load next image
loadAllImages(index + 1);
}
}
hope this small snippet will help you.
to understand whole concept of preload images using javascript, please visit http://zainultutorials.blogspot.in/2013/11/preload-images-using-javascript.html
In the past I've used something similar to this image preloader:
http://www.webreference.com/programming/javascript/gr/column3/index.html
The formatting on the code is weird but the code itself is good. After setting up that ImagePreloader "class" I used a method like this:
function preloadImages(imageSRCs){
var loadingMessage = $('<div/>').addClass('loading').html('<h1>LOADING</h1>');
// stay classy: tell the user you're loading images
$('#content').append(loadingMessage);
// this imgPreloader takes care of loading the images
imgPreloader = new ImagePreloader(imageSRCs, function(imgArr, numLoaded){
if(this.nImages == numLoaded){
loadingMessage.remove();
//do whatever you want with the images here
for(var i = 0; i < imgArr.length; i++){
var pathIdPattern = new RegExp("[^/]+\\.");
var imgName = pathIdPattern.exec(imgArr[i].src)[0];
var imgId = imgName.substring(0, imgName.length-1);
$('div#images').append($(imgArr[i]).hide().attr("id", imgId));
}
}else{
loadingMessage.text('Sorry, there was a problem loading the site : / ');
console.error("Only " + numLoaded + " of " + this.nImages + " images loaded successfully.");
}
});}
Where the imageSRCs parameter was just a string array of the image paths. Maybe it's a more involved solution to what you're looking for but I hope it helps!
if you have the images an array of urls you can do something like this: demo
<div id="cont"></div>
<script type="text/javascript">
function loadImagesInSequence(images) {
if (!images.length) {
return;
}
var img = new Image();
//Remove if from the array list and return it to the variable
var url = images.shift();
img.onload = function(){ loadImagesInSequence(images) };
img.src = url;
$("#cont").append(img);
}
loadImagesInSequence(['http://www.nasa.gov/centers/goddard/images/content/433226main_Misti_ComaCluster.jpg',
'http://www.hdwallpapers.in/walls/cold_universe-wide.jpg', 'http://scienceblogs.com/startswithabang/files/2013/05/chemical_composition_universe.jpeg']);
</script>
or if you have the image tags in your page you can go with something like this: demo
<img id="img1" src="http://miniontours.yzi.me/loading.gif" data-image="http://www.nasa.gov/centers/goddard/images/content/433226main_Misti_ComaCluster.jpg" />
<img id="img2" src="http://miniontours.yzi.me/loading.gif" data-image="http://www.hdwallpapers.in/walls/cold_universe-wide.jpg" />
<img id="img3" src="http://miniontours.yzi.me/loading.gif" data-image="http://scienceblogs.com/startswithabang/files/2013/05/chemical_composition_universe.jpeg" />
<script type="text/javascript">
var imgs = [];
$("img").each(function(){
imgs.push({
"ID": this.id,
"src" : $(this).data("image")
});
});
loadImagesInSequence(imgs);
function loadImagesInSequence(images) {
if (!images.length) {
return;
}
var img = images.shift();
var url = img.src;
img = $("#"+img.ID);
img.load(function(){ loadImagesInSequence(images); });
img.attr("src",url);
}
</script>
I'm using the SC HTML5 player, when one sound finishes, I load in another source, however the FINISH event only seems to fire for the first song, my code is as follows
//Set the source
document.getElementById("sc-widget").src = scPath;
//get the widget reference
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
//set the finish event
widget.bind(SC.Widget.Events.FINISH, endSC);
function endSC() {
var scPath = "http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1848538&show_artwork=true&auto_play=true";
document.getElementById("sc-widget").src = scPath;
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.FINISH, endSC);
}
I've tried setting the endSC target to another function but that doesn't work, what am I missing? Thanks!
I had the same problem. SC.Widget method is working fine when I call it for the first time, but if I try to call it for the second time the console will fire "Uncaught TypeError: Cannot read property 'parentWindow' of null" error in http://w.soundcloud.com/player/api.js script. And that is where api.js script stops with actions (.Widget, .bind, etc.)
I found the solution. It's very weird, but it is a solution.
SoundCloud remote script is minified. Load it in your browser, C/P it in some online js beautifier and save it locally. Edit line 103 as follows:
return a.contentWindow;// || a.contentDocument.parentWindow
So I removed that .parentWindow call.
Save the file and call it in your page's head section. And that's it! Now FINISH event fires on every loaded widget.
I hope this will help.
Looks like this question is over 10 years old, but it just came up for me now.
I recreated the iframe div from scratch. Otherwise, the SC.Widget.Events.FINISH will only fire when the original embed player finishes.
You must reset the DOM element events by completely recreating the iframe element, like so:
//EXAMPLE SC SONG IDs
let songIds = [216109050, 779324239, 130928732]
let incrementingIndex = 0
function playSongsInIframe() {
let iframeParent = document.querySelector('#sound-player')
let iframeElement = document.querySelector('#sound-player iframe')
iframeElement.remove()
//CODE TO ADD NEW SOUND IDs
//yourSoundId = songIds[incrementingIndex]
let newIframe = document.createElement('iframe')
newIframe.id = "sound-" + yourSoundId
newIframe.width = "100%"
newIframe.height = "166"
newIframe.scrolling="no"
newIframe.frameborder="no"
newIframe.allow = "autoplay"
newIframe.src = "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/" + yourSoundId + "&auto_play=true"
iframeParent.appendChild(newIframe)
let widget = SC.Widget("sound-" + yourSoundId);
widget.bind(SC.Widget.Events.READY, () => {
console.log('Ready...');
widget.play()
});
widget.bind(SC.Widget.Events.FINISH, () => {
console.log('Song ended...');
incrementingIndex++
playSongsInIframe()
});
}
One last consideration - this process must be started from a user event, like a click. You can add this function to the onclick attribute of an HTML button element:
<button onclick="playSongsInIframe()">Start Radio</button>
Using HTML
I want to use 2 checkbox, when i click the check box 1 then it will redirect to another page, when i click the check box 2 then it will redirect to another page.
How to make a code in HTML
Need Code Help
First of all checkboxes are not supposed to be used for redirection purpose, however if you really want to do that, you can go about something like this:
var el = document.getElementById('checkbox1_id');
el.onclick = function(){
document.location.href = 'somepage.html';
};
var el2 = document.getElementById('checkbox2_id');
el2.onclick = function(){
document.location.href = 'somepage2.html';
};