At the top of this page there's a <p> element that contains a button for Twitter, Facebook, and Stumbleupon. The code that produces these buttons is:
<p align="right"><kamran></p>
When I run the same app on a local Apache server, these buttons are not produced, I just get
<p align="right"><kamran></p>
Can someone explain what this <kamran> tag is and why it doesn't get converted to a series of buttons when I run the app locally?
The page in question is generated using Pixelpost, a photo-blogging platform written in PHP.
Kamran is a pixelpost add-on. The code in the page activates the kamran.php file, which inserts the "share" links.
This is what I see in the relevant paragraph when I click 'View Source' in my browser:
<p align="right"><a target='_blank' href='http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.blork.org%2Fstreetscene%2Findex.php%3Fshowimage%3D12&t=Street+Scene+by+Blork-Street+Scenes+from+Montreal+and+Beyond%3A+Hommage+%C3%A0+F%C3%A9lix+%282%29'><img src='http://www.kamran.ir/icon/icon-facebook.png' alt='facebook icon' title='Facebook'/></a> <a target='_blank' href='http://twitter.com/home?status=Street+Scene+by+Blork-Street+Scenes+from+Montreal+and+Beyond%3A+Hommage+%C3%A0+F%C3%A9lix+%282%29 http%3A%2F%2Fwww.blork.org%2Fstreetscene%2Findex.php%3Fshowimage%3D12'><img src='http://www.kamran.ir/icon/icon-twitter.png' alt='twitter icon' title='Twitter' /></a> <a target='_blank' href='http://www.stumbleupon.com/refer.php?url=http%3A%2F%2Fwww.blork.org%2Fstreetscene%2Findex.php%3Fshowimage%3D12'><img src='http://www.kamran.ir/icon/icon-stumbleUpon.png' alt='stumbleUpon icon' title='stumbleUpon' /></a> </p>
You can see the URLs of the button icons in there. (They are from an Iranian site, www.kamran.ir.) I am not an html expert; I thought at first that kamran must be a macro defined in templates/egocentric/styles/egocentric.css, but it's not. Is it possible that the site has changed since you last looked at it?
Related
so as the title says. Maybe this is just not possible the way I have it structured, but I want to make sure this works for accessibility. I have a grid of logo images that are positioned in a styled span. The logo has a link to that company's website. I can tab through the individual items by adding tabindex="0" but I cannot hit enter or space to trigger link to be visited. What am I missing here? If I change the <span> to a <button> it works but that seems sloppy to me?
Here is how my code is structured:
<span class="grid_item" role="link" tabindex="0">
<a href="<?= $url ?>" aria-label="Go to <?= $logo_title ?> website" tabindex="0">
<img alt="<?= $logo_title ?>" src="<?= $image['url'] ?>">
</a>
</span>
I've tried changing the span to a <div> and a <ul> with line items but still all same issue with no click through. I would love any input on this, to not only solve this but also for me to have a better understanding of the way accessibility works.
Usually you can create an accessible solution using all native HTML and not need tabindex or any ARIA attributes. In fact, the first rule of ARIA use is to not use ARIA.
In your original code, having a tabindex="0" on the <span> and having a nested <a> will cause two tab stops. And it will be even more confusing because both tab stops will announce the element as a "link" - the <span> has role="link" and the <a> is natively a link.
Keep it simple. You shouldn't need any accessibility related attributes on the <span>. Just let the span be the container for the link and do whatever styling you want to do (remove tabindex and role). Then let the <a> do its thing and be a native tab stop and natively allow the enter to trigger it. (space is not natively supported on a <a>.)
Ok so I think I resolved this. I am not sure if this is the correct way, but I wrapped the entire span in the <a> tag. Is this semantic?
So I have the following code for facebook share.
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" class="post_share_facebook" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=220,width=600');return false;">
<i class="icon-facebook"></i>
</a>
Right now, when the share button is clicked, the whole snapshot of the page is shown on the share window.
On a php file where this share button is located, I have a specific div which I want to show on the Facebook share window instead of the whole snapshot of the page.
Does anyone know how I can do this?
Thanks!
Not sure if its possible that way, you can try <?php the_permalink(); ?>#your_div_id
Another alternate would be using open graph
I am using a script, blazy, to change my page's images as the user scrolls down. It works fine, and I would like the user to have the possibility to share each image to his friends on Facebook. I managed to link the url to an anchor to the image. When sharing a link, a little thumbnail is displayed with the link with a short description of the image. My problem is that only the logo of my website is displayed and not the image the user wants to share.
<a class="facebook_share" href="actualites.php#237" onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href.split(location.hash||'#')[0] + '#237'),
'facebook-share-dialog',
'width=626,height=436');
return false;">
</a>
<div id="237">
<a href="content/posts/237/449.jpg" title="Voir en taille réelle">
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="content/posts/237/449_thumb.png" alt="image" width="700px">
</a>
</div>
Looking at The Open Graph protocol, I tried to create a meta tag when clicking on the Facebook share button. The result is the same -- the image I want to share is not displayed, this is because Facebook linter only looks at the HTML in the response and does not run any scripts. The content of my page always changes, I cannot write the meta tags "by hand".
<a class="facebook_share" href="actualites.php#237" onclick="
$('meta[name=og:image]').remove();
$('head').append('<meta name=\'og:image\' content=\'***/content/posts/237/449_thumb.png\'>');
window.open(...[see above]);
Strange thing happens, I have this code, on my wordpress site:
<a href="www.google.com" target="_self" class="facebook" ><img src="<?php echo get_template_directory_uri(); ?>/images/facebook.png"/></a>
The image is loaded, but is not clickable, I mean nothing happens when I click on it, what's wrong?
The link to my page is: http://toibz.com/ibz. Click on the "facebook" logo in the lower right corner.
add http:// to your link like:
<a href="http://www.google.com"..
Set position:fixed on the a tag instead of floating it.
I am trying to link some text with the href tag to a specific section in my website.
On the homepage I have a quote and then the person's name of who said it. I want to link his name to the "Upcoming Events" tab on my "About" section.
The website is http://www.verticalministries.net. The name "Aaron Ivey" needs to be linked to the "Upcoming Events" tab under the "About" section. The website is a one-page portfolio that scrolls using JavaScript.
I have tried using the name attribute, but that wasn't working because the href tag would look like <a href="#about#ivey>Aaron Ivey</a> and that just isn't valid code, because I have the page scrolling via classes. I did check the name attribute and I did give it #ivey.
<div class="fifth_page" style="display:none">
<h1>Upcoming Events</h1>
<h4>Feb. 15 - Aaron Ivey Band</h4>
<a name="#ivey"></a>
<img src="images/iveypromo.jpg" alt="Aaron Mug Shot" class="floatRight img_left_space" />
<p> “Aaron Ivey believes that all worship is a response to a creative and compelling God. Serving as one of the worship pastors at The Austin Stone...</p>
</div>
Any help would be greatly appreciated.
If you have any further questions, please let me know.
Thank you.
Sincerely,
DHJolesch
don't use attribute name it's deprecated, rather use id
example code, how to jump with an anchor to a div with specified id:
Jump to ID
<div id="your-page-element">
will jump here
</div>
Also for scrolling animations with jQuery look at How can I scroll to a specific location on the page using jquery?