11. Sidebar Toggle

The script on FM is jQuery madness.
Also, if you think adding tiny snippet of HTML before the sidebar is bad, what about this snippet of the FM one:

Code:


jQuery('#forum-widget').insertBefore('#left');


Which is moving the whole sidebar element.

...either way, this tutorial was actually written in just a few minutes for Flora one night when she asked about one haha. I'm sure she'll remember how long it took me

Lg the point is that FM code becomes intrinsic part of html & your code is a part of js file....The cookie even if saved in browsers history can't hide the required element before js is loaded such isn't the case with html intrinsic code

ion-cube wrote:Lg the point is that FM code becomes intrinsic part of html & your code is a part of js file....The cookie even if saved in browsers history can't hide the required element before js is loaded such isn't the case with html intrinsic code

The thing is, even scripts part of the HTML have a delay on them, but since they are executed during page load, you just don't see it.
My script can be modified into a named function and simply placed <script>functionName()</script>
into a widget would have the same effect.

For instance, see the navbar here? How some values of the links are edited? Thats done with JS, and the JS is stored in JS management, but yet you'll very rarely see the flash of the JS.

The reason we use '$(function() {' is because it only executes the script once the whole DOM is loaded, which in some cases, it is needed because of the lack of places on FM to put HTML. For instance, to edit the footer, it would need to be a '$(function() {' because there is nowhere to insert HTML below the footer in FM.

I hope that makes sense.

can't hide the required element before js is loaded

On that note, this is a phpbb3 board, but yet notice how edited the viewtoppic page is? Thats done with Javascript, and Javascript in JS Management. But yet you'll not see a flash, due to little tricks.

The reason we use '$(function() {' is because it only executes the script once the whole DOM is loaded, which in some cases, it is needed because of the lack of places on FM to put HTML. For instance, to edit the footer, it would need to be a '$(function() {' because there is nowhere to insert HTML below the footer in FM.

Thnx for making me understand...now as a follow up to this can you help me here: http://www.avacweb.com/t130-optimised-method-navbar-text

I think the flick not occurring in urs as well as Dions site is because you haven't used many images in your CSS markup...plus here in Pakistan (3rd world countries) if you internet connection is low Dion chat is 100% buggy I know that

an improved one...
http://jsfiddle.net/defencedog/Y6ShN/

Just so you know, one of the great advantages of jQuery, is chaining.
So when your performing multiple functions on the same element, you can do it all in one line. Here's a few snippets of your code, and underneath is how you can do it with chaining to be more efficient.

Code:


$(this).css('background-position', '0 0px');
$(this).attr('title', 'Hide Panel');

$(this).css('background-position', '0 0px').attr('title', 'Hide Panel');


Code:


$(b).css("background-position", "0 -13px");
$(b).attr('title', 'Show Panel');

$(b).css("background-position", "0 -13px").attr('title', 'Show Panel');


OR, here is another small tip when using jQuery.
You have this: var a = $("#left");
The variable a here is not holding the element #left, but rather holding a jQuery object.
So when you do this:
$(a).hide();
Your constructing a new jQuery object, which isn't needed, you can just do this: a.hide();
Same with your variable b.

Just some small tips for improvement to people.

thank you sir, may I ask what is the difference within a click function b/w this and $(this)

As you know a click is an event, and an event is an object.
The 'this' variable refers to the target of the event (event.target), which is an Element Object.

When you have say 'this' it refers to the Element in which the event occured, but when you say this '$(this)' you are constructing the Jquery object, and passing in the Element of which the event occured into the jQuery object.

Think of it like this,
var elem = document.getElementById('example');

the variable elem, is an element object. So you can do 'elem.innerHTML' because its an element, so you can perform all the methods of element objects on it.

And with this:
$(elem)
You are initiating a jQuery object, and specifying the element as the context, in which to perform jQuery methods on. So you can do $(elem).hide(); and such things.

HOWEVER, if this was our variable: var elem = $('#example');
then you CAN NOT do this 'elem.innerHTML' because it is not an element object, it is a jQuery object.
But you can do this 'elem.hide()' ... as .hide() is a jQuery method to be performed on jQuery objects.

Hope that made sense