How to make custom HTML block floatable/scrollable in Moodle - html

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.

Related

Adding custom IFrame to Wordress

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!

HTML Template Editing - responsive

I am currently working and editing this template:
https://freewebsitetemplates.com/preview/rehabilitation-yoga/contact.html
As you can see, on the home page you have to use your mouse to scroll down in order to see the entire content - I want to remove this option and have all the content be displayed and fitted on the entire browser(even if you resize your browser) when you open the page.
I am sorry if this is a "stupid" question - Still pretty much new to all this, so I would be glad to get some help.
Thanks.
you need to change places of all parts of your content. Change size and align them properly

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

Animated Section Indicator using <ul> like twitter bootstrap

I am using twitter bootstrap and has a very long page that I divide into multiple sections.
I'd like to implement a Section Indicator on top left of the screen that always shows where the reader is currently reading, like the screenshot below:
I managed to get the layout correctly as shown here:
However, I've got some problems that I've been working for a few weeks but still can't solved:
How to mark the current section dynamically as the user scroll
How to animate the movement of the arrow from the source to the next (or directly to the destination if the reader click a farther away rather than scrolling)
I've tried with the simpler version from getbootstrap.com/components but still to no avail... Please help... this is very stressful as I'm particularly weak in javascript and css :(
EDIT:
To summarize the answer:
Take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
For a single-page website have a look at the One Page Navigation Plugin http://trevordavis.net/blog/jquery-one-page-navigation-plugin. It assigns a css-class to the current menu item upon clicking and as the user scrolls down the page.