How to get the size of the wxpython panel

I'm developing a calendar application
The top level window is a frame containing a panel that displays the calendar grid and a panel that contains a "Close" button.
I'm unable to obtain the size of the calendar grid panel.
When I add code to get the panel size, the result is (20,20), which cannot be correct
The screen size is (1920,1080) so I'm expecting something like (1920, 1000)
When I add the wx.lib.inspection module, I see the correct size being displayed. It is (1920, 968)

Can anyone shed some light how to get the correct size of the panel?

This is the code I have so far

import wx


class DrawFrame(wx.Frame):
  def __init__(self):
    wx.Frame.__init__(self, parent=None, title='Agenda', style= wx.CAPTION | wx.CLOSE_BOX)
    self.drawpanel = DrawPanel(self)
    self.buttonpanel = ButtonPanel(self)
    self.framesizer = wx.BoxSizer(wx.VERTICAL)
    self.framesizer.Add(self.drawpanel,1, flag=wx.EXPAND)

    # Add an empty space 10 pixels high above and below the button panel
    self.framesizer.Add((0,10),0)
    self.framesizer.Add(self.buttonpanel,0, flag=wx.EXPAND)
    self.framesizer.Add((0,10),0)
    self.SetSizer(self.framesizer)
    self.Maximize()
    self.Show()


  def GetPanelSize(self):
    return self.drawpanel.GetSize()


  def OnClose(self, event):
    self.Close()


class DrawPanel(wx.Panel):
  # This panel's parent is DrawFrame. DrawFrame is the top level window.
  def __init__(self, parent):
    wx.Panel.__init__(self, parent=parent)
    self.parent = parent
    self.Bind(wx.EVT_PAINT, self.OnPaint)
    self.x1, self.y1, self.x2, self.y2 = wx.GetClientDisplayRect()
    b = self.x1, self.y1, self.x2, self.y2 
    print b
    self.width, self.height = wx.GetDisplaySize()
    c = self.width, self.height
    print c


  def OnPaint(self, event=None):
    dc = wx.PaintDC(self)
    dc.Clear()
    dc.SetPen(wx.Pen(wx.BLACK, 2))
    dc.SetBrush(wx.Brush('WHITE'))

    """
    DrawRectangle (self, x, y, width, height)
    Draw a rectangle with the given corner coordinate and size.
    x and y specify the top left corner coordinates and both width and height are positive.
    """

    dc.DrawRectangle(self.x1 + 5, self.y1, self.x2 - 10, self.y2 - 60)
    dc.DrawLine(40, 100, 600, 100)


class ButtonPanel(wx.Panel):
  # This panel's parent is DrawFrame. DrawFrame is the top level window.
  def __init__(self, parent):
    wx.Panel.__init__(self, parent=parent)
    self.parent=parent
    self.buttonpanelsizer = wx.BoxSizer(wx.HORIZONTAL)
    self.closebutton = wx.Button(self, label = 'Close')
    self.Bind(wx.EVT_BUTTON, self.OnClose, self.closebutton)
    self.buttonpanelsizer.AddStretchSpacer(prop=1)
    self.buttonpanelsizer.Add(self.closebutton, 0, wx.ALIGN_CENTER)
    self.SetSizer(self.buttonpanelsizer)


  def OnClose(self, event):
    self.parent.OnClose(event)


app = wx.App(False)
frame = DrawFrame()
print frame.GetPanelSize()
app.MainLoop()

Much appreciated,
Thanks

A Clever Sticky Footer Technique

Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element.

That’s not quite what I’m talking about here. “Sticky footers” were a UI concept before position: sticky existed and they mean something slightly different. The idea is that they stick to the bottom of the screen, even when the content of the page isn’t enough to push them there. But if there is enough content, they are happily pushed down.

We covered five ways to do this in years past, which included techniques that are somewhat modern, including calc(), flexbox, and CSS Grid.

Enter a sixth challenger! Reader Sílvio Rosa wrote in with this:

(Probably easiest to check out on a medium-sized desktop screen, which is kinda where sticky footers matter the most anyway.)

It’s pretty much just this:

html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

What I like about it is that it doesn’t require any special extra wrapper for non-footer content.

