Flashing Christmas lights on your website... A Honey Bear Playhomes tip...

  • Idea
  • Updated 1 year ago
So I was playing around with my GIMP program and made a string of flashing Christmas lights to go on either the top or bottom of your website. It is a small GIF file that stretches from the left to the right side of the screen regardless your screen resolution.

Christmas lights on top: http://tester2.synthasite.com/christm...

Christmas lights on bottom: http://tester2.synthasite.com/christm...

I'll make a string with smaller (but more) bulbs this weekend when I have time...

With the code the way its currently written, it is only possible to have one or the other but not both top and bottom lights. Just copy the code shown into an HTML widget on your site.

Happy site building
Ed

You can find me with my head in the honey pot here... A link back would be nice ;)

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes

Posted 5 years ago

  • 1
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 50 Reply Likes
Hi Ed

Thanks for adding these resources to bring some Christmas cheer to Yola sites! I'm sure it will give help and inspiration to people who have entered our Christmas website competition! :)

Nazlie
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Better a string of flashing Christmas lights than a flashing Santa... ;) LOL
Photo of Boomer

Boomer, Champion

  • 2041 Posts
  • 81 Reply Likes
Or a flashing Honey Bear :-)

Photo of Brianna

Brianna, Community Support Team Lead

  • 2045 Posts
  • 91 Reply Likes
haha Boomer! I cannot say I have ever looked for a flashing Honey Bear :) Ed- all of this Christmas excitement is making me want to listen to Christmas music and put up my tree!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Boomer just for that I am gonna do a flashing bear in flash...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Reply Likes
Thanks Ed! These are awesome tips! I am sure a lot of people will use this for their christmas websites! I already saw somebody use that holly falling down the page and the snow flakes!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Reply Likes
By the way, I am going to put a list of websites that gave me resources on the christmas website! So your website will be on there! :)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
You know Nathan, I think every website would look better with my bears face on it... ;)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Reply Likes
Yeah! I am going to add your link to my Christmas website since you gave us a bunch of awesome codes! Great job Ed!!! :)
Photo of Marijan Tončić

Marijan Tončić

  • 1 Post
  • 0 Reply Likes
Great, I will try to make a smaller bulbs.
How can be this script linked in an e-mail message?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Okay, so I finally got around to the top and bottom lights on the same page regardless the screen resolution... I'm happy and think they look great together...

http://tester2.synthasite.com/christm...

I have scoured the web and this is the first place that one can come and find so many different Christmas features to add to their websites.

All a person has to do is look, like and then copy and paste... No downloading, uploading or freaking out over how to do flash, code script or any of the brain melting stuff involved. My brain is fried for you... LOL
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Reply Likes
Hi, can't you just use CSS to position gif images at the top? Like this page: http://free-scripts.yolasite.com/x-ma... I used the div background property to have the images work then I had the background repeat-x and then had it all the way across the page using width:100%. How does the one with JavaScript work? Is it better?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Nathan... So if you were to look at the script you would see that it is most versatile in what you can make it do.

Just look at all the possibilities in this code.

