Develop Reference

How to open a hidden div from url with #anchor

I have a page that has a grid of staff bios, when the bios are clicked additional information is displayed in a modal. I would like to be able to display the content of specific staff when linked from another page. I would like to use plain javascript and add a #anchor in the url.
When I was building this set up I seemed to have stumbled apon this on accident, but now it won't work. The closest I have gotten is from this post: How to open a hidden div when a hash is on the URL?
/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
if (hash) {
document.getElementById(hash).classList.add("bio-open");
}
Here is my markup:
<div class="bio-tile">
<div id="close" class="anchor"></div>
<div class="tile-inner" onclick="speakerDetails('open')">
//Thumbnail content here
</div>
</div>
<div id="open" class="speaker-details">
<div class="speaker-details-wrapper">
<span onclick="speakerDetailsClose('open')" class="speaker-close">×</span>
//details content here
</div>
</div>
Here are the scripts on the page:
/* To Allow Body and HTML scroll on load in class to be toggled */
window.addEventListener('DOMContentLoaded', (event) => {
document.body.classList.add("allow-overflow");
document.documentElement.classList.add("allow-overflow");
});
var speaker;
/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
if (hash) {
document.getElementById(hash).classList.add("bio-open");
}
/* To open Speaker Bio Pop Up and prevent body/html scroll*/
function speakerDetails(slug) {
speaker = document.getElementById(slug);
speaker.classList.add("bio-open");
document.body.classList.add("no-overflow");
document.documentElement.classList.add("no-overflow");
document.documentElement.classList.remove("allow-overflow");
}
/*To Close Speaker Bio Pop Up When X close button is clicked and allow body/html scroll*/
function speakerDetailsClose(slug) {
speaker.classList.remove("bio-open");
document.body.classList.remove("no-overflow");
document.documentElement.classList.remove("no-overflow");
document.documentElement.classList.add("allow-overflow");
}
/*To Close Staff Bio Pop Up when clicked outside of the bio container and allow body/html scroll*/
window.onclick = function(event) {
if(event.target == speaker) {
speaker.classList.remove("bio-open");
document.body.classList.remove("no-overflow");
document.documentElement.classList.remove("no-overflow");
document.documentElement.classList.add("allow-overflow");
}
}
I would like to have the page load using a www.site.com/page#open url, to display one of the bio details divs on load and then be able to close it to access the other bios on the page.

You're close. Basically when you are selecting things in the DOM you need to know the elements are there. What's happening is that the code inside of your if statement around the hash is getting executed before the DOM is loaded so the element doesn't existing and is returning null.
Here is what I did to work around that; just move your the hash var and the if statement into your DOMContentLoaded event listener.
document.addEventListener('DOMContentLoaded', function(event) {
//the DOMContentLoaded event occurred, which means the DOM is done loading.
/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
if (hash) {
// you don't have to do this extra save to a var, but it's clearer
var elem = document.getElementById(hash);
elem.classList.add("bio-open");
}
});

