Okay, that’s quite a bit of an exaggeration, maybe purgatory rather than hell.
Anyway, I don’t really know any javascript so I rely on help from the bountiful internet so I can do things with it. Lucky for me there are a bazillion javascripty jquery type pop ups, however unfortunately there are A BAZILLION javascripty jquery type pop ups. Well again, I’m overreacting slightly. But here are a few of the pop up plugin type things I tried out.
Lightbox is the one everyone has heard of, but it annoys me slightly – although I’m not entirely sure why. Simple to use and install, but unfortunately wasn’t any use for me this time as it can only show images, rather the sections of HTML that I required.
Colorbox is nice. It produces nice looking pop ups. Smooth transitions. It can load up flash, video as well as HTML. However, again I couldn’t use it for the project I wanted as I needed a div to pop up then stay where it was allowing you to interact with the rest of the page. I think you might be able to get Colorbox to do this, but I struggled with the coding.
DOMWindow was my saviour in the project I was working on. I didn’t want a hover pop up, or one that fills the entire screen, but with one click a little window should appear, then it should close when the user clicks on the close button. Very simple and easy to use.
A few others
Fancybox
Thickbox
Shadowbox
in Code |
I’ve been looking into a few methods for how to replace text on a page.
I’d initially used CSS to replace text with images, this is quite an awkward solution as you have to create a new image for every item you want to replace. I did a bit more searching and discovered siFR 2. sIFR (Scalable Inman Flash Replacement) allows you to replace text on a page with any font you want, using CSS, Javascript and Flash.
I’d struggled previously getting this version to work properly and behave the way I wanted it to. Mainly for each item in a navigational menu to look the same. So I was rather happy when I discovered there was actually a version 3. This version is incredibly easy to use. I love being able to apply CSS styles, as well as defining the font size.
Take a look here: sIFR 3
in Code, Flash animation, Web design |
I’ve been creating a website where I wanted to change the look depending on the season. I’ve used Javascript to control what CSS was applied by checking what month it is, then changing the href property of the css <link> tag.
Adding the default stylesheets to the HTML
I created one main CSS file, that held all the styles that will never change, as well as a four separate season CSS files for Summer, Autumn, Winter and Spring. I used the Summer css file as a default and added an id called season.
<link href="main.css" rel="stylesheet" type="text/css" />
<link id="season" href="summer.css" rel="stylesheet" type="text/css" />
Javascript code to select the CSS
Firstly I get the date, then use an if statement to set a variable with the correct filename. So, between December and February it will show winter.css, March to May spring.css, June to August summer.css and September to November autumn.css.
Then I just set the href property of the element with id ‘season’.
// Get CSS JavaScript Document
function getCSS()
{
datetoday = new Date();
themonth=datetoday.getMonth() + 1;
if (themonth == 12)
display = "winter.css";
else if (themonth <= 2)
display = "winter.css";
else if (themonth > 2 && themonth <=5 )
display = "spring.css";
else if (themonth > 5 && themonth <=8 )
display = "summer.css";
else if (themonth > 8 && themonth <=11 )
display = "autumn.css";
document.getElementById('season').href = display;
// End -->
}
Call the function
All that’s left to do is call the function in the<head> of the page.
<script type="text/javascript" language="javascript">
getCSS();
</script>
Done!
in Code, Web design, tutorial |