How to do this?? View previous topic :: View next topic  


NFOHump.com Forum Index - Programmers Corner
Page 1 of 1
dingo_d
VIP Member



Posts: 14555
PostPosted: Sun, 4th Oct 2009 14:33    Post subject: How to do this??
I know I shouldn't post links to specified sites but I find this uber cool Very Happy (this is not advertising because I've never heard of this site before)
http://www.sourcebits.com/

I was surfing through No Resolution Gallery (site about fluid design), and I stumbled upon this site. I just love the design! The way that white transparent part with info, news etc. scrolls up and down while background is still. And it's so fancy (and has nothing to do with the fact that the site is about iPhone), I've tried looking at the code, but it's a bit out of my league.

So how do one does that? Have cool background and this scrolling over? If anyone knows I would be so grateful!!

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
lhzr




Posts: 3902
Location: RO
PostPosted: Sun, 4th Oct 2009 15:22    Post subject:


Last edited by lhzr on Thu, 24th Dec 2015 14:00; edited 1 time in total
Back to top
dingo_d
VIP Member



Posts: 14555
PostPosted: Sun, 4th Oct 2009 15:28    Post subject:
I know that, but usually you have picture in bg that will repeat itself if you stuff bunch of things on your page, but this stays as a still picture and the contents are scrolling. When you scroll down the globe stays in place. I've cp the source to dreamviewer and I almost got a heart attack Sad

EDIT: I surfed through their clients and found this:

http://www.alpha-vision.com/

That's got to be the most hyped web page I've ever seen Shocked

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
lhzr




Posts: 3902
Location: RO
PostPosted: Sun, 4th Oct 2009 15:53    Post subject:


Last edited by lhzr on Thu, 24th Dec 2015 14:00; edited 1 time in total
Back to top
Lutzifer
Modzilla



Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
PostPosted: Sun, 4th Oct 2009 16:43    Post subject:
i think, what he is about is the alpha-blending of the text-boxes over the bg-image to make em half see-through
Back to top
dingo_d
VIP Member



Posts: 14555
PostPosted: Sun, 4th Oct 2009 17:13    Post subject:
lhzr wrote:
you'd want something like this
Code:
<STYLE TYPE="text/css">
BODY
{
        background-image: url(url_to_an_image);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
}
</STYLE>


Well that would be for the static background... But I would still need the moving, as Lutz said, alpha-blending text box, that moves up and down (scrolls). I noticed a lot of javascript, and I've never used it Sad

Also the menus are blast!

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: Sun, 4th Oct 2009 18:47    Post subject:
Because of the fixed background it only seems as if the content is moving differently but its just ordinary scrolling.. so no javascript needed for this one. just use transparent png for your content and use a fixed background. voila.

=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555
PostPosted: Sun, 4th Oct 2009 19:46    Post subject:
Really, because what I got when cp code to dreamviewer was like... Bam! tones of stuf... But I'm just amazed at the looks of it! How do you get these menues that scroll down? I know how to make ordinary ones (booring), but these look sweet Very Happy

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: Sun, 4th Oct 2009 20:34    Post subject:
First ditch dreamweaver. Second learn XHTML and CSS and Third learn jQuery Smile

Having photoshop/paintshop (whatever) skills will definitly help you Wink

Meanwhile you can use jQuery UI.

=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555
PostPosted: Sun, 4th Oct 2009 21:12    Post subject:
jQuery? Never heard of it Confused I have some basic knowledge of CSS (I have a website), but not like this... Will try it...

EDIT:

I'm participating in a contest by WBB, making PSD for their magazine web site, so far I've done:



What do you think I could do more? I've been working for 4 days on and off (yesterday I didn't do squat Very Happy)

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
[sYn]
[Moderator] Elitist



Posts: 8374
PostPosted: Mon, 5th Oct 2009 02:43    Post subject:
Please for the love of god get rid of that "New Issue Featuring" bit.. Shadow? Really? Just don't do it. Just make it nice and clean white, or get rid of the text completely and strech the pictures to cover the whole section..

Personally I think the "feature" part of the webpage (the blue bit) is too large compaired with the content section (the white bit).. Shrink it down.
Back to top
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: Mon, 5th Oct 2009 02:48    Post subject:
www.jquery.com

Amazing stuff you can do with it, brings javascript to a wholly new level. And it is very easy to use too.

For example... lets make every span on your page blue and give every class with the name "paul" the text "hi i am paul":

Code:
$('span').css('background','blue');
$('.paul').text('hi i am paul');


thats it Smile

or lets make every div on your page 50% transparent:

Code:
$('div').css('opacity','0.5').css('filter', 'alpha(opacity = 50)');


(the second css is needed for the internet explorer which needs other css instructions to render content transparent)

last example: a mouseclick on any span should hide every link inside a div slowly:

Code:
$('span').click(function(){
  $('div a').hide(slow);
});



the only thing you need to do is implement jquery to your page like this:
Code:
<head>
... bla bla your title and other stuff
<script type="text/javascript" src="jquery.js"></script>
</head>


thats it Wink now create a script tag where you place your javascript/jQuery stuff anywhere on your page:

