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?
Related
I am trying to get the whole div clickable and this works but only with a straight link to another site. Is there a way to make it work with this text in it also:
<div class='reddit' title='Share Us On Reddit' onclick="window.open('http://www.reddit.com/submit?url=httpsFwww.example.com&title=XXX is Cape Breton's Homepage. Start Your Web Search With Beautiful Cape Breton Island')">
Thanks
From CSS Tricks
This probably isn't a thing you need to rely on JavaScript for
anymore. Since HTML5, this is perfectly valid:
<a href="http://example.com">
<div>
anything
</div>
</a>
And remember you can make links display: block; so sometimes you
don't even need the div.
<div style="cursor:pointer" onclick="document.location='evenidontknow-page.html'">
<h2>Full Div Clickable</h2>
</div
The above code helped me very well, and this will not require any extra code.
Using a tag may solve the problem but we need to add extra code to it.
please check this link for more info w3schools
Bootstrap has a feature called "Stretched Link". From the documentation:
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
You can read more by visiting the following link:
https://getbootstrap.com/docs/4.4/utilities/stretched-link/
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 have added a picture to my webpage here http://www.backpacks4aussiekids.com.au/Home.html and it works just fine, but when I tried the same thing in an article here http://www.backpacks4aussiekids.com.au/Articles/what-is-needed.html the pix won't load, even though I followed the same proceedure.
I even tried changing the pix from .jpg to .png and back again. The only way the changes can be viewed is if I clear my site and browser cache before I attempt to view the site.
All the text is able to be viewed but there are either empty boxes where the pix should be or nothing at all.
thanks in advance, des
The image definitely exists as I have checked.
The reason why it's not showing is because the picture on the homepage is within an <img> tag where as the picture on the second link you provided is for some reason within an <input> tag as shown below:
<input type="image" style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="">
Open the article in the article manager, click on the little html button which will open a window, find the code above and change to the following:
<img style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="" />
Hope this helps
I have a link at the bottom of a page, and its purpose is to link to an anchor on a different page. It doesn't seem to work in Firefox (at least, not in v8). Instead, on load it goes right to the very bottom of the page.
Any help is appreciated!
Source: http://msi.emsix.com/news/1900/1/Six-in-Ten-Employers-Hope-Health-Care-Reform-will-be-Repealed.aspx (the "Susan McIntyre" link at the bottom)
Anchor markup:
<h3 id="mcintyre" name="mcintyre">Susan McIntyre</h3>
Try adding the following code:
<a name="mcintyre"></a>
<h3 id="mcintyre">Susan McIntyre</h3>
This works correctly if I disable javascript.
It looks like what happens is that the scroll is done before you use script to collapse away a bunch of the content. So the final scroll position ends up wrong.
If you're collapsing the content away async, that could do it...
If you are unable to create <a name='%hashName%'></a> anchor, consider this:
$(document).ready(function(){
$(window.location.hash).append('<a name="' + window.location.hash.replace('#','')+ '"></a>');
window.location.href=window.location.href;
});
I know it looks weird, but works fine.
Since today I haven't heard about div anchor tags. Are you sure it is proper to expect such kind of behaviour from browsers?
What is the best tag to use to display widgets such as links to weather sites and Google maps? My old website used <span> with src= very satisfactorily, but src= isn't available for <span> in XHTML1.1. I've tried <img> and <iframe>. <img> only displays a red cross. <iframe> displays the widget OK but there is a difference between IE and Chrome, which both display it as I want, and Firefox, which puts a visible border round the widget, which I don't want. By the way, I would prefer a non Jquery/Ajax solution.
Using frameborder=0 fixes the problem.