A CSS-styleable countdown timer? - javascript

I imagined this would be super-simple, but it is eluding me so far. I would like to know how I can implement a timer that counts down to a specific date and can be styled with CSS.
Specifically, I have designed a background image/container and want to style the numbers so they are correctly positioned, sized, coloured and in the correct font.
There are a raft of JS and jQuery countdown timers, but none I have found output in a manner which is easy to target with CSS. Modifying the output strings (i.e. including div tags) only seems to break them, although my JS knowledge is not great enough to understand why (a guess, is that the scripts seem to target a certain div class and 'inject' the appropriate code. Perhaps introducing new divs screws this up?)
I guess my question would have to be... 'what is the easiest way to implement a countdown to a specific date, which can be styled with CSS?', although if you know of an existing plug in that does this, I will love you forever!

This is a very useful plugin for countdowns ... everything is written within a div and span's so you can easily style it with CSS - you could use images if you reallu needed to
http://keith-wood.name/countdown.html

I've used this: http://www.littlewebthings.com/projects/countdown/example/
And I can say it's awesome.
Unfortunately it's not in pure CSS, there are images, and the switch is not smooth.
But you can always learn how to make a beautiful countdown like that by studying how it works.
Here you can download the source code: http://www.littlewebthings.com/projects/countdown/downloads/lwtCountdown-php.zip
Hope it helps.

Related

How does Slick js carousel behave width custom css?

I've already asked 2 times the developer, posted an issue, and so on, but no answers, so I'll try here.
I'm deciding to switch from wootheme's flexslider (to me, currently still the overall best library) to Slick. Have you ever tried it?
The thing I'm mainly interested (and this is not going to be an opinion, so I guess this question should be fine for stackoverflow), is how well it 'responds' to styles customisations.
Are its own css mandatory? Can I fully override them if needed? I mean, override without too much hassle... Flexslider for example lets you do not load its styles and to setup basic functionality with really few lines of css; again, I mean, styles to have the basic masking/changing images functions working. Then one starts styling anything else, obviously, but that's not the point here.
I think Flexslider is so simple because the really relevant styles are almost all inline-written via javascript. Is Slick the same?
Yes I know, I can try but myself, but I'd also like to hear from someone else who tested it, since I'm going to go straight into production code.
Ok I'm going to answer my own question.
Short answer: yes, absolutely.
Long answer: Slick has 2 main css files: slick.css and slick-theme.css
You only need slick.css, and it's really tiny, and probably you would write almost the same rules if you would override it. slick.css only sets basic functionality and no presentation styles, so you will free of doing whatever you want to customise appearance.

Updating overflow without removing elements from the div?

If I used:
parentNode.removeChild( divHere );
It does work and the scroll bar for the overflow updates accordingly. If I use JS to 'divHere.style.visibily = "hidden";' well that doesn't work anymore. What I've done pretty much is create 115 divs that are in a container div and the user can select filters to show only the images they want, all the divs have a background image and are essentially just an image with a name under it.
So I have 2 questions:
1) Is there a way to update the overflow and make it not take hidden elements into consideration?
2) If 1) isn't possible than when I use removeChild to remove a div from the container, it does indeed disappear but what exactly happens to it? Does it disappear off the page because it's not added to any element on the page? So it essentially works like it's hidden? I don't have to worry about people seeing the images in some completely weird spot in some lesser used browser?
and well 3) If you have a better method of doing this it would be greatly appreciated
Thanks in advance for any help
The removeChild() method removes a specified child node of the specified element and returns the removed node as a Node object, or null if the node does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/
I believe I may have a response for the third part of your question. That large number of divs in your containing div and the usage of filtering make me think you might want to look into using the DataTables plugin for jQuery (http://www.datatables.net/). It has some very nice features for sorting/filtering/etc. a large number of data elements and supports a variety of data sources. There are also some plugins for the plugin if the basic functionality isn't enough for you.
There is a bit of a learning curve if you want to do more complex stuff with it, and it might be tricky to get used to if you haven't worked with jQuery much (though being someone who hasn't worked with jQuery all that much due to not doing much web development, I can say that I quite like using it whenever I get the chance, although that may just be due to me enjoying learning how to do new things in programming), but I feel that if you're willing to spend the time on it you will have something much more maintainable than what you currently have.

How to split page and reveal stuff underneath?

I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)

Problem Using Sifr - Invisible Text

I'm trying to use sIFR for the first time and I have bit of a problem. Without the sIFR CSS included (I'm trying to get everything right first) the selected element just gets pushed down to make way for the sIFR text, but it's not visible.
Any idea what could be going wrong?
Cheers,
Jon
The CSS file and the Javascript work in tandom. If you include one without the other, you won't have "everything right first", you'll have some horrible mess whereby some of the necessary steps to make sIFR work are happening, and some are not.
That seems to be what is happening here - the Javascript dynamically flags certain divs etc. and adjusts what it can, then the CSS rules kick in on these modified entities and format them appropriately. Without the CSS you're going to have mangled entities hanging potentially all over the place - which is indeed what you're seeing.
So no problems here other than the fact you've decided to invent your own incomplete deployment procedure. ;-)

What's the best way to apply a drop shadow?

What is the best method for applying drop shadows? I'm working on a site right now where we have a good deal of them, however, I've been fighting to find the best method to do it. The site is pretty animation heavy so shadows need to work well with this.
I tried a jQuery shadow pulgin. The shadows looked good and were easy to use but were slow and didn't work well with any animations (required lots of redrawing, very joggy).
I also tried creating my own jQuery extension that wraps my element in a couple gray divs and then offsets them a little bit to give a shadow effect. This worked well. It's quick and responsive to the animation. However, it makes DOM manipulation/traversal cumbersome since everything is wrapped in these shadow divs.
I know there has to be a better way but this isn't exactly my forte. Thoughts?
ShadedBorder is a good looking and easy to use Shadow-Library. check it out
You don't need to wrap those shadow-divs around the other content, just set them a little askew and place them on a lower z-index !-)
if your main problem is to navigate the DOM, just add a class and/or id to your element, and refer it with JQuery selectors. even better if you store the ref in a variable, so you don't need to select it too frequently
Although it is yet to have full cross-browser support, you might like to try using the CSS 3 text-shadow property.
It largely depends on how frequently your images will need to be changing, and the colored areas that they'll be covering. Because I'm guessing that you'll be needing to pay attention to IE6 compliance, most alpha-PNG solutions will cause such horrible jittery-ness that you'll spend more time in performance optimzation than you would have wanted to guess.
To solve this in the past, since our images are modified less than once a month, we call the images through a caching-PHP script which automatically applies the shadow using a pre-defined background color so we don't have to rely on any transparency. This results in faster downloads (fewer HTTP requests) and a faster-interface because there's less Javascript/CSS magic in the works.
I understand that this is a very old-school solution, and the above solutions would be entirely acceptable if your images were static, but being cross-browser compliant and animated will likely force you to do a solution of this style.

Categories