Adding custom IFrame to Wordress - html

I am creating a website for my movie theatre. We are using a ticketing system that comes with our point of sale to offer sales online. The link is https://ticketing.useast.veezi.com/sessions/?siteToken=pxbww48zebzhba4e6yzr7f01am
I want to have this display on a page in wordpress. I don't want the scroll bar, and I want the height to fit the height of the linked content, without using a scrollbar. So if the website has 20 films with showtimes, I want the user to just scroll down on the webpage to access the info, without having a second scroll bar for the iframe.
I hope this makes sense. Also, I am hoping that there is a html snippet I can add to the page where I do not need to add code to the header to make it work. I don't want to screw around too much with the theme files themselves and this is only for one page. Thanks everyone!

Related

Adjusting onset of actual website after introducing a top-navigation bar

I have set up some website using GitHub Pages and used the Leap Day theme. Here's the repository containing the theme's original source code and this is how the template looks in practice.
Since I wanted to customize my website more, I added a navigation bar from bootstrap at the top of the page. Afterwards, I adjusted margins and onsets of the Leap Day template code in order for the actual website's contents to start only below the fixed navigation bar (to avoid that the navigation bar overlaps the rest of the website). For that, I adjusted mainly this CSS file. Also in that file, I renamed the name of the original navigation bar that was present in the template already, and that is shown to the left of the website, to nav2. The custom (top-)navigation bar is called navi.
Well, after all, most of the website is running smoothly and does what it's supposed to do (presenting some project).
However, one problem has remained after the introduction of the additional top-navigation bar, namely that a click onto the name of a certain section or subsection of the currently shown website doesn't lead the user immediately to the start of the respective section any longer, but that what the user is going to see at the start of the actual website's content is somewhere below start of the requested section. As I understand it, the start of some section, e.g. Introduction, is moved to a certain height y on the website when the user clicks onto the Introduction-section's name in the left navigation bar. However, now that the additional navigation bar at the top has been added, such that all further contents have moved downwards, the position y, where the start of the section is shown, is hidden by some banner at the top of the page.
Therefore, I was wondering if anyone knows which of the many variables in the aforementioned css
file to change in order to move the point of onset of a section, y, further down on the website. I have tried changing a lot of parameters already, but I am unable to see which one controls the point I termed y.
To make my problem a bit clearer, please consider the following two images:
This is what is supposed to happen:
This is what actually happens:
Thank you very much in advance!
You could try some of the solutions listed in this StackOverflow question: Fixed page header overlaps in-page anchors.
The most common one appears to be adding padding-top to the a element equal to the height of the navigation bar.

Scrollbar contains contents belong to web page after refresh

I am building a blog website driven by Hexo. After I changed the font-size and resized the left panel, the vertical scrollbar contains some contents belong to the blog article contents when refresh the webpage every time. However, when I change to another web-tab(like wiki or something else) and back to the blog page tab, the scrollbar turns working normally.
I have no idea why this happened. And I am trying to fix this issue. The weird scrollbar capture is provided below. The pink element is scroll thumb and others are the elements should belong to blog article content.
I will appreciate if anything would be helpful.

How to make custom HTML block floatable/scrollable in Moodle

I am using Moodle 2.91.
I am trying to make certain custom HTML blocks on the side of a course in Moodle, floatable, so they move with you when you scroll down a page. I would like to do it only for certain HTML blocks, is it possible?
If so, can you please guide me what changes should I be making and in where?
Thanks in advance!
Regards,
Pooja
Moodle 2.6:
Need to make the question grid (on the top leftmost corner of a page) as floating so that the same scrolls up-down as and when the page is scrolled. Presently if each page contains options/questions more than 5, the question grid gets lost once you scroll down the page. This creates an issue with non-conversant participants.

Smaller div tags in one large one not centering or spanning across screen

Ok, so I am making a website for my so far small Minecraft Build team MCBuild, unfortunately, My ribbon on the top with all the pages links, that are not active, will not centered it is embedded inside of another div, and put into a singular .html file and displayed through an iFrame. All of the code is on GitHub and also, the page can be viewed here. Any help would be great, I think I can't get it just because I am frustrated that I didn't get it the first time. Thanks!

Linking To Several Pixels Before A Div On the Same Page

This is probably a really simple question. I have a link on the page tsawebmaster1.hhstsa.com/web_design.html that links to a div on the same page as the link itself using tsawebmaster1.hhstsa.com/web_design.html#seven_steps and it works just fine. The problem is that my fixed header is at the top of the page and thus overlaps the content by 100px, so when it takes you to that div, the user does not see the top of the div linked to. Is there a way I can link 100px less than a certain div.
I don't know if this will work but you should try this:
Our seven core steps to web design will teach you the simple steps on how a website is built. Before delving into any new topic, it is important to develop background knowledge of the whole picture. This way, when you start actually learning web design in depth, you'll be able to connect your under
Try put an empty paragraph between your logo and the contents.
You better use javascript to reach your goal. the window.scrollTo(x,y) function can make your page scroll to a specified amount of pixels on click (also it will look much more neat).
documentation: https://developer.mozilla.org/en-US/docs/Web/API/window.scrollTo
usage:
click to scroll down 100 pixels