<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var Ovr2b='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";}
else
{cot_t2_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
{cot_t2_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl2_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left bottom;}';
var cot_tl2_fixedCSS='#cot_tl2_fixed{position:fixed;';
var cot_tl2_fixedCSS=cot_tl2_fixedCSS+'_position:absolute;';
var cot_tl2_fixedCSS=cot_tl2_fixedCSS+'bottom:0px;';
var cot_tl2_fixedCSS=cot_tl2_fixedCSS+'left:0px;';
var cot_tl2_fixedCSS=cot_tl2_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl2_fixedCSS=cot_tl2_fixedCSS+cot_t2_DOCtp;
var cot_tl2_popCSS='#cot_tl2_pop {background-color: transparent;';
var cot_tl2_popCSS=cot_tl2_popCSS+'position:fixed;';
var cot_tl2_popCSS=cot_tl2_popCSS+'_position:absolute;';
var cot_tl2_popCSS=cot_tl2_popCSS+'height:131px;';
var cot_tl2_popCSS=cot_tl2_popCSS+'width: 1920px;';
var cot_tl2_popCSS=cot_tl2_popCSS+'right: 120px;';
var cot_tl2_popCSS=cot_tl2_popCSS+'bottom: 20px;';
var cot_tl2_popCSS=cot_tl2_popCSS+'overflow: hidden;';
var cot_tl2_popCSS=cot_tl2_popCSS+'visibility: hidden;';
var cot_tl2_popCSS=cot_tl2_popCSS+'z-index: 100;';
var cot_tl2_popCSS=cot_tl2_popCSS+cot_t2_DOCtp2;
document.write('<style type="text/css">'+cot_tl2_bodyCSS+cot_tl2_fixedCSS+cot_tl2_popCSS+'</style>');

function COT(cot_tl2_theLogo,cot_tl2_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl2_fixed">');
document.write('<a href=""><img src='+cot_tl2_theLogo+' alt="" border="0"></a>');
document.write('</div>');}

//if(window.location.protocol == "http:")
COT("resources/flashing%20christmas%20lights%20bottom.gif", "SC2", "none");
//]]>
</SCRIPT>

Cross browser safe and compatible, non jerky images, any type of image or element can be placed in the code, place the element anywhere on the page if you play with the positioning attributes, set z-index to suit your needs, with one letter change in the code you can have multiple objects on the page without any interference between them all and so much more...

I didn't use a repeating image of the flashing Christmas lights animated GIF I made because to use one image and set to 1920px will ensure that the flashing is always in step. I have had some repeating images that after a minute or two there is a noticeable but small time delay.

With single images that you want to overlay on another or lets say on top of the banner using a transparent GIF or PNG you can make any banner clickable at several locations. For that I would always change from left to center positioning.

I have had that very code above copied, edited and pasted one on top of each other multiple times in one HTML widget without interaction with the other elements. The page with the Christmas light on the top and on the bottom of the screen is an example of how nicely it works. Some CSS is fickle with multiple instances of the same code on the page together where with one single letter change this is not.

If you remove the link address in the code like I have done above when someone clicks it on another persons website it will simply reopen the page that is placed. To make it linkable just include a URL after <a href= and between the commas.

Other than that I simply like it... Try it yourself... I am sure that you will as well... ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Okay Nathan...

This one had better knock your socks off...

http://tester2.synthasite.com/christm...

Four uses of that same script in one HTML widget. Man does that look freakin awesome at any screen resolution...

Too bad this site couldn't get on the site of the week or be emailed to all of Yola's users so that they could learn how to add a bit of the holiday cheer to their own Yola built websites.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Reply Likes
Dang Ed! That's sweet! Great job! :) I see now too how that script is better. Can you resize it? Like make the lights bigger or smaller?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Okay, I just have not got into the code to try to alter the size that way. I did think that the bulbs were a little large so I started over and made them smaller and while I was at it randomized the colors because I thought the (red, yellow, green, blue) in order looked off. As well, I brightened the bulbs to show more color. The others were too dark I thought.
Photo of KearaK

Keara

  • 325 Posts
  • 14 Reply Likes
Ed, I sent you an email a few days ago. Hoping to hear from you!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Sorry Keara... Been busy. I will reply soon...
Photo of KearaK

Keara

  • 325 Posts
  • 14 Reply Likes
No problem, Ed. Thanks for your reply. :-)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
How could I ever make the Christmas lights better you ask?

Well how about making them look a little more realistic and like the lights that you hang from your very own Christmas tree perhaps because that is exactly what I did... ;)

I spent nearly 7 hours designing and editing in GIMP making the lights look as perfect as I could but wasn't able to get the glow effect just right because GIFs don't like to do the translucence that was involved in making the lightbulbs glow. Soooo, I had to finish it out in flash and spent another 6 hours doing just that... The glow effect I added looks way cool and makes them look that much more realistic I think.

http://tester2.synthasite.com/small-l...

After all this work I am beat and wiped out. It was worth it as I cannot wait to see how people add them to their websites. How about leaving your website URL so that I can see what you have done...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Reply Likes
Oh my gosh!!! Those rock! I don't understand how you do it but you are those best ever! Great job Ed!!! :)

Cheers!
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Reply Likes
Ed, what do you use to make flash objects? Is it some kind of coding language or what?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Thanks Nathan

Yeah it took a long time to do this one but it is way worth it to see how it turned out in the end. I am completely blown away at how it far exceeded my expectations.

I started with a JPG of a Christmas light in GIMP, removed the background to make it transparent, darkened the bulbs and then individually lightened each bulb and added the glow to make it look more realistic. Finding out that I couldn't achieve the look that I wanted with an animated GIF I kinda was forced to use flash. There was no other way...

I used Aleosoft flash banner maker to animate it. Taking the darkened string of lights that I created with GIMP I inserted them into the banner maker and then took the lightened bulbs with glow effect and inserted each bulb individually and set the timing and flicker for a realistic and semi-random flash. (Harder than it sounds LOL) Each bulb is an individual object in the flash and overlays the darkened string of lights so that when the bulb turns on it looks real.

The look that I was going for was a colored glow around the bulb that had a translucent effect that you could see through at the edges. The halo is just transparent enough to see the color of the background behind.

http://www.aleosoft.com/flash-intro-b...

The banner maker is the same program that I used to make the falling snow backgrounds. I bought the program 2 years ago and have used it for 90% of my flash needs so far. Really great program.

LOL I am such a nob... The script that I added for my Honey Bear linkback was wrong. I added the resources link and not the full URL so if anyone has added it to their sites please go back and get the complete code. ;)

Okay my eyes are slamming shut as I type... Gotta sleep..................
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Reply Likes
That is cool :) Have a good night Ed! :)