Nooby question. - Developers

Alright guys so I'm working on an incredibly basic site, and I ran into a small issue. I'm no novice at programming, I have years of experience with languages such as c++/java, but webdev doesn't come secondhand to me like other languages. So I have a div class panel on the main page that contains a few small div classes that have text and pictures and what not in them, the main div is class homePage, with the id homePagePanel. Now the goal is, when I click another div class (nav_btn class), to make it disappear. Any thoughts? I know there is an onClick event for div classes but I'm not sure how to tie together the onClick event and javascript or jquery. Example code would be much help, thanks. [editline]9th July 2014[/editline] Also, more info, the specific div id I want the onClick even to happen for has an id of 'home' (class nav_btn). I can paste the entire 100 lines so far if requested.

[QUOTE=c-unit;45342471]Alright guys so I'm working on an incredibly basic site, and I ran into a small issue. I'm no novice at programming, I have years of experience with languages such as c++/java, but webdev doesn't come secondhand to me like other languages. So I have a div class panel on the main page that contains a few small div classes that have text and pictures and what not in them, the main div is class homePage, with the id homePagePanel. Now the goal is, when I click another div class (nav_btn class), to make it disappear. Any thoughts? I know there is an onClick event for div classes but I'm not sure how to tie together the onClick event and javascript or jquery. Example code would be much help, thanks. [editline]9th July 2014[/editline] Also, more info, the specific div id I want the onClick even to happen for has an id of 'home' (class nav_btn). I can paste the entire 100 lines so far if requested.[/QUOTE] Nah, classes and IDs aren't important if you're going to use javascript. onClick is very easy, you literally put the javascript you want to run after it. By example, <img onClick="console.log('Hi')" src="blablabla" />. For jQuery, you'll need to use the IDs and the function .click().[URL="http://api.jquery.com/click/"] jQuery's documentation about it.[/URL] In any case, how to make those divs disappear is up to your imagination. You could make them display none, opacity to 0,display something else in front of them, etc.

Expanding a little on disappearing, jQuery has preset effects for this, you don't have to use .animate(). .slideUp() and .fadeOut() are good, but if you just wanna hide it without an animation, .hide() will do.

[QUOTE=Coment;45342999]Nah, classes and IDs aren't important if you're going to use javascript. onClick is very easy, you literally put the javascript you want to run after it. By example, <img onClick="console.log('Hi')" src="blablabla" />. For jQuery, you'll need to use the IDs and the function .click().[URL="http://api.jquery.com/click/"] jQuery's documentation about it.[/URL] In any case, how to make those divs disappear is up to your imagination. You could make them display none, opacity to 0,display something else in front of them, etc.[/QUOTE] I really appreciate the response. So I could technically just do: [html] <div id="home" class="nav_btn" onClick="document.getElementById('home').style.opacity=0;">Home</div> [/html] and there should be no issue? [editline]9th July 2014[/editline] Tested and that worked. Thanks much. Although another question arose, to use jQuery you just <script></script> right?

[QUOTE=c-unit;45343538]I really appreciate the response. So I could technically just do: [html] <div id="home" class="nav_btn" onClick="document.getElementById('home').style.opacity=0;">Home</div> [/html] and there should be no issue? [editline]9th July 2014[/editline] Tested and that worked. Thanks much. Although another question arose, to use jQuery you just <script></script> right?[/QUOTE] ...Yes and no. You just <script></script>, if you have previously included jQuery (doing <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>) Also, don't quote me on this, but I'm sure you could replace the document.getElementById('home') for 'this' (no quotes). [editline]10th July 2014[/editline] garry won't let me edit, so I'll add, you should remove the 'http:' from the url in there. It's better for SSL and all that.