I have figured it out! Thought I would share for the rest of the SO world and thanks to bgaynor78 for getting me headed towards the right idea.
I used document.addEventListener('DOMContentLoaded', function(event) { twice, which I am not sure if that is totally best practice.
var speaker;
var hash = window.location.hash.replace('#', '');
var tag;
/* To Allow Body and HTML scroll on load in class to be toggled */
window.addEventListener('DOMContentLoaded', (event) => {
document.body.classList.add("allow-overflow");
document.documentElement.classList.add("allow-overflow");
});
/*To open the details window when the ID # is used in the url*/
window.addEventListener('DOMContentLoaded', (event) => {
if (hash) {
tag = document.getElementById(hash);
tag.classList.add("bio-open");
document.body.classList.add("no-overflow");
document.documentElement.classList.add("no-overflow");
document.documentElement.classList.remove("allow-overflow");
}
});
I then added some IF statements to reference in the scripts to close the window:
function speakerDetailsClose(slug) {
if (hash) {
tag.classList.remove("bio-open");
speaker.classList.remove("bio-open");
document.body.classList.remove("no-overflow");
document.documentElement.classList.remove("no-overflow");
document.documentElement.classList.add("allow-overflow");
}
else {
// the rest of the script

jQuery Lightbox gallery only working once

I am trying to build my own simple jQuery lightbox gallery. My logic behind it is as follows: Only thumbnails will be shown & created at first. These link to the full size images.
<section class="gallery-set">
<a href="img/about/gallery/a1.1.jpg">
<img src="img/about/gallery/thumb1.1.jpg" alt=""
height="192" width="383">
</a>
<a href="img/about/gallery/a1.jpg">
<img src="img/about/gallery/thumb1.jpg" alt=""
height="192" width="383">
</a>
<a href="img/about/gallery/a2.1.jpg">
<img src="img/about/gallery/thumb2.1.jpg" alt=""
height="192" width="383">
</a>
</section>
Therefore, when you click on any of these thumbnails, I dynamically create an overlay-lightbox and all full size images, showing only the one that links to the thumbnail you clicked. Although the rest of the images has been created too, these are hidden for now.
function lightBox() {
var gallery = $('.gallery-set'),
overlay = $('<div/>', {id: 'overlay'});
overlay.appendTo('body').hide();
gallery.on('click', 'a', function(event) {
event.preventDefault();
var clickedThumb = $(this),
clickedThumbPath = $(this).attr('href'),
clickedImg = $('<img>', {src: clickedThumbPath, alt: 'fullSizeImage', class: 'current'}),
prevThumbs = clickedThumb.prevAll(),
nextThumbs = clickedThumb.nextAll();
prevThumbs.each(function() {
var prevImg = $('<img>', {src: $(this).attr('href'), class: 'prev non-current'});
prevImg.appendTo(overlay);
});
clickedImg.appendTo(overlay);
nextThumbs.each(function() {
var nextImg = $('<img>', {src: $(this).attr('href'), class: 'next non-current'});
nextImg.appendTo(overlay);
});
overlay.show();
})
.....
.....
}
Now, when you click the second thumbnail, jQuery dynamically creates all the fullsize images and this is how HTML structure looks like:
Now that I have this structure, I can easily traverse the full sized images by left and right arrows. The current image gets hidden and the next one gets shown. For this logic I am using two classes, current and non-current where the first one has set display to block and the second one to none. This piece of code is within the lightbox() function:
$(document).on('keyup', function(event) {
var pressed = event.keyCode || event.which,
arrow = {left: 37, right: 39};
switch(pressed) {
case arrow.left:
var curr = overlay.find('.current'),
prev = curr.prev();
if(curr.hasClass('current')) {
curr.removeClass('current').addClass('non-current');
} else {
curr.addClass('non-current');
}
if(prev.hasClass('non-current')) {
prev.removeClass('non-current').addClass('current');
} else {
prev.addClass('current');
}
break;
case arrow.right:
var curr = overlay.find('.current'),
next = curr.next();
curr.removeClass('current').addClass('non-current');
next.removeClass('non-current').addClass('current');
break;
}
});
overlay.on('click', function() {
overlay.hide();
overlay.find('img').remove();
});
});
Everything works fine the first time. However, once I close the lightbox and try to open it again, the correct image opens but the arrows functionality is gone. I do not understand why - since I am dynamically creating the full sized images everytime user clicks on the gallery and putting event listeners (arrows) only once these have been created.
Just for the record, I am calling this lightbox() function from the HTML file right before the closing tag.
Any ideas much appreciated. Also, if there's a simpler / better way of doing this, please do let me know! I don't want to use any plugin as I think this is pretty simple and straightforward. Or, I thought it WOULD BE SIMPLE I should rather say.

How to prevent execCommand('SaveAs', from opening new tab or window

I have to generate a download pop up in IE.
Iam using the below code.
when i click on buttton it opens a new tab and the Save as Dialogue box
function SaveContents(element) {
if (document.execCommand) {
var oWin = window.open("about:blank","_blank");![enter image description here][1]
oWin.document.write(element);
oWin.document.close();
var success = oWin.document.execCommand('SaveAs', false, "FilteredReport.xls")
oWin.close();
}
}
How can i make the Save as Dialogue box appear with out opening new window or tab..
Also can i write data of a string to excel with out using
oWin.document.write(element);
beacuse its getting written to the new tab or window that opens
Below image explains..

Instead of IEwindow.document.execCommand('SaveAs', true, fileName + ".xls"); use below snippet
if (window.navigator.msSaveOrOpenBlob) {
blobObject = new Blob([CSV]);
window.navigator.msSaveOrOpenBlob(blobObject, 'Export.xls');
}
IEwindow.close();

include an iframe with ID IframeForExcelExportonIE
<iframe id="IframeForExcelExportonIE" style="display: none"></iframe>
IframeForExcelExportonIE.document.open("txt/html", "replace");
IframeForExcelExportonIE.document.write(cln.innerHTML);
IframeForExcelExportonIE.document.close();
IframeForExcelExportonIE.focus();
sa = IframeForExcelExportonIE.document.execCommand("SaveAs", true, " test.xls");

CKEditor and elFinder in modal dialog

I need to integrate elFinder to CKEditor. I followed this:
https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor
It is working but opening pop-up window for image selection is not very nice so I want to open elFinder in modal dialog.
For "modal integration" i followed this thread:
http://bxuulgygd9.tal.ki/20110728/integration-with-ckeditor-759177/
The last post there partially works. It really opens elfinder in modal. BUT:
When I want to insert image URL to URL field in CKFinder I have to know its exact ID. Is also does not fill image resolution and brings some other problems. The best solution would be to run function called in "ordinary popup" integration, which handles everything:
window.opener.CKEDITOR.tools.callFunction(funcNum, file);
But in "popup integration", funcNum callback is registered, in modal integration it is not so I'm unable call it. Do you have any tip to run elfinder (or any other image manager - it would be the same) in modal window? I'm desperate.

I have solved it myself. This code is combination of several tutorials and allows to fully integrate elFinder in modal window. Maybe somebody will consider it useful.
CKEDITOR.on('dialogDefinition', function(event) {
var editor = event.editor;
var dialogDefinition = event.data.definition;
console.log(event.editor);
var dialogName = event.data.name;
var tabCount = dialogDefinition.contents.length;
for (var i = 0; i < tabCount; i++) {
var browseButton = dialogDefinition.contents[i].get('browse');
if (browseButton !== null) {
browseButton.hidden = false;
browseButton.onClick = function(dialog, i) {
editor._.filebrowserSe = this;
jQuery('<div \>').dialog({modal: true, width: "80%", title: "Insert image", zIndex: 99999,
create: function(event, ui) {
jQuery(this).elfinder({
resizable: false,
url: "/path/to/connector.php",
getFileCallback: function(url) {
CKEDITOR.tools.callFunction(editor._.filebrowserFn, url);
jQuery('a.ui-dialog-titlebar-close[role="button"]').click()
}
}).elfinder('instance')
}
})
}
}
}
});

How to add content to a containerNode that already has its content from href using dijit.Dialog

I’m new with this javascript and dijit.
My problem: In my js-function I’m building up a dijit.Dialog, using parameters that has been sent to the function.
One of the parameters is a href to en external xhtml-file that contains only the text that’s supposed to be shown in the dialog. Now, I want to add a div with one more link to the dialog, in the containerNode (with a link that's supposed to be specific for every single user).
The problem is that I can se that the added div is there until I reach dialog.show, after that it disapears. The text from the xhtml takes over. If I put it in the domNode (like the button) it shows up in the wrong place.
I've also tried another approach, to let the link be in the external href (in file three), give it an id and tried to reach it that way and manipulate it. Like this:
document.getElementById("bytlosen").href="www.xxx.se";
But it doesn't work. I get "document.getElementById(...) is null.
I would be SO happy if anyone can help me how to add the div (link) to the dialog! It doesn't matter if I
have it in file three and can reach it from file two and manipulate it,
simply adds the div in the js (in file two), or
any other way?
I have three files:
file one.xhtml (calling file two):
<li>Kontakta oss</li>
file two.js:
Xxxx.contactsDialog = function(title, href, cssClass, destroy) {
if (href) {
var options = {
title: title,
href: href
};
if (cssClass)
options["class"] = cssClass;
var dialog = new dijit.Dialog(options);
var div = document.createElement("div");
var bytLosen = document.createElement("a");
bytLosen.appendChild(document.createTextNode("Byt lösenord"));
bytLosen.setAttribute("href", "https://xxxx.xxx.se/xxx/xxx/xxxx=xxxx&TARGET=xxx.xxx.se");
bytLosen.setAttribute("target", "_blank");
div.appendChild(bytLosen);
dialog.containerNode.appendChild(div);
var okButton = document.createElement("button");
okButton.setAttribute("type", "submit");
okButton.setAttribute("style", "margin-top: 10px");
okButton.innerHTML = "Ok";
dojo.addClass(okButton, "button");
dialog.domNode.appendChild(okButton);
dialog.startup();
dialog.show();
dojo.connect(okButton, "onclick", function() {
dialog.hide();
if (destroy) {
dialog.destroy();
}
});
return true;
} else
return false;
};
file three.html:
<div class="popupHeader">Synpunkter och felanmälan <span style="font-weight: normal">skickas till:</span></div>
<div>ajourhallning-xxx#xx.se</div>
<div class="popupHeader">Länkar <span style="font-weight: normal">(till xxxx's externa hemsida)</span></div>
<div>www.xxxxx.se</div>
<div>www.xxxx.se/xxx</div>
<div class="popupHeader">Byt lösenord</div>