Windows mimicking portfolio

Question

I am currently building a portfolio in which I intend to mimic the windows workflow to display my projects and to have a familiar user interaction. The problem I am facing now is with creating multiple explorer windows. I can create multiple ones at the time, but when I try to the content specified to each window, these don't assume the correct content assigned. I am using regular JS and jQuery in this project.

I am generating the Explorer windows with the following code:

$(window).ready(function(){

var desktop = document.querySelector('.workarea');

$('.general_icon').click(function(e){
    console.log(e);

    var explorerWindow = document.createElement('div');
    explorerWindow.className += 'explorer_window ui-widget-content ';

        var topToolBar = document.createElement('div');
        topToolBar.className += 'top_toolbar';

            var windowTitle = document.createElement('div');
            windowTitle.className += 'window_title';
            windowTitle.innerHTML = e.currentTarget.innerText;

            var windowOperations = document.createElement('div')
            windowOperations.className += 'window_operations';

                var minimize = document.createElement('div')
                minimize.className += 'minimize';
                minimize.innerHTML += '_';
            
                var maximize = document.createElement('div')
                maximize.className += 'maximize';
                maximize.innerHTML += '□';

                var close = document.createElement('div')
                close.className += 'close';
                close.innerHTML += '×';
        
            var topToolBar2 = document.createElement('div');
            topToolBar2.className += 'top_toolbar_2';

                var secondToolbBarOpt1 = document.createElement('span')
                secondToolbBarOpt1.className += 'noselect';
                secondToolbBarOpt1.innerHTML = 'File';

                var secondToolbBarOpt2 = document.createElement('span')
                secondToolbBarOpt2.className += 'noselect';
                secondToolbBarOpt2.innerHTML = 'Base';

                var secondToolbBarOpt3 = document.createElement('span')
                secondToolbBarOpt3.className += 'noselect';
                secondToolbBarOpt3.innerHTML = 'Share';

                var secondToolbBarOpt4 = document.createElement('span')
                secondToolbBarOpt4.className += 'noselect';
                secondToolbBarOpt4.innerHTML = 'View';

            var contentHolder = document.createElement('div');
            contentHolder.className += 'content_holder';

                //determines current clicked icon
                //var ter = e.currentTarget.attributes[1].value;

        desktop.appendChild(explorerWindow);
            explorerWindow.appendChild(topToolBar);
                topToolBar.appendChild(windowTitle);
                topToolBar.appendChild(windowOperations);
                    windowOperations.appendChild(minimize);
                    windowOperations.appendChild(maximize);
                    windowOperations.appendChild(close);
            explorerWindow.appendChild(topToolBar2);   
                topToolBar2.appendChild(secondToolbBarOpt1);
                topToolBar2.appendChild(secondToolbBarOpt2);
                topToolBar2.appendChild(secondToolbBarOpt3);
                topToolBar2.appendChild(secondToolbBarOpt4);
            explorerWindow.appendChild(contentHolder);
            
        var ter = e.currentTarget.attributes[1].value;
        console.log(ter)
        console.log(projectsData[ter].paths.length)
    
        for (var i = 0; i < projectsData[ter].paths.length; i++) {
            var actCont = document.createElement('div');
            actCont.className += 'act_cont';
            contentHolder.appendChild(actCont); 
        }

        var innerActCont = document.getElementsByClassName('act_cont');
        for (var k = 0; k < projectsData[ter].paths.length; k++) {
            innerActCont[k].style.backgroundImage = 'url(' + projectsData[ter].paths[k] + ')';
            event.stopPropagation();
        }

    //make windows draggable
    //sets the target for the drag event
    $(".explorer_window").draggable({ handle: ".top_toolbar", containment: '.place' } );

});

});

The projectsData I use in the loop is:

var projectsData = [
    {
        title:'Random Lines of Color',
        icon: 'images/random_bars_colors.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title:'Numbers to Letters Converter',
        icon: 'images/nums_to_letters.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title: 'Tipos',
        icon: 'images/port/tipos/tipo.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title: 'Cópia Maplethorpe',
        icon: 'images/port/thorpe/thorpe.png',
        paths : [
            'images/port/thorpe/1.jpg',
            'images/port/thorpe/2.png',
        ]
    },
    {
        title: 'Packaging Cubo',
        icon: 'images/port/moo/moo.png',
        paths : [
            'images/port/moo/1.png',
            'images/port/moo/2.png',
            'images/port/moo/3.png'
        ]
    },
    {
        title: 'Gama Especial',
        icon: 'images/port/magn/magnum.png',
        paths : [
            'images/port/magn/1.png',
            'images/port/magn/2.png',
            'images/port/magn/3.png',
            'images/port/magn/4.png',
            'images/port/magn/5.png',
            'images/port/magn/6.png'
        ]
    },
    {
        title: 'Hearts And Bones',
        icon: 'images/port/hb/hb.png',
        paths : [
            'images/port/hb/1.png',
            'images/port/hb/2.png',
            'images/port/hb/3.png',
            'images/port/hb/4.png',
            'images/port/hb/5.png'
        ]
    },
    {
        title: 'Alzheimer',
        icon: 'images/port/alz/alz.png',
        paths : [
            'images/port/alz/1.jpg'
        ]
    }
]

The current version of the website is live at http://mingus.pt

The Explorer windows open when you single click a desktop icon. There is also an issue when I scroll on said explorer windows I cant make it's toolbar stay with position fixed, it's a minor thing but if you have some spare time to look at that also I would very very much appreciated.

Answer 1

The problem is with the following part of your code

var innerActCont = document.getElementsByClassName('act_cont');
for (var k = 0; k < projectsData[ter].paths.length; k++) {
    innerActCont[k].style.backgroundImage = 'url(' + projectsData[ter].paths[k] + ')';
}

Specifically the line var innerActCont = document.getElementsByClassName('act_cont'); finds the act_cont elements in the entire document, so it returns the elements of the already open windows, and thus you are overwriting the ones in the open windows.

You need to limit the loop to the .act_cont elements in the new window only. So change the code to

var innerActCont = contentHolder.getElementsByClassName('act_cont');

(use the variable contentHolder instead of the document)

---

Moreover you can simplify/compact your code quite a bit since you use jquery.