Trying to add heart/like buttons on each individual link in a list in Wordpress.
You can see it here : http://theroadmap.co/strategy/.
I want the likes/fav be linked to the items, and not to the individual post (I have over 20 links in one post, split into 5 sections).
I used shortcodes of several plugins (ZillaLikes) and they always mess up the CSS + are linked to the individual post and not the item themselves.
You can see my HTML code of one of the sections of a post below:
<ol class="rectangle-list">
<li class="tooltip" title="What does a startup CEO actually do?"><a href="LINK TO ARTICLE </a></li>
<p>What does a startup CEO actually do?</p>
<li class="tooltip" title="How to find your competitive advantage">Be the Company Customers Can't Live Without</li>
<p>How to find your competitive advantage</p>
</ol>
Thanks!
Dan.
I would suggest something simple like Font-Awesome. It's very easy to add to your site where-ever you want it and control size, colour etc via CSS.
Font-Awesome
For example a solid heart icon would be added like
<i class="fa fa-heart"></i>
Related
For my accessibility related question, I googled "accessibility shopping cart" and visited many popular online stores but didn't find a clear answer on my question. From the accessibility point of view, for the shopping cart, should I add a tabindex="0" (the code is slightly simplified) for
<ul>
<li><span tabindex="0">Merchandise: $40</span></li>
<li><span tabindex="0">Shipping: $10</span></li>
<li><span tabindex="0">Taxes: $0.40</span></li>
<li><span tabindex="0">Total: $50.40</span></li>
</ul>
or simply
<ul>
<li><span>Merchandise: $40</span></li>
<li><span>Shipping: $10</span></li>
<li><span>Taxes: $0.40</span></li>
<li><span>Total: $50.40</span></li>
</ul>
, or separate merchandise and $40 as
<li><span tabindex="0">Merchandise</span>: <span tabindex="0">$40</span></li>
, or even add (if Twitter Bootstrap is used with its sr-only class)
<li><span tabindex="0">Merchandise</span>:
<span tabindex="0">
<span aria-hidden="true">$</span>40<span class="sr-only"> American dollars</span>
</span>
</li>
The main question you should ask is: are all these list items interactive ? Does it happen something when they are clicked ?
If your answer to this question is yes, then you should add tabindex=0 so to make the interactive element usabe by keyboard only users. If you don't do it, then your site isn't accessible for them.
If your answer to this question is no, then tabindex=0 useless and even counter-productive. Keyboard only users will have to press tab more times to skip your elements which do nothing, and reach actual useful elements. That's a waste of time and usabiility.
Of course, in reality, it's more complex than just that. For example, an element may be interactive at some moment, but not at some other moment, in which case tabindex=-1 should be used to disable focusability when it isn't desired.
But here are the basics.
If you don't have any good reason to add a tabindex="0" (some custom interaction with these elements that is not explained in the question), you must not add tabindex="0" to your elements.
Screen readers provide controls to simply read within a page, instead of interacting with components. Interacting with list items that simply show prices would be unexpected.
<ul>
<li>Merchandise: $40</li>
<li>Shipping: $10</li>
<li>Taxes: $0.40</li>
<li>Total: $50.40</li>
</ul>
I deleted the <span>, it's not necessary for accessibility (you can keep it if you need it for any other reason).
Regarding the .sr-only question, it's also not necessary. For example, Voice Over reads $40 as "forty dollars".
You should simply leave the list as-is, without tabindex, but could help users skip the list of products in the cart by providing headlines:
<h2>Products</h2>
…
<h2>Summary</h2>
<ul>
<li>Merchandise: $40</li>
<li>Shipping: $10</li>
<li>Taxes: $0.40</li>
<li>Total: $50.40</li>
</ul>
The expectations for a shopping cart are the same for screen reader users and non-sr users: Some interaction is available to remove products or change their number, but mainly they read to make sure they got everything.
Screen readers provide controls to read within a page, instead of interacting with components (that would be tab). Even tables are not read in an interactive or form mode.
They also provide shortcuts to jump to the next headline.
If there is interaction
Should you actually provide interaction on these <span> elements, by binding keydown and click handlers, you’ll need to communicate the nature of that interaction, by assigning a proper role to these spans, like role="button".
On providing different texts to screen readers
In most cases it’s not recommended to make screen readers announce texts in a certain way. They do have logic implemented already, and their users are accustomed to that. VoiceOver announces $40 as ‘fourty dollars’, for example. Users can also customize how certain things are announced, which should be respected.
First, you should add the <ul> or <ol> tag around the list. The screen reader will then announce how many elements that are inside the list. Jaws will announce the example list as: "list with 5 elements". tabindex only makes the elements tabbable with the "TAB" key, remember to add a focus indicator as well.
<ul>
<li><span tabindex="0">Merchandise: $40</span></li>
<li><span tabindex="0">Shipping: $10</span></li>
<li><span tabindex="0">Taxes: $0.40</span></li>
<li><span tabindex="0">Total: $50.40</span></li>
</ul>
It can be wise to separate the product and price for each list element:
<ul>
<li><span tabindex="0">Merchandise</span>: <span tabindex="0">$40</span></li>
</ul>
The user can then TAB to get the price information instead of listening to the product description before getting the price. You should try to only use tabindex="0" for tabbable elements or tabindex="-1" for elements that should not get focus
Example: https://stackblitz.com/edit/angular-fecmdv?file=src/app/app.component.html
So here is the html code for the contents of my first drop down menu:
<nav id="side-nav" style="display:none;">
<ul id="side-nav-content">
<li>
Information for Current Students
</li>
<li>
Timetables & Programme Structures
</li>
<li>
Support Services
</li>
</ul>
</nav>
So i'm trying to implement dynamic sub drop down menus for each of the three list items.
I originally tried adding a list within a list however that was just a shot in the dark and I never really expected it to work. I'm pretty stumped and am just looking for a pointer to the best way to go about doing this.
You can see this example, "Twitter Bootstrap Responsive Navbar with Multiple Dropdowns (Childrens)" here:
https://github.com/fontenele/bootstrap-navbar-dropdowns/blob/master/README.md
I'm using wordpress for my website.
I entered the href links on the widgets footer but its not working properly only at the homepage.
Can you help me with my website?
The link at the footer section "services" is not working it is like duplicates the url and it will not refresh or go to the link I entered.
In homepage, the link is working but the other footer page doesn't work. [Here is the link][1].
On different sections the links set have different URLs.
For example the Custom Apparel one when accessed from the home page has - https://opti-advertising.com/offer/#custom link, while if accessed from Contact page it redirects to https://opti-advertising.com/contact/www.opti-advertising.com/offer/?page_id=20#custom.
CODE:
<ul style="line-height: 32px;">
<li><i style="color: #ff0084;" class="icon-layout"></i> Online Advertising Services</li>
<li><i style="color: #ff0084;" class="icon-layout"></i> Digital & Offset Printing Services</li>
<li><i style="color: #ff0084;" class="icon-layout"></i>
Custom Apparel</li>
<li><i style="color: #ff0084;" class="icon-layout"></i>
Traditional Advertising Services
</li>
<li><i style="color: #ff0084;" class="icon-layout"></i>
Marketing Giveaways
</li>
</ul>
You are just hardcoding the links in your footer, e.g. placing links to the footer like this:
Link
When you access this link from homepage, CMS serves it from the root of your site, and you get the right address:
www.opti-advertising.com/offer/?page_id=20#printing
But if you click this link from any secondary page, you will get the address like this:
www.opti-advertising.com/page/www.opti-advertising.com/offer/?page_id=20#printing
because CMS serves the link from current page, which has path of
www.opti-advertising.com/page/
To solve this, you should at least remove domain name from the url and prepend a slash to it:
Link
But the best approach – is to do things right – generate links dynamically. Wordpress gives you some snippets, for example
site_url();
With this you can do things like:
Link
which will on any page output this:
https://www.opti-advertising.com/offer/?page_id=20#printing
I am writing a menu with material design lite and I need a separator between two categories of item in this menu.
I recreated a simpler example of what I am doing here:
http://codepen.io/anon/pen/jbJXQP
In this example I would like to have something to delimit the two different categories. In the example "Trip planner" and "Layers" are some map related widget whereas "Help" and "Send feedback" are more info related.
Specificaly here:
<li class="mdl-menu__item"
<i class="material-icons" >layers</i>
Layers</li>
<li class="mdl-menu__item"
onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
Help</li>
I am fairly new to web development (a few month), so I don't really have an idea of what is a good solution to do that.
For the separator it need to be something noticeable but not obtrusive to the user. I was thinking at just a straight black line in the middle but I don't know if this is possible.
An additional MDL class (I'm not familiar with MDL but sure there must be one, if not, just create one) for the first each special type of menu item which could then have a top border would be most logical.
So, let's assume that the first of each informational list item has a class of info:
Then we can do.
.mdl-menu__item.info {
border-top:1px solid lightgrey;
}
Codepen Demo
There are a variety of techniques for selecting which list item to apply the border to.
You can set a separate line, like you said. The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). try this:
HTML
<li class="mdl-menu__item">
<i class="material-icons" >layers</i>
Layers</li>
<li><hr></li>
<li class="mdl-menu__item"
onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
Help</li>
DEMO HERE
Note: You can style by CSS the <hr> - https://css-tricks.com/examples/hrs/
My q and a page sucks - it's this: http://rankingclimber.com/qa.php
I checked out http://www.text-link-ads.com/r/faq and i really liked how the questions were clickable and the answers came down below.
I checked out the source code for text-link-ads.com and found the below code. But I feel like this requires some css file or some .js file in addition to this. can someone help me and give me instructions on how to do this? I have a basic knowledge of html and css.
<ul class="faq">
<li>
<a onclick="$('#advQ1').toggle();">What makes Text Link Ads unique?</a>
<div id="advQ1" style="display:none">
Text Link Ads are unique because they are static html links that can drive targeted traffic and help your link popularity which is a top factor in organic search engine rankings. </div>
</li>
<li>
<a onclick="$('#advQ2').toggle();">How are Text Link Ads priced?</a>
<div id="advQ2" style="display:none">
Text Link Ads are priced at a flat rate per month per link. You prepay for a 30 day run of your ad, and your account will be set on recurring billing either via PayPal or credit card. Your ad will never be turned off if it gets too many impressions or clicks. Our pricing algorithm factors in a website's: traffic, theme, ad position, and link popularity when setting the flat ad rate per month. </div>
</li>
<li>
<a onclick="$('#advQ3').toggle();">I just placed an order, when will my ad go live?</a>
<div id="advQ3" style="display:none">
Most links are placed within 48 hours of the order being received. New ads require our publisher to review and accept the ad. The 30 day billing period will not begin until your ad is actually live. </div>
</li>
<li>
<a onclick="$('#advQ4').toggle();">What is Alexa?</a>
<div id="advQ4" style="display:none">
A website's "Alexa" ranking is a general indicator of the amount of traffic a website receives. The lower the number the more traffic that site receives, ie Yahoo.com is #1, Ebay.com is #8. More information on Alexa here. </div>
</li>
<li>
<a onclick="$('#advQ5').toggle();">How do I review my active running ads?</a>
<div id="advQ5" style="display:none">
You can review your current running ads here </div>
</li>
</ul>
This is a pretty broad topic, there are many ways to do it but I would start by looking at the tweening functionality in jQuery - http://jquery.com/
This is the javascript library that was used in that site, you can tell by the use of the $('#inputID') pattern.
There are great examples on the jQuery site as a starting point.
Each anchor above has an onclick attribute that tells jquery to toggle the visibility of it's corresponding DIV - $('#advQ1').toggle(); - where $('#advQ1') is the element to target and .toggle() is the jQuery function to run on it. You can target any element in the DOM by it's ID or class name $('.className');
Edit:
If you are just beginning jQuery then in particular check out the show(), hide() and toggle() functions:
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/toggle/