Add class to jQuery selector

[Haidar]

Hello! This function code below will make that the <div id="loading"> will be shown. Can i add so an other class will be shown? <div class="content">.

This is the code:

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

So i thought of making this like this, but it didnt work!

	//show loading bar
	function showLoading(){
		loading, .content
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

[venegal]

loading is a variable that has been defined elsewhere. You can't just add random stuff after the variable name.

The definition probably looks something like this:

PHP Code:

var loading = $('#loading'); 


This, you can change to

PHP Code:

var loading = $('#loading, .content'); 


Be careful, though, that adding to that selector doesn't break any other code that uses that variable.

Also, please change the title of this thread to something more descriptive.

[Haidar]

Sorry my bad! How do i change the subject?

Btw i tried the code it didnt work as i exepted :/. I can post the whole JS code. The thing here is in a HTML file when i link is clicked (inside the main li) a loading bar will be shown, then it will hide. After that, i want the content to shown now. Is this possible? I have tried something like this? If i delete the red marks, then the code will be back to normal.

$(document).ready(function(){
	//References
	var sections = $("#navigationMenu li");
	var loading = $("#loading, .screen");
	var content = $("#content");
	
	//Manage click events
	sections.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		switch(this.id){
			case "home":
				content.fadeOut();
				content.load("index.php #index-1", hideLoading);
				content.fadeIn();
				break;
			case "buy":
				content.fadeOut();
				content.load("index.php #home-1", hideLoading);
				content.fadeIn();
				break;
			case "language":
				content.fadeOut();
				content.load("sections.html #section_interviews", hideLoading);
				content.fadeIn();
				break;
			case "portfolio":
				content.fadeOut();
				content.load("index.php #index-1", hideLoading);
				content.fadeIn();
				break;
			case "contact":
				content.fadeOut();
				content.load("index.php #section_news", hideLoading);
				content.fadeIn();
				break;
			case "hide":
				content.fadeOut();
				content.load("external.html", hideLoading);
				content.fadeIn();
				break;
			default:
				//hide loading bar if there is no selected section
				hideLoading();
				break;
		}
	});

	//show loading bar
	function showLoading(){
		loading, .screen
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

[venegal]

I changed the subject for you.

The code you just posted won't work at all, because that

loading, .screen

is still in the showLoading function, which causes a syntax error.

Please use your browser's debugging tools — it can be hard to get a piece of code working if it's being tripped up by unrecognized syntax errors.

If you want to show the content when the loading bar hides, you will have to call the code responsible for showing the content from the hideLoading function.

Also, you might want to look into a basic Javascript tutorial, so you'll be able to work with the code without introducing errors.

Edit: And, seeing the whole code, it's obvious that you can't handle the loading and screen elements in the same variable, because they are not supposed to behave the same. You will have to put the element with the .screen class into its own variable.

[VIPStephan]

You define the contents of the varialbe here:

var loading = $("#loading, .screen");

So what the heck is that selector (still) doing there?

function showLoading(){
		loading, .screen
			.css({…

The “loading” variable already includes the .screen selector.
To give you a visual hint, the content of that showLoading function written on one line would look like this:

function showLoading(){
	loading.css({visibility:"visible"}).css({opacity:"1"}).css({display:"block"});
}

You can’t just randomly put any selector in the middle there like this: loading, .screen.css({visibility:…, that makes no sense.

And by the way, that CSS modification can be written much shorter like:

loading
	.css({
                visibility:"visible",
		opacity:"1",
		display:"block"
         });

[Haidar]

Okay okay... Sorry im a bit of a beginner in JS and Jquery but i really cant wait using there codes. So do you have any example or idea how the code should be then of my js?