Develop Reference

Using an element id as part of a postMessage string so that an iframe contained on a newly opened page loads to a specific anchor target

I am trying to have a set of links that open a new page that contains an iFrame and have the iframe src open to the specific anchor referenced by the id attribute of the original link. On this test page the querySelectorAll part is working just fine.. the appropriate target page that contains the iFrame is being loaded, and the src of the iFrame is being switched correctly (though man I hate that setInterval delay...).
So that part all works fine. What I am wanting to have happen is for that iFrame src to also load to the specific target as denoted by the id of the original trigger element. For the "numbers" type of link I have included a #target for an example. What I want though is for the javascript to be able to fill in that part so I don't have to code every single link separately.
I made an attempt based on another test for the "letters" type of link... but it doesn't work at all. I think I am on the right path, but would very much appreciate any pointers.
The HTML:
<div class="nLink" id="n6">6</div><br>
<div class="lLink" id="monad">monad</div><br>
<div class="nLink" id="n10">10</div><br>
<div class="lLink" id="singularity">singularity</div> <br>
The javascript:
const numbers = document.querySelectorAll('.nLink');
const letters = document.querySelectorAll('.lLink');
var nIndex;
var lIndex;
numbers.forEach(nLink => {
nLink.addEventListener('click',() => {openNumberIndex();sendMessageN();}, false);
function openNumberIndex(){
nIndex = window.open ('numberindex.html');
}
setInterval(sendMessageN,1234);
function sendMessageN(){
let msg={nFrame: 'numberlist.html#n10'};
nIndex.postMessage(msg,"*")
nIndex.focus();
}
});
letters.forEach(lLink => {
lLink.addEventListener('click',() => {openLetterIndex();sendMessageL();}, false);
function openLetterIndex(){
lIndex = window.open ('letterindex.html');
}
setInterval(sendMessageL,1234);
function sendMessageL(e){
if (e.target !== e.currentTarget) {
var clickedItem = e.target.id;
let msg={lFrame: 'glossary-index.html#'+clickedItem};
lIndex.postMessage(msg,"*")
lIndex.focus();
}
}
});
I guess I am unsure about syntax, or even if any of the above makes sense at all. The part in definite question is the sendMessageL. Thanks for any help!

Reloading a DIV's image and class by Javascript on click of separate DIV.

The code I’m working with is too long to post, so I’ve made a fiddle here: http://jsfiddle.net/Emily92/5b72k225/
This code takes a random image and cuts it up into a number of pieces depending on the class that is applied in the div which contains the image.
When the page loads, a random image is selected from the array and the class is applied to it, what I’m trying to do is create a separate div, which when clicked on will reload the div containing the image. The result I’m looking for is for the image to be replaced by a new random image with the class applied to it.
Right now, the only way I can make a new image appear in the div is to reload the entire page, ideally this would be achieved by just having the div reload instead of all the other page elements reloading too.
I haven’t been able to do this so far but have received some help on here on how to reload an image and class on click of a div, lines 980-1018 of the Javascript code in the jsfiddle is the current attempt at achieving this, but solving this problem seems much more complicated as the image is being manipulated by the Javascript code, so perhaps this needs to also be reloaded at the same time as the new randomised image is selected?
This is the current attempt at solving this problem:
$(function() {
var imageArray = [
'http://www.webdesignhot.com/wp-content/uploads/2009/10/CatsVectorImage.jpg',
'http://www.costume-works.com/images/halloween_cat_in_witch_hat.jpg',
'http://onthewight.com/wp-content/2013/04/sooty-ryde.jpg'];
reloadImages(imageArray);
$('#reload').on('click',function(){
$( "#masterdiv img[id^='div']" ).each(function(index){
$(this).removeClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeOut( "slow", function() {
if(index==0) {
reloadImages(imageArray);
}
$(this).addClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeIn();
});
});
});
});
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function reloadImages(array){
shuffleArray(array);
for(var i=0;i<3;i++){
// places the first image into all divs
document.getElementById('div'+(i+1)+'id').src=array[0];
}
}
I’ve written more details on the issue in the html section of the jsfiddle. I'd really appreciate any advice in solving this and thank you for any help in advance!

The plugin reads the images' src before page load, takes them and then generates the puzzle. As such, you can not just update the images as they're not there anymore. So you'd have to clear the divs under each difficulty classes (easyDiv,mediumDiv,hardDiv), append a new <img> under each div then calls / reload the plugin. Updated code in : http://jsfiddle.net/5b72k225/6/
Changes I've made:
Separate old reloadImages into initImages and reloadImages. initImages is called in the beginning, while reloadImages is called when reloading.
Created new function makePuzzle by taking out the intialization of the plugin from $(document).ready() block, so makePuzzle can be called after reloading new image.
The new $(document).ready() block now initializes the images and attaches click event handler to the button. When clicked, divs are emptied, new <img>s inserted and plugin is called.

