So I'm making a web app to run a small CTF that I will be hosting within my school, and I have developed a webpage that will load up the problems, my example right now lays out the problems in a long row
Here's how that's done:
<body class="main-body">
<div class="body">
<section class="content">
<div class="container-asdf"> <!-- This is a grid, assume that this particular element is repeated several times with changes -->
<div class="item-a">Test Problem</div>
<div class="item-b">Category: Test, Problem</div>
<div class="item-c"><button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-info">Button</button></div>
</div>
</section>
</div>
</body>
(Full disclosure that this HTML is likely pretty bad, just working with what I know)
the div with class "container-asdf" is automatically generated for the amount of problems, assume it works perfectly and it generates say 50 problems, I only want 10 of them to appear on the page at a time and I want to separate them using pagination, without having to make a ton of different HTML pages, how exactly could I do this? I don't need code, just some concepts and guides of how I could. My first thought process was to put it in invisible containers and make it appear as you select different numbers, thus why I asked how to use pagination
In summary: I have a lot of elements(in the same HTML file) appearing on the page at once, I want to limit this and split it into pages without having to make multiple HTML files, I am using Flask/Jinja to generate said HTML file, if that helps.
Thanks for any help!
Not sure if this applies but have you considered using the easyPaginate jQuery plugin for the pagination? An example and setup is available here.
Related
I want to show/hide a specific div on-click, but there are some serious caveats. I should also mention I fundamentally know how to do this, using answers gleaned from similar questions here (eg., http://jsfiddle.net/6W7XD/1/), but this is more for the specific situation.
I have a CMS which will not allow me to edit the HTML at all outside of specific modules. Additionally, the CMS is one of those which disables id selectors, so I cannot use those, either.
I understand that the JSFiddle example I provided hinges on specific sibling/child selectors, but I'm wondering if there's a selector which would work for this situation. I can only edit the html in the first module (for simplicity's sake, I'll call it .module-1), but I want to show/hide .module-4
The arrangement of the code in the CMS, however, is a little bit byzantine.
This is a parred down version of what I'm working with (this is for a sidebar, by the way, housed under the beta id). I cannot edit any of the fundamental structure, except in the place marked:
<div id="beta-inner" class="pkg">
<div class="module-1 module">
<div class="module-inner">
<div class="module-content">
<!-- I can edit this area only, so this is where I would place my show/hide link. If the jsfiddle method I posted is appropriate in this situation, I'm assuming it would show/hide after clicking on links placed here. -->
<span class="span3" tabindex="0">Hide Module-4</span>
<span class="span2" tabindex="0">Show Module-4</span>
</div>
</div>
</div>
<div class="module-4 module">
<!-- this is the module I want to show/hide -->
<div class="module-inner">
<div class="module-content">
</div>
</div>
</div>
</div>
</div>
I can edit the CSS as much as I want, provided I don't use id (which has been made inaccessible to prevent people messing up the CMS? I think that's the rationale offered), and I believe that precludes the checkbox hack entirely.
I cannot use JQuery/JS/anything of that nature, since they're disabled. I know this would be a quick thing with jquery, but unfortunately, there's nothing I can do about that.
So... if this is possible... how would I go about doing it?
I'm trying to build a personal website from scratch. While I was looking around for ideas, I found this particular template that I liked: http://phydeve.epizy.com/imozar/index-1.html
I want to try building everything on my own to learn but there's one thing I can't figure out. How do I achieve the changing text under the header (under "Hi I'm Norman Doe"). I've tried multiple google searches with differing terms but I can't find an explanation.
I am fine learning any language/flavor I might need.
I believe that person is using a plugin called Typer.js
Link: https://steven.codes/typerjs/
There are definitely a lot of ways to do it with JS, but if you want minimal coding, I'd use a plugin.
<!--Put your words in the DATA-WORDS-->
<h1 style="font-family:sans-serif;">
we are <span
class="typer"
id="some-id"
data-words="sample word,another sample,amaziing"
data-colors="#ed426d,#6d67c6,#b74033"
data-delay="50"
data-loop="1">
</span>
</h1>
<!--Insert at the bottom of your html file-->
<script async src="https://unpkg.com/typer-dot-js#0.1.0/typer.js"></script>
Here's a fiddle:
https://jsfiddle.net/jemismagical/1ajz9etk/19/
I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.
I am creating a mobile application using HTML, Cordova, Aurelia, and Bootstrap. The application has the ability to upload images and create a row of thumbnails. Being that this is a first time using Aurelia for me, the challenge is that I need a row to consist of only 4 images. I need to have the application create a new row of images after the current row reaches it's fourth image. I searched the web for solutions but didn't really find anything to suit my needs other than I might need to incorporate a value converter somehow. Does anyone know how I would go about accomplishing this task? Any assistance would be greatly appreciated. I have included my original code below, which is pretty much the code I had before knowing that I would have to dynamically create additional rows.
<div class="row">
<div class="col-sm-3" repeat.for="image of images">
<div class="thumbnail">
<img src.bind="image | blobToUrl" />
<div class="caption text-center">
<button type="button" class="btn btn-default" click.trigger="setCoverPhoto($index)" data-toggle="tooltip" title="Use as cover">Set Cover</button>
<button type="button" class="btn btn-default" click.trigger="removeAttachment($index)" data-toggle="tooltip" title="Remove photo">Remove</button>
</div>
</div>
</div>
</div>
Thanks for your help!!!!!
Ashley's answer is correct in this scenario.
Sometimes however it may be necessary to render a list with a wrapping element that contains x amount of items from this list.
You can solve this by grouping the list and iterating twice. Once on the grouped list and inside this loop another loop on the children lists.
You shouldn't pollute your VM with this grouped list if it's for UI purposes only, so it belongs in a converter. Example : https://gist.run/?id=9d624d96d86c7e0ad1c0919fd5fb8819
I put your code in a gist here: https://gist.run/?id=fb3631fe09d44395fd352c29e145c4a0
It looks fine to me as is.
Bootstrap is responsive, so you can't "lock" to 4 images per row, per se. It will go to one image per row below a certain screen width.
You can play with the dimensions in the images array in app.js to see how bootstrap will handle different things.
quick question here:
I am using DCE on Typo 6.1.5. I am trying to set an element out of the "container" div. But it rarely works.
<div id="contentMarginFix">..</div>
<div id="contact">
<div class="container">
<div class="gmaps">
</div>
</div>
</div>
I want to get the "gmaps" div in the "contact" div. Not in the "container" one.
Here is the DCE Template
http://gyazo.com/2c0a13746cdd834ebdb86a0b64fd10b1.png
And here is the template for the page
http://i.imgur.com/y2rwP6P.jpg
I was trying for two hours now maybe i just don't see it but i appreciate your help very much!
From the screenshots you provided I'd say it's possible the layout template is in the wrong place. Make sure the contact.html you use as a layout is in the right place.
If this is a basic fluid template directly in typo3 make sure the file is in the place you defined in your setup typoscript. Default would be something like this:
layoutRootPath = fileadmin/templates/Layouts/
If this is inside an extension the correct place for the layout template is
Resources\Private\Layouts
Be aware that in more recent extbase versions the naming conventions are more strict and require a capital first letter for the html files (so Contact.html)