Develop Reference

How to close multiple browser tab?

I am developing a Web Application using RichFaces.
On the home page, having many page links and each link clicks need to show that corresponding page in new tab.
Requirement:-
When I clicked on logout button, that above page link tabs need to be closed automatically.
I tried in some way, but it could not be reached my requirement.
JSP:-
<rich:panelMenuGroup>
<rich:panelMenuItem>
<h:outputLink value="#" onclick="return NewWindow('./../sample.jsp','Sample 1');">
<h:outputText value="Sample"/>
</h:outputLink>
</rich:panelMenuItem>
<rich:panelMenuItem>
<h:outputLink value="#" onclick="return NewWindow('./../test.jsp','Test');">
<h:outputText value="Test"/>
</h:outputLink>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<h:commandLink value="Logout" action="--" onclick="closeTabs();"/>
Java Script:-
var object = new Array();
function NewWindow(mypage,myname)
{
var newwin = window.open(mypage,'_blank');
object.push(newwin);
if (window.focus)
{
newwin.focus()
}
return false;
}
function closeTabs()
{
for (i = 0; i < object.length; i++)
{
object[i].close();
}
}
This above code is working fine until the page getting refreshed, because when refreshed that var object Array is reset automatically.
Is there any other way to close the tabs.
Please help me to do this.

#Alexis Toby, I tried with your code but got exception below where i marked in comment.
I integrated your code in below:-
<script type="text/javascript" language="javascript">
var objectArray = new Array();
function NewWindow(mypage,myname)
{
var newwin = window.open(mypage,'_blank');
objectArray.push(newwin);
localStorage.tabArray = JSON.stringify(objectArray);
if(window.focus)
{
newwin.focus()
}
return false;
}
function closeWindow()
{
objectArray = JSON.parse(localStorage.tabArray); // In this part exception coming, why?
for(i = 0; i < objectArray.length; i++)
{
objectArray[i].close();
}
}
</script>

I hope updating the script will solve your problem. Please try this.
var object = new Array();
function NewWindow(mypage,myname)
{
var newwin = window.open(mypage,'_blank');
object.push(newwin);
if (window.focus)
{
newwin.focus()
}
localStorage.tabArray = JSON.stringify(object);
return false;
}
function closeTabs()
{
object = JSON.parse(localStorage.tabArray);
for (i = 0; i < object.length; i++)
{
object[i].close();
}
}

Replacing links in html with JavaScript

I am using some JS code to find all internal links on a page and add a subfolder to them. This code is used on translated pages so internal links to other translated pages are correct.
I want to have this code update all internal links, unless they have a class attribute.
If the class attribute exists, I want the link to be ignored by the JavaScript function.
<a class="noTranslateLink" href="domain.com"
<script>
function replace_url(elem, attr) {
var elems = document.getElementsByTagName(elem);
for (var i = 0; i < elems.length; i++)
elems[i][attr] = elems[i][attr].replace('<?php echo $_SERVER['HTTP_HOST'] ?>', '<?php echo $_SERVER['HTTP_HOST'] ?>/ru');
}
window.onload = function() {
replace_url('a', 'href');
}
</script>

I have not tested, But this must work:
function replace_url(elem, attr) {
var elems = document.getElementsByTagName(elem);
for (var i = 0; i < elems.length; i++) {
if (elems[i].getAttribute('class') != "noTranslateLink")
elems[i].setAttribute(attr,elems[i].setAttribute(attr).replace('',''));
}
}

To select all anchor elements with no class attribute:
var elems = document.querySelectorAll(elem + ':not([class])');
The opposite is:
var elems = document.querySelectorAll(elem + '[class]');

JavaScript checkbox Tree - children automatic checked

folks!
I've a litte problem, this is the situation:
Tree View
I let the tree on basis of the "lvl" create. That means, Bereich ABC is lvl1, Test1.docx is lvl4 and so on. So it's a "fake" Tree. But i have just this lvl information for every object.
I have to check the checkbox if the parent is clicked. that means, if lvl3 is clicked (for example "Originale") the lvl4 and lvl5 have to be checked also.
Do you understand what i mean? I hope so. But i can't make it working. Do you have any ideas?
$('[class^=lvl]').click(function(){
var keepChecking = true;
var currentElement = $(this);
var clickedLevel = getLevel(currentElement);
var checkValue = currentElement.is(':checked');
while (keepChecking) {
currentElement.attr('checked' , checkValue);
// get next element
currentElement = getNextCheckbox(currentElement);
var currentLevel = getLevel(currentElement);
keepChecking = (currentLevel > clickedLevel);
}
});
function getNextCheckbox(checkbox) {
return checkbox.parent().parent().next().children(":first").children(":first");
}
function getLevel(checkbox) {
var currentClass = checkbox.attr('class');
var currentLvl = currentClass.substring(3, currentClass.length);
return parseInt(currentLvl);
}
<TD class="center">
<INPUT TYPE="checkbox" NAME="" class="lvl[LL_REPTAG=PFADLEVEL /] docCheck" VALUE="[LL_REPTAG=DataId /]">
</TD>

