Embed PDF with <embed> set to height without scroll bars - embed

I am using Google Chrome and would like to open a PDF in a Bootstrap Modal (or any container really), where the scroll bars are on the outer element i.e. the modal, and not the PDF.
The problem is that in order to do this one must get the height of the PDF and set the embed to be at least that height. Some ASCII art to demonstrate:
This is not too difficult to accomplish, and here's a sample jsFiddle that essentially shows this (but instead of a modal we have the jsFiddle window):
/---------------\ where |•| is a scroll bar
| Modal |
| /--------\ |
| | Embed |•| |
| | | | |
| | | | |
| \--------/ |
\---------------/
What I would like to achieve is:
/----------------\
| Modal |•|
| /--------\ | |
| | Embed | | |
| | | | |
| | | | |
\----------------/
I could not find on inspection of the <embed> DOM node any indication of what dimensions the contained object might have.
As an alternative to the <embed> object, could one achieve this with PDF.js?

Related

Are Google Apps Script "Script Properties" actually "Project Properties" ? What's the correct scope?

Google documentation says that the PropertiesServices.getScriptProperties() is scoped to a Script.
However, I have a working example that seems to contradict this.
I have one project, with three scripts (tabs) in it. Each tab sets a value of "last run time" in the ScriptProperties. If the scope of these ScriptProperties was truly "per script" then I would expect to be able to store different values for each script (tab).
But what I am finding is that each time one script (tab) executes, it overwrites the value of "last run time" that was saved by the other scripts (tabs).
This seems to indicate that the ScriptProperties are actually scoped per Project, not per script.
Can anyone corroborate this, or tell me what I am misunderstanding?
(I left feedback on the Google documentation page already)
Yes, the ScriptProperties are common to the entire script project. The concept of files within the projects is purely for organisational convenience, all of the .gs "files" within a single Google Apps Script "Project" represent one "Script".
Generally, if I need to track multiple last execution time values, I'll set a unique property for each:
Action1_LastExecuteTime
Action2_LastExecuteTime
etc..
Another example of this is Script authorization, when a user authorizes a scope, it's at the project level, and that authorization applies to any code within the project.
Preface
There is an important difference between scope and a script (or project).
Properties
PropertiesService accesses resources scoped to a particular access level, each determining what will and will not be shared in different execution contexts (standalone, bound to document or Web App). There are 3 access levels that have distinct scopes:
Script - available to all users regardless, a global scope so to speak
Document - available to all users, but limited to current (container) document
User - limited to the user under which authority the script runs
Projects
Apps Script Projects have a well-defined and consistent meaning, to quote the documentation:
A script project represents a collection of files and resources in Google Apps Script
Note that a script project is more than a mere sum of its files, it has a notion of resources. There are currently 3 groups of resources that can be associated with an Apps Script project:
Libraries - acts as a stand-in for modules
Cloud Platform project - controls quotas, permissions and access
Advanced Google Services - thin wrappers around corresponding REST APIs
How does this answer the question?
Although getScriptProperties() method deals with the "script" scope it does so insomuch the resources represented (properties storage) will be accessible anywhere in the execution context (provided being reachable, ofc) of the script, not the project as it represents more than that.
The difference becomes more apparent in the complexity Libraries bring in as multiple projects share library's ScriptProperties (if it exposes them), but each have their own instance as well.
It is true that the glossary states that script projects are "sometimes referred to simply as "the script"" but it does not say that whenever you encounter the term "script" you can substitute "project", and vice versa.
Whole structure visualized:
+----------------------------------+
| Project |
| +------------------------------+ |
| | Script | |
| | +--------------------------+ | |
| | | .gs files | | |
| | +--------------------------+ | |
| | +--------------------------+ | |
| | | .html files | | |
| | +--------------------------+ | |
| | +--------------------------+ | |
| | | appsscript.json manifest | | |
| | +--------------------------+ | |
| +------------------------------+ |
| +------------------------------+ |
| | Resources | |
| | +--------------------------+ | |
| | | Libraries | | |
| | +--------------------------+ | |
| | +--------------------------+ | |
| | | Cloud Platform Project | | |
| | +--------------------------+ | |
| | +--------------------------+ | |
| | | Advanced Google Services | | |
| | +--------------------------+ | |
| +------------------------------+ |
| +------------------------------+ |
| | Properties | |
| | +--------------------------+ | |
| | | ScriptProperties | | |
| | +--------------------------+ | |
| | +--------------------------+ | |
| | | DocumentProperties | | |
| | +--------------------------+ | |
| | | UserProperties | | |
| | +--------------------------+ | |
| +------------------------------+ |
+----------------------------------+

"404 Not Found" for newly created Resources using Laravel