It’s also a little brain-bending. When I see top: 100vh; I think well that won’t work because it will push the footer outside the viewable area. But that’s the clever bit. It will do that no matter how big the footer is (no magic numbers), and then the sticky positioning will “suck it back up” to stick along the bottom edge. But it will never overlap content, so it’s happy to be pushed down below content, which is a core tenant of the sticky footer pattern.


The post A Clever Sticky Footer Technique appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Help Please!!!!!!!!!!!!!!!!!!

I need help creating a sorted linked list from a text file. The text file has movies titles and their ranks. I need to put them in descending order base on their ranks. All in c++.

Line length revisited: following the research

Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that shorter lines do not necessarily lead to faster reading. If you’re looking for a definitive answer to use in your next design review debate, though, no dice. The big finding is that long lines don’t slow things down as much as previously thought, not that they’re better or worse.

But there’s so much more meat in here that I found much more interesting, mostly because I’m largely ignorant on the topic and gained a dollop of context on writing, legibility, and behavior.

Things like…

There’s a term for transitioning between lines of text

It’s return sweeps. You know, like your eye hits the Return key at the end of the line and sweeps to the start of the next line. Then, there are undershoots. The idea is that eyes may not sweep to the exact start of the next line, instead stopping a bit short.

Showing four muted lines of test with jump arrows across each line taking the eye to the end of the line, followed by dashed arrow leading to the next line. Red arrows highlight where the eye could undershoot a new line and miss content.

Those little rapid eye movements between words and phrases? Those are called saccades. I had to look that up.

The impact of undershoots is what’s being challenged

The previous research we’ve relied on for years comes from 1940(!), a time when we obviously were more concerned with paper pages than bright digital displays. Longer lines, it said, increased the likelihood that eyes undershoot during a return sweep, and undershooting results in a regression that results in a 130ms to 250ms delay where the brain needs to get its bearings. The report refers to that as undersweep-fixation.

We can still process words during undersweep-fixation

This report cites a 2019 study that tried to correct undershoots by bolding the first word at the start of each new line, sort of like an anchor that naturally draws the eye closer to the left margin.

The 2019 study did find that the bolded words did decrease undershot return sweeps But despite that, reading speed did not improve. That’s the impetus for challenging the long-held assumption that shorter is better.

Mary explains further:

In seeking to reconcile why longer line lengths may not slow down reading on screen but do so when reading print, I outlined some differences, e.g. visual angle, time spent scrolling. But although physical differences between reading from screen and reading print still exist, we now have direct evidence to explain why longer lines were read at least as fast as shorter lines. Readers can process words during the brief fixation when undershooting the start of the new line. This saves time in subsequent processing. Now we might also acknowledge that there is greater consistency between the range of optimal line lengths for print and screen.

Where does this leave us today?

Well, nowhere closer to a clear answer we can use in our day-to-day work. But it’s good to dust off our collection of design and copywriting best practices and know that line length is less of a constraint than perhaps it has been.

Again, none of this tells us whether long or short lines are better. Mary ends her report by saying she cannot definitely recommend using longer lines of text because there are clear because there are still some factors at play, including:

  • Shorter lines are more effective for people with dyslexia.
  • More questions about return sweeps and undershooting need to be answered.
  • Several other studies indicate that users prefer shorter lines and judge longer lines as more difficult to read.

To Shared LinkPermalink on CSS-Tricks


The post Line length revisited: following the research appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Meet Touch Design For Mobile Interfaces, A New Smashing Book By Steven Hoober

Mobile and touch are the new normal for computing, but there remain a lot of myths, rumors, errors, bias, and out-of-date information on how portable touchscreens are used. Let’s change that!

In our brand-new book Touch Design for Mobile Interfaces, Steven Hoober shares his in-depth research about designing for touch as well as tips, tricks, trends, tendencies, guidelines, and heuristics you can apply to your work immediately to create human-centered mobile interfaces. Jump to table of contents.

About The Book

There are over two billion portable touchscreen devices in use today, and hundreds of millions more installed in cars and kiosks. Sales of traditional mouse-and-keyboard computers have been falling for years, replaced by mobile phones and tablets.

