Maisara-WD Posted June 14, 2009 Share Posted June 14, 2009 Hiplease visit the google adsense website,Google adsense you'll find a menu at the right side, and when you click any item, it changes the content of the box directly without loading...I think that's a javascript trick, but can any body help me understand it, or explain the code....????It's too difficult, I tried but it seems too hard to be understanded...can any body even give us a premade code similar to that one???thx in advance Link to comment Share on other sites More sharing options...
Ingolme Posted June 14, 2009 Share Posted June 14, 2009 You could look through the source code of the page. Or learn how to do it. I'm not going to give you a script already done, I'm just here to teach. If I give you the script you wouldn't learn anything.You have to learn about Javascript events. You use the onclick event handler to change the CSS display property between "block" and "none" Link to comment Share on other sites More sharing options...
justsomeguy Posted June 14, 2009 Share Posted June 14, 2009 It's not too difficult, look at the source code for that page. They write out 8 divs, and hide all of them but one at a time. At the top of the page there's a function defined called changePreview which hides all of the divs and then sets one of them to visible (which ever number the changePreview function was sent). The links are links that call the changePreview function and send it the number of the div to show. That's all it is, it doesn't even use ajax, it just shows and hides divs. That shouldn't be very hard to understand. Link to comment Share on other sites More sharing options...
Maisara-WD Posted June 15, 2009 Author Share Posted June 15, 2009 You could look through the source code of the page. Or learn how to do it. I'm not going to give you a script already done, I'm just here to teach. If I give you the script you wouldn't learn anything.You have to learn about Javascript events. You use the onclick event handler to change the CSS display property between "block" and "none"OH, yes, I didn't think of that at all, it seems easyIt's not too difficult, look at the source code for that page. They write out 8 divs, and hide all of them but one at a time. At the top of the page there's a function defined called changePreview which hides all of the divs and then sets one of them to visible (which ever number the changePreview function was sent). The links are links that call the changePreview function and send it the number of the div to show. That's all it is, it doesn't even use ajax, it just shows and hides divs. That shouldn't be very hard to understand.Yes man, you know, when I explored the source code, I didn't open that of the page, but I was saving the page as web archive, so when I liked to open the code, I looked for the external js file and forgot the internal code, thanks,, I got it well Link to comment Share on other sites More sharing options...
Maisara-WD Posted June 15, 2009 Author Share Posted June 15, 2009 Please guys let's discuss it.. I understand the basics of javascript... but when code, I feel that I cannot do any thing,, eventhough I feel better when I code with another programming language, I was about to decide not to learn it at all...look: <script type=text/javascript>function changePreview(itemNumber) { document.getElementById('infotable1').style.display = 'none'; document.getElementById('infotable2').style.display = 'none'; document.getElementById('infotable3').style.display = 'none'; document.getElementById('infotable4').style.display = 'none'; document.getElementById('infotable5').style.display = 'none'; document.getElementById('infotable6').style.display = 'none'; document.getElementById('infotable7').style.display = 'none'; document.getElementById('infotable8').style.display = 'none'; document.getElementById('infotable' + itemNumber).style.display = ''; tds = document.getElementById('infotable').getElementsByTagName('TD'); for(i=0;i<tds.length;i++) { if(tds[i].className == 'active menu') tds[i].className = 'menu'; }}</SCRIPT> That's the function in the header... <A class=bluelink onclick="changePreview('2');this.parentNode.className = 'active menu';urchinTracker('/adsense/overlay/products');return false;" href="https://www.google.com/adsense/login/ar/?hl=ar&sourceid=aso&subid=ar-et-ads&medium=link&gsessionid=X4qlvOJI9W4QaImk8NsqJg#">المنتجات</A> And that's the anchor tag with the event " onclick ", that calls the function: " changePreview(itemNumber) ", let's now move step by step:This function sets the display property of the selector determined by the statement (document.getElementById.style.property) = none... ok?That for all the 8 divs....WAIT..I can see that there are only 7 menu items, right.. does that mean that the 8th is the main one.. before clicking any menu item??and the main question, in the design,, how can I design 8 divs in the dreamweaver that coicide each other... actually, I don't understand the display property in the CSS, since I was studuing it, thinking that it's not important, but now I found that it's too important.. so can you explain it for me, please?back again to our code:In the 9th line, What's the value that he assigned (or determined) to the property: display.. of the element that is determined by the value returned from the parameter + the word infotable.in other words: what is the display property for div of the clicked item?? I can inly see ' '.Then: tds = document.getElementById('infotable').getElementsByTagName('TD'); I cannot get it.. and so, I don't get the purpose of the loop.and finally: this.parentNode.className = 'active menu';urchinTracker('/adsense/overlay/products');return false; what's it exactly......................I'm so weak in javascript and you will get tired of me, sorry.and thank you all very very very very much Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2009 Share Posted June 15, 2009 The display property indicates how an element should be shown on the page. If it is set to "none" then it won't be visible. An empty string ( '' ) makes it take the default value of the element.This code resets all the <td> elements of the table to the 'menu' class, removing 'active'. for(i=0;i<tds.length;i++) { if(tds[i].className == 'active menu') tds[i].className = 'menu';} This line runs right after, and sets the menu element that you clicked on as active (It's highlighted so that you know which menu elemet is selected): this.parentNode.className = 'active menu'; You don't need to worry about the urchinTracker() function. Ignore it, it's a Google Adsense thing. I can see that there are only 7 menu items, right.. does that mean that the 8th is the main one.. before clicking any menu item??The eigth one might be something that was removed, it's nothing important. Link to comment Share on other sites More sharing options...
Maisara-WD Posted June 15, 2009 Author Share Posted June 15, 2009 sorry sir..I got the main Idea.. but shall you explain it programmingly..?? the programming idea of that code..??Thanks Link to comment Share on other sites More sharing options...
Maisara-WD Posted June 15, 2009 Author Share Posted June 15, 2009 This line runs right after, and sets the menu element that you clicked on as active (It's highlighted so that you know which menu elemet is selected):this.parentNode.className = 'active menu'; (1) what does the word this refer to.(2) what's parentNode?? is it a property..??<STYLE type=text/css>BODY { PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 83%; PADDING-BOTTOM: 1em; MARGIN: 0px; PADDING-TOP: 1em; FONT-FAMILY: Arial, Helvetica, sans-serif}H1 { FONT-WEIGHT: normal; MARGIN: 0px}H2 { FONT-WEIGHT: normal; FONT-SIZE: 1.35em}IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px}TD { FONT-SIZE: 83%}.bluelink { COLOR: #0000cc}#footer { PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 2em; PADDING-LEFT: 0px; PADDING-BOTTOM: 1em; COLOR: #666; PADDING-TOP: 1em; TEXT-ALIGN: center}#infotable { }#infotable P { MARGIN: 1em 0px}#infotable TD.menu { BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 0.5em; BACKGROUND: #eee; PADDING-BOTTOM: 0.75em; BORDER-LEFT: #ccc 1px solid; WIDTH: 170px; CURSOR: pointer; PADDING-TOP: 0.75em; BORDER-BOTTOM: 0px; HEIGHT: 40px}#infotable TD.menu A { DISPLAY: block}#infotable TD.active { BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff}#infotable TD.active A { COLOR: #000; TEXT-DECORATION: none} (3) also what's className..?? and how does this code relate to the css code written above.. ???thank you very much Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2009 Share Posted June 15, 2009 Well let me see. I suppose you don't know what the commands do. for(i=0;i<tds.length;i++) { if(tds[i].className == 'active menu') tds[i].className = 'menu';} This is a 'for' loop, inside it they are accessing the className property of each element of the Node List that is given by the getElementsByTagName() function. this.parentNode.className = 'active menu'; this refers to the element that is running the Javascript, that is the link that was clicked. className and parentNode are properties that belong to the HTML DOM and are used to access elements and attributes.As I mentioned before, the scripts modify the display property of the specified elements. The style property of an element is used to set the CSS. Link to comment Share on other sites More sharing options...
Maisara-WD Posted June 16, 2009 Author Share Posted June 16, 2009 Thank you very much..I partially understood it...within few days, I'll be back with a practical application for this.. and I'll need your help Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.