Why doesn't this inline javascript work in Firefox? And how can I get it to work correctly in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {display:inline; padding:0px 7px 0px;}
h2 a {text-decoration:none}
h2 a:link {color:#FFFFFF;}
h2#s0 {background-color:black;}
</style>
</head>
<body>
<h2 id="s0"><a href="javascript:document.getElementById('d0').style.display='block';">
Click me!</a></h2>
<div id="d0"
style="width:98%;border: 5px solid #000000;padding:3px; display:none;">
When you click the heading, this text should appear with a black
outline, with no gap between that and the heading background.</div>
</body>
</html>
In Safari this appears as it should.
In Firefox it momentarily appears with a gap (as if the browser's in
quirks mode) then everything on the page vanishes, replaced by the word "block". At first I thought that meant Firefox was blocking it, but it says "inline" instead if that's what I set the style to display.
EDIT: The Javascript part of my problem is now solved. But there's still a difference in the way the heading background appears: it extends down to the div border in Safari, but not in Firefox. Is there a way to make it do so in Firefox?
The closest working form of what you have is:
<a href="javascript:void(document.getElementById('d0').style.display='block');">
Because:
When a browser follows a javascript: URI, it evaluates the code in the
URI and then replaces the contents of the page with the returned
value, unless the returned value is undefined. The void operator can
be used to return undefined.
onclick is the better option here.
On OSX firefox version 41.0.1 I also experienced the same issue in fiddle. I do not know why it does not work, it could be a bug in FireFox but you can do this to have a somewhat similar working solution:
<a href="#" onclick="document.getElementById('d0').style.display='block';">
Replace your link with this:
<a href="javaScript: void(0);" onclick="javascript:document.getElementById('d0').style.display='block';">
As far as i understand it, Firefox tries to open a URL if you put the javaScript call into the href attribute. (as you can see in your location bar)
Putting it in the onclick instead makes it work fine.
I guess you could also use some preventDefault or such, and you could also try a href="#", but the a href="javaScript: void(0);" works just fine and is robust through all browsers i have tested so far.
Related
I have this piece of code on my website:
<div class="test_section no_display" id="test_section_metric">
<div class="section_start_bar">
</div>
<div class="section_end_bar">
</div>
</div>
And this piece of css:
.test_section
{
width:70%;
margin-left:15%;
background-color: var(--color_main);
}
.no_display
{
display: none;
}
But the div with "no_display" class is displayed, because when I inspect the site in Chrome I see that it overrides it with user agent stylesheet like this:
div{
display:block;
}
However, when I open the site just as a file on my computer it is actually not displaying and is working as intended.
I've already searched for an answer, but I've mostly encountered people fixing it by putting a <!DOCTYPE html> before the <html> tag, which I've already done.
The .no_display class is a separate thing, because it'll be removed with javascript to show things on a button click.
Any ideas how to fix this?
using css property display: none !important; will override the user agent setting. bonus points for checking that your class name and css class selector are spelled the same 😅
I want to edit an absolute positioned DIV which is located within a contenteditable DIV. This works great with IE, Chrome, Safari and Opera, but unfortunately not in Firefox.
This is the code:
<DIV contenteditable="true"
style="border:1px solid #F00; width:220px; height:220px;">
<DIV>
<P>DIV 1, editable</P>
</DIV>
<DIV style="position:absolute; left: 20px; top: 50px;">
<P>DIV 2, not editable in FF !?</P>
</DIV>
</DIV>
I already did a unsuccessful try in http://jsfiddle.net/Jf54f/4/
Is this a bug? Does someone have a workaround? Thank's in advance :-)
Set position:relative on the editable element, so that the positioned div is considered to be inside it.. (most likely a bug in the implementation)
Demo at http://jsfiddle.net/Jf54f/8/
removing contenteditable="true" from the main div and adding it to the two inner divs worked fine.
check it here: http://jsfiddle.net/RASG/Jf54f/10/
Well you should not set contenteditable="true" try just contenteditable. The term just without any value, you can add values like "plain -text-only" for chrome and IE because they allow formatting with ctrl+b and all.
<DIV contenteditable id="">
Though as my friend here said, it works in all browsers. I tried too, it does.
Currently I'm using this small piece of js in my site to allow my div to act as a button:
<div id="item" onclick="location.href='http://www.google.com';" style="cursor:pointer;">Google</div>
But something I do very often when web browsing is opening a large amount of tabs. Is there any way I could modify my code to allow for this?
This should do it:-
<html>
<head>
<style>
.sampleDiv
{
position:relative;
margin:0px auto;
width:400px;
height:200px;
background-color:#CCCCCC;
text-align:center;
}
.actualLink
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
.linkText
{
position:relative;
top:80px;
}
</style>
</head>
<body>
<div class="sampleDiv">
<a class="linkText" href="test.html">testing</a>
<a class="actualLink" href="test.html"></a>
</div>
</body>
</html>
The link with class actualLink is covering whole of the div.
The link with class linkText is providing the text.
The purpose of using two tag is that if you only use actualLink then you cannot position the text wherever you want.By using the link with class linkText you have flexibility of centering(vertically) the text(horizontal centering can be done using only actualLink)
My solution was to replace the div blocks with anchor blocks. Anchor blocks can now take on the CSS styles of nearly anything a div can do, but it can also include href, which the browser will recognize and give you the right-click options you want to see.
So old:
<div class="divClass" onClick="location.href='http://www.google.com'">asdf</div>
becomes
<a class="divClass" href="http://www.google.com">asdf</a>
You can't directly do this, as it's a user setting on their browser whether windows open as new windows or as tabs.
There is target="_newtab" but that isn't widely supported.
So in the onclick:
window.open('page.html','_newtab');
But attempting to override a users browser preference isn't a good idea IMO.
To do it on a right click something like:
$('#item').mousedown(function(event) {
if(event.which == 3) { // right click
window.open('page.html','_newtab');
}
})
you could do:
onclick="window.open('http://www.google.com', somename);" ...
do you mean, something like:
..onmousedown="op(your_url,event);"..
function op(url,event) {
if (event.button == 2) {
window.open(url);
}
}
There is actually no cross-browser way to do this.
Forms or window.open will open a new window, not a new tab.
And don't try to create a link in memory and click it with javascript because chrome won't open the new tab, as a security feature.
use target="_blank"
Have a look here
Document : HTML <a> target Attribute
Demo : Try It
At the top of this page: http://andrew-muir.com/search/2/#1 - When you click on the slider it will load new results using AJAX into a div. When i chose certain prices on the slider the results look fine in IE and when i chose other prices the results come back all broken.
Any ideas? Thanks!
There's a lot of invalid markup in the HTML fragment that comes back from the slider actions. You've got some unclosed tags, etc.
Example:
<div style="background-color:#252525; padding:5px 10px; height:130px; position:relative;">
<p class="bold" style="color:#8a96a4; margin-bottom:0.5em;">Blue Lucerne lotus jug</p>
<p class="bold" style="color:#FFF; margin-bottom:0.5em;">£4250</p>
<p style="margin-bottom:0.5em;"><p><strong>Superb and very rare 30cm lotus jug in the bl…</p>
<p class="boldred" style="position:absolute; bottom:0px; left:10px;">View details ></p>
</div>
That line with the "Superb and rare" text has an unclosed <strong> tag.
When I try to look at the broken page in the IE 8 developer tool, it won't show me the content of the main <div>. That's a sure sign that the browser has just thrown up its hands in frustration.
edit — weird; it just started working ...
Recently, I've been trying to work with Prototype & Scriptaculous to have a rather simple SlideDown & ScrollTo effects to fill out a form for their application. It works fine in FF3, FF4, Chrome, Safari, Opera, IE9, and IE8. I knew IE6 would be an issue, but I thought I could get IE7 to work with a couple slight modifications.
The fix of setting the width of the div did not fix the issue.
Currently, it is not working in IE7 and I'm at a loss for why. I'm not a ninja at JavaScript and would appreciate any help given.
XHTML Structure:
<div id="scrollPoint"></div>
<div id="slideForm" style="display:none;">
<div style="position: relative">
<div class="separator" style="padding:5px 0"></div>
<h3 class="fhgroupblue">Apply for this Position:</h3>
<ucl:ApplicationForm id="WebUserForm" runat="server" />
</div>
</div>
Javascript:
<script type="text/javascript">
function hideDetails() {
if ($('showFormLink').style.visibility != "hidden") {
$('showFormLink').style.visibility = 'hidden'; Effect.SlideDown($('slideForm'));
}
Effect.ScrollTo('scrollPoint'); return false;
}
</script>
Trigger:
<div style="text-align:center;">
<a id="showFormLink" onclick="hideDetails();">Apply!</a>
</div>
CSS:
#jobDetails #slideForm {
padding-right: 10px;
width: 400px;}
Figured this out -- Posting solution for possible other troubled users.
For those that are using SiteCore, don't forget to add:if(!Prototype) to the top of your included Prototype.js file.
This is due to SiteCore rolling in it's own Prototype library with the Web Forms for Marketers.
Here's what we did:
Added if(!Prototype) to the top of
our included Prototype.js file
In /sitecore/shell/controls/lib/{/prototype, /Scriptaculous}, updated the JavaScript libraries to their newest versions.
Magic happened and everything is back to working in IE6 & 7 the way that it was supposed to.