I am trying to create my first webapp using google apps script. I am trying to follow the examples but it is not working. I created a stylesheet.html tab along with my main html page. But none of my formatting is working. I thought google appended the files together. FYI, my styles work fine if I include them at the bottom of the main page.
This is my code.gs page:
function doGet() {
return HtmlService.createHtmlOutputFromFile('frontpage')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
This is my main page called frontpage.html :
<!DOCTYPE html>
<html lang="en">
<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
<!-- google scripts says to not include header & body tags ?? -->
<meta charset="utf-8">
<title>Borah Physics</title> <!-- google syas not to use title tag need another way to set title.-->
<h1><div style="text-align:center">Physics Homework</div></h1>
<!--List of available assignments. This needs to be updated as assignments are added.
Add assignment name and the ssID of the spreadsheet containing the questions.
when clicked need to return value (ssid) as sheetID.-->
<select id="assignment">
<option sheetID="1ajedscAjuXDsUOcQRzru5-bhUIluGn3fPPsoN-Ww5wU">Kinematics 1</option>
<option sheetID="10mCGpLRwv8ETFbW3RwisI45s_x3-ZItatzq_vU0wacs">Dynamics</option>
</select>
<!--Question should be string variable activeQuestion It will get updated when the question number changes.-->
<div id="question">
<br>
<br>
Question Here
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
<br> <br>
</div>
<!-- If question has an image it will go here.-->
<div id="qImage">
Along with image (if needed)
<br>
</div>
<!-- This is the user inputed answer. It needs to be recorded in the response sheet of the spreadsheet and
compared to the correct answer. (in the comparison we need to add a within x% variable so if the answer
is close it is counted as correct. This accounts for thinks like g=10 m/s^2 vs 9.8 m/s^2.-->
<div id="answer">
<label>Answer:</label>
<input type="text" name="answer"/>
<input type="Submit" value="Submit"/>
<br>
<br>
</div>
<!-- bottom navigation list-->
<ul id="nav">
<li><a> </a></li>
<li><input type="button" onclick="previous()" value="Previous"></li> <!-- goes to previous question (calls previous function)-->
<li><a > Correct: 4/12 </a></li> <!-- need to insert variables #correct & total # questions-->
<li><input type="button" onclick="next()" value="Next"></li> <!-- goes to next question (calls next function).-->
<li><a> </a></li>
</ul>
and finally my stylesheet.html page
<style>
#assignment{
width: 20%; margin: 10 ;
position: absolute;
right: 10px;
}
#question {
width: 90%; margin: 0 auto;
}
#qImage{
width: 90%; margin: 0 auto;
}
#answer {
width: 90%; margin: 0 auto;
}
#nav {
text-align: justify;
min-width: 400px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
</style>
My output shows the at the top of the page as if it were text. So I am not connecting the style sheet to the frontpage.
I have not even attempted to understand functions or javascript yet. Lots to learn. (This is a physics homework app I hope to get working before school starts!) All help is appreciated. Any tutors out there?
thanks.
Change createHtmlOutputFromFile to createTemplateFromFile in the doGet() function.
Should be:
return HtmlService
.createTemplateFromFile('frontpage')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
If a file has a scriptlet in it, it's a template. Your frontpage file has a scriptlet in it. The scriptlet is:
<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
You can also call a server function from a scriptlet instead of using HtmlService directly inside the scriptlet.
Related
I am new to NextJs/ReactJs and I was trying to implement the Responsive slide with Swiperjs which is available in codepen.io
Here is the link to codepen.
Responsive slider timeline with Swiper
Below are my steps I carried out;
Installed JQuery (npm install)
Imported both swiper.min.css and swiper.min.js CDNs to my _Document.js file
Added the css files to Globals.css for time being
Created a TimelineComponent.js to have the swiper component separately.
imported TimelineComponent.js in the index.js
When I run the project it nicely shows you the expected output as below.
But when I resize my browser it behaves abnormally like below
import React, { useEffect } from 'react';
import $ from 'jquery';
function TimeLineComponent() {
function operateTimeline() {
var timelineSwiper = new Swiper('.timeline .swiper-container', {
direction: 'vertical',
loop: false,
speed: 1600,
pagination: '.swiper-pagination',
paginationBulletRender: function (swiper, index, className) {
var year = document
.querySelectorAll('.swiper-slide')
[index].getAttribute('data-year');
return '<span class="' + className + '">' + year + '</span>';
},
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
breakpoints: {
768: {
direction: 'horizontal',
},
},
});
}
useEffect(() => {
$(window).on('load resize', operateTimeline);
operateTimeline();
return () => {
$(window).off('load resize');
};
}, []);
return (
<div className="timeline-container">
<div className="timeline">
<div className="swiper-container">
<div className="swiper-wrapper">
<div
className="swiper-slide"
style={{
backgroundImage: "url('https://unsplash.it/1920/500?image=11')",
}}
data-year="2011"
>
<div className="swiper-slide-content">
<span className="timeline-year">2011</span>
<h4 className="timeline-title">Our nice super title</h4>
<p className="timeline-text">
Lorem ipsum dolor site amet, consectetur adipscing elit, sed
do eisumod tempor incididut ut labore et dolore magna aliqua.
Ut enim ad mimim venjam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div
className="swiper-slide"
style={{
backgroundImage: "url('https://unsplash.it/1920/500?image=12')",
}}
data-year="2012"
>
<div className="swiper-slide-content">
<span className="timeline-year">2012</span>
<h4 className="timeline-title">Our nice super title</h4>
<p className="timeline-text">
Lorem ipsum dolor site amet, consectetur adipscing elit, sed
do eisumod tempor incididut ut labore et dolore magna aliqua.
Ut enim ad mimim venjam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
<div className="swiper-pagination"></div>
</div>
</div>
</div>
);
}
export default TimeLineComponent;
Error can be replicated in the above codepen example as well. Most probably this is with the styling
Your help is much appreciated.
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 1 year ago.
I have a lot of <p> tags on thousands of pages.
There are hundreds of <p> tags like below.
<p>Read: Example</p>
Those start with Read:.
I want t to apply some CSS to <p> tag only if the paragraph starts with Read:. Is it possible?
This is not posible with CSS alone, you would need Javascript to achieve this.
This example shows you...
#1. How to use Javascript to search your documents p tags and find strings where the 1st index of the string is set to the target string Read: using indexOf().
#2. How to then set an attribute, el.setAttribute(), on that tag that identifies that element as a Read: element containing the string we want to affect in our CSS.
#3. How to use CSS + elements attribute to then style the target elements in the DOM as you want them styled.
const p = [...document.getElementsByTagName('p')] -> create an
array of elements we can then loop over using tag.forEach()
tag.textContent.indexOf("Read:") === 0-> lets find elements that
have target string at the very beginning of the tag.textContent.
tag.setAttribute("data-read", true) -> set the tags data-read
attribute to true
p[data-read="true"] in CSS we style all elements that are p tags
and have the attribute <p data-read="true">
Using this method we are able to use CSS to style the tags and JS to find them.
const p = [...document.getElementsByTagName('p')]
p.forEach(tag=>tag.textContent.indexOf("Read:") === 0 ? tag.setAttribute("data-read", true) : false)
p[data-read="true"] {
background-color: lightgreen;
font-weight: bold;
color: darkgreen;
}
p[data-read="true"]:after {
content: ' *';
}
p[data-read="true"]:before {
content: '* ';
}
<div>
<p>Read: some info</p>
<p>Read: some info</p>
<p>p tag content</p>
<p>more ptag info</p>
<p>Perhaps the p content has a sentence that starts with the string and we do not want to get that one. Read: Speak: Listen:</p>
<p>Read: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Read: More</p>
<p>Read: More</p>
<p>Hey</p>
<p>Hello</p>
<p>Lorem ipsum dolor sit amet, consectet Read: More</p>
<script>
let list = document.getElementsByTagName("p");
for (let i = 0; i < list.length; i++) {
if (list[i].textContent.startsWith("Read:")) {
list[i].style.color = "red";
}
}
</script>
</body>
</html>
I don't know if CSS have such selectors but you can still achieve your goal with JavaScript
let list = document.getElementsByTagName("p");
for (let i = 0; i < list.length; i++) {
if (list[i].textContent.startsWith("Read:")) {
list[i].style.color = "red";
}
}
First of all the solution in that question: CSS selector to bold only labels without child elements does not solve my issue.
I have labels with text only and others with text and child input, select and textarea form's elements.
i.e:
<label class="control-label">State
<select name="status" id="status" class="form-control">
<option value="">Choose..</option>
...
</select>
</label>
and other like:
<label for="defect" class="control-label">Error</label>
I need to set white-space: nowrap to labels that has no child HTML elements only and as the above question answers stated, I tried the following:
label{
white-space: nowrap; /* Label without HTML*/
}
label + label {
white-space: normal; /* Label with HTML */
}
However, it does not work.
One solution would be adding a class to the element and using CSS to format it accordingly.
label.empty {
white-space: nowrap;
}
Link to the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
The other comment points to using :empty but in your case the <label> contains some text and doesn't apply as empty
AFAIK there is no solution using CSS selectors. The solution proposed by #FabioPontes to control via an additional class name would be the most straight-forward.
Following is a javascript solution that verifies for an element's child nodes and applies a white-space:nowrap if (1) there is only one child node and (2) this node is of type text. Please view node types.
var elements = document.getElementsByClassName("control-label");
for (i = 0; i < elements.length; i++) {
if (elements[i].childNodes.length == 1 && elements[i].childNodes[0].nodeType == 3) {
elements[i].style.whiteSpace = "nowrap";
}
}
<div>
<label class="control-label">State - we need a really long text to check if the white-space nowrap is actually working so lets place this text here.
<select name="status" id="status" class="form-control">
<option value="">Choose..</option>
</select>
</label>
</div>
<div style="margin-top:20px;">
<label for="defect" class="control-label">Error - we need a really long text to check if the white-space nowrap is actually working so lets place this text here.</label>
</div>
The option to add a class has already been suggested by Fabio Pontes and is a good one, but if you don't want to add classes, here are a couple options.
The first thing you could do is modify your markup to wrap each label in a div and then leverage the :only-child pseudo selector. In order for this to work, you'll have to include the select element as a sibling of the label, rather than as a child of it.
.control-label-wrapper label:only-child {
white-space: nowrap;
}
<div class="control-label-wrapper">
<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>
<select name="status" id="status" class="form-control">
<option value="">Choose..</option>
</select>
</div>
<div class="control-label-wrapper">
<label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>
</div>
Another option which may not require modifying your makup at all is to use an attribute selector. Perhaps you're already using an attribute for all these childless labels. The example HTML in your question suggests you may be.
label[for="defect"] {
white-space: nowrap;
}
<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.
<select name="status" id="status" class="form-control">
<option value="">Choose..</option>
</select>
</label>
<label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>
I've I'm trying to build a page which collects together all of the pages on a site and displays them along with their children (if they have any).
So far I've managed to make it loop through all of the top level pages and display them, however I'm getting some difficulty in making it display the child pages in the right place. It seems that I can either retrieve them but have them appear at the end or not retreive them at all.
I would need it to look like this:
<div id="parent" class="guide-item">
<h2>Parent</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div id="child" class="guide-item">
<h2>Child</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
Here is my controller (including my attempt at getting it to loop through the children:
// Render pages from database
public function sectorAction($sector)
{
$em = $this->getDoctrine()->getManager();
$pages = $this->getDoctrine()
->getRepository('acmeStyleGuideBundle:pageSector')
->findBySectorJoinedToUrlTopLevel($sector);
if (!$pages) throw $this->createNotFoundException('Unable to find any matching sectors');
foreach ($pages as $page) {
if ($page->getChildPages()) {
$children = $this->getDoctrine()
->getRepository('acmeStyleGuideBundle:pageContent')
->findBySectorAndParent($sector, $page->getPageUrl());
}
}
return $this->render(
'acmeStyleGuideBundle:Page:pages.html.twig',
array(
'Pages' => $pages,
'Children' => $children,
'header' => $sector
)
);
}
Here are the relavent repositories:
public function findBySectorJoinedToUrlTopLevel($sector)
{
$query = $this->getEntityManager()
->createQuery('
SELECT p, s FROM acmeStyleGuideBundle:PageContent p
JOIN p.pageSector s
LEFT JOIN p.pageTypes t
WHERE s.sectorName = :sector
AND t.typeName != :type
AND p.parentPage IS NULL'
)
->setParameter('type', 'Section Headers')
->setParameter('sector', $sector);
try {
return $query->getResult();
} catch (\Doctrine\ORM\NoResultException $e) {
return null;
}
}
public function findBySectorAndParent($sector, $pageParent)
{
$query = $this->getEntityManager()
->createQuery('
SELECT p, s, c FROM acmeStyleGuideBundle:PageContent p
JOIN p.pageSector s
LEFT JOIN p.pageTypes t
LEFT JOIN p.parentPage c
WHERE s.sectorName = :sector
AND p.pageUrl = :parent
AND t.typeName != :type'
)
->setParameter('sector', $sector)
->setParameter('parent', $pageParent)
->setParameter('type', 'Section Headers');
try {
return $query->getResult();
} catch (\Doctrine\ORM\NoResultException $e) {
return null;
}
}
And here is my twig template where I want to output the code:
{% extends 'acmeStyleGuideBundle::landing.html.twig' %}
{% block definition %}
<article class="js-load pageLoad">
<h1>
{% if header is defined %}
{{ header | title }}
{% else %}
{{ Pages[0].pageName }}
{% endif %}
</h1>
{% for pe in Pages %}
<div id="{{ pe.pageUrl | lower}}" class="guide-item">
<h2>{{ pe.pageName }}</h2>
{{ pe.richText | raw }}
</div>
{% endfor %}
</article>
{% endblock %}
I thought that I might hae been able to loop through the children in the controller and then apply it to the twig template as 'children' instead of 'pages' but that didn't seem to work as the following code just constantly repeated the last element in the database which WASN'T a child page.:
{% for ce in Children %}
<div class="childPage">
<div id="{{ ce.pageUrl | lower}}" class="guide-item">
<h2>{{ ce.pageName }}</h2>
{{ ce.richText | raw }}
<div class="explanation">
<div class="card active">
<h3>Example</h3>
{# ce.example | raw#}
</div>
<div class="card">
<h3>Code Example</h3>
<pre name="code" class="{#ce.lang#}">{# ce.example #}</pre>
</div>
</div>
</div>
</div>
{% endfor %}
I've been looking at this problem for a while now so I probably can no longer see the wood for the trees so feel free to pull my code to pieces. I'm a learner at symfony/twig/doctrine anyway so I'll gladly take any feedback you care to give me.
I managed to find a solution.
Instead of trying to do everything in one controller and template, I created a new template called childpages.html.twig and put in this code:
{% for pe in Pages %}
<div id="{{ pe.pageUrl | lower}}" class="guide-item child">
<h2>{{ pe.pageName }}</h2>
{{ pe.richText | raw }}
{{ render(controller('acmeStyleGuideBundle:Page:findCodeExamples', { 'pageParent': pe.codeExample })) }}
</div>
{% endfor %}
I then wrote a new controller:
// Render children from database (Similar to showSubAction but without the $pageUrl requirement)
public function findChildrenAction($pageParent, $sector)
{
$em = $this->getDoctrine()->getManager();
$pages = $this->getDoctrine()
->getRepository('acmeStyleGuideBundle:PageSector')
->findBySectorJoinedToParent($sector, $pageParent);
return $this->render(
'acmeStyleGuideBundle:Page:childPages.html.twig',
array(
'Pages' => $pages,
'sector' => $sector
)
);
}
and referenced it in the place I needed it to appear in my original template:
{{
render(controller('acmeStyleGuideBundle:Page:findChildren', {
'pageParent': pe.id,
'sector': 'residential'
}))
}}
Not sure if it's the most elegant solution but it worked.
I am trying to pull content from specific categories and have them appear on the homepage along with an image that is pulled from the custom field for that entry. Everything looks like it is working ok.. and the second entry works as it should, however with the first entry, only the image links back to the post, the title and read more link are not recognized by the mouse as links. Looking at the html, it seems like the php is printing everything as it should, so I figured it must be a CSS problem, but I cleared all the relevant styles and the links still are not recognized.
Here is the php I have for the home page
<?php
// Show custom fields from Food Category
query_posts('showposts=2&cat=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php
// This is added to show <!--more--> on home page
global $more;
$more = 0;
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php
$values = get_post_custom_values("food_thumb"); echo $values[0]; ?>" alt="" /></a></div>
<div class="span-3">
<p class="smallTitle">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></p></div>
<div class="span-1 theDate">
<?php the_time('m.d.y') ?>
</div>
<div class="span-4">
<?php the_content('<span class="moretext">Read more...</span>'); ?>
</div>
<?php endwhile; ?>
The HTML output looks fine..
<div class="span-4 fixed-height-sidebar">
<div class="smallthumb"><img src="foodthumb.jpg" alt="" /></div>
<div class="span-3">
<p class="smallTitle"><a href="http://.com/?p=24" rel="bookmark">
Food Test 1</a></p></div>
<div class="span-1 theDate">
07.16.09</div>
<div class="span-4 fixed-height-sidebar">
<p>Mmmmmmmm. Food. Aliquam libero libero, luctus ut tristique pulvinar, euismod at diam. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, <span class="moretext">Read more…</span></p>
</div>
<div class="smallthumb"><img src="http://.com/wp-content/uploads/2009/07/foodthumb2.jpg" alt="" /></div>
<div class="span-3">
<p class="smallTitle"><a href="http://.com/?p=3" rel="bookmark">
Food test page -2</a></p></div>
<div class="span-1 theDate">
07.12.09</div>
<div class="span-4">
<p>“Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In nec odio vitae nunc euismod vulputate. Integer aliquam ullamcorper tortor, nec suscipit magna viverra in. Nunc urna neque, dapibus id congue et, dignissim vitae augue. Aliquam et bibendum lacus. <span class="moretext">Read more…</span></p>
</div>
</div>
Here is a screenshot to help explain my problem...
alt text http://zacharydesigns.com/temp/wpsample.jpg
I took your HTML output, and pasted it into a blank HTML page (adding the HTML/HEAD/BODY tags). Both links rendered and worked correctly. I tested in Firefox and IE. From the looks of it, your HTML output is just fine.
Any chance you could post the output of the entire page?
--Adam
What does fixed-height-sidebar do in the CSS?
That's the only difference between the two entries.