I have a resource called Artists, that is connected to a table called artists. For the view, /artists, I run through the table using a foreach loop to display some of the information. I create links, like so:
<div class="boxxy">
<a href="/artists/{{$artist->id}}" target="_blank" class="anchor-hover">
<img src="{{ $artist->image_path}}" alt="{{$artist->stage_name}}" height="200" width="200">
<span class="details">
<h2>{{$artist->stage_name}}</h2>
<p class="desc">{{$artist->description}}</p>
<span class="pupdate">{{ $artist->city}}, {{ $artist->state}}</span>
<span class="viewlink">Play My City</span>
</span>
</a>
</div>
However, using this, when I click on the image, it takes me to another tab in the browser (to the correct place, like artists/7, but in a different tab). My question is, how do I prevent the page from being opened up in another tab? I would like it just directed in the same tab.
Get rid of target="_blank" in your anchor.
Related
Hi I have the following question in regards to accessibility, I'm using JAWS screen reader software to test my code and I have the following issue:
JAWS reads out the heading label for the category, but it doesn’t represent the category and its repeating twice. The software says "Create case dash link";"Create case dash link".
The software should read should be Ask a question"
Please advise, my HTML is below
<div class="col-12 col-sm-6 col-md-4">
<article class="icon-feature icon-feature--first">
<a class="icon-feature__link" href="/support/create-case/"></a>
<div class="icon-feature__icon bg--blue-primary" style="height: 150px;">
<a class="icon-feature__link" href="/support/create-case/">
<span class="icon icon--signs"></span>
<div class="imghoveropacity">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
</div>
<a class="icon-feature__link" href="/support/create-case/">
<h3 class="icon-feature__title">Ask a question</h3>
</a>
<p class="icon-feature__excerpt">Submit an enquiry</p>
</article></div>
JAWS is right, there's nothing to read from its perspective. Well, almost nothing.
If you want JAWS with default settings to read your links, they should have either A) link text, i.e., something meaningful between <a> and </a>, or B) The aria-label attribute that should not be empty.
You have here:
<a class="icon-feature__link" href="/support/create-case/"></a>
This link contains nothing to JAWS' eyes. I mean, nada. The easiest way to fix this is to add an aria-label attribute, like this:
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question"></a>
Then JAWS would know what to read when the focus lands on that link. Otherwise, as it is a link, so a priority piece of data that must be announced somehow, it tries to get at least something and reads the (relative) URL, that's why you hear "Create Case".
The other link is a more cumbersome case. You have a link, a div inside it, and an img inside that div. Here JAWS is also confused because the link text is blank again, so it probably should read the alt attribute of the image, but this image is in another div, so it is not sure if the div should be read as the link contents. Oh yes, and there is an empty span also, and it is the first element of the link, so even more confusion arises.
If I were you, I'd also simply add an aria-label if you need that link to be read, too. And if the span is not needed and is only for decoration purposes, hide it from JAWS' view, otherwise you also will get some hard-to-notice troubles. After that, if you hear "Ask Question" twice on that link, hide the div with the image, you don't need it anymore (this last point is to be discussed, needs to be tested more thoroughly):
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question">
<span class="icon icon--signs" aria-hidden="true"></span>
<div class="imghoveropacity" aria-hidden="true">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
I'm trying to parse a html code for specific content, but the problem I'm running into is that certain websites require you to click a "Show more" button.
When I grab the URL there's no way to tell it I want the full code with the "Show more" button clicked. Is there a way to grab the full source code of the page, because it keeps getting cut off after a point.
Example website: https://play.google.com/store/search?q=fm%20radio&c=apps&hl=en
The source code gets cut off at the "Radio hungary" app, which is the last app that loads automatically.
This even happens when I load everything and then try to view the pages source code.
It ends in:
style="display:none"> Show More </button> <div class="bottom-loading" style="display:none"></div> <div class="footer"> <div class="footer-links-container"> <span class="copyright"> ©2016 Google</span> <a class="footer-link id-no-nav" href="https://play.google.com/intl/en_us/about/play-terms.html" target="_blank"> Site Terms of Service</a> <a class="footer-link id-no-nav" href="http://www.google.com/intl/en_us/policies/privacy/" target="_blank"> Privacy Policy</a> <a class="footer-link id-no-nav" href="http://developer.android.com/index.html" target="_blank"> Developers</a> <a class="footer-link id-no-nav" href="https://play.google.com/artists" target="_blank"> Artists</a> <a class="footer-link id-no-nav" href="https://support.google.com/googleplay/?p=about_play" target="_blank"> About Google</a> </div> </div> </div></div><div class="loading" jscontroller="EgJAl" jsaction="rcuQ6b:rcuQ6b" id="page-load-indicator"></div><div id="instrument-manager-parent"></div><script src="https://wallet.google.com/inapp/lib/buy.js"></script><script
Even if I click the show more button.
The purpose of this is to grab all the URL's of the images, and I can't do this by hand because well.. we have thousands of images.
I believe if you just take advantage of the Javascript HTML DOM methods you can accomplish what you want to achieve.
This will help: http://www.w3schools.com/js/js_htmldom_methods.asp
By using this, you can target specific elements/ids/classes and pull or modify the information you want.
Jquery will also help you a lot with this.
You can solve it using Javascript dom,steps to do are
keep your content in a div element
set its default height as a fixed value
on clicking the show more link execute a javascript function to make the div element height to auto
in this way you can show content excerpt with javascript
If you go for server side, you can create a new page for showing the content.
Social media buttons are not links even though the code shows proper linked objects:
<li class="facebook" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="Facebook">
</li>
You should really read the "How to ask" page first.
Ok so, This link it's not outputting noting, because you didn't specified nothing inside of it to be outputted, at least one letter should be inside of it
A
This will output the letter A as a link. Anything you want to be linked should be inside of the <a> tag. Another example using an image as a link:
<a href="https://www.facebook.com/FacebookDevelopers">
<img src="random-image.png" alt="test" height="50" width="100">
</a>
Learn more about a tag here
I'm trying to make my tumblr posts link directly to the source when clicked rather than going to the post page and having the source link there to click.
Here's the code I have for the photo posts.
{block:Photo}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="photo">
<div class="photobox"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
I've tried changing the photobox 'permalink' to source etc with no avail.
Anyone got any ideas?
In the hope that someone who needs this will find it, here's a way I found to show {LinkURL} when it's available, and some other url when it's not.
Tumblr offers {block:LinkURL} to display some code when {LinkURL} is available, but there's no {block:NoLinkURL} to use when {LinkURL} is NOT available.
Ideally, this should be possible:
<a
{block:LinkURL}href="{LinkURL}"{/block:LinkURL}
{block:NoLinkURL}href="{Permalink}"{/block:NoLinkURL}> <!-- does NOT work -->
<img src="{PhotoURL-400}"/>
</a>
But {block:NoLinkURL} doesn't exist, so I'm using {block:LinkURL} to hijack the normal link instead:
<a {block:LinkURL} href="{LinkURL}" data-ignored-{/block:LinkURL}href="{Permalink}">
<img src="{PhotoURL-400}"/>
</a>
If {LinkURL} is available both links will be in the HTML, but only one is read.
Example output
This is the output when {LinkURL} is not available:
<a href="/permalink">
<img src="/image.jpg"/>
</a>
And this when is the output when {LinkURL} is available:
<a href="/linkurl" data-ignored-href="/permalink">
<img src="/image.jpg"/>
</a>
after comments edit
It should be <a href="{LinkURL}">
You have to make sure when you're adding the image that you've specified the target as outside of tumblr too.
I'm trying to get a table cell that is one big href to contain two things - an icon that opens a popup (at location A), and some text that follows the cell's href (to location B). However I can't quite get it working.
Here's the HTML I have that only works for the icon/popup:
<table><tr><td>
<a href="http://www.google.com>
<span>
<a onclick="window.open('http://www.yahoo.com', location=no,scrollbars=no,menubar=no,toolbar=no,status=no,resizable=yes')">
<img src="smiley.png" />
</a>
</span>
Go to Google
</a>
</td></tr></table>
This works fine for clicking on the smiley icon and opening the yahoo popup, but clicking on "Go to Google" doesn't do anything.
Here's the HTML I have that works for following the href:
<table><tr><td>
<a href="http://www.google.com>
<img src="smiley.png" />
Go to Google
</a>
</td></tr></table>
This follows the href no matter what I click on in the cell (which makes sense, there's only one href).
I also tried this, but clicking on the icon would both open the popup and follow the href:
<table><tr><td>
<a href="http://www.google.com>
<img src="smiley.png" onclick="window.open('http://www.yahoo.com', location=no,scrollbars=no,menubar=no,toolbar=no,status=no,resizable=yes')"/>
Go to Google
</a>
</td></tr></table>
Any help?
You can't just have a link contain another link. Have two links, but separated. Use CSS to make them fill the cell if you have to.