Code:
<script type="text/javascript">
</script>


and put all your jQuery stuff in there.

There is only one thing you have to think of: You can't access any object inside your html document before the page is created. so we need to wait with the execution of our code until the document structure is clear. that is easly done with this line of code:

Code:
$(document).ready(function(){
// all your stuff goes in here
});


ok lets put it all together.

1. Download jquery from jquery.com . it's free.

2. put it in the same directory as your html file and you might want to rename the file to jquery.js

3. write the following code to test your jquery:

Code:
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $('body').html('<h1>jQuery works! YAY!</h1>');
});
</script>
</head>
<body>
if you see this text something went terribly wrong.
</body>
</html>

=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555
PostPosted: Mon, 5th Oct 2009 07:49    Post subject:
@syn: thnx! I'll do that. Oh, I was experimenting with text (couldn't find one that'll look nice, untill I saw MyriadPro - looks neat) so I used the shadow Very Happy

@PA: I've done some research last night and I saw great stuff done with jquery (already downloaded jquery.js Very Happy), and I'll give it a go! Thnx for the short tutorial!

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
Lutzifer
Modzilla



Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
PostPosted: Mon, 5th Oct 2009 08:21    Post subject:
yeah, jquery looks awesome. And looking at the examples of yours, how would you only make some divs transparent with that line of code? Perhaps using 'div class = bla' instead of just the div?

i ll sure have a look into jquery as it really looks like an easy way to get nicer results faster =D
Back to top
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: Mon, 5th Oct 2009 09:28    Post subject:
Yeah you can select single elements by their id or multiple elements by there class lets say the following
Code:

<div id="introtext" style="display:none;">hello</div>
<div class="content">
<span class="welcome">I have a hat</span>
<span>I have diarrhea</span>
<span class="welcome">It is wonderful</span>
<span>It's rotten</span>
<span class="welcome">I like ice cream</span>
<span id="lookatme">I like little leos</span>
</div>

<script>
$(document).ready(function(){
  $('#introtext').fadeIn(2000); //will fade this text from invisible to visible in two seconds

  // now we are going to add the "uber" class to every element from the class "welcome" and fade out every element that comes right after.
 
  $('.welcome').addClass('uber').next().fadeOut(2000);

  // now let's make the element lookatme visible again and wrap it with a div

  $('#lookatme').show().wrap("<div></div>");

});
</script>


$(selector).action(values)...

really thats all you've got to do in jQuery Smile

=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse

Last edited by PumpAction on Mon, 5th Oct 2009 10:08; edited 2 times in total
Back to top
Lutzifer
Modzilla



Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
PostPosted: Mon, 5th Oct 2009 09:47    Post subject:
Awesome! I ll be doing a new website soon or at least do some updating where this will come in handy, thanx alot! Very Happy
Back to top
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: Mon, 5th Oct 2009 10:09    Post subject:
Too many code blocks Laughing will continue here... last examples Smile

To select a predefined html element like div or body or p just write:
Code:
$('div')

or
Code:
$('body')

To select a class just set a dot before the classname as selector for example to select the class pos just write:
Code:
$('.pos')

To select a specific named element just write # and its id for example:
Code:
$('#headtext')

and you can combine them with the normal css rules... lets say every first span of a div->

Code:
$('div span:first')


And the best part is active loading of content. For example:

Code:
<div id="contentbaby">hello</div>
<div id="imasexybutton">click me i'm sexy</div>

<script type="text/javascript">
$(document).ready(function(){
  $('#imasexybutton').click(function(){
    $('#contentbaby').load('index2.html');
  });

});
</script>


@lutz: You should look at jQueryUI.com as they have very nice user interface elements in combination with jQuery and a nice theme designer! Definitely worth a look Smile

=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
Lutzifer
Modzilla



Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
PostPosted: Mon, 5th Oct 2009 17:35    Post subject:
already bookmarked! Very Happy
Back to top
KaiKo




Posts: 1914
PostPosted: Mon, 5th Oct 2009 17:57    Post subject:
dingo_d wrote:
jQuery? Never heard of it Confused I have some basic knowledge of CSS (I have a website), but not like this... Will try it...

EDIT:

I'm participating in a contest by WBB, making PSD for their magazine web site, so far I've done:



What do you think I could do more? I've been working for 4 days on and off (yesterday I didn't do squat Very Happy)


dammit, im not entering if you are too, ill wipe the floor with you j/k
Back to top
dingo_d
VIP Member



Posts: 14555
PostPosted: Mon, 5th Oct 2009 18:20    Post subject:
I saw you entered, I'm doing it because I have some time on my hands, there are million people there, and a lot of them are, like you, pro at what they do, so I don't think I'll win Very Happy. But hey, bring it on! Laughing

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
dingo_d
VIP Member



Posts: 14555
PostPosted: Wed, 7th Oct 2009 18:01    Post subject:
Ze update:



I'm not sure about the colors of the main part... Any suggestions?

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
Page 1 of 1 All times are GMT + 1 Hour
NFOHump.com Forum Index - Programmers Corner
Signature/Avatar nuking: none (can be changed in your profile)  


Display posts from previous:   

Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group