How is this done?

[GentlemanSquid]

When you highlight one of the links the surrounding links change opacity. How is this done? I looked in the css file and saw /specifics.js files, but I don't get how it is done from this bit of code.

 

http://www.townofsilenthill.com/

[ska]

I'm guessing it's probably a jQuery script.

[nightwalker83]

Going the js page you see this:

 

 

$(document).ready(function() { // fade in content. $( '#content-wrapper' ).fadeIn(2000);  });$(document).ready(function(){$(".link_cb_about").colorbox({width:"800px", height:"auto", inline:true, href:"#cb_about"});$(".link_cb_report").colorbox({width:"800px", height:"auto", inline:true, href:"#cb_report"});});$(document).ready(function() {$('.focus').children('div').hover(function() { $(this).siblings('div').stop().fadeTo(200,0.6);}, function() { $(this).siblings().stop().fadeTo(200,1);}); //Source //$('.fade-area-1').children().hover(function() { //  $(this).siblings().stop().fadeTo(500,0.5); //}, function() { //  $(this).siblings().stop().fadeTo(500,1); //});});

 

 

Edit:

 

That only happens if you are using Internet Explorer whereas if you are using firefox, etc I think it just uses css methods. Look at the site in IE that script doesn't appear to do anything significant because I don't notice a big difference compared to when viewing the site in firefox.

Edited August 13, 2011 by nightwalker83

[GentlemanSquid]

Can some explain that bit by bit? I am not very good at understanding JS.

[nightwalker83]

I think it is saying get all the links in the document (parent) and apply the certain styles to all the links (children) on the page. Correct me if I am wrong.

[GentlemanSquid]

I just need someone to explain line by line, please. I need to learn so I can use for the future.

[Suction Testicle Man]

I'm a bit late, but this is something else I can help with

 

As you may know, any line prefixed with // is a comment, and therefore not parsed, so I've removed it from the examples below. The code here is using the jQuery library. I have modified the indentation to be easier to read, but the code is identical.

 

 

$(document).ready(function() {   $('#content-wrapper').fadeIn(2000);  });

 

The above fades the page in when the document is ready (ie. the browser has finished loading it). Documentation on ready() is here. The argument sent to the ready() method is an inline function called a "handler" - it's a normal function, but is not declared and therefore has no name. It therefore cannot be called repeatedly or in another context within the code.

 

The actual code within the handler is what does the dirty work. The "#content-wrapper" part tells jQuery to find the first element with an id attribute of "content-wrapper" (in this case probably a large div that wraps all the content). The fadeIn() method called on it fades the div in (and therefore all the content within it). The argument 2000 is the number of milliseconds spent fading in.

 

 

$(document).ready(function() {   $(".link_cb_about").colorbox({width:"800px", height:"auto", inline:true, href:"#cb_about"});   $(".link_cb_report").colorbox({width:"800px", height:"auto", inline:true, href:"#cb_report"});});

 

This is another handler to be run when the document is ready (and could be included in the earlier handler without issue). It configures a jQuery plugin called Colorbox to an element with a class of "link_cb_about" first, and then configures another element with a class of "link_cb_report". The array passed in the colorbox() method looks like CSS for specifying the plugins behaviour - presumably the plugin's website will explain further. You can see the plugin in action when you click the 'About' link at the top of the site.

 

 

$(document).ready(function() {   $('.focus').children('div').hover(function() {       $(this).siblings('div').stop().fadeTo(200,0.6);   }, function() {       $(this).siblings().stop().fadeTo(200,1);   });});

 

This is yet another handler that is run when the document is ready. It is a little more complicated than the above code, but a good example of how jQuery works. The '$' is an alias for the jQuery object, and the brackets immediately following require an argument in the form of an object or a string. Usually this is a string, which is analysed by jQuery in order to find a matching element. Anything prefixed with '.' is a class attribute, a '#' is an id attribute, and there is more here. This element searching process is bypassed if you send an object to jQuery instead (such as the "document" object or an object jQuery created earlier in the script).

 

So this is the code we're looking at now:

 

   $('.focus').children('div').hover(function() {       $(this).siblings('div').stop().fadeTo(200,0.6);   }, function() {       $(this).siblings().stop().fadeTo(200,1);   });

 

 

The first line starts by locating any elements with a class attribute of "focus" (if it finds multiple elements then they are all selected). Immediately after, it calls the children() method, which selects any "div" elements inside the .focus elements. It finally assigns handlers to these divs' hover events (the first hover event is when the mouse moves over the element (mouseon), the second is when the mouse moves away from the element (mouseoff)).

 

The two handlers for mouseon and mouseoff are very similar - they cause surrounding divs to either fade in or out. This is the code within the first handler (mouseon):

 

 

$(this).siblings('div').stop().fadeTo(200,0.6);

 

 

And the second handler (mouseoff):

 

 

$(this).siblings('div').stop().fadeTo(200,1);

 

Notice the argument sent to jQuery is "this" without speech marks or apostrophes. This is because "this" is in fact an object (as mentioned before) instead of a string, and represents the div elements that we already found in the parent function. We could rewrite $(this) as $('.focus').children('div') therefore, but this involves searching through the elements all over again and is bad practice (in certain circumstances this can really damage performance).

 

The process is then continued where we left off, with the next method selecting all siblings that are div elements (a "sibling" is any element that is a child of our parent, in case it's not obvious ). The method after that is stop(), which is a simple precaution that immediately stops any currently running animation on our element. If we don't stop the existing animation, any new animation we set will queue up instead. This means if you move your mouse quickly on and off the element, all the animations will queue, and once you stop moving the mouse the elements will continue fading in and out until the queue is emptied.

 

The final call is fadeTo(), with two arguments. The first argument is the number of milliseconds the fade animation should run for, and the second is the opacity the element should change to (opacity is a unit between 0 and 1, usually to one decimal point). We can see that for mouseon, the elements fade to 0.6 (60% opacity) over 200 milliseconds, and for mouseoff they fade to 1 (100% opacity / opaque) over 200 milliseconds.

 

fadeTo() is similar to fadeIn() and fadeOut(), except you are able to choose the opacity that is "faded to". fadeIn() will always fade from 0% opacity to 100%, and fadeOut() is the opposite.

[GentlemanSquid]

Again, thanks. This has been a really big help. Can't thank you enough.

[K^2]

If you don't care about the actual fade, you don't need JS for this. You can simply use inheritance of CSS styles to do the same trick.

 

Here. Does basically the same thing, no scripting involved. Just styles.

 

<html><style>body{background:#000000;}div.main{margin: 10px;color: #c00000;width: 100px;}div.main:hover{margin: 10px;color: #700000;width: 100px;}div.bar{padding: 5px;margin: 0px;border-top-style: solid;border-bottom-style: solid;border-width: 1px;border-color: #808080;}div.bar:hover{padding: 5px;margin: 0px;border-top-style: solid;border-bottom-style: solid;border-width: 1px;border-color: #808080;color: #ff0000;}</style><body><div class="main"><div class="bar">Test 1</div><div class="bar">Test 2</div><div class="bar">Test 3</div></div></body></html>

 

 

 

Yeah, I know this is not W3 compliant. Just a quick-and-dirty to show the principle.

 

The div.main makes the text dimmer when mouse hovers over it, while each individual div.bar makes the text brighter on hover.

[nightwalker83]

Yeah, I know this is not W3 compliant. Just a quick-and-dirty to show the principle.

 

I wouldn't worry too much about that I have seen worse.

[GentlemanSquid]

Got a few few more questions. Instead of making a new topic I will put it here.

 

When you scroll down on this page a bar sticks to the top of the browser, the one with the social media things in. How is this done exactly, I know it is to do with position fixed, I am just not clear on how it works?

 

example: http://9gag.com/gag/325799

 

Also on 9gag. When you submit a picture you check a box if the image is NSFW, so you get a little pink with NSFW in next to the title, and if you are not register it shows a default image. How would this be done?

 

example: http://9gag.com/gag/330661

 

Another 9gag. How does the liking system work?

Edited October 7, 2011 by gta_talk

[Suction Testicle Man]

The code for the fixed scrolling bar is this:

 

 

window.onscroll = function(){if( window.XMLHttpRequest ) { if (document.documentElement.scrollTop > 173 || self.pageYOffset > 173) { 	$('post-control-bar').style.position = 'fixed'; 	$('post-control-bar').style.top = '0'; } else if (document.documentElement.scrollTop 
 
 
The onscroll property of the window object contains a function that is called whenever the window is scrolled. In this case, the function written begins with an if condition to check whether the browser supports standardised AJAX functionality (if window.XMLHttpRequest is true then it does).
 
If AJAX is supported (even though there is no AJAX-related code in this function), the code continues to check the scroll position on the page. document.documentElement.scrollTop contains the distance from the top of the page in pixels in IE, and self.pageYOffset does the same for all other modern browsers. This if condition can be translated to:
 
 
if scroll position in IE is over 173px or scroll position in other browser is over 173px, then {   find element with ID "post-control-bar" using jQuery, and set its style position attribute to "fixed" and its style top attribute to "0"} otherwise if scroll position in IE is under 173px or scroll position in other browser is under 173px, then {   find element with ID "post-control-bar" using jQuery, and set its style position attribute to "absolute" and its style top attribute to ""}
 
 
In CSS, an element with a position of "fixed" will remain in the same location even when scrolling. By doing this as well as securing the element to be 0 pixels from the top of the page, it gives the impression that the element cannot leave the visible frame. What's actually happening is as soon as the top of the browser window is aligned with the top of the element, the element's original positioning is discarded and it is glued to the top of the window. When the user scrolls back, the changes are reverted.
 
 
 
As for your second query, I don't have an account on that site so am unable to see anything besides the NSFW image. That is usually done using server-side scripting. It checks to see if I'm logged out, and also checks to see if the image is flagged as NSFW (probably in a database). If both are true, then the NSFW image is printed instead. If it was written in PHP it would look something like this:
 
 
if ($user->loggedIn == FALSE && $image->nsfw == TRUE) {   $image_url = 'http://www.example.com/nsfw.jpg';} else {   $image_url = 'http://www.exampe.com/theimage.jpg';}
 
 
which could be shortened to:
 
 
$image_url = (!$user->loggedIn && $image->nsfw) ? 'http://www.example.com/nsfw.jpg' : 'http://www.exampe.com/theimage.jpg';
 

[GentlemanSquid]

Woah, I actually got what all that means . Thank you, Suction Testicle Man.

 

I will post my future questions here, instead of flooding this section with my posts.

 

edit: Also you missed one of my questions. How does the liking system work?

Edited October 9, 2011 by gta_talk

[Suction Testicle Man]

edit: Also you missed one of my questions. How does the liking system work?

Do you mean the Facebook, etc buttons? If there's another system there I can't see it - again maybe because I don't have an account.

 

You can generate code for Facebook buttons here.

[GentlemanSquid]

No, I meant on the 9gag site. The smiley faces next to the photos, once you click they turn yellow then they are added to your like list, then there is a counter to tell you how many people liked it.

[Suction Testicle Man]

Sounds as if that's only available to people with an account. From your description it's probably using asynchronous HTTP requests (known as AJAX). This is essentially some JS that tells the browser to fire off an HTTP request to the server without actually refreshing the page (this is what makes it asynchronous). That request can trigger a server-side script (such as a PHP script to add the specified image to that user's favourites), or can ask for data to be sent in the server response (such as some more HTML). When the browser receives a response from the server, it passes any received data to the JS engine. It's then up to the coder to manipulate the page accordingly. In this case, a breakdown of the flow would look something like this:

 

1. User interacts with element that is bound to some JS, such as a click() event from jQuery (ie. they click the smiley icon).

2. That event contains a call to the JS engine's AJAX request system. The ajax() method from jQuery is a useful wrapper for this.

3. The JS engine tells the browser to send an HTTP request containing the specified information to the specified server (both can be specified via ajax(), for example).

4. The server receives the request, passes it to the relevant script, and the script acts according to the information specified in the request (associates the image with the user in the database, and fetches the number of users now associated with the image from the database).

5. The script passes the fetched data to the server, and the server bakes this into an HTTP response, then fires it back to the browser.

6. The browser passes the data inside the HTTP response the JS engine, which in turn returns it to your script.

7. Your script manipulates the page accordingly (switches the smiley icon to another image and adds the number of favourites to the page).

 

Any other HTTP request that you initiate by requesting a page of a site works exactly the same way, just without the JS parts. It's extremely useful when doing this kind of programming to know how HTTP works. Knowing that will make writing AJAX and server-side scripts to talk to it much more self-explanatory.

[GentlemanSquid]

Wow, thanks, again. I love how you put it into easy to understand bitesize chunks.