[TheDude0806]

I've got a div class called application-frame It has other divs inside for an exit button,minimise button and a fullscreen button. The problem is that I want to put it into an arraylist so that I can have two or more instances of application-frame open at the same time. I've actually got this working but even though I am able to set width/height data to it one array object overrides the other giving them both the same dimensions. Also they both fadeout when I click the exit button (instead of one). Any help? thanks in advance.

PS: I use jquery too if it isn't obvious.

////////////front-end.js/////////////

$(document).ready(function() {
	$("#start-menu-frame").hide();
	$('#start-menu-icon').hover(function(){
        $("#start-menu-frame").fadeIn();
    }, function(){
          $("#start-menu-frame").fadeOut();
    });
	
	var applications = [];
	applications.push(new createFrame(200,200));
	applications.push(new createFrame(500,500));
});

///////////applications.js///////////////////////////////

function createFrame(width,height) {
		$("#desktop-box").append('<div class = "application-frame"><div class = "buttons-box"><div class = "exit-button"></div><div class = "fullscreen-button"></div><div class = "minimise-button"></div><div id ="webcontent" class ="content"></div></div></div>');
		$(".application-frame").width(width);  
		$(".application-frame").height(height);  
		$(".exit-button").click(function() {
			$(".application-frame").fadeOut('very slow');
		});
		$(function() {
			$(".application-frame").draggable({containment:"parent"});
		});
	}

This post has been edited by andrewsw: 05 June 2015 - 03:22 PM
Reason for edit:: Added [code][/code] tags

[andrewsw]

Topic moved to jQuery subforum.

How to use code tags:

[ArtificialSoldier]

That's exactly what you're telling it to do, you're telling it to change the width and height property of every element with the class ".application-frame". You shouldn't tell it to do that, you should create the parent element, then add all of the children, and use a reference to that parent element to only target elements with that class that are children of the container. Also, don't create elements with IDs, you can't have more than element with the same ID on the page.

The key is saving a reference to the elements you're creating so that you can access them later instead of just telling it to target every element on the page with a certain class.

[TheDude0806]

@ArtificialSoldier - How would you go about doing that. I already have the div size problem sorted, so I'ts only the other one now.

[ArtificialSoldier]

Like I said, just save a reference to the container element you created, then target only its children. You're using new when you call that function, so it sounds like you're trying to set it up like an object. The container element would be a property of that object. The jQuery documentation doesn't say if append returns the new element, so you might have to create the element first and then append it.

You can use jQuery's find method to target child elements.

https://api.jquery.com/find/

[TheDude0806]

I'm sorry to bother again but could please elaborate, this is for a WebOS and I would like to allow these windows to open and close but really I have now idea.

[andrewsw]

ArtificialSoldier, on 05 June 2015 - 11:41 PM, said:

The jQuery documentation doesn't say if append returns the new element, so you might have to create the element first and then append it.

Just to note that, IIRC from a previous forum question, append() does return a reference to the element. I was surprised that this wasn't documented. I think this is because it is supposed to be expected behaviour for a jQuery method.

Added: Actually, I think the question was about remove(), but it still holds.

This post has been edited by andrewsw: 05 June 2015 - 06:06 PM

[TheDude0806]

Thanks for the help. I found a really easy solution.Heres the code if anyone wants the idea:

var app = $('<div class = "application-frame" style="width:'+width+'; height:'+height+';"><div class = "buttons-box"><div class = "exit-button"></div><div class = "fullscreen-button"></div><div class = "minimise-button"></div></div></div>');  
		$("#desktop-box").append(app);
		$(".exit-button").click(function() {
			$(app).fadeOut('very slow');
		});

[TheDude0806]

Sorry after doing some tests I realized that it will delete application-frames based on how many array objects come after it. So if I use position:absolute; in css, they are all on top of each other.When I fade the bottom one (there are three initiated) the other 2 fade as well.When I fade the middle one the top one fades as well. Any ideas.

[TheDude0806]

Update: got it working using:

 var app = $('<div class = "application-frame" style="width:'+width+'; height:'+height+';"><div class = "buttons-box"><div class = "exit-button"></div><div class = "fullscreen-button"></div><div class = "minimise-button"></div></div><div class = "content"></div></div>');  
		var apps = [];
		$("#desktop-box").append(app);
		apps.push(app);
		$(".exit-button").click(function() {
		for(var i = 0; i <apps.length;i++) {
			apps[i].pop($(app).fadeOut('very slow'));
			console.log(apps.length);
	    }

get this error though:

Uncaught TypeError: apps[i].pop is not a function

[andrewsw]

apps[i] is an array element, it doesn't have a pop() method.

pop is used as someArray.pop() with no arguments. MDN reference:

Quote

The pop method removes the last element from an array and returns that value to the caller.

[TheDude0806]

Oh! This is so annoying. Now I cant use:

$(app).resizable({maxHeight: 678},{maxWidth: 1361});

But I can use:

$(app).draggable({containment:"parent"});

properly?

[andrewsw]

It is more likely to be

$(app).resizable({maxHeight: 678, maxWidth: 1361});

[TheDude0806]

Sorry, code error. Still not working.

[andrewsw]

What errors appear in your browser's console?

TheDude0806, on 06 June 2015 - 07:12 PM, said:

Sorry, code error. Still not working.

Erm, this isn't adding any useful information.