Conventional computers now sport touchscreens and otherwise blur the lines between device types – and between mobile and desktop operating systems. Mobile and touch are the new computing normal, but there is a lot of myth, rumor, error, bias, and out-of-date information on how portable touchscreens are used.

Touch Design for Mobile Interfaces presents and shares real information on hardware, people, interactions, and environments. Steven Hoober has studied how people really touch and hold phones and tablets, as well as seeing it firsthand over twenty years designing products for mobile phones, tablets, kiosks, and computers.

As well as Steven’s in-depth research, the book includes tips, tricks, trends, tendencies, guidelines, and heuristics you can apply to your own designs immediately.

400 pages. Written by Steven Hoober. Cover design by Espen Brunborg. Shipping starting late-December.

Meet our new book “Touch Design for Mobile Interfaces”.

You’ll learn:

  • The history of touch and how it’s influencing traditional computing platforms still today,
  • how touch intersects with human behavior and impacts your design work,
  • how people really hold and touch,
  • how your designs can take into account the ways people adapt their touch to perform different actions,
  • how to overcome problems of visibility and interactivity,
  • how to avoid catastrophes when mistaken taps are made,
  • how to consider likely problems when planning the design of your app or website,
  • how to design UIs that attract the eye, afford action, and inspire confidence,
  • how human vision is not what it appears to be,
  • how to create well-organized, usable templates for touchscreen design,
  • the pros and cons of some of the most important page design elements (e.g., menus, lists, floating bars, tabs).
A sneak-peek inside the book. Large view.

Who is this book for?

This book is for digital-first designers working on mobile or touchscreen products. If you want to design better for mobile, or you need data to back up your decisions, this book is evidence-based, specific, and full of actionable information. If you want to move from desktop design to mobile, the book provides a path for you to reconsider design decisions for touch and mobility.

There are benefits too for product designers, managers, and analysts, as well as developers and engineers on mobile touchscreen products. You’ll be able to plan for the new touch-also world, write better stories and features, and understand how the work environment has moved from predictable computers in cubicles to devices everywhere, anywhere, and anytime.

Table Of Contents

How do people really use their mobile devices? And how can we design better mobile interfaces based on that knowledge?

The 13 chapters of our shiny new book explore just that.

1. Defining Mobile Devices
+

The first chapter describes different devices in the context of their unique attributes of portability, connectivity, and awareness. We’ll come to understand how important it is to understand mobile technology and use patterns, and become aware that mobile paradigms are influencing more traditional computing platforms.

2. The History and Technology of Touch
+

Chapter 2 reviews the evolution of direct screen interaction dating back to the 1950s, and the development of commercialized touch since the 1980s. Today’s devices can be better understood by learning how touch technology advanced before achieving ubiquity through capacitive touch.

3. Capacitive Touch
+

Chapter 3 addresses how capacitive touch intersects with human behavior and impacts our design work.

4. Standards, Assumptions, and Problems
+

We’ll learn how various standards, assumptions, and problems can be problematic for designers of today’s mobile touchscreens. The specifications, norms, and principles of earlier times are sometimes not to be trusted as they are too often based on technological assumptions that no longer apply.

5. Finding Out How People Hold and Touch
+

Chapter 5 covers the observational research Stevn Hoober conducted to discover how people actually manipulate their mobile phones and tablets in everyday use. Through debunking some widely accepted but incorrect assumptions, we’ll learn most of all to change the way we think about designing for touch, because while there are many ways to hold a device, everyone uses them all, constantly shifting from one to another.

6. Touch Accuracy and the Center-Out Preference
+

To understand touchscreen performance, Steven undertook several studies and found that popular notions of touch accuracy and preferred touch regions are wrong. He discusses this in chapter 6 and shows that people favor the middle of the screen for both reading and touching.

7. How Fingers Get In the Way
+

Every mobile device user has experienced how fingers get in the way, and in chapter 7, you’ll learn how our designs can take into account the ways people adapt their touch to perform different actions like tapping and scrolling, and to overcome problems of visibility and interactivity.

8. Imprecision and Probability
+

