I want to know if you can use one div and have it pop on with CSS in other places to save space and make things more organized. I have a set of code that uses the same lines for a lot of it, it's buttons and what have you in a pop up. So I want to sit the div in a nice spot and use CSS to have it pop up under different pop ups
<div class = "example">
<ul class = "list">
<li>example</li>
<select name = "example">
<option value = "0">0</option>
</select></li>
<input ...example text...>
</ul>
</div>
So that sits inside another div that is an image and some text that CSS has pop up when a link is clicked, it's just a list of things to pick for a e-commerce page, I have to rewrite it each for each new item, the CSS I have for it just sets the pop up display and I have jquery for the pop up action. Instead of having that said code above being rewritten each time I want it once and use CSS or java to have it pop up with all of the pop ups
You could bootstrap and a modal for popups since you will have an easier time with them and you can do all sorts of things with modals.
And Bootstrap is INCREDIBLY easy to use
Bootstrap Modal example
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
This is the example from W3 Schools - I know it seems like a lot, but Bootstrap will change your web design world :)
save the code you wrote (ex: as example.php).
then you can use it with other pages using an include/require:
for example: (example2.php)
include 'example.php';
or
require 'example.php';
You can use this syntax anytime and anywhere within the php file.
Related
I understand the functionality of both aria-hidden="true" attributes and aria-labelledby in the sense that the prior attribute hides the contents of an element and its child-elements from screen-readers (supposedly including aria-labelledby and aria-labelled), and that the latter attribute gives an element its accessible name based on another element's aria-label.
However, I am faced by a contradiction in a Django course I am completing.
https://youtube.com/clip/UgkxN1rhn70sw6fPvRdhpAFZv0KnPBz7J5-y
(I have also attached a snippet of the uncompleted code below.)
Here, the creator of the course includes both aria-hidden="true" attributes and aria-labelledby attributes simultaneously. According to what I understood, the inclusion of aria-labelledby makes no difference. So what is the point of including it?
TLDR: Does the data of aria-labelledby still appear in screen readers when aria-hidden="true" or did the course creator make a mistake?
<div class="modal" id="#myModal{{student.id}}" tabindex="-1" aria-labelledby="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Your understanding and explanation of the two attributes is good. There might be two little details to add:
You can provide a label for anything, but it doesn’t really matter if the element is neither interactive (focusable), nor a landmark or important part of the document
Attributes can be changed by scripts, so the aria-hidden can be removed later
The code you provided does not really demonstrate the issue you explained, but it looks like a Bootstrap Modal.
In the Bootstrap docs, the first line goes like this:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
So I believe this is what you are referring to. It’s a common pattern with dialogs that they are initially hidden and then revealed by means of a script. If you open the modal dialog demo in Bootstrap, you will notice the following attributes being changed:
- aria-hidden
+ style="display: block; …"
+ role="dialog"
+ aria-modal="true"
Why is aria-hidden there in the first place?
The decision of which attributes to expect in the base markup, and which to add when the script is executed, depends on different factors.
Here, it is probably due to the fact that the script might still be loading when the user navigates the document. By applying display: none in CSS, and aria-hidden in HTML, it’s made sure that the dialog is not exposed to anyone, until the script is loaded and the dialog button pressed.
Once the dialog is open, it needs a name, so the aria-labelledby attribute comes into play.
Below is my first attempt to build a Razor page w/ Boostrap. When the page is first brought up, the form is collapsed. When the user clicks on the Revisit a quote button, the form then expand. I followed the documentation on Bootstrap's site to the dot, but no idea getting the toggle to work. What am I missing?
#page "/"
<div>
<label>What would you like to do?</label>
<div>
<button class="btn btn-primary"
type="button">
Create a new quote
</button>
</div>
<div>
<button class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#quotesearchForm"
aria-expanded="false"
aria-controls="quotesearchForm">
Revisit a quote
</button>
<div class="collapse" id="quotesearchForm">
<form>
<input /><div class="dropdown" /><button></button>
</form>
</div>
</div>
</div>
Mystery solved...out of the box Blazor only has the bare-bones structure from Bootstrap and does not have the javascript portion. What Blazor wants you to do is to use its code to eliminate the use of javascript. Blazor does that by using its SignalR technology to transmit very small amount of data over the wire to do that. Tim Corey has a YouTube video on this.
I currently have three modals which pop up when a button is pressed, however they all share the same modal title, which is the first one set of the three. Being that the three modals are related to different topics, i would like to set three different titles, however they stay the same. So there are three modals, all pop ups work and close correctly and display information, however their title remains the same as the first one set, thanks in advance for help with this most likely simply problem (please ignore spelling too, i'm yet to throw everything through a spelling checker; the three modals are below:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Scratch Programming course</h4>
</div>
<div class="modal-body">
<p>Our Scratch programming course runs through the first semester of school, a ten week course with two lessons per week.</p>
<p>
Designed to teach key skills, such as: Problem solving skills, logical thinking, and most importantly, having fun!
</p>
<p>
Scratch enables the children to learn a variety of key skills for programming, which are transferable to other subjects. Conveyed in a fun and approachable manor (their favourit cartoons and games), so that its possible to have fun while they learn key concepts.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Stencyl Programming course</h4>
</div>
<div class="modal-body">
<p>Our Stencyl programming course runs through the second semester of school, a ten week course with two lessons per week. The same as that of the Scratch course.</p>
<p>
Designed to cement and develop key skills, such as: Problem solving skills, logical thinking, programatical approach to thinking and also thinking outside of the box.
</p>
<p>
Stencyl enables the students to develop their skills in regards to programming, and also aid in the development of their other skills which are transferable. Stencyl is still an approach used to remain underwhelming on the students behalf, conveyed once again in a fun and simple way, rather than throwing the children in the deep end, allowing them to further cement their knowledge before jumping in to their first programmatical language, Python.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Python Programming Course</h4>
</div>
<div class="modal-body">
<p>Our Python programming course runs through the third and final semester of the school, a ten week course with two lessons per week. The same as that of the Scratch course.</p>
<p>
Designed to cement and develop key skills, such as: Problem solving skills, logical thinking, programatical approach to thinking and also thinking outside of the box.
</p>
<p>
Stencyl enables the students to develop their skills in regards to programming, and also aid in the development of their other skills which are transferable. Stencyl is still an approach used to remain underwhelming on the students behalf, conveyed once again in a fun and simple way, rather than throwing the children in the deep end, allowing them to further cement their knowledge before jumping in to their first programmatical language, Python.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
This is likely caused by the duplicate id's on the modals. Each id should be unique.
Also, you have two extra ending div tags. One after the first modal and the other is after the third modal.
I've been getting this weird bug with Bootstrap Modals for a few days now, and can't seem to find any sort of answer online. I'd be grateful for any sort of help on this.
My site uses AngularJS + Bootstrap. The specific part I'm working on right now has two buttons that bring up a modal, and a grid below them that shows the user a bunch of info. The weird part is, the button that allows users to create an entry on the grid will bring up a form, but not allow them to edit the first two fields. The second button, which lets users edit an entry on the grid, is pretty much formatted the same as the create button, yet that works fine. This also only occurs on page refresh only, and is resolved after the user clicks the edit button to bring up that modal, then closes that. Afterward, the create modal will work fine. Here is the code for these parts of the site:
Modal Buttons:
<div class="row-fluid" ng-init="getAllSources()">
<!-- Create Source Modal Button -->
<button class="btn btn-success" data-toggle="modal" data-target="#createSource" ng-click="initCreateSource()">+ Create Source</button>
<!-- Edit Source Modal Button -->
<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#editSource">Edit Source</button>
<!-- Sources Grid -->
<div ng-show="visible.grid == true" class="edus-admin-manage-grid" style="margin-left:0;" ng-grid="sourceGridOptions"></div>
</div>
Modals:
<div class="modal fade" id="createSource" tabindex="-1" role="dialog" aria-labelledby="createSourceLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="createSourceModal">Create Source</h4>
</div>
<div class="modal-body" ng-include="'source-create.html'"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="getAllSources()" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="getAllSources()" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
(The Edit Sources Modal looks the exact same as the Create Sources Modal, with the exception of a different link in the ng-include, and some labels here and there)
Here is the part of the code that doesn't 'work' on page refresh:
<form name="form" novalidate>
<div class="row-fluid">
<label for="inputID">* Source Id</label>
<label for="inputName">* Source Name</label>
</div>
<div class="row-fluid">
<input type="text" class="span4" id="inputId" placeholder="Title" ng-model="createSource.createId" required>
<input type="text" class="span8" id="inputName" placeholder="Source Name" ng-model="createSource.createName" required>
</div>
<div class="edus-admin-manage-label-rows row-fluid ">
<label class="edus-admin-manage-label span4" for="inputId">* Activity Name</label>
<label class="edus-admin-manage-label span4" for="inputName">* Activity Label</label>
</div>
<div class="row-fluid form-inline">
<select class="span4" ng-model="activityType.activity" ng-options="value.name for value in multipleActivityTypes" data-style="btn" bs-select></select>
<select class="span4" ng-model="activityType.label" ng-options="value for value in activityLabels" data-style = "btn" bs-select></select>
<input class="btn btn-default span4" type="submit" ng-click="activityTypeSubmit()" value="Add Activity" data-style="btn"/>
</div>
...
</form>
Everything else after the '...' in the third snippet of the code works - I just can't select any options from the pull down menu, or input anything for the Source Id/Name fields. I figured the ngClick I had in the Create Source button that brought up the modal could've been the problem, so I removed that to see if the form was editable - no luck there. Any help is greatly appreciated!
Update:
Originally, I had my HTML organized as so:
<div>
<!-- Modal Buttons -->
</div>
<!-- Modals -->
When I moved my modals back into the divs that contained the buttons, like so:
<div>
<!-- Modal Buttons -->
<!-- Modals -->
</div>
everything worked as intended. This seems like some sort of scoping issue, which I didn't think would cause a problem in HTML - can anyone shed some light on this type of problem?
It's very hard to determine issue when you paste it here wildly. Please use plunker for such issues. And look at this demo in Plnkr
Consider your data structure is like
$scope.activityType = {
'activityType.activity': {}
};
$scope.multipleActivityTypes = [
{
'name': 'asd',
'val': 123
},
{
'name': 'qwe',
'val': 234
}
];
p.s. i should comment this, but not enought pts. so sorry for that
I'm trying create some bootstrap modals but I'm having an issue.
I have a web page containing the definition of a modal and some tabs such as:
<div id="myModal" class="modal show fade">
<div class="modal-header">
<h3>My Modal</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Field</label>
<div class="controls">
<input id="my-field" class="" type="text" disabled="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div class="tabbable custom-tab">
<ul class="nav nav-tabs">
<li class="active">Tab1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
........
</div>
etc...
</div>
<div>
When activated the modal covers the tab controls. Without the definition of the modal the tabs work fine but with the definition I cannot click on the tabs (or atleast some of them), that is the cursor doesn't change to the little hand to allow me to click on them. It's as if even though the modal is hidden it is covering the tabs. However, after activating the modal and then closing it I can then click on the tabs as normal.
Any ideas as to what is going on?
Thank you for reading.
Are you trying to make the modal fill the whole screen? I ask this because you have omitted two divs that make up the modal: modal-dialog and modal-content. The point of the modal is to bring up another screen without having to serve another page to the browser.
I added the two missing div here http://www.bootply.com/94913, so you can see the difference from this version http://www.bootply.com/89609.
The reason you were unable to click the tabs is because the modal was called at the start instead of via a button or link. Since you omitted the two div mentioned above, this cause the modal to fill the screen and not allow access to the underlying page. Also, since the modal filled the screen, you could not simply click off of it to dismiss the modal and continue. Your only option at that point was to click the close button.
Also, a 1000px modal is not suggested as it will cause scrolling of the browser window on most viewing platforms. Unless this is being designed as a full-screen desktop only application, please plan your modals accordingly. The general rule of thumb that I use is if the modal occupies more than a quarter of the existing website, it probably deserves its own page, or should be incorporated into another section. When you introduce scrolling and modals, you have to take into account the click-off dismiss and either set the modal-backdrop to static or some other custom handling.
I believe the issue is with your Modal
Take out the show class from your myModal div
<div id="myModal" class="modal show fade">
To
<div id="myModal" class="modal fade">
The show class seems to interfering with the tabs. Take a look at this example.
http://www.bootply.com/89609
Just add the "display:none;" to your modal div style :
<div id="myModal" class="modal show fade" style="display:none;">
This way it is out of the way until you want to access it.