I am trying to create a webpage with Laravel (5.8.35) / MySQL using XAMPP.
After setting up the DB and initializing it with some test data I wanted to create some resources to retreive the data (of students in my case).
The standard Laravel landing page in my case is located at localhost/testlaravel/public. I am trying to access the resource on localhost/testlaravel/public/api/students which results in a 404 | Not Found.
What could the problem be? Thank you in advance
Here are a few code snippets of hopefully all relevant files.
routes\api.php
// List students
Route::get('/students','StudentController#index');
// List single student
Route::get('/student/{id}', 'StudentController#show');
App\Http\Controllers\StudentController
public function index() {
$students = Student::paginate(20);
return StudentResource::collection($students);
}
App\Http\Resources\StudentResource
public function toArray($request) {
return parent::toArray($request);
}
Edit1:
The console output for php artisan route:list is:
+--------+----------+------------------+------+------------------------------------------------+--------------+
| Domain | Method | URI | Name | Action | Middleware |
+--------+----------+------------------+------+------------------------------------------------+--------------+
| | GET|HEAD | / | | Closure | web |
| | POST | api/student | | App\Http\Controllers\StudentController#store | api |
| | GET|HEAD | api/student/{id} | | App\Http\Controllers\StudentController#show | api |
| | PUT | api/student/{id} | | App\Http\Controllers\StudentController#update | api |
| | DELETE | api/student/{id} | | App\Http\Controllers\StudentController#destroy | api |
| | GET|HEAD | api/students | | App\Http\Controllers\StudentController#index | api |
| | GET|HEAD | api/user | | Closure | api,auth:api |
| | POST | student | | App\Http\Controllers\StudentController#store | web |
| | GET|HEAD | student/{id} | | App\Http\Controllers\StudentController#show | web |
| | PUT | student/{id} | | App\Http\Controllers\StudentController#update | web |
| | DELETE | student/{id} | | App\Http\Controllers\StudentController#destroy | web |
| | GET|HEAD | students | | App\Http\Controllers\StudentController#index | web |
+--------+----------+------------------+------+------------------------------------------------+--------------+```
You are saying, you want to create a webPage so i think you have to add the Route to routes/web.php file for web pages routes/api.php is for api's
if you are creating api, check if XAMPP is functioning also may be some connection issues
like your ip address

<a> vs <button> vs <div> vs <input type='button">

I've seen so many posts along the lines of "I'd like to one-specific-thing for my one-specific-situation when it comes to buttons in HTML.
If I may, I'd like to get a professional take all in one post, here:
When making buttons in HTML, what situations lead to:
<a> being the best answer?
<button> being the best answer?
<div> being the best answer?
<input type='button'> being the best answer?
There's a good article that summarizes the differences nicely
In short:
| | General usage | Complex designs | Can be disabled |
|-----------------------|----------------------------|-----------------|-----------------|
| <button> | General button purpose. | Yes | Yes |
| | Used in most cases | | |
| --------------------- | -------------------------- | --------------- | --------------- |
| <input type="button"> | Usually used inside | No | Yes |
| | forms | | |
| --------------------- | -------------------------- | --------------- | --------------- |
| <a> | Used to navigate to | Yes | No |
| | pages and resources | | |
| --------------------- | -------------------------- | --------------- | --------------- |
| <div> | Can be used for clickable | Yes | No |
| | area which is not button | | |
| | or link by definition | | |
Generally, I try to use the HTML tag in the most "semantic way" and useful way:
<a> tag: a is for "anchor", I use it when the button is a link to a content on the page or external content;
div tag: this is a simple container. I use it when I have to do simple buttons without any specific job but really custom style(simple animation, transition, open modal, etc). This is the jolly.
<button> tag: according with W3, this is the standard tag to create buttons on the page, so use it when you need an action like onClick().
<input type="button"> tag: is equal to the button tag, but you need it for form submission, because browser that submit for with <button> can submit different values. I use it generally on form.

Google Chrome breaks rowspan from time to time?

We've build a complex and dynamic layout with a few colspans/rowspans in there. The page Looks good in IE and FF, as well as in Chrome. Most of the time in Chrome... When I refresh the page by clicking F5 it can happen, that the layout is suddenly wrong, the rowspan is not rendered correctly. This happens only every 5th time, sometimes every 10th time. What can be the reason?
Example:
---------------
| | | |
--------| | |
| | | | |
---------------
suddenly becomes something like
---------------
| | | |
| | | |
| | | |
|--------------
| | | | |
---------------
but yeah, not every time, not in other Browsers, only in Chrome and only from time to time.
SourceFile: https://files.fm/u/yhvtk6cz#

Start a table cell from a second column

Can I have a table with few rows in which the second row to start under the second column?
Something like this:
+-----------+----------------+
| | |
| | |
+-----------+----------------+
| |
| |
+-----------+----------------+
| | |
| | |
+-----------+----------------+
No, you cannot. But you can make it look like so by using right border and background colors.
Working example: http://jsfiddle.net/gkuQD/
You could have:
<tr><td>Content1</td><td>Content2</td>
<td> </td><td>Content3</td>
<td>Content4</td><td>Content5</td></tr>
This may be what you're looking for.