Skip to main content

Making a jQuery banner from scratch

Woah, hang on a minute...  You mean you want me to build my own jQuery solution from scratch!?  Why would I do that when there are so many pre-packaged jQuery solutions out there?

Good question, if you are only making something very simple, maybe you'd like to optimise the amount of code the browser has to execute, and the pre-packaged solution may have many more features than you need...  Ok, I'll admit that's a bit far fetched for me to use as my own excuse.  I had some spare time, and wanted to see how easy it was.

The answer, as always, is it depends.

I was migrating a website from the early 2000's to a SharePoint site and I just wanted to replace a simple flash banner that faded in/out images & animated text.  Great little project I thought.

Here's how:
First I made a simple HTML page with a div for every image and sentence I wanted to fade in and out.  and an id against every div, so that I could reference them in the jQuery.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
</head>
<body>
<div id="background">
<div id="sydney"><div id="busy">Busy Joint</div></div>
<div id="melbourne"><div id="cold">Cold Joint</div></div>
<div id="brisbane"><div id="small">Small Joint</div></div>
<div id="perth"><div id="exxy">Exxy Joint</div></div>
</div>
</body>

I used CSS to hide all div's by default using 'display: none'.  and of course, used CSS to set all the other look/feel goodies.

Now to start Querying the J (jQuerying... ahem.):

A few pointers.

  • All jQuery needs to be inside <script> tags
  • Anything inside the Document Ready Function will run when the page loads
  • If you wish to cycle your animation indefinitely, my favourite way is to put the animation inside it's own function, which calls itself on the last line of the function.
  • Whenever you want to do something to an item, you call it like this: $("#[css id]").[dosomething]()   So the jQuery Syntax is: $(selector).action() 

Here's the beginning of my jQuery, fading in my 'sydney' and 'busy' divs, then animating the 'busy' words and then fading them out again:

<script>    
$(document).ready(function(){  
  
    $("#sydney").fadeIn("slow");    
    $("#busy").fadeIn("slow");        
    $("#busy").animate({left:"150px"}, 700, function(){     
        $("#sydney").fadeOut("slow");    
        $("#busy").fadeOut("slow");  
    });

});
</script>

Notice on the animate step, I've called a function which runs the FadeOut steps.  This is because although jQuery runs step by step, it doesn't wait until one step is finished to run the next step unless you tell it to.  So what I'm saying here is, don't fade the suckers out until the animation has completed.

So I wanted to make the banner do this four times with different DIV's.  All you need to do is rinse and repeat really!  Yes I probably could have optimised the code even further, but this is a simplistic version in order to teach a beginner how it works:

<script>
$(document).ready(function(){


startAnimation();

function startAnimation(){    
    $("#sydney").fadeIn("slow");    
    $("#busy").fadeIn("slow");        
    $("#busy").animate({left:"150px"}, 700, function(){     
    $("#sydney").fadeOut("slow");    
    $("#busy").fadeOut("slow");  

    $("#melbourne").delay(1000).fadeIn("slow");    
    $("#cold").delay(1000).fadeIn("slow");        
    $("#cold").animate({right:"150px"}, 700, function(){     
    $("#melbourne").fadeOut("slow");    
    $("#cold").fadeOut("slow");  

    $("#brisbane").delay(1000).fadeIn("slow");    
    $("#small").delay(1000).fadeIn("slow");        
    $("#small").animate({left:"150px"}, 700, function(){     
    $("#brisbane").fadeOut("slow");    
    $("#small").fadeOut("slow");  

    $("#perth").delay(1000).fadeIn("slow");    
    $("#exxy").delay(1000).fadeIn("slow");        
    $("#exxy").animate({right:"150px"}, 700, function(){     
    $("#perth").fadeOut("slow");    
    $("#exxy").delay(1000).fadeOut("slow",startAnimation);  
    });
   });
 });
});
}
});
</script>

I added a little bit extra there..
  • Used the Delay Action to make the steps wait 1 second.
  • Inserted a function to run all the animations, so that I could get the function to call itself and run forever.
  • The animate settings is telling the CSS to move the div right and left.
Hopefully that's not too much info.  Comment if you have any questions.

Comments

Popular posts from this blog

Export Group Membership From Active Directory Using Power Query

If you need to export a list of staff from an Active Directory Group, follow these steps.  Allows you to gather all the names & usernames of staff in a particular group and save the information into Excel.

Step By Step How To:
Open up Excel > Power Query TabClick From Other Sources > From Active Directory:(In Excel 2016 this is found under: Data Tab > New Query > From Other Sources > From Active Directory) screenshots from Excel 2016 on left, Excel 2010 w/ Power Query Add-on right A popup will ask you to enter your domain name.  It should already be populated with the correct information but if not, input your companies domain name & Click OK:
In the Navigator that opens up, expand your domain tree and double click group:

You should now see a list of all groups in Active Directory in the Power Query Editor:
In order to find & filter for a specific Group, Click the Down-Arrow for the 'distinguishedName' column > Text Filters > Contains...
Type the name…

HP Laserjet 1022 Printer - Can't Print on Windows 10

If you are having trouble getting your laserjet working on Windows 10, here's how I resolved the problem:

Go to Devices & PrintersFind your printer & go to Printer Properties > Advanced TabSet Driver to: HP LaserJet 1022 Class Driver & ApplyIf HP LaserJet 1022 Class Driver is not available.  download from this site: http://support.hp.com/us-en/drivers/selfservice/HP-LaserJet-1000-Printer-series/439424/model/439431Print a test page.


SharePoint Online - Branding with CSS

-----------------------------------------------------------------------------------------
This post is related to a larger group of posts called Migrate SharePoint to Office 365 - Planning & Steps
-----------------------------------------------------------------------------------------

I've gone with a Publishing Site Collection so that I can use the 'Alternate CSS URL' in Site Settings > Master Page.

First off, thanks to the following websites which helped get me started:
http://blog.sharepointexperience.com/2015/02/sptechcon-austin-february-2015/#more-2766http://blog.sharepointexperience.com/2015/01/to-brand-or-not-to-brand/ Here's what the end result will look like (if you have the same fonts):


Now for the CSS...

/* Design By : Brett Randall*/
/*     Design Colours: Greens/Greys/Blues */
/*     Last Modified : 28/02/2017*/
/*     Description: CSS to rebrand SharePoint Online Publishing Site Collection that is using seattle.master */

/* TABLE OF CONTENTS
-- -…