I have no formal training in web development and created my website entirely from studying the code from other sites and finding out things from the internet. So my query might be trivial for many of you established web developers.
I've created this website: www.justnoktours.com which is a booking website for bicycle tours in Bangkok. It's very basic...clients read about the tour and then "book the tour"
I now need them to first check a checkbox before the "Book this tour" button becomes clickable.
I've attached a picture (with the code) of where this needs to be and also what needs to happen.
If anyone can help me, I'd really appreciate if you could give me the exact code so that I can just cut and paste. website page
You can use following code:
<label for="chkTermsAndConditions">
<input name="chkTermsAndConditions" id="chkTermsAndConditions" type="checkbox" onchange="document.getElementById('btnBookTour').disabled = !this.checked;" />
I have read and agree to the Booking conditions
</label>
<input type="button" name="btnBookTour" disabled id="btnBookTour" value="Book this tour" />
Related
So I've searched high and low on the site and can't find an answer that addresses my problem specifically.
I tried making the links in the usual way - gave an id attribute, then used href# as it was a link on the same page - and they worked fine for a while, I think it was when I added pics to the page that they stopped working but I'm not sure. They only work now if I click on them twice - has anyone else experienced this issue?
I've made sure all elements eg body are closed, and none of the IDs are duplicated.
Early Life<br />
Career<br />
Equipment<br />
Techniques<br />
Dan's top 5 blues fusion guitarists
<H2 id="Early Life">Early Life</H2>
<h2 id="Career">Career</h2>
I'm trying to find the semantically correct way to describe an HTML element that represent a way to get help (e.g. help icon) and its help content.
I tried to search on this topics but searching help on help isn't an easy business. Here would be a simple example of what I have in mind (using a simple script to show/hide the help content as well as leveraging the "title" attribute):
<div>
Please enter your password
<a class="help" title="Your password must have 5 characters">
<img src="/images/help.svg" alt="">
</a>
<span class="helpText displayNone">
Your password must have 5 characters.
</span>
<input type="password>
</div>
Is there a better way to represent this (in this format). The idea is to have an accessible and SEO friendly way to describe "toggleable help content".
The question is about HTML/HTML5 and WAI-ARIA attributes (not JavaScript) - I'm looking for the best element representation of my example (if such concept exists).
I think this question is larger than you intend based on your markup. First let's clean up your example so there are appropriate semantic and structural elements in place that also make this accessible to users:
<div>
<label for="pwd">Please enter your password</label>
<input type="password" id="pwd">
</div>
That makes for an accessible field. No script, no ARIA. Just a <label> that is properly associated with the field.
Now you want to offer some help to the user and still associate it with the field.
First, do not use an anchor. That tells users of assistive technology that it will take them away from the page and they may not want to click or activate the control. Use <button>.
Then you can use ARIA to associate that tip with the field. In this case aria-describedby will be announced along with the field.
You also need to fill out the alt attribute, or your image will not be announced to a screen reader user at all.
The best ARIA role to use in this context is the role=tooltip (read more in the ARIA spec).
Here is one way you could approach it:
<div>
<label for="pwd">Please enter your password</label>
<button><img src="/images/help.svg" alt="Help"></button>
<span id="pwd-tip" role="tooltip">Your password must have 5 characters.</span>
<input type="password" id="pwd" aria-describedby="pwd-tip">
</div>
You can use CSS to determine if the button has focus and display the following sibling span (button:focus + span) if you must avoid script, but that is sloppy. You can use script to toggle a class on the button which uses similar CSS to then display the span.
You can put the text into the <label> and hide it by using a CSS off-screen technique, meaning it will always be announced to screen readers and then you can dump the aria-describedby.
Frankly, you can skin this a few different ways. Check out the keyboard interactions you must consider also over at the ARIA Practices description for a tooltip.
However, for the most part you are better off making your help text always visible (especially if you want to satisfy the nebulous notion of SEO). In a vacuum I would just put this text in the <label> and be done with it.
I have looked at the other questions here but I'm not finding the answer I need.
My boss walked out, leaving me as pretty much the only person here, and I am stuck jumping into a responsive site design with only the most basic of html experience. So I really need it spelled out for me step by step.
I would like to be able to add an arrow that is pointed right when an item is closed and down when it is opened.
I have my arrows created. They are called right.png and down.png
Please note: If you get through this and think there is an easier way for me to do this then I will simply get rid of his code and replace it with something you have that works. I am so lost right now and my VP wants me to get this done. Please help!
How he set it up:
This is the accordion code that the previous guy started to use. It works but he didn't include the arrows in it.
script
$(function() {
$( "#gallery" ).accordion({
heightStyle: 'content',
collapsible: true,
autoHeight: false});
});
/script
This is the first element that expands. Please note he has the first one defaulted to be open when a user comes to the page....
div id="gallery" (I had to remove the < > to make this show up it is at the top of the list of expanding parts)
<h3 class="gallery">Associate of Arts in Liberal Arts</h3>
<div class="photobox"><img class="image-left" src="images/aala.jpg" width="302" height="200" alt="" />
<p>Centenary's accelerated 64-credit hour AALA business program lets you complete your Associate of Arts degree in either in-class or online. This program focuses on business, leadership, teamwork, and communication. We provide students with the skills needed to start careers in a competitive and fast-moving economy. Our program focuses on leadership, teamwork, and communication. These skills build your personal growth, service to the community, and career advancement. Enhance your employment opportunities or transfer your credits to earn your Bachelor's degree. </p>
</div>
This is the second element that expands this one is defaulted to be closed when a user comes to the page.
<h3 class="gallery">Bachelor of Science in Business Administration</h3>
<div class="photobox"><img class="image-left" src="images/bsba.jpg" width="302" height="200" alt="" />
<p>This accelerated 128-credit hour business program gives you the essentials in the business field. Your degree is organized into three parts: Core Requirements, the Business Major, and free electives. Core Requirements include courses from the liberal arts disciplines. This guarantees uniformity of study without sacrificing your educational interests.</p>
</div>
I hope this is clear enough for everyone.
Thanks!
Edit:
Thanks for trying everyone. I tried everything you guys suggested and I can't get it working. It's just too much for me to do. Every time I add something or change something it breaks something else on the page.
I'll just tell them they will have to go without until they hire someone new.
Many, many thanks.
If you are using JQuery UI accordion you just have to add the CSS that triggers the styling:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
EDIT: Used your code with the example jQuery UI accordion code, to get what you want:
Look at this example: http://codepen.io/anon/pen/LVpPmN
In the CSS section you see that I overwrite the standard CSS classes.
For jquery UI accordions, "icons" property can be given for active as well as inactive states. These can be customized to add your own custom classes with your images as background.
var icons = {
header: "", //provideCustom Classes here for active and inactive states
activeHeader: "" //
};
$( "#gallery" ).accordion({
icons: icons
});
https://jsfiddle.net/Lcsbcn22/
Edit
Added a demo. Please look how the custom classes(red and blue) get placed at the accordion headers . Similarly you have to create two classes with your arrow images as background-image and put them in icons object.
I would like to know how to float all my badges next to each other in the footer menu. I have four badges so far but could be up to six. The badges are my SSL, AVG, BBB, Etc... I am very very new to all this website building stuff. I use Joomla 3.1 and use a paid up to date template. I can see all the codes and add the badges but they always pop up on top of each other. I had one person help me but they did it in tables and told me that it would work but that it was not the right way to do it. Please remember when helping me that I am a child learning to color for the first time when it comes to this :) Thanks for any help that any one my be able to give.
If you look at the bottom of this page( http://www.jcluforever.com/J-ADORE-GOD-CHRISTIAN-T-SHIRT-p/ts-jdrgod-prp.htm )that the badges they have for payment, SSl, and up front; this is how I want my to line up only I would like mine in the footer and I have like 5 that I would be adding
some idea of what I would have is
https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;">
next one would be
<div id="avgthreatlabs_safetybadge_small"><noscript>AVG Threatlabs</noscript></div><script language="javascript" src="https://api.avgthreatlabs.com/static/js/security_s.js"></script>
next would be
<!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT ---><table width=130 border=0 cellspacing=0 cellpadding=0 title="CLICK TO VERIFY: This site uses a GlobalSign SSL Certificate to secure your personal information." ><tr><td><span id="ss_img_wrapper_110-55_flash_en"><img alt="SSL" border=0 id="ss_img" src="//seal.globalsign.com/SiteSeal/images/gs_noscript_110-55_en.gif"></span><script type="text/javascript" src="//seal.globalsign.com/SiteSeal/gs_flash_110-55_en.js" ></script><br />GlobalSign SSL Certificates</td></tr></table><!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT --->
and so on and so on until I place all the badge I want or can or need to. I am not sure what part of the template you need it is all short or what is called LESS I am told
Best practice is to have these badges nested in an unordered list. Each badge would be inside of a list item. For this example, let's say each badge is just an image. Try this:
<ul class="my-list">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
Then, in your stylesheet, write:
.mylist {
list-style:none;
}
.mylist li {
float:left;
}
This will float all your items to the left of the page and "stack" the list items beside each-other, instead of on top of each-other.
Learning web design is a process that will require patients, dedication, and more trial and error than you can imagine. It isn't completely dissimilar from learning a new spoken language, except that instead of learning one, you learn several, and then learn how to make them work together to create what you want. If this doesn't interest you, and you just want to run your website or online business, then I would consider hiring a web designer or firm to maintain the code that powers your business; however, if learning is truly what you want to do, then read!
HTML
HTML, or Hypertext Markup Language, is the code you write to deliver data to the browser. It is not extremely complicated to gain a basic understanding of how HTML works. I'm not going to try and explain the entire thing here, but here is a great beginner tutorial.
CSS
CSS, or Cascading Style Sheets, is a different language that you use, in order to tell the browser how your data should appear. It is very light weight, and pretty much just plain English. Here is an easy to follow guide to CSS.
If you read through these two guides, and do a little experimenting on your own, I believe that you will be able to solve the problem on your own. Once you have the basics of HTML and CSS down, there is still a ton to learn, but once you master the basics, you will be in a much better position to pick up more.
Happy coding, and have fun!
I am struggling with how to write the correct CSS for positioning some data entry forms. I'm not sure what the "proper" way to do it is.
An example of what I am trying to create a layout for:
Last Name Middle Initial First Name DOB
||||||||||||| |||||| |||||||||||||||| ||||||||||
City State Zip
|||||||| |||| |||||||||
Basically I have my labels and the ||| are representing my form elements (text boxes, dropdowns etc). I don't know the proper way to create classes for these elements without just creating one time use classes that specify a specific width that is only for these elements.
Also, how do I get all of these elements aligned properly and multiple items per line? Do I need to float each element?
Would I do something like:
<div class="last-name">
<div class="label">
<label>Last Name</label>
</div>
<div class="field">
<input type="text" />
</div>
</div>
<div class="middle-initial">
<div class="label">
<label>Middle INitial</label>
</div>
<div class="field">
<input type="text" />
</div>
</div>
...
<div class="clear"></div>
last-name and middle-initial etc would all be classes that would be used once and floated to the left. I'm not sure if this is a good way to go about it or not? Is there a better way to do this kind of positioning with CSS so I can avoid using tables?
I would choose to mark up this particular layout using fieldsets:
<form>
<fieldset class="personal">
<label>
<span>Last Name</span>
<input type="text" ... />
</label>
<label>
<span>Middle Initial</span>
<input type="text" ... />
</label>
...
</fieldset>
<fieldset class="address">
<label>
<span>City</span>
<input type="text" ... />
</label>
</fieldset>
</form>
I'd float all the labels, make the spans or inputs use display:block, and most everything should fall into place.
IMO, this is tabular data.
I don't think it's necessarily a shame to use a <table> for this.
Related discussion: Proper definition for "tabular data" in HTML
It's not a bad thing to use table layout when the data you're laying out is a table! That's what you have here, imo: a table. So save yourself some grief and treat it that way. We've been so beat up by CSS purists and semantic-web lunatics that I suggest the pendulum has swung too far: now we tie ourselves in knots over-CSSifying our layouts. Or at least I do. I spend way too much time trying to avoid table layout.
The outcome is that a lot of my pages have to do browser checking. And the extra time (hey! the 80-20 rule again!) to deal with browser quirks is way more than it should be. I'd have saved a lot of time, and had more robust pages, if I'd just thought a little bit instead of going for the never-any-tables, always-pure-CSS solution every time. Table handling is solid like a rock in every browser with no problems and no frustrations.
Just my experience.
Here is my version without tables: http://jsfiddle.net/dy4bv/5/ (increase a little HTML part to fit all fields)
Maybe it will be helpful.
You could always use display:table and display:table-cell.
So using your example code above, you would do something like this
div.last-name, div.middle-initial{
display:table-cell;
padding:1em;
}
Example: http://jsfiddle.net/5LBgp/
EDIT
A bit more context to add to the answers from #Pekka and #Pete Wilson:
I foresee two big problems with styling this as a table
if you ever want to change the styling, you will need to hack away at the HTML, probably even redo it completely. Your code will be more future friendly if you use divs.
screen readers and such will likely make a mess of it, not understanding that the table is not really a table.
I am not a web developer, but i've had a crack.
http://jsfiddle.net/dy4bv/28/
This is based on #Samich's design, but instead of using a pile of divs with magic clearing divs interspersed, i've split the rows up into items in a ul. I use labels for the warm fuzzy semantic feeling. The styling is done by making the label-and-field divs inline-block, so they flow from left to right, but the labels and fields themselves block, so they stack vertically (this is a very crude idea, i know). As #zzzzBov pointed out, you can then use the field IDs to hang widths off.
No, that is not tabular data. Here's a test if you're ever wondering if something is tabular data: What are the table headers?
As for the layout, whenever I get something that I have trouble laying out, I back up and ask if the design is the problem and in this case I think the answer to that question is: yes.
Is that a user friendly design? no. It's difficult to scan and will be slow for users to identify errors if there are submit errors.
Luke Wroblewski has some great information on his blog and in his book Web Form Design: Filling in the Blanks about how to design human friendly forms.
Just to unload these 2 pennies...
The first column is "PropertyDescription" and the second column is "PropertyValue", while each row is a "Property" items -- voilà, a table!
Still prefer CSS, but this can certainly be classified as tabular data.