I am using a form in a front-end view of my website. The labels of the input fields show hints/tooltips when hovering over them with the mouse. I would like to style these tooltips with the css of my front-end template. Therefore I need to know the DOM structure of these tooltips.
Somehow, I can not find any documentation about this and using 'Inspect element' in Google Chrome also doesn't help me, because the tooltip is removed as soon as I do not hover the label anymore while trying to inspect them.
Help is very much appreciated!
Default tooltips in joomla back office have this structure, I'm pretty sure that it is the same in front office :
<div class="popover fade right in">
<div class="arrow"></div>
<h3 class="popover-title">[TITLE]</h3>
<div class="popover-content">[TEXT]</div>
</div>
I'm building a page that has links on the left of the screen that target an iframe. They work just fine in the new IE, but not at all in FireFox. I've played around with their Z-index, but can't seem to get them to be recognized in FireFox. They don't just not work, but the mouse cursor doesn't even show that they are links on hover. The address for the page I'm working on is at the address below.
http://www.snoscoot.com/fcaccessories/hondapowerequipment/test.html
An example of the code for one of the buttons is as follows:
<A HREF="http://www.snoscoot.com//fcaccessories/hondapowerequipment/subcompacttractorpartsandinformation.html" TARGET="productdisplay"><IMG SRC="http://www.snoscoot.com/fcaccessories/hondapowerequipment/hondatractorparts150px.jpg" border="0">
<font size="3" color="black" face="Arial">Subcompact tractor parts</font></a>
The code I have for the targeted iFrame is as follows:
<IFRAME
SRC="http://www.snoscoot.com/fcaccessories/hondapowerequipment/compacttractorpartsandinformation.html"
NAME="productdisplay"
WIDTH=700 HEIGHT=1622
frameBorder="0"
scrolling="no">
</IFRAME>
Would anyone have some advice as to how to get the links to function in FireFox? I can't seem to figure out why they work in IE, but not in FF.
Thanks
Your iframe inside the <div id="dropdown"> is 1500px tall by 950px wide and hence covers up most of the rest of the page. In particular it's sitting above those links, so they can't be clicked.
Are you sure you want it to be 1500px tall?
Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.
I have built a site with a gallery of images, that you can see here. I would like to disable all pop-ups (tooltips) for titles of images, so that they don't interfere with the look of the gallery.
Is there a way of doing this?
Set the title and alt attributes to an empty string.
You have the following code for one of the images:
<a class="oils" href="images/oils/slideshow/1.jpg" title="On the White Table   <span class='inches'>25" x 25"</span>"><img src="images/oils/thumbnails/1.jpg" /></a>
Everything inside of the title section should go, so that it reads:
<a class="oils" href="images/oils/slideshow/1.jpg" title=""><img src="images/oils/thumbnails/1.jpg" /></a>
Otherwise, the only thing that comes to my mind is to use Flash or Silverlight to display the gallery images. There are some customizable galleries available, with varying license agreements.
I have a structure which is as follows:
<a href="#">
<footer>
<p>Some text</p>
<h2>A Heading</h2>
</footer>
</a>
This works and displays as expected in all browsers (even IE6 with the HTML5shiv.js) except Firefox 3.6. In Firefox 3.6 the display is completely screwed and if you use Firebug to inspect the DOM, the <footer> element is empty and the elements which should be inside it are outside of it.
All the tags are closed correctly. The <a> is set to display:block in the CSS.
The W3C validator validates the document and does not mark this structure as incorrect.
The spec states that an <a> element may be classed as flow content when it contains other flow content. The <footer> is flow content.
Is it just that Firefox 3.6 doesn't render HTML entirely correctly?
Any ideas for a fix?
Ta!
According the W3C HTML5 Reference the Footer Elements content model is:
Flow content, but with no heading
content descendants, no sectioning
content descendants, and no footer
element descendants.
Which an a element is interactive content.(Which also can be a Flow Content)
So using the a element will validate, if you validate it against HTML5 Standards. Using something like the W3C validator.
So to answer your question, FireFox 3.6 Doesn't conform to HTML5 standards completely. FireFox 4.0 conforms better than 3.6. You can find a list of what elements of HTML5 (and CSS3) are supported by legacy browsers here.
As for the fix I would suggest that you hide the footer from Firefox, and show a div with your content in that is hidden for everything but firefox. I would accomplish this using jQuery CSS Browser Detection using jQuery instead of Hacks is a good place to start.
Firefox 3.6 doesn't implement the HTML5 parsing algorithm; it has an HTML4 "parser", basically.
I think your workaround options are:
Avoid "block level" HTML tags inside the footer.
Put a <span> as a child of <a> wrapping the <footer>.
Put a <div> as a child of <a> wrapping the <footer>.