HTML5 / JS - preProcess of uploaded html page and simulate pagebreaks

I'm making a html-5 based report generator. I created a button to upload a [HTML] page containing multiple paragraphs and tables, which is continuous.
Now my task is to display the whole contents into separated a4-sized pages, just like in Microsoft Word.]
This is the sketch: >>>LINK<<<
Here are part of my codes.
function xx (){
var fi = document.getElementById('fi').files[0];
reader.onload = function (e){
var reader = new FileReader();
var inner ="";
inner += this.result;
inn.innerHTML ="<center><div class='bg' id='0'><div id='testmain'>"+inner+"</div></div></center>";
}
reader.onerror = function (e){
dd.innerHTML = "error<br>";
}
reader.readAsText(fi);
}
After displaying the result of pages, users can click a specific part of the paper, just like a paragraph, then a pagebreak is created and the pages changes, the remaining content are pushed starting from top of next page.
Could you please give me some ideas about how to realize it?

Instead of using comments as chat to present my suggestion, here's my answer:
I once tried to do such a thing, back in html4. Here's the logic I was using. Create a div that has the exact size of your page CONTENT (after margins and all) put all your content in it and cycle through its direct children. If the current child's bottom is lower than his parent, take it and all the following children and put them in a new div CONTENT. Rinse and repeat.
For this, you will need to calculate the height of the container and cross-check it against the offset+height of the elements. My vanillaJS is a bit rusty as for browser specifics and all... So I will display the logic using jQuery but most of it can easily be made in pure JS. The code will assume that we have a div.page that has the right CSS to make it exactly the size of a content page, and that will not resize to content (overflow:hidden) and the document will contain one of those div with all the content of what should be in the pages...
$(document).ready(function(){
var $page = $('div.page');
var newPage = true;//To track if we loop
while(newPage){
newPage = false;
$page.children().each(function(){
if($(this).offset().top+$(this).outerHeight() > $page.offset().top+$page.height()){
$page = $('<div>').addClass('page').appendTo('body');
$(this).nextAll().appendTo($page);
$(this).prependTo($page);//Don't forget the element too.
newPage = true;
}
});
}
});

displaying image onLoadevent

I want to display a gif image for a few seconds before my home page is being displayed. I tried onLoadEvent with no success. Can someone suggest me the solution using CSS or JAVASCRIPT?

It's hard to tell exactly what you are looking for but this will show an image and hide it after 5 seconds on page load.
window.onload = function () {
var imgContainer = document.getElementById('ImgContainer');
imgContainer.style.display = 'block';
setTimeout(function () {
imgContainer.style.display = 'none';
}, 5000);
};
Here is a link to a JSFiddle example.
JSFiddle

Create a div that fills the entire browser window with the image inside the div. In the bodys onload event (or if you are using jQuery $(document).ready) remove the div from the DOM.

Need to set 1 span's style to display:block on page load for an image gallery made up of span's set to display:none

i have some javascript in the head of a page that controls an image gallery where the user clicks a thumbnail image and a larger image and some text are revealed in a span. there are 10 of these thumbnails per page and i need to find out how to set the 1st thumbnail's hidden span to "block" on page load.
<script type="text/javascript">
function hideSpan(spanName) {
var obj = document.getElementById(spanName);
obj.style.border="0px";
obj.style.color="#fff";
obj.style.display="none";
obj.style.left="333px";
obj.style.padding="0";
obj.style.position="absolute";
obj.style.top="55px";
obj.style.width="244px";
}
function showSpan(spanName) {
var spanEl, count = 1;
while(spanEl = document.getElementById('link' + count++)){
spanEl.style.display = 'none';
}
var obj = document.getElementById(spanName);
obj.style.display="block";
}
</script>
any help with this is VERY appreciated thank you.

The simple, breezy way is to do this:
<body onload="showSpan('link1');">
The trouble here is that the onload event attached to body that way is executed a little late in the page loading (After all the parts-- including images-- are loaded) so it'll be murder for your dial up users. jQuery implements a much better way:
$(document).ready(function () {
showSpan('link1');
});
If you're not using jQuery, then someone here much wiser than I more than likely knows the correct way to do it using "proper" JavaScript, I don't remember the event name that jQuery uses off the top of my head.