Is there an alternative to showModalDialog for Google Spreadsheet? I am willing to learn new software. What software would be reasonable for lightly skilled teacher to learn?
I have a Connect 4 game for my students built in a Google spreadsheet. Random questions are pulled from various tabs with menu items and I want a pretty display of the question. There are dimensions possible in the showModalDialog and HTML. I complicated it by having dimensions in a BODY and a DIV or only in the DIV. The dialog box always has some white showing and the HTML often popups up scroll bars (very ugly). Probably need something more robust than Google App Script to create a clean display of the question. What would anyone suggest?
This is the html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#parent {
background-color: #99ec46;
/* border: 5px solid #58a30d; /*only shows on top & left sides????? */
/* border-radius: 10px; */
display:table;
font-family:Georgia, Cambria, Times New Roman, Times, serif;
font-size: 100%;
height: 100%;
/* left: 50%; */
margin: auto;
padding: 0;
position: fixed;
text-align:center;
/* top: 50%; */
width: 100%;
}
#child {
/* align-items:center; */
display: table-cell;
/* justify-content:center; */
padding: 55px 55px;
/* transform: translate(-50%, -50%); */
/* z-index: 99999; */
vertical-align: middle;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #438204;
border: none;
color: white;
padding: 10px 26px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
<?!= nextQuestion ?>
<p></p>
<input type="button" value="Okay!" onclick="google.script.host.close()" />
</div>
</div>
</body>
</html>
This is the code that displays the question. Some questions are long and have html markup to appear on multiple lines ().
/**
* Displays an HTML-service dialog in Google Sheets that contains
*/
function popupNextQ(inQuestion) {
// var html = HtmlService.createHtmlOutputFromFile('Index');
var htmlTemplate = HtmlService.createTemplateFromFile('Next-Question-Popup');
htmlTemplate.nextQuestion = inQuestion;
var html = htmlTemplate.evaluate();
// .setHeight(400)
// .setWidth(600);
SpreadsheetApp.getUi().showModalDialog(html, " ");
}
This is the best I have come up with so far. If I add a border to the html it only appears on the top and left sides. At least with the current dimensions there are no scroll bars for my longest question.
Questions are not vertically aligned so short ones appear toward the top of the green area.
Alan Wells in googlegroups.com wrote, you can't get rid of the white space around the edges of a dialog box. If you want to stay with Google products and want an alternative, you'd need to use an Apps Script Web App for your app.
He suggested creating the question box with a Web App rather than the triggered from the menu on the sheet.
My discovery of the nested CSS has fixed the problem of all the text appearing at the top.
I have FINALLY found a way to add a border on all sides of the html. Putting the border in the parent causes it to display on the top and left. Putting it in the child makes it display on the top, bottom, and left. The bottom border is in the middle of the green square - not at the bottom.
The trick was to decrease the size of the parent div from 100% to 97%. I tried 99% and 98% also. The width of your border may affect how much you have to decrease.
<style>
#parent {
background-color: #99ec46;
display:table;
font-family:Georgia, Cambria, Times New Roman, Times, serif;
font-size: 100%;
height: 97%;
margin: auto;
padding: 0;
position: fixed;
text-align:center;
width: 97%;
}
#child {
border: 5px solid #58a30d;
border-radius: 10px;
display: table-cell;
padding: 55px 55px;
vertical-align: middle;
}
Thanks also to Clark Lind in googlegroups for suggesting using slides instead of spreadsheet. Slides is also limited to displaying html with showModalDialog.
Related
I have a strange issue which occurs on specific browsers and is probably something to do with the viewport (I'm a new developer so do not fully understand the correct terms).
Browsers which have the issue:
Brave Browser
DuckDuckGo
Browsers which don't have the issue:
Safari
Google Chrome
When I scroll right down to the bottom of the page, there is a small amount of whitespace which does not go away regardless of what I do.
I have:
Added width and height of 100% to footer
Added a min-height of 100vh
Checked for phantom characters
Changed the position of scripts in HTML
Where the white begins is where the screen starts to curve (on an iPhone 11).
These are snippets of my CSS code which may be useful (the footer section is the second grey line to the bottom of the black section):
* {
margin: 0;
padding: 0;
outline: none;
font-family: "Raleway", serif;
font-weight: 400;
box-sizing: border-box;
}
/* Footer */
.footer {
background-color: #0e1111;
}
.footer_wrapper {
color: grey;
max-width: 2000px;
margin: 0 auto;
padding: 0 10%;
}
.copyright {
font-size: 15px;
letter-spacing: 1px;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
border-top-width: 1.5px;
border-top-style: solid;
border-top-color: #232323;
}
/* End of code */
The bottom of my screen:
Does anybody know why this may be happening and if any more code needs providing, I will update the post.
To solve the issue, I had to fill in the body colour.
body {
background-color: black;
}
It seems to be something specific to individual browsers as many popular websites such as bbc.co.uk and news.sky.com to name a few, have the same issue (where the footer does not extend right to the bottom of the screen).
I hope this is the right place to post.
I am a a full stack dev with a focus on the backend for the last few years so I am trying to make sure I am approaching this the right way and that there isn't a newer way to do this then my proposed solution below:
See the attached screen shot. This is the main nav for a freelance project I took on. It is not a problem on the pages without a hero image, but where there is a hero, I need the image to be masked as shown. If you can't see it, the selected nav item has a triangle underneath it that is attached to a 2px red line that extends the width of the screen. This triangle is made by this same 2px red line and if there is a hero image, the top of the image is masked by this red line and some white space (about 8 pixels) equal to the height of the triangle.
My Proposed Solution
I was going to have the designer prepare a graphic for me that is a long png, about 3000 by 8, the only transparency being the part underneath the triangle. When the page loads I was going to load the graphic and position it absolutely underneath the selected nav item with JS, masking the image beneath it.
My Question
Is there a better way to achieve this in 2015 - ie clip paths? Is there a good tutorial on the subject - everything I see is for more elaborate things that don't involve added graphics (ie the red line and white mask at the top.
The Effect
EDIT
This is the js I will use to get the proper offset for my lo-fi (2011ish) solution, observant devs will notice the wordpress generated classes:
<script type="text/javascript">
var x = $("#main-nav .current-menu-item a").offset().left;
var y = $("#main-nav .current-menu-item a").offset().top;
var w = $("#main-nav .current-menu-item a").width();
var cx = (x + w / 2);
//get target width and set x offset
tw = $("#masking-selection").width()
tx = cx - (tw/2)
//move the masking item
$("#masking-selection").offset({top: (y+20), left: tx })
</script>
Hope I understand your question. Below is one way to achieve your need.
Note: Adjust to suit your need.
body {
background-color: beige;
padding: 0;
margin: 0;
}
ul {
height: 60px;
width: 100%;
text-align: center;
font-size: 18px;
background-color: white;
border-bottom: solid 1px red;
overflow: hidden
padding: 0;
margin: 0;
}
li {
display: inline-block;
padding: 0 20px 0 20px;
line-height: 60px;
position:relative
}
li.current:after, li.current:before {
content: '\f0de';
font-family: fontAwesome;
position: absolute;
font-size: 38px;
bottom: -35.09px;
text-align: center;
left: 44%;
color: beige;
}
li.current:before {
color: red;
font-size: 43px;
left: 42.4%;
bottom: -35.5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li>How </li>
<li class="current">About us</li>
<li>Contact us</li>
</ul>
I have a layout for a website i am working on, basically i have about 10 pages but my footer will not stay in the same place. I have tried so many different variations of code and have been unsuccessful.
The footer should stay at the bottom of the page in the same place on every page.
I am fairly new to this so bear with me if there is any obvious mistakes.
I have created a JSFiddle with a page where the footer is at the bottom but it inst as far down as i need.
#footer {
width: 100%;
height: 20px;
text-align: center;
clear:both;
position:relative;
}
http://jsfiddle.net/mjbL7tcx/
I have created another JSFiddle with another page where it is no where at all where i want it.
http://jsfiddle.net/dej6b2df/
Any suggestions much appreciated.
I fixed your HTML code on both your example pages (too long to post as code chunk and unnecessary):
Page 1
Page 2
The solution is on the CSS side of things: don't float your photo elements, you should be good to go. I also optimized your css styles for your photo-divs since you can set a photo-div class to all your photo divs, style them as a group, and use their numeric class (ex: photo-div1) to set the background image:
.photo-div {
width: 241px;
height: 400px;
margin-left: 60px;
margin-top: 90px;
border: 2px solid #333;
box-shadow: 0px 7px 7px #999;
overflow: hidden;
display:inline-block;
}
.photo-div1 {
background-image: url(images/wildlife/cow.jpg);
}
.photo-div2 {
background-image: url(images/food/ice-cream.jpg);
}
.photo-div3 {
background-image: url(images/flowers/blue-bells.jpg);
}
.photo-div4 {
background-image: url(images/sport/cycling-zoom.jpg);
}
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.
I'm having a problem with resizing text. I uploaded picture for illustrative purposes.
The problem is. The big box is the parent div in which there is a smaller div (smaller box) that contains an image. The rest of the bigger div should be filled with text (red/pink lines). Text is formatted in paragraphs (<p> .... </p> <p> .... </p>) and there are some links within text.
Sizes of divs are dynamic, they change when window size changes. So I want the font size to change to fit the main div. Is there any solution? I would really appreciate it.
This is my html code
<div id="taust" align="justify">
<img src="images/1.png" width="30%" height="auto" alt="1" id="top_foto">
<img src="images/A.png" width="auto" height="15%">
<p> text </p>
<p> text </p>
<p> text </p>
<p>text Link!</p>
</div>
This is my css code
#charset "utf-8";
/* CSS Document */
html, body, div, a, p {
}
html {
background: url(background/bg_image2_sx.jpg) no-repeat;
top: 0;
left: 0;
width: 100%;
height:100%;
background-size: cover;
position: relative;
min-width: 911px;
min-height: 500px;
font-size: 100%;
}
body {
font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}
#taust {
background-image:url(images/taust.png);
width: 88%;
height: 87%;
position: absolute;
top: 5%;
left: 5%;
min-height:435px;
min-width:802px;
border: 1px solid #CCC;
padding: 1%;
}
#font-face { font-family: riesling; src: url('font/riesling.TTF');
}
a {
color: #CCC;
text-decoration: underline;
font-size:0.95em;
line-height: 1.4em;
font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}
p {
line-height: 1.4em;
font-size: 0.95em;
color:#CCC;
margin: 0 0 6px 0;
font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}
#top_foto {
float: left;
margin: 0 1.2% 1.2% 0;
border: solid 1px #CCC;
}
Your div isn't expanding to cover all your text because your position is set to absolute in your css. I edited the CSS below.
#taust { /* Avalehe taustaks must kast */
background-color: #CCC;
width: 88%;
height: 87%;
position: relative;
top: 5%;
left: 5%;
border: 1px solid #000000;
padding: 1%;
}
If you want the DIV to be a specific size, but you want the font to be restricted within it, your entire site should use relative units, like percentages. Otherwise, I think you would end up using trial and error trying to figure out what size text doesn't flow outside your div at any given screen size.
This answer from a similar question seems to answer your question:
I've had to do this myself. What I did was that I set a base text size
for the body, and percentages for all other sizes. I then used a
simple jQuery script to change the base size on window resize. The
other sizes then update as well. I used something like this:
$(function() {
$(window).bind('resize', function() {
resizeMe();
}).trigger('resize');
});
and in the resizeMe-function, I had this:
//Standard height, for which the body font size is correct var
preferredHeight = 768;
var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) > - 1;
$("body").css("font-size", newFontSize);
see: auto resize text (font size) when resizing window?
EDIT:
To add jQuery to your code, you do the following:
You have to reference the jQuery library. Usually you do it just before your closing </body> tag in your index.html page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
This is the one hosted by google, which is the fastest and smallest. You can also download the library and put in your js folder and reference it the same as above, but with the relative link to your file.
You can then paste the jQuery code below the above script and above the closing </body> tag and it should work. You can also put the code in a separate file, and link to it at the bottom of the body section of your index.html page.
Use Media Queries for re-sizing dynamically, or use VH, VW(relative units), but is currently supported by Chrome and IE9/10.