I'm having some trouble trying to get a fairly simple popupper to work. The idea is that the parent should open a popup window and then append a div in it.
The relevant parts of the code:
parent.html:
var childWindow;
function togglePref() {
childWindow = window.open("popup.html", "prefPopup", "width=200,height=320");
}
function loadPopupElements() {
var prefElements = document.getElementById("prefBrd").cloneNode(true);
var childDoc = childWindow.document;
var childLink = document.createElement("link");
childLink.setAttribute("href", "pop.css");
childLink.setAttribute("rel", "stylesheet");
childLink.setAttribute("type", "text/css");
childDoc.head.appendChild(childLink);
childDoc.body.appendChild(prefElements);
}
popup.html:
<head>
</head>
<body onload="opener.loadPopupElements();">
</body>
This works fine with Safari and Chrome, but for some reason IE refuses to append anything.
Ok, I managed to work around the problem with a uglyish solution using innerHTML. Apparently, as Hemlock mentioned, IE doesn't support appending children from a another document. Some suggested to take a look at the importNode() method but I seemed to have no luck with it either.
So, the workaround goes as follows:
parent.html:
var childWindow;
function togglePref() {
childWindow = window.open("popup.html", "prefPopup", "width=200,height=320");
}
function loadPopupElements() {
var prefElements = document.getElementById("prefBrd");
var childDoc = childWindow.document;
childDoc.body.innerHTML = prefElements.innerHTML;
}
popup.html:
<head>
<link href="pop.css" rel="stylesheet" type="text/css">
</head>
<body onload="loadElements();">
</body>
<script type="text/javascript">
function loadElements() {
opener.loadPopupElements();
}
</script>
This seems quite a nasty way to go because in my case the #prefBrd contains some input elements with dynamically set values, so in order for the popup.html to grab them, it has to do a bit of iteration at the end of the loadElements() function, which wouldn't have been necessary using appendChild.
Related
I am simply trying to hide a select list/drop down list on an html page. I am not trying to hide the options in the select list, just the select list overall. I am having the hardest time for some unknown reason. I cannot figure out how to do this.
HTML
<HTML>
<head>
<title>Test</title>
<script type="text/javascript">
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.visibility="hidden";
}
</script
</head>
<body>
<select id="contracts" name ="contracts" style="width:99%;height:50px"></select>
</body>
</html>
As simpel as can be, yet I cannot figure out how to hide the select list. It's still present on my page. This example is actually hiding the values in my select list but not the overall select list. Does anyone know how to accomplish this? I am out of ideas. Thanks in advance for your help.
document.getElementById('contracts').style.display = 'none';
The above should do
You man consider using jQuery though. Makes your life simple
$('#contracts').hide();
That's all
Cheers
try and move the script to the bottom of the page. It's executing before the element is loaded. You could also put it in the "onload" function
window.onload = function(){
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.visibility="hidden";
}
};
Instead of visibility, you should be looking at display property. Check the snippet below.
<HTML>
<head>
<title>Test</title>
</head>
<body>
<select id="contracts" name ="contracts" style="width:99%;height:50px"></select>
</body>
<script type="text/javascript">
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.display="none";
}
</script
</html>
I'm dynamically creating an image via javascript like this:
var dragimg = null;
function createImage(g) {
dragimg = document.createElement("img");
dragimg.src = "link/to/image.png";
dragimg.style.width = "50px";
dragimg.style.position = "absolute";
dragimg.style.zIndex = 100;
$("body").prepend(dragimg);
}
After creating the Image, I want to remove it at some point by calling this function:
function removeImage() {
dragimg.remove();
}
This works well in Chrome, Firefox & Opera. However, it doesn't work in Internet Explorer 11.
I'd also like to point out I have an document.onmousemove function set which manipulates the left and top attribute of the created image when the mouse moves. This works well in all browsers - but I'm not sure if it has something to do with the remove-problem.
I've also tried to remove the image by dragimg.parentNode.removeChild(dragimg), but same result.
A few things other than the classic just-use-jquery answer:
element.remove() is not supported yet by Internet Explorer, according to the API: http://msdn.microsoft.com/en-us/library/ie/hh772117(v=vs.85).aspx. It's an experimental technology: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove
Are you sure parentNode.removeChild isn't working because it is for me: http://jsfiddle.net/limdauto/wztm1dgk/
Before
After
To use jQuery remove method you need this:
function removeImage() {
$(dragimg).remove();
}
Your dragimg is a dom element, but $(dragimg) is a jQuery element. While jQuery prepend method accepts dom elements, remove does not - it applies to jQuery element itself or to selector. More about jQuery remove and prepend.
I'm not sure the context where you are calling the removeImage function, but the code below demonstrates inserting the image element and removes it after an interval of 2 seconds.
Note: Replace the path to your image.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var dragimg = null;
function createImage(g) {
dragimg = document.createElement("img");
dragimg.src = "someimage.jpg";
dragimg.style.width = "50px";
dragimg.style.position = "absolute";
dragimg.style.zIndex = 100;
$("body").prepend(dragimg);
}
function removeImg() {
dragimg.parentNode.removeChild(dragimg);
}
createImage(null);
window.setInterval(removeImg, 2000);
</script>
</body>
</html>
I'm trying this with no success. For reference, the bootstrap slider is here : http://seiyria.github.io/bootstrap-slider/.
I'm not a javascript expert, either, so this might be very simple. The bootstrap-slider site has many examples of how to configure the sliders the way you want them. I'm going to have many sliders generated depending on how many objects are pulled from a JSON file or some other data storing method. It could be 2 or it could be 20.
I created a javascript function called createSlider that I've attempted to pass all of the information required at the bootstrap-slider site. I'm not getting any errors in my Chrome debugging area, but nothing is happening. All of the appropriate client-side sources are loading.
function createSlider (orgId) {
slidersList = document.getElementById('slidersList');
element = slidersList.createElement("div");
var sliderElement = element.createElement('input');
var sliderUnique= orgId.concat("Slider");
var sliderUniqueVal = orgId.concat("SliderVal");
sliderElement.setAttribute('id', charityId);
sliderElement.setAttribute('data-slider-id', sliderUnique);
sliderElement.setAttribute('type', 'text');
sliderElement.setAttribute('data-slider-min', '0');
sliderElement.setAttribute('data-slider-max', '100');
sliderElement.setAttribute('data-slider-step', '1');
sliderElement.setAttribute('data-slider-value', '50');
var span = element.createElement('span');
span.setAttribute('style', 'padding-left:5px;');
span.innerHTML =' ';
var innerSpan = span.createElement('span');
innerSpan.setAttribute('id', sliderUniqueVal);
innerSpan.innerHTML = '50';
sliderElement.slider({tooltip: 'hide'});
sliderElement.on("slide", function(slideEvt) {
innerSpan.innerHTML = text(slideEvt.value);
});
}
The slider() function is from the external site, and runs fine if I explicitly call it like the examples state to. Anyone know what's going wrong? Is there a better way to do this? Any ideas would be appreciated.
Note, in plain JavaScript, you can only use document.createElement and then append to another HTML element. You cannot call createElement directly against another HTML element.
I changed some of what you wrote from plain old JavaScript into JQuery, and now seems to work:
P.S. Didn't know where charityId came from, so just added it as another parameter into the function.
$(function() {
createSlider('o1','c1');
createSlider('o2','c2');
createSlider('o3','c3');
});
function createSlider (orgId, charityId) {
var slidersList = $('#slidersList');
var element = $("<div></div>").appendTo(slidersList);
var sliderElement = $("<input/>").appendTo(element);
var sliderUnique= orgId.concat("Slider");
var sliderUniqueVal = orgId.concat("SliderVal");
sliderElement.attr('id', charityId);
sliderElement.attr('data-slider-id', sliderUnique);
sliderElement.attr('type', 'text');
sliderElement.attr('data-slider-min', '0');
sliderElement.attr('data-slider-max', '100');
sliderElement.attr('data-slider-step', '1');
sliderElement.attr('data-slider-value', '50');
var span = $('<span></span>').appendTo(element);
span.attr('style', 'padding-left:5px;');
span.html(' ');
var innerSpan = $('<span></span>').appendTo(span);
innerSpan.attr('id', sliderUniqueVal);
innerSpan.html('50');
sliderElement.slider({tooltip: 'hide'});
sliderElement.on("slide", function(slideEvt) {
innerSpan.text(slideEvt.value);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css">
<script type='text/javascript' src="http://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>
<div id="slidersList"></div>
I have a JavaScript statement on the bottom of my page that I want to trigger ONLY if a certain HTML comment is available
<!-- mytriggercomment -->
In the above example, if the mytriggercomment is detected within the current page, only then should the JavaScript statement trigger. What is the preferred way of doing this?
May not work for older browsers, but this way is a logical DOM approach:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var treeWalker = document.createTreeWalker(
document,
NodeFilter.SHOW_COMMENT,
{acceptNode: function(node) {
if (node.nodeValue.trim() === 'mytriggercomment') {
return NodeFilter.FILTER_ACCEPT;
}
}}
);
var nodeList = [];
while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
alert(nodeList)
};
</script></head>
<body>
</body>
</html>
<!-- mytriggercomment -->
If you know it will always be at the bottom, you may be able to target it like:
window.onload = function () {
alert(document.documentElement.nextSibling &&
document.documentElement.nextSibling.nodeValue.trim() === 'mytriggercomment')
};
I'm writing a simple chrome extension that lists all the open tabs, I have this code on it
function changeTab(tabID){
chrome.tabs.update(tabID,{active:false})
}
chrome.windows.getCurrent({populate: true},function (window){
list = document.getElementById('open-tabs');
for (var i = 0; i < window.tabs.length; i++)
{
var li = document.createElement('li');
var element = document.createElement('a');
element.setAttribute('href','#');
element.innerHTML = window.tabs[i].title;
element.addEventListener("click",function(){
changeTab(window.tabs[i].id);
},false);
li.appendChild(element);
list.appendChild(li);
}
});
It lists the open tabs, but doesn't seem to add the onClick event, when I checked the chrome console I get this
Why is not adding the event correctly?
--edit--
Adding the html if it helps
<!doctype html>
<html>
<head>
<title>Count Me</title>
<link rel="stylesheet" href="popup.css" type="text/css">
<script src="popup.js"></script>
</head>
<body>
<div id="main">
<ul id="open-tabs"></ul>
</div>
</body>
</html>
Edit2
I tried using the sugestion given on an answer using the .bind(this,i) but still doesn't work, I added console.log() to see what's happening, and it seems it's not going inside the addEventListener heres the code with the log calls:
function changeTab(tabID){
chrome.tabs.update(tabID,{active:false})
}
chrome.windows.getCurrent({populate: true},function (window){
list = document.getElementById('open-tabs');
for (var i = 0; i < window.tabs.length; i++)
{
var li = document.createElement('li');
var element = document.createElement('a');
element.setAttribute('href','#');
element.innerHTML = window.tabs[i].title;
console.log('before');
console.log(window.tabs[i].id);
element.addEventListener("click",function(iVal){
console.log('inside');
changeTab(window.tabs[iVal].id);
}.bind(this,i),false);
console.log('after');
console.log(window.tabs[i].id);
li.appendChild(element);
list.appendChild(li);
}
});
As you can see I have a Before and After console.log() as well as inside the addEventListener and it doesn't seem to call anything inside the addEventListener as you can see here:
It's calling the console.log inside the addEventListener but still isn't working
Try adding a closure around the function
(function(num) {
element.addEventListener("click",function(){
changeTab(window.tabs[num].id);
},false);
})(i)
The event will be executed a later stage when you click the element. So when the for loop is completed, i always points to last iterated value.
So enclosing it in an anonymous function creates a closure around the variable which will be available at the time the click event occurs.
Your function callback is happening in a context that does not recognize i..
You can bind the i value to function and by that make it work:
element.addEventListener("click",function(iVal){
changeTab(window.tabs[iVal].id);
}.bind(this,i),false);