Chapter 8 covers the issues around imprecision and probability and shows how we need to design systems, interactions, and processes that prevent mistakes — especially avoiding catastrophe when mistaken taps are made.

9. Phones Are Not Flat
+

Mobile devices are used in all kinds of locations and people handle them constantly. People and their environments can be confusing, confounding, and unpredictable. Chapter 9 describes ways we can consider likely problems when planning the design of our apps and websites.

10. People Only Touch What They See
+

We start to move into tactics — with a little less theory, data, research, and background info. Chapter 10 covers best practices in how the UIs of interactive elements are designed to attract the eye, afford action, be readable, and inspire confidence that they can be safely tapped.

11. 1, 2, 3: Designing by Zones
+

In chapter 11, Steven introduces the concept of information design, describes how human vision is not what it appears to be, and then turns all that we’ve learned so far into a simple formula we can all use to create well-organized, usable templates for touchscreen design.

12. Progressive Disclosure
+

Shifting from template theory to template creation practice, in Chapter 12, we’ll review the pros and cons of some of the most important page design elements, such as menus, lists, floating bars, and tabs, to see how they can integrate with the concept of information design for center-out touchscreen products.

13. Practical Mobile Touchscreen Design
+

We’ll finish off by skimming lightly over more or less the entire process of designing digital touchscreen products, from teams to strategy and onward. From these resources we can start building a reference library of how to pursue each aspect of the design process.

400 pages. The eBook is available right away (PDF, ePUB, Amazon Kindle). Shipping starting late-December. Written by Steven Hoober. Designed by Espen Brunborg.

About the Author

Steven Hoober shifted focus from graphic design to mobile UX in 1999. Since then, he designed the first Google mobile search, the first mobile app store, several mobile browsers, and numerous websites and apps for global brands. See more of Steven’s research at 4ourthmobile.com.

Reviews and Testimonials
“Eye opening and practical, but above all, useful. Steven synthesizes his extensive field observations with a deep technical understanding of touch usage and history. This book balances pragmatic guidelines and theory in a way that’s accessible, memorable, and highly referenceable. I now observe phone usage completely differently, but in a way that seems completely obvious in retrospect.”

Lucas Roe, Design Lead, Vertex
“We live in a world of touch devices, and even those that don’t have user interfaces are sure to be activated with touch. Reading Steven’s book feels like you are taking a grand tour, full of wisdom and practical advice – and what to look for when designing and developing a real-world experience. And mind you, this book is not just for the creatives. If you are in the C-suite, do yourself a favor and read. It will boost your strategy to bring a good experience to your customers.”

Mudassir Azeemi, Design systems, Ring Central
Technical Details Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

Stay smashing, and thank you for your ongoing support, everyone!

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Stefan and Adam are some of these people. Have you checked out their books already?

TypeScript In 50 Lessons

Everything you need to know about TypeScript, its type system, generics and its benefits.

Add to cart $44

Interface Design Checklists (PDF)

100 practical cards for common interface design challenges.

Add to cart $15

Form Design Patterns

A practical guide to designing and coding simple and inclusive forms.

Add to cart $44

How to auto calculate the html table using jQuery?

Can someone or anybody help me on how to auto calculate total price in the table? Please see the image below:

Please take some time to see Image.png

Here's my code (I will included only the code that I used in the Image:

