I have a navigation on my page with elements, about us, what we do, clients, contact us and so on..... all these are images only. not text. i can recognize which page is selected based on the value of $selected. When $selected==about, then i want the default image of about us to be something like about_selected.png and likewise for everything else. how can i achieve this? i tried javascript but could no get it right. here is a sample code from my page:
<a href="about.php" class="<?php if($selected =="about"){echo 'selected';}?>" onmouseover="document.about.src='images/About_over.png'" onmouseout="document.about.src='images/About.png'" ><img src="images/About.png" alt="about us" name="about" /></a></li>
<li><a href="we_do.php" class="<?php if($selected =="do"){echo 'selected';}?>" onmouseover="document.wedo.src='images/Wedo_over.png'" onmouseout="document.wedo.src='images/Wedo.png'" ><img src="images/Wedo.png" alt="what we do" name="wedo"/></a></li>
The solution is in your own code.
<img src="images/About<?php if($selected =="about"){echo '_selected';}?>.png"
You might want to consider CSS for these mouseover effects instead of the inline JavaScript you are using here. A List Apart has some useful information on that.
The 'selected' class can be used to trigger a third 'active' state on the background image. I do suggest that you put a text in between the tags to make sure search engines can index your navigation. You can use CSS again to make the actual text not visible (negative text-indent usually is the way to go)
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?
I am trying to add data atributes to my anchor tag for a WordPress custom theme.
The code below is what I've so far, the problem is with plain HTML this works fine but once I add the PHP lines then something breaks.
When the actual HTML is rendered it excludes the end of the open anchor tag, and leaves "> out to display on the page.
Not sure what went wrong but maybe someone can take a look at this and might be able to point out what I did wrong, a fix, a better way, or maybe if this is even possible.
<a
class="caption" href="<?php the_permalink()?>"
title="<?php the_title_attribute(); ?>"
data-title="<?php the_title(); ?>"
data-description="<?php the_excerpt(); ?>"
>
<?php the_post_thumbnail(array(301,301)); ?>
</a>
<?php endif; endif; ?>
This is not an answer, just some thoughts/things to try:
Are those PHP functions defined somewhere on the same page, or on a page that is included or required ?
Have you tried replacing those function calls with simple PHP commands, such as <?php echo "the_permalink_goes_here"; ?> etc. -- just to make sure, for example, that the anchor tag's href value changes to
<a href="the_permalink_goes_here" etc>
The excerpt function that you're using for the description is returning not just the excerpt, but also an additional "Read more" link, effectively putting an anchor inside your anchor tag, which is what is breaking it. To the best of my knowledge, there isn't a default WP function for returning an excerpt without this link, so you will need a function to do this. Try searching for 'excerpt without link'
I know this code isn't correct, but I would like to inject the HTML and PHP into the title of the below tag.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
I am using a jQuery tooltip plugin (http://flowplayer.org/tools/tooltip/index.html) that grabs content from the title tag and displays it as the tooltip content. I have Advanced Custom Fields setup (WordPress plugin) that allows me to publish custom field content. In effect, the content I post in these custom fields will end up in the tooltip.
My goal is to produce a tooltip when the user hovers over "Related Articles", that displays a link that is clickable. Again, the above jQuery tooltip plugin grabs the content from the title, which is why this is causing difficulty
Ok, as we understand what you are trying to do. Lets get some things clear.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
Is SO wrong on so many levels. First of all things, its not valid in any way. Second of all, you are not ending your <a>. You are also missing one echo and target="", inside title="" was not escaped: target=\"\".
So in a nutshell to straight up answer your question, this maybe will work (maybe, because its seriously uncommon and nonstandard)
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>">Related Articles</p>
Also, as one of the users already mentioned. If your server server enables short open tags, then you could make the <?php echo $foo; ?> shorter: <?= $foo ?>. So in your codes case it would look like:
<p class="related_articles" title="<?= the_field(related_articles_1_title) ?>">Related Articles</p>
However, as probably mentioned already. This is not recommended method and may produce all sort of issues. I recommend to research for a better solution.
Use the short form if your server supports it:
<?=the_field(related_articles_1_link)?>
or else, you should echo it:
<?php echo the_field(related_articles_1_link); ?>
<p class="related_articles" title="<?php echo htmlspecialchars(''. the_field(related_articles_1_title) .''); ?>">Related Articles</p>
While this should work, I am not sure if your mentioned jQuery plugin is able to interpret the given html in a title attribute as HTML (you need to test it). Most likely this will be interpreted as text and all tags will be visible to the end user, but this is not what you want.
I found an example of how to implement this in a different manner: http://flowplayer.org/tools/demos/tooltip/any-html.html
Is it possible that this is what you want?
<p class="related_articles">
Related Articles:
<a href="<?php echo the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
</p>
Now that you've clarified that your question was regarding the jQuery Tooltip plugin, you should do the following:
<p class="related_articles">Related Articles</p>
<a class="tooltip" href="<?php the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
Javascript:
$('.related_articles').tooltip();
The reason this works:
The tooltip plugin looks at the element right after the one which .tooltip() was applied to. If that next element has a class name of tooltip, it'll use that as the contents of the tooltip (instead of the title attribute).
Given that you are placing html content inside an HTML property it should be escaped. As mentioned by #Karolis do this:
<p class="related_articles" title="<?php echo htmlentities(''.the_field(related_articles_1_title).''); ?>">Related Articles</p>
This should generate a tooltip with the link in it. If you see stuff like "& lt;a href="... & gt;" on the tooltip then the plugin is not unescaping html values. You could unescape the values but unfortunately javascript has no function. For this you can check out php.js
which provides php's functions in js but that seems kinda overkill. You could instead replace the troublesome characters like this:
<?php
// Generate complete tootltip content
$tootltipContent = ''.the_field(related_articles_link_1).'';
// Search for these
$search = array('<','>','"');
// And replace them with these
$replacements = array('##','##','\"');
$tooltipContent = str_replace($search,$replacements,$tooltipContent);
?>
<p class="related_articles" title="<?php echo $tooltipContent; ?>">Related Stuff</p>
Then look for the line in the plugin where the title is extracted from the element. (tip: on the plugin source code do a search for 'title'. There should be one place where the value is being extracted) It may look something like this tooltipContent = $(someVar).attr('title'); Now run the inverse replacement in js:
tooltipContent = tooltipContent.replace('##','<').replace('##','>').replace('\"','"');
A certain blogsite allow its users to fully customize the entire html page of their blogg, change doctype and all, and they use tags for where they want the user to dipslay things like titlename and amount of comments etc.
i.e this is code you can edit and submit under blog design settings:
<tag:archivelist>
<li>${ArchiveName}</li>
</tag:archivelist>
</ul>
<tag:if test="${hasLinks == 'true'}">
<div class="navheader">Links</div>
<ul>
<tag:linklist>
<li>${LinkName}</li>
</tag:linklist>
</ul>
</tag:if>
<tag:if test="${hasBooks == 'true'}">
<div class="navheader">Books</div>
<ul>
<tag:booklist>
<li><img class="thumbnail" src="${BookImageSmall}" border="0" alt="${BookTitle}" title="${BookTitle}" /><br />${BookTitle}</li>
</tag:booklist>
Now, how do they replace the ${ArchiveLink} part to make it into something from mysql table, how do they extract and replace what method? preg_replace ?
They are most likely using XLST (or a more elaborate custom templating engine that makes use of it) to transform the markup into standard HTML. Though i think the variables they are using are different... if i recall XSL variables are {$VariableName} as opposed to ${VariableName}.
i need to open a div (or somethings other, dunno what) when mouse go on a link. But this div doesnt move other div. It must open OVER the others div (like this website...when there are the "popup/error" div over others div. How can do it? Transparent? Or somethings like it?
for example, if i write somethings into title field in a link statement, there is a small windows that show to me what i wrote. somethings like it, but with a div, or somethings other when i can put text, image, ecc.
as another example, on facebook when i go on the main wall and i go with mouse on the name of the users, it show me a small windows with more details. the same when i open the chat box :)
code :
<div class="playerDetailsOff">
Name : Marco<br />
Surname : Daghine
</div>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id1?>');return false" onmouseout="viewPlayerOff();return false">link 1</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id2?>');return false" onmouseout="viewPlayerOff();return false">link 2</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id3?>');return false" onmouseout="viewPlayerOff();return false">link 3</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id4?>');return false" onmouseout="viewPlayerOff();return false">link 4</a>
function viewPlayerOn(val) {
$('.playerDetailsOff').removeClass().addClass('playerDetailsOn');
}
function viewPlayerOff() {
$('.playerDetailsOn').removeClass().addClass('playerDetailsOff');
}
.playerDetailsOn{width:200px; height:100px; position:fixed;}
.playerDetailsOff{display:none;}
Basically what you want is an overlay or a lightbox (both terms are easy to google). Just as Felix Kling pointed out you will want absolute positioning - or you can look at z-index (highest z-index is on top).
Just to make it easy on you there was a similar question with example code which should definitely get you started: jQuery - How Do I Place a DIV On Overlay?
You want overLIB. Check out their homepage to see features and documentation.
Regards, Alin
You can use this one: http://www.leigeber.com/2008/06/javascript-tooltip/. It is a lightweight javascript if you don't want to use JQuery.