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.
Related
Context
I am creating a component that displays important statistics that looks like this:
It will be used in a few contexts:
As part of a dashboard where there will be many of these components for different stats such as Twitter followers and Github stars.
It's also going to appear on its own within a blog post (which is about how this component is built).
Question
What would be the most appropriate HTML to make this component accessible? Do I need to use ARIA attributes at all?
My previous approach
I'm leaning towards using a figure element where the title, "Github followers" is the caption.
<figure>
<figcaption>Github followers</figcaption>
<span>10</span>
</figure>
My current approach
I've changed to using divs since I won't know all the contexts where this component is going to be used. Instead I've used the aria-labelledby attribute to associate the number with its label.
<div>
<div id="followers">Github followers</div>
<div aria-labelledby="followers">10</div>
</div>
Thanks to everyone who commented on this post. I'm going to try to answer this as best I can with the information I've gathered.
<div>
<div id="followers">Github followers</div>
<div aria-labelledby="followers">10</div>
</div>
This is part of a reusable React component, so I'm using divs instead of contextual/semantic HTML elements. To provide assistive technologies with useful information, I am using the ARIA labelledby attribute.
I've written about this in more detail on my blog if anyone is interested in the full solution I built: https://www.jamiedavenport.dev/blog/building-a-stat-card-component
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/
What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>
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!
Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.
http://harrisonfjord.com/thinkinc/
A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:
<a name="sponsors"></a>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.
None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?
Cheers!
I think the problem is resulting from the anchors with no contents that you are using.
Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.
I'd try sticking the fragment identifier in the actual renderable entity such as:
<h2 id="sponsors">Sponsors</h2>
and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.
I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):
$(document).ready(function() {
if(window.location.hash.length > 0) {
window.scrollTo(0, $(window.location.hash).offset().top);
}
});
It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307
I got problem in iphone for links with fragments, having
TYPES OF INFORMATION WE COLLECT, correctly linking to
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
That wasn't working properly, and I fixed with a solution like this (using jQuery):
window.scrollTo(0,$('#info').offset().top);
I solved this with a trick, I have put an empty span element with the required ID and a line break before the div
<span id="sponsors"> </span>
<br>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
</div>
GO TO SPONSORS
I don't know what standard your page is trying to conform to, but it is full of errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Some of them so severe, for example:
Unable to Determine Parse Mode!
No DOCTYPE found, and unknown root element. Aborting validation.
that the validator gives up. Contrasted with a page like gnu.org
http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0
You should be pleased that the site renders at all.
I had a problem with scrolling to the wrong position and I fixed it by disabling the Development Tools panel in Chrome :) Apparently Chrome calculates the position incorrectly when DevTools is open.