HTML:

 <div class="col-12">
      <div class="col drop">
        <table name="services">
          <tr name="services">
            <td>
              <select class="form-control serv" name="txt-service" id="txt-service">    //dynamic services (from database)
                <option value="" readonly>--- Select Service ---</option>
                   <?php include "include/connect.php";
                     $sql="SELECT service_id,services,price FROM tbl_serviceoffered";
                        foreach ($con->query($sql) as $row){
                         echo "<option value=$row[service_id] data-price=$row[price] data-service=$row[services]>$row[services]</option>";
                        }
                         echo "</select>";
                    ?>
             </td>
             <td><input type="hidden" style="text-align:right" class="form-control" name="service" id="showservice" readonly></td>
             <td><input type="text" style="text-align:right" class="form-control" name="price" id="showprice" readonly></td>
             <td><input type="text" style="text-align:right" class="form-control" name="item_total" id="item_total"></td>
             <td><button class="btn btn-primary" name="add">Add</button></td>
          </tr>
        </table>
       </div>
    </div>  

    <div class="table-responsive">
      <table class="table table-hover table-bordered table-striped" name="transactions" id="transactions">
        <thead>
         <th></th>
         <th style="text-align:center">Service Name</th>
         <th style="text-align:center">Service Price</th>
         <th style="text-align:center">Service Total</th>
        </thead>
        <tbody>
         </tbody>
       </table>
        <td colspan="2" class="tr">&nbsp;</td>
          <div class="text-right">
            <tr>
             <td><b>Total</b></td>
             <td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" style="text-align:right; font-weight:bold" class="form-control" name="grand_total" id="grand_total" placeholder="Total"></td>
            </tr>
            <tr>
              <td>Cash Tendered</td>
               <td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" type="text" name="cashtendered" placeholder="Cash Tendered"></td>
             </tr>
              <tr>
                <td>Change</td>
                <td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" type="text" name="change" placeholder="Change"></td>
           </div> &nbsp;           
         </div>
       </div>

       <div class="text-right">
          <button type="button" class="btn btn-primary btn-icon icon-right" name="btnSaveTransaction" id="btnSaveTransaction"><i class="fas fa-file-invoice"></i> Process Payment</a>
       </div

JS:

var id = 1; 


     /*Assigning id and class for tr and td tags for separation.*/
        $("button[name=add]").click(function() {
            var newid = id++; 
        $("table[name=transactions]").append('<tr id="'+newid+'">\n\
            <td style="text-align:center;"><a class="btn btn-primary" href="javascript:void(0);" id="remove">Remove</a></td>\n\
            <td width="100px" style="display:none;">' +newid+ '</td>\n\
            <td style="text-align:center; display:none;" class="num'+newid+'">' + $("#txt-transact_num").val() + '</td>\n\
            <td style="text-align:center; display:none;" class="date'+newid+'">' + $("#txt-transact_date").val() + '</td>\n\
            <td style="text-align:center; display:none;" class="patientid'+newid+'">' + $("#txt-patient_id").val() + '</td>\n\
            <td style="text-align:center;" class="serv'+newid+'">' + $("#showservice").val() + '</td>\n\
            <td style="text-align:center; display:none;" class="servid'+newid+'">' + $(".serv option:selected").val() + '</td>\n\
            <td style="text-align:right;" class="price'+newid+'">' + $("#showprice").val() + '</td>\n\
            <td style="text-align:right;" name="txt" class="totalprice'+newid+'">' + $("#item_total").val() + '</td>');

            $("#txt-service").val("");
            $("#showprice").val("");
            $("#item_total").val("0.00");

            calculateSum();
        });

        function calculateSum() {
            var sum = 0;
            //iterate through each textboxes and add the values
            $("tbody").each(function () {
                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }
            });
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#grand_total").val(sum.toFixed(2));
        }

        $("#transactions").on('click', '#remove', function() {
            $(this).parent().parent().remove();
            calculateSum();
        });
    I'm still new in this programming language I hope everyone can help me for our Capstone Project. Thank you!

How to Add a PDF Viewer in WordPress

Do you want to add a PDF viewer in WordPress?

By embedding PDF files in your website, you can make sure those files always have the same layout, no matter what device the visitor is using. These files can also keep people on your website for longer and add value for your uses.

In this article, we will show you how to add a PDF viewer in WordPress.

How to add a PDF viewer in WordPress

Why Do You Need a PDF Viewer in WordPress?

Many websites use PDF files to share information about their services and products. For example, restaurant owners often publish their menu as an online PDF.

You can always upload a PDF to your website and then add a download link in WordPress.

However, this isn’t the best user experience for people who want to quickly look at a PDF document. For example, someone who is planning to visit your restaurant may prefer to read the PDF menu on your website rather than downloading a copy to their computer.

Instead, you can add a PDF viewer in WordPress and then show the PDFs directly on your website. This allows visitors to see the document without downloading it to their computer, which is often quicker and easier. This is particularly true for visitors who are using smartphones or tablets.

