Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    105
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Add class to jQuery selector

    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:
    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!
    Code:
    	//show loading bar
    	function showLoading(){
    		loading, .content
    			.css({visibility:"visible"})
    			.css({opacity:"1"})
    			.css({display:"block"})
    		;
    	}

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jan 2010
    Posts
    105
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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.

    Code:
    $(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);
    	};
    });

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    I changed the subject for you.

    The code you just posted won't work at all, because that
    Code:
    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.
    Last edited by venegal; 08-16-2011 at 11:42 PM.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    You define the contents of the varialbe here:
    Code:
    var loading = $("#loading, .screen");
    So what the heck is that selector (still) doing there?
    Code:
    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:
    Code:
    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:
    Code:
    loading
    	.css({
                    visibility:"visible",
    		opacity:"1",
    		display:"block"
             });

  • #6
    Regular Coder
    Join Date
    Jan 2010
    Posts
    105
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •