Html Posted November 10, 2008 Share Posted November 10, 2008 http://img143.imageshack.us/my.php?image=newsdotcomcv4.jpgHow would that of been done?Does a few lines of code do this? News.com Hex colours, or images. Link to comment Share on other sites More sharing options...
Synook Posted November 10, 2008 Share Posted November 10, 2008 I'm confused. Do you mean how is the instantaneous toggle achieved, or how the gradient is achieved?The gradient is with images. Link to comment Share on other sites More sharing options...
Html Posted November 10, 2008 Author Share Posted November 10, 2008 Both. Why not hex? That isn't possible with it? Link to comment Share on other sites More sharing options...
Synook Posted November 11, 2008 Share Posted November 11, 2008 You mean just using background-color? It is possible, but you'll need lots of nested divisions to achieve a smooth effect.The transition is done with JS. Link to comment Share on other sites More sharing options...
Html Posted November 11, 2008 Author Share Posted November 11, 2008 Javascript?So on news.com that is being used to make those buttons?Could anyone here compile an example for me please? Link to comment Share on other sites More sharing options...
Synook Posted November 11, 2008 Share Posted November 11, 2008 Nooo... the "button" is done with an image. The way they make it so that the two divisions are shown/hidden instantly is with JavaScript.http://i.i.com.com/cnwk.1d/i/tron/vader/sitenav.png Link to comment Share on other sites More sharing options...
Html Posted November 19, 2008 Author Share Posted November 19, 2008 Hmm, and there is no source code to this? Link to comment Share on other sites More sharing options...
Html Posted November 20, 2008 Author Share Posted November 20, 2008 On pcworld.com there is one too.http://www.pcworld.com/article/154226/new_...mobile_ie6.htmlRight, bottom hand corner. Link to comment Share on other sites More sharing options...
Synook Posted November 20, 2008 Share Posted November 20, 2008 View -> Page source?For the toggle, you can just use the style.display property. function toggle() { if(document.getElementById("div1").style.display == "block") { document.getElementById("div1").style.display = "none"; document.getElementById("div2").style.display = "block"; } else { document.getElementById("div1").style.display = "block"; document.getElementById("div2").style.display = "none"; }} <a href="java script:toggle()">Div 1</a> <a href="java script:toggle()">Div 2</a><div id="div1">Content 1</div><div id="div2">Content 2</div> Link to comment Share on other sites More sharing options...
Html Posted November 21, 2008 Author Share Posted November 21, 2008 Nooo... the "button" is done with an image. The way they make it so that the two divisions are shown/hidden instantly is with JavaScript.http://i.i.com.com/cnwk.1d/i/tron/vader/sitenav.png How was that example made? Any details on it please. Link to comment Share on other sites More sharing options...
Ingolme Posted November 21, 2008 Share Posted November 21, 2008 How was that example made? Any details on it please. Do you have Adobe Photoshop or the GIMP or Paint Shop Pro or Paint.NET? Link to comment Share on other sites More sharing options...
Html Posted November 21, 2008 Author Share Posted November 21, 2008 Yes, photoshop. Link to comment Share on other sites More sharing options...
Ingolme Posted November 21, 2008 Share Posted November 21, 2008 Look for the gradient tool. It should look like a rectangle. It's not there, right-click on the paint bucket. That makes gradients like the ones you see on the buttons. Link to comment Share on other sites More sharing options...
Html Posted November 21, 2008 Author Share Posted November 21, 2008 Why are they called gradients? Link to comment Share on other sites More sharing options...
jesh Posted November 21, 2008 Share Posted November 21, 2008 Why are they called gradients? http://www.answers.com/gradientThe rate at which a physical quantity, such as temperature or pressure, increases or decreases relative to change in a given variable, especially distance.Because the physical quantity "color" is changing from one value to another relative to a change in a given variable (height, width, etc). Link to comment Share on other sites More sharing options...
Html Posted November 21, 2008 Author Share Posted November 21, 2008 Right thank you for that.What font would you say was used in news.com? Link to comment Share on other sites More sharing options...
Synook Posted November 22, 2008 Share Posted November 22, 2008 Download Firebug for Mozilla Firefox - you can use its "inspect" tool to view the CSS properties of any element on any page. Very useful. Link to comment Share on other sites More sharing options...
Html Posted November 22, 2008 Author Share Posted November 22, 2008 You have it too, right? Link to comment Share on other sites More sharing options...
Html Posted November 23, 2008 Author Share Posted November 23, 2008 Sorry about the double post, is using people's css alright to a certain point?I mean in the end we all have similar pieces of code. Link to comment Share on other sites More sharing options...
holmedwa04 Posted November 23, 2008 Share Posted November 23, 2008 I don't see as there is a problem with it, as long as you understand their code. If you copy and don't understand then you don't learn anything. But if you copy and tweak, edit and maybe delete some bits, add extra bits in and understand the code then it is your code is it not? Link to comment Share on other sites More sharing options...
Html Posted November 23, 2008 Author Share Posted November 23, 2008 To a point it then is your code, but then it still is someone else's though, partially. Link to comment Share on other sites More sharing options...
Html Posted November 23, 2008 Author Share Posted November 23, 2008 <div section="newsBelowTopMPUArea.0"> </div><div id="multimedia" section="newsMultimediaArea.0"></div><script type="text/javascript"></script><div id="readersChoice"><div id="rcTabs"><h4 id="mostPopTab" class="" onclick="showMostPop();"><span>most popular</span></h4><h4 id="mostDiscTab" class="selected" onclick="showMostDisc();"><span>most discussed</span></h4></div> That was the code for all that to do with the buttons... Link to comment Share on other sites More sharing options...
Html Posted November 30, 2008 Author Share Posted November 30, 2008 Anyone? Link to comment Share on other sites More sharing options...
Synook Posted December 1, 2008 Share Posted December 1, 2008 That's the HTML code. The JS code is the bit that actually does the switching.Did you try using my code? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.