It also keeps visitors on your website, which may increase your pageviews and reduce your bounce rate.

With that being said, let’s see how you can easily add a PDF viewer to WordPress. Simply use the quick links to jump straight to the method you want to use.

Method 1. Add a PDF Viewer Using the Block Editor (Easy)

The easiest way to show PDFs on your WordPress website is by using the built-in File block.

This method doesn’t require a special plugin, but you can only customize the viewer in a few ways. If you want more advanced customizations and features, then we recommend using a plugin instead.

To get started, simply open the page or post where you want to add the PDF viewer in the content editor and then click on the ‘+’ button to add a new block.

After that, start typing in ‘File’ and select the right block when it appears.

The WordPress built-in File block

If you’ve already uploaded your PDF to the WordPress media library, then click on the ‘Media Library’ button. You can then select the PDF that you want to embed.

If you haven’t already uploaded the PDF, then click on ‘Upload’ and then choose a file from your computer.

Uploading a PDF file to WordPress

WordPress will automatically choose a size for the embedded PDF.

Note that the default view may not show the full document, but the ‘File’ block includes a toolbar that allows visitors to zoom in and out of the document. They can also scroll through the PDF to see more content.

How to add a PDF viewer in WordPress

If you prefer, then you can change the PDF viewer’s height to show more or less of the embedded document.

To do this, simply use the ‘Height in pixels’ slider in the right-hand menu.

Changing the height of an embedded PDF

Sometimes, visitors may want to download a PDF so they always have it close by. For example, customers may want to download the user manual for your most popular product or the programming schedule for an upcoming event or conference.

By default, WordPress shows a ‘Download’ icon in the toolbar and a button below the PDF.

How to allow visitors to download a PDF in WordPress

The ‘Download’ button beneath the PDF is useful for visitors who are unfamiliar with the different PDF toolbar icons. By showing a ‘Download’ button, visitors will immediately understand that this file is not tied to your site alone.

With that in mind, you may want to leave the ‘Download’ button enabled. However, if you don’t want to include this duplicate content then you can click to disable the ‘Show Download Button’ toggle.

Hiding the Download button in a PDF viewer

When you’re happy with how the PDF is set up, either click on ‘Update’ or ‘Publish’ to make your changes live.

Now if you visit your WordPress website you’ll see the PDF viewer in action.

A PDF viewer, created with the built-in WordPress File block

Method 2. Add a PDF Viewer in WordPress Using a Plugin (More Customizable)

The built-in WordPress File block should be a good fit for websites that simply want to embed a few PDFs. However, if you want more control over the viewer then it often makes sense to use a plugin instead.

PDF.js Viewer is one of the best PDF plugins for WordPress. It allows you to change the height and width of the PDF viewer, and remove buttons from the PDF toolbar.

It also comes with a fullscreen mode, which is perfect for showing longer documents such as ebooks and user manuals.

A PDF viewed in fullscreen mode

First, you’ll need to install and activate PDF.js Viewer. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Settings » PDFjs Viewer to configure the plugin’s settings.

The PDF.js Viewer plugin settings

Most of the time, you can override these default settings when embedding each PDF. For example, you can change an individual PDF’s settings for size or scale.

However, we still recommend changing the default settings to better match your own requirements, as this can save you a lot of time and effort.

By default, the plugin includes Download, Print, and Search buttons in the PDF toolbar. If you want to remove any of these buttons, then simply uncheck the box next to it.

Hiding buttons from the PDF viewer toolbar

You can also change the default embed height and width, and the ‘Viewer Scale.’

Out-of-the-box, PDF.js Viewer shows the PDF without any sidebar so visitors can see the full document when they arrive on the page. They can open the sidebar at any point by clicking on the ‘Toggle Sidebar’ button, as you can see in the following image.

Adding a sidebar to the PDF viewer in WordPress

If you plan to include longer documents or multi-page PDFs then it may be helpful to show the sidebar by default.

To do this, simply open the ‘Page Mode’ dropdown menu and select either Thumbs, Bookmarks, or Attachments.

Changing the mode in a PDF viewer

