Go to https://colnect.com/en/forum/app!/help/faq with Firefox, click any link and nothing happen.
Do the same in Chrome and you will be moved somewhere.
Is it Firefox issue or something else?
Code is:
The times are not correct!
<dl class="faq">
<dt id="f1r2"><strong>The times are not correct!</strong></dt>
<dd>It is possible the time displayed is from a ...</dd>
</dl>
UPD: simplified sample, there are 2 pages, page with iframe:
<!-- firefox-in-iframe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Firefox in iframe</title>
</head>
<body>
<h1>Test TOC in Firefox</h1>
<iframe id="demo" src="firefox-in-iframe-w3.html" frameborder="1" style="width:100%; height:100%"></iframe>
</body>
</html>
and page with HMTL content from https://www.w3.org/TR/html401/struct/links.html with JavaScript added to align pages heights:
<script>
parent.document.getElementById('demo').addEventListener('load', (e) => {
e.target.style.height = Math.max(document.body.offsetHeight, document.body.scrollHeight) + 'px';
});
</script>
Here is old enough bug, its discussion and demo page mentioned there. Also one of the possible solutions are mentioned ibid. Сode could be like:
parent.document.getElementById('demo').addEventListener('load', (e) => {
// Align iframe and page heights. Iframe scrollbar can be hidden with CSS
e.target.style.height = Math.max(document.body.offsetHeight, document.body.scrollHeight) + 'px';
if (!(typeof InstallTrigger !== 'undefined')) return; // Not Firefox, do nothing
const iFrameOffset = e.target.offsetTop;
document.querySelectorAll('a[href^="#"]').forEach(el => {
const targetId = el.href.substring(el.href.indexOf('#') + 1);
el.addEventListener('click', () => {
const target = document.getElementById(targetId) || document.querySelector(`[name='${targetId}']`);
window.parent.scrollTo(0, iFrameOffset + target.offsetTop)
})
})
});
Related
I have a div tag in my webpage
<div id="editor1" name="editor1" contenteditable="true">
{!! $post->post !!}
</div>
When I click on the content of this div, a CKEditor Toolbar appears automatically. I tried to disable this Toolbar. I tried the following but could not be able to.
Try 1 :
<script>
$(document).ready(function() {
CKEDITOR.disableAutoInline = true;
});
</script>
Try 2: In the CKEditor config file
config.disableAutoInline = true;
What is my wrong? I am searching at Google, Stakeoverflow for several hours but not finding any solution. May I be helped by anybody?
Note that:
In the Page Header I added
<link rel="stylesheet" href="http://localhost/ewt/resources\assets
\ckeditor\plugins\codesnippet\lib\highlight\styles\magula.css">
and in the Footer I added
<script src="http://localhost/ewt/resources/assets/ckeditor/ckeditor.js"> </script>
<script src="http://localhost/ewt/resources/assets/ckeditor/adapters
/jquery.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
I had the same problem, for me it started working when I set the disableAutoInline outside of document.ready:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
$(document).ready(function () {
...
}
</script>
I'm wondering about having narrative text paragraphs scrolling down the side of a webpage while the user is progressing through data visualisation. As part of this it would be nice to add functionality to certain substrings of that text, for example to open a pop-up image it relates to. But I cannot think of any way to tell D3 to objectify substrings of text elements so they can respond to operators like mouseover.
Here's an example, plus jfiddle
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Substring click</title>
<script type="text/javascript" src="scripts/d3.v3.js"></script>
</head>
<body>
<!-- example line -->
<p>The most interesting man in the world</p>
<div/>
<script type="text/javascript">
var link = "https://en.wikipedia.org/wiki/The_Most_Interesting_Man_in_the_World";
d3.select("body").selectAll("div").append("text").text("The most interesting man in the world");
// is there any way to make 'man' link to 'wiki_link' or perform some other operation?
</script>
</body>
</html>
Yes, it is possible, though you will need to format data in a way which is amenable to d3.
Demo
var data = [{ text: 'The most interesting ', href: false },
{ text: 'man', href: 'https://en.wikipedia.org/wiki/The_Most_Interesting_Man_in_the_World' },
{ text: ' in the world', href: false}];
var text = d3.select("body").selectAll("div").append("text");
text.selectAll('tspan')
.data(data)
.enter()
.append('tspan')
.html(function (d) {
return d.href
? '<a href=' + encodeURI(d.href) + '>' + d.text + '</a>'
: d.text;
});
I want a button to add an image to the current page on each click. For example, the first time you open the page, there is one picture. Then you click the button and the same picture appears on the page and now you have two same pictures. Then you keep on pressing on the button and more and more same pictures appear. This is the code I tried that didn't work:
<script type="text/javascript">
function addimage() {<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Please help! Thanks.
You should probably know that javascript can create html elements, but you cannot directly embed html inside javascript (they are two completely separate things with different grammars and keywords). So it's not valid to have a function that only contains html -- you need to create the elements you want, and then append them to the dom elements that you want them to. In this case, you create a new image and then append it to the body.
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "http://bricksplayground.webs.com/brick.PNG";
img.height = 50;
img.width = 100;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
All you're missing is a method to write the element on the page
<script type="text/javascript">
function addimage() {
document.write('<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">')
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
I know google plus button doesn't work on IE7 but it also not working on IE8 , I can't see any error
here's the sample i am using
<html>
<head>
<title>Hello</title>
</head>
<body>
<div style="width: 50%;margin: auto;">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</body>
</html>
I don't know if you've found a solution yet.
Here is my solution anyway, hopefully it will work for you too
Does Google Plus Button API Support Internet Explorer 8
This time, it's a little bit different from my previous posts. So I decide to make a new one.
FYI, I use Lightbox plugin from this:
http://leandrovieira.com/projects/jquery/lightbox/
ePC.html = contain an image with lightbox effect (work with IE, Chrome, Firefox).
reviews.html = Home page. connect to scripts/script.js. (Contain the .load() function, loading ePhone.html or ePC.html by clicking on one of those 3 links). Please Ignore "ePhone.html".
Below is the scripts/script.js file:
$(document).ready(function() {
//ePhone link is clicked. Open ePhone.html PLEASE IGNORE THIS LINK.
$('#linkEPhone').click(function() {
$('#apDiv2').load('ePhone.html');
});
//ePC link is clicked. Open ePC.html
$('#linkEPC').click(function() {
$('#apDiv2').load('ePC.html', function () {
$('a[#rel*=lightbox]').lightBox();
});
});
//ePC2 link is clicked. Open the <div> section of ePC.html. The image is located inside the <div> section.
$('#linkEPC2').click(function() {
$('#apDiv2').load('ePC.html #content', function () {
$("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
$.getScript('js/jquery.js', function() {
$.getScript('js/jquery.lightbox-0.5.js', function() {
$('a[#rel*=lightbox]').lightBox();
});
});
});
});
});
The problem is with the third one above:
$('#apDiv2').load('ePC.html #content', function () {...
'#content is id. ANd the picture is within the tag within "ePC.html"
<div id=content>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>
It WORKS 100% on Chorme and Firefox but NOT Internet explorer 8!!!!. (I understand why people hate IE now..)
IE crashed!. I later fixed this crashing problem by removing the !DOCTYPE..within "reviews.html"
Ok with !DOCTYPE removed, IE doesn't crashed anymore. HOWEVER, the lightbox CSS DOES NOT APPLIED to the image!
Other methods that I have tried but didn't work:
*1. "live" instead of "load":*
$('#linkEPC2').click(function() {
$('#apDiv2').live('load', 'ePC.html, #content', function(){
$("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
$.getScript('js/jquery.js', function() {
$.getScript('js/jquery.lightbox-0.5.js', function() {
$('a[#rel*=lightbox]').lightBox();
});
});
});
});
This one doesn't work at all. Even the image is not there at all.
So I guess I may stick with the "load()" function instead.
2. I've also tried putting these 3 lines into the div section:
<div id=content>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>
but it doesn't work neither..
I had the same problem and noticed a few things about the jQuery load in IE:
It doesn't accept the syntax of 'load("href selector",function()...' (while chrome and FireFox do accept this syntax).
The loaded html should not include tags.