I am trying to make students report card of my school using Google spreadsheet...and i almost got it done.
i have embedded the spreadsheet in an iframe with the menu bar hidden. However within iframe i can not print any selected area. The printing dialog box pops up. But it does not generate the print preview.
<html>
<head>
<title>IFrame print</title>
<style>
html, body, iframe {height: 100%; width: 100%; margin: 0; padding: 0;
border-style: none; }
</style>
</head>
<body>
<iframe src="https://docs.google.com/spreadsheets/d/14SSAevO4I_Jqi94aUAe1S1tad55gFvnsTcA9UWYp288/edit?usp=sharing&rm=minimal"
</iframe>
</body>
</html>
I have tried to use some JavaScript too..i couldnt make it work
I don't think you can do that. You need to have the content in the body itself to get the print that you want. Try running a funtion in app script returning the information from spreadsheet concatenated with HTML tags and then getting that string in HTML element by running a hava script function. there you go!
Related
Padding property started behave strange (in browser) after i had tried to create one-page scrollable website. Basically initially I had my index.html file linked to the styles.css file. I wanted to create one-page site so I googled it and found this site:
https://www.turnwall.com/articles/adding-single-page-scrolling-navigation-to-your-site/
I followed the instructions: created side-bar and some sections to test it, but without using js script. It all worked perfectly except 1 thing: titles in side bar werent highlithing when scrolling, so I tried to implement the script (I created new file and paste the code from tutorial) and this is the part when it started to behave strangly: basically my title which was located also in side bar got much larger and padding around all page elements appeared. BUT THATS NOT ALL: that padding is still there (even after I deleted all elements and created everything from scratch), which I suppose shoudnt be there.
I want to get rid of it. Here is screenshot from my browser:
here
On the screenshot you can see 1 elemeent with some text. The thing is that I suppose that this text should be in the very top left corner but it is not.
Here are my index.html and styles.css files:
HTML:
<!doctype html>
<html>
<head>
<title>RA TOOLKIT</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav-menu">eha</div>
</body>
</html>
CSS:
body{
background-color: red;
display: flex;
flex-direction: row;
padding-top: 0px;}
.nav-menu{
background-color: white;
transition: all .2s;
width: 25vw;
min-height: 100%;
box-sizing: border-box;}
.nav-menu:hover{
background-color: greenyellow;}
Thanks in advance!
(sorry for my english : D )
When I tried to inspect element the page, i found that your html body has an 8px margin that you thought was the padding. I don't really know what caused this, but you can just overwrite the styling by giving a
body {
margin: 0px
}
to your html body. You can always use inspect element to figure out your final style render of your page
Currently when I use the new API for the personalised sign in with google button, when the button is centered vertically in a flex container, when it is loading it flickers up and down.
Example code is shown below, just in html and css for simplicity, however building this in react - same thing happens.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css"
></link>
</head>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="./script.js"></script>
<div
id="g_id_onload"
data-client_id="920029725372-e913v434vc2hfbb6cfkrs7qhiuvuita6.apps.googleusercontent.com"
data-callback="handleCredentialResponse"
></div>
<div class="button-wrapper">
<div class="g_id_signin" data-type="standard"></div>
</div>
</body>
</html>
CSS:
body {
width: 100vw;
height: 100vh;
margin: 0;
}
#font-face {
font-family: "Google Sans";
src: url("https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtzCwM.ttf")
format("truetype");
}
.button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Any help would be greatly appreciated! Sorta wish google would allow for custom buttons or at least an API so that issues like this could be avoided instead of forcing devs to use an <iframe/>, also the new API isn't awesomely documented (I'm assuming because of how new it is but hopefully this will get better with time.
For some reason, Google created two div's to house identical buttons. The second, with the iframe, replaces the first when the proper font loads. The order in which the css is modified by Google means that no matter how you try to correct the flash with pure css, it will still show up in some way. I went so far as to overlay the div's using position:absolute but the margin gets modified on the first div so it still shifts up before vanishing.
The only thing I found to work is hide one of the div's permanently. Either way works, the difference is the button font. This one lets the iframe only version load:
.g_id_signin > div > div:first-child{
display: none;
}
This one loads the initial div only, so the font is off, but it shows up faster and the auth flow still works:
.g_id_signin > div > div:last-child{
display: none;
}
You could probably catch and handle the flicker via javascript, but I'm not spending that much time on this. I'll use this css fix until Google updates their code.
The best solution I found is to wrap the Sign In with Google button in a div and make that div's height 44px i.e. the height of the button. That way as the button loads additional content, it won't move anything up and down.
As the old generic sign in with google button disappears and new sign in with name and email appears, that unloading and loading seems to cause the flicker.
.GoogleLoginButtonContainer {
height: 44px;
width: auto;
}
I am trying to mask an image using CSS and the WebKit property ( -webkit-mask-image ) .
But due to some reason, the mask doesn't work when I use it from local files on my PC or even when I upload it to a website of mine and use the link. If I use the mask image directly from the tutorial website I followed the mask works fine.
In the below code you can see I have commented out a webkit-mask-image and if you run the code as it is you would see nothing whereas if you uncomment it and comment out the second webkit-mask-image it would start working. Same thing happens if I use the file path of my PC instead of the tutorial URL.
Please help me out with this. seems really weird.
<!DOCTYPE html>
<html>
<head>
<style >
html, body {
height: 100%;
}
img.two {
height: 50%;
width: auto;
}
.mask4 {
/*-webkit-mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");*/
-webkit-mask-image: url("https://3dmetalart.com/wp-content/uploads/2020/05/image-mask.png");
-webkit-mask-size: 400px 600px;
}
</style>
</head>
<body>
<h1>Image mask using png </h1>
<img class="two mask4"src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg"><br>
</body>
</html>
I'm working on a web site that needs a fairly complex print layout. Within one of the printable areas is a Google map - iframe version.
But I can't get the map to print.
I've created a test HTML page containing minimal HTML/CSS/JS to demonstrate the problem.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="idHead">
<title>iFrame inside .visible-print</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
<style media="print">
.visible-print-block {
border: 10px solid red !important;
width: 620px !important;
height: 470px !important;
display: block !important;
}
.visible-print iframe {
border: 10px solid blue !important;
}
</style>
</head>
<body>
<div class="visible-print visible-print-block">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2418.4013212105515!2d-1.656887048290665!3d52.68884797974762!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTLCsDQxJzE5LjkiTiAxwrAzOScxNi45Ilc!5e0!3m2!1sen!2suk!4v1567617099057!5m2!1sen!2suk" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Expected results is a blank web page when you view it in the browser, but the print preview (and the print) would show a red bordered area containing the map.
What I get is an empty red bordered area.
I added the blue border to the iframe to show where the iframe should be and to check the iframe is showing.
I've looked through the Bootstrap CSS and can't see how the 'visible-print' 'visible-print-block' could affect the iframe or the Google map.
If I take the iframe out of the container div it appears and prints correctly.
Google maps cannot render on a hidden div. If you need to print this, i suggest you to create another page just to print.
EDIT 10:04 PM I RESOLVED THIS
Yeah I figured this out, but the forum software here doesn't let me post an answer to my own question until 8 hours have elapsed. Anyway, I found the solution here. It uses a pure HTML approach and I tested it successfully in all 5 browsers. Just had to put in the HTML: <img src="starter1.jpg" onmouseover="this.src='starter2.jpg'" onmouseout="this.src='starter1.jpg'" />
I'm trying to set up a page (eventually several pages) featuring this:
1) A default image loads when the page loads.
2) When you mouse over, a slightly different image loads.
3) When you move away from that, it goes back to the original image.
I figured this was easy with a little CSS, and it is, except when it comes to Internet Explorer. Here's what I have (it just shows 2 pictures of a broken starter from my car):
<html>
<head>
<style>
#pic1
{
width:500px;
height:500px;
background:url("starter1.jpg")no-repeat;
}
#pic1:hover
{
background:url("starter2.jpg")no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
It works just fine in Firefox, Chrome, Safari, and Opera, but not in Internet Explorer 8. In fact, in IE8, neither image loads. I just get a blank white screen. Am I missing a detail? Is there a way to get this to work on all browsers? I read something about wrapping it in an anchor tag but that didn't do anything either.
EDIT:
I can't seem to comment on any post without the code looking terrible, so here goes. I tried this:
<html>
<head>
<style>
#pic1
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
#pic1:hover
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
Now the first image shows up but the hover over image doesn't. IE keeps telling me "To protect your security, Internet Explorer has blocked this website from displaying content with security certificate errors." as soon as I open up (IE, before going to the page with my pictures), then asks if I want to view only content that was delivered securely. I always just say "No".
Lastly, if I try this:
<html>
<head>
<style>
#pic1
{
background: #FFFFFF url(starter1.jpg) no-repeat fixed center;
}
#pic1:hover
{
background: #FFFFFF url(starter2.jpg) no-repeat fixed center;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
I get nothing at all, no images of any kind in any browser.
You need to use proper syntax. Here is the proper syntax.
element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}
Notice there are no double quotes ("")