PDF.js Viewer allows visitors to open the PDF in fullscreen mode. By default, visitors can open this mode by clicking on a ‘View Fullscreen’ link above the embedded PDF.

To replace the text with your own custom messaging simply type into the ‘Fullscreen Link Text’ field.

Customizing the PDF's fullscreen mode

You can also choose whether the link opens in a new tab using the ‘Fullscreen Links in New Tabs’ box.

Launching a new tab will help to keep visitors on your website, but it can be annoying for mobile and tablet users.

Customizing the PDF viewer's fullscreen mode

Fullscreen mode makes it easier to read long documents so we recommend leaving this feature enabled. However, if you don’t want to use it then you can uncheck the box next to ‘Show Fullscreen Link.’

When you’re happy with how the plugin is set up, click on ‘Save Changes.’

You’re now ready to add a PDF viewer in WordPress. Simply open the page or post where you want to show the PDF and then click on the ‘+’ button.

You can now start typing in ‘Embed PDF.js Viewer’ and select the right block when it appears.

Adding a PDF to your WordPress website using a plugin

After that, click on ‘Choose PDF’ to open the WordPress media library.

You can now either choose a PDF from the library or upload a file from your computer.

Embedding a PDF on your WordPress website using a block

The plugin will use your default settings, but you can fine-tune how this PDF looks and acts using the settings in the right-hand menu.

Here, you can change the PDF’s height, width, and scale. You can also remove or customize the ‘View Fullscreen’ link.

Customizing the PDF embed block using a WordPress plugin

Finally, you can choose to remove or show the ‘Download’ and ‘Print’ buttons.

When you’re happy with how the PDF is set up, simply click on ‘Update’ or ‘Publish.’ You can now visit your WordPress blog or website to see the embedded PDF viewer.

A PDF, embedded directly on a WordPress blog or website

Bonus: How To Make Money From Your Embedded PDFs

If you have quality, useful PDFs then you can use them to make money online with WordPress.

After embedding a PDF document in your website, you can turn that page or post into exclusive members-only content. Visitors will then need to buy a membership to access that page or post, and see the embedded PDF.

The easiest way to turn WordPress into a membership site is by using MemberPress. It is the best WordPress membership plugin and allows you to turn any page or post into exclusive subscriber-only content, including embedded PDFs.

Make money by selling PDFs online

We have a complete guide on making a WordPress membership website with step-by-step instructions to help you get started.

We also suggest using Easy Digital Downloads to manage and sell PDFs on your website. You can sell all kinds of digital goods easily and embed PDFs in the product pages as previews, too.

We hope this article helped you add a PDF Viewer in WordPress. You may also want to take a look at our guide on how to create and sell online courses with WordPress or check out our list of the best email marketing services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a PDF Viewer in WordPress first appeared on WPBeginner.

2021 Guide On Bridging the Gap Between People Management and Project Management

Project managers in the organizational paradigm are primarily responsible for carrying all of the processes and tasks that are included in the project development process, on their shoulders. They are the backbone of the whole shebang and without them, everything will go to waste.

As we all know, that the primary objective of the project managers is to complete all of the projects in their roster at the appropriate time with just the resources that are in the resource pool. But that doesn’t mean that they ignore the most important element related to the whole process, the people.

OAuth 2.0 Session Clustering

"How do I control OAuth in a load-balanced application?" is typical of the OAuth 2.0 questions we hear. The short answer is: Session clustering for OAuth isn't unique in any way. The longer answer is that cluster session management is still likely to be a concern. This post explains how an OAuth login affects your app session. To demonstrate, we'll create a basic, secure, and load-balanced app.

Table of Contents

Future Javascript: Javascript Pipeline Operators

Pipeline operators are an upcoming feature to Javascript which gives us another way to pass values through a series of transformations. It gives more context to what developers were trying to achieve when they wrote their code and allows us to do some cool things to boot. Here, we'll take a quick look at pipeline operators, how they work, and how you can use them today.

Javascript Pipeline Operators: Support

Currently, no browser or server-side ECMAScript implementation (like Node.JS) supports pipeline operators. You can, however, get them to work using Babel 7.15. You can learn more about installing Babel here, but suffice to say this will allow you to add pipeline operators into your code.