I changed your javascript code to this:
function getNextCheckbox(checkbox) {
return checkbox.parent().parent().next().children(":first").children(":first");
}
function getLevel(checkbox) {
var currentClass = checkbox.attr('class');
if (currentClass){
var currentLvl = currentClass.substring(3, currentClass.length);
return parseInt(currentLvl);
}else{
return false;
}
}
$('[class^=lvl]').click(function(){
var currentElement = $(this);
var clickedLevel = getLevel(currentElement);
var checkValue = currentElement.is(':checked');
nextElement = getNextCheckbox(currentElement);
while ( getLevel(nextElement)>clickedLevel) {
currentElement=nextElement;
currentElement.prop('checked' , checkValue);
nextElement = getNextCheckbox(currentElement);
}
});
You can also play with it here: https://jsfiddle.net/1r73vy7z/1/
Enjoy :)

trying to dynamically replace the url from "a href" but javascript is not updating results

I'm trying to replace the urls in the html using javascript but it is not working although when I test it by I "alerting" them the values pop up correctly, but when I publish it and click on the images the new urls are not applied. Any help would be greatly appreciated
Could you please look at the code and tell me what is going on?:
<script>
var rutaBase = "assets/fotos/";
function cambieFotos(cualFoto) {
var listaFotos = ["360.jpg", "foto3.jpg", "mathura.jpg"];
var numFotosLista = listaFotos.length;
var foto1 = document.getElementById("foto1");
var foto2 = document.getElementById("foto2");
var foto3 = document.getElementById("foto3");
for (i = 0; i < 3; i++) {
var fotoAleatoria = listaFotos[Math.floor(Math.random() * numFotosLista)];
var fotoRoll = document.getElementById("foto" + (i + 1));
fotoRoll.src = "assets/fotos/" + fotoAleatoria;
fotoRoll.href = "assets/fotos/" + fotoAleatoria; //this code is not working.
var sacarFotoLista = listaFotos.indexOf(fotoAleatoria);
listaFotos.splice(sacarFotoLista, 1);
numFotosLista = listaFotos.length;
}
}
</script>
<div id="contenedor">
<img id="foto1" onMouseOver="cambieFotos(this)" src="assets/fotos/360.jpg"> <--!this needs to update-->
<img id="foto2" onMouseOver="cambieFotos(this)" src="assets/fotos/foto3.JPG"><--!this needs to update-->
<img id="foto3" onMouseOver="cambieFotos(this)" src="assets/fotos/mathura.jpg"><--!this needs to update-->
</div>
<!--contenedor-->

fotoRoll is an <img>, not the surrounding <a>. You should modify the parent instead:
fotoRoll.parentNode.href="assets/fotos/"+fotoAleatoria;

You're setting the href on the image element, not the hyperlink element. Try something like
fotoRoll.parentNode.href="assets/fotos/"+fotoAleatoria;

JavaScript Toggle Image by clicking on Img

Im trying to toggle between two images but need the js to work with many different images. How do I make it with a parameter with the id? This is what I got so far:
JS
function changeIt(id)
{
var theImg = document.getElementsByTagName('img')[0].src;
var x = theImg.split("/");
var t = x.length-1;
var y = x[t];
if(y=='red.gif')
{
document.images.boxcolor1.src='./pics/green.gif'
}
if(y=='green.gif')
{
document.images.boxcolor1.src='./pics/red.gif'
}
}
HTML
<img src='./pics/green.gif' name='boxcolor1' id='boxcolor1' border='0' />
<img src='./pics/green.gif' name='boxcolor2' id='boxcolor2' border='0' />
<img src='./pics/green.gif' name='boxcolor3' id='boxcolor3' border='0' />
As you can see now it only works for the first image (boxcolor1).. I want it to work for all images by the name or id tag.
Thanks for all the help!

Try:
function changeIt(id)
{
var theImg = document.getElementById(id),
x = theImg.src.split("/"),
t = x.length-1,
y = x[t];
if(y == 'red.gif')
{
theImg.src='./pics/green.gif'
}
if(y == 'green.gif')
{
theImg.src='./pics/red.gif'
}
}
Working example:
http://jsbin.com/ugofiz/edit