Develop Reference

How to Customize jCountdown timer which is using css sprite resources to become auto Responsive?

The jCountdown plugin has good effect.
https://0.s3.envato.com/files/42592367/index.html
However by Inspecting the resources, it seems like the plugin is using css sprite animation to achieve the effect. wondering how difficult it would be to make it become
responsive/albe to view without seeing horizontal overflow-x scroll bar
on small dimensions that is < 485px.
I'll be using "slide" effect so below img is slide_black skin.
maybe can share some tips on customizing script / css / or photoshop the image to create diff dimensions to fit responsive.
using the width option is one option to do but I think the pitfall is that result would be blur especially for the day/hour/min/sec label picture text
$("#timer").jCountdown({
timeText: tdate,
timeZone: 8,
style: "slide",
color: "black",
width: 225,
textGroupSpace: 15,
textSpace: 0,
reflection: !1,
reflectionOpacity: 10,
reflectionBlur: 0,
dayTextNumber: 2,
displayDay: !0,
displayHour: !0,
displayMinute: !0,
displaySecond: !0,
displayLabel: !0,
onFinish: function() {}
});

You can do this playing with transform:scale() property, adding some jQuery to find the correct scale value and applying it. Exemple :
var value = yourOwnRatioCalculDependingOnClosestResponsiveParent;
$('.jCountdownContainer').css({
"-moz-transform" : "scale("+value+")",
"-webkit-transform" : "scale("+value+")",
"-ms-transform" : "scale("+value+")",
"-o-transform" : "scale("+value+")",
"transform" : "scale("+value+")",
});
As you can see inspecting this plugin, adding a css scale to .jCountdownContainer works fine (with Chrome Dev Tool for exemple).

Superfish mouseout delay not working

On my client's site: http://mural.planet-9-stuff.co.uk/ (in final stages before going live) I've got JS menus that seem to be using the Superfish code.
Problem is, when you try to navigate from Services > For individuals to one of the 'for individuals' sub-pages (particularly one that's diagonally down & to the right of the 'For individuals' header, like "Investing for children" for example), the menu disappears and it's really annoying.
I've adjusted the Superfish config settings to give a delay of 10000, disableHI etc but none of it seems to be taking effect. I've also adjusted various settings in my screen.css file but again, nothing is giving me the result I want.
Here's the superfish code:
/* Dropdown menu using superfish */
jQuery('.nav').supersubs({
minWidth: 12,
maxWidth: 25,
extraWidth: 1
}).superfish({
delay: 10000,
animation: {opacity: 'show', height: 'show' },
speed: 'slow',
autoArrows: false,
disableHI: true
});
I'm a total JS novice so any simple instructions anyone could share would be really gratefully received!

Why to add two links to JQuery in this case

I have zero experience in Javascript and JQuery but I have used both in this document.
The first one is to give support to IE for CSS3 transitions and is taken from CSS3 Hover Transition. The code used is
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.hoverTransition.js"></script>
The seond one is for a slideshow gallery and is taken from slideshow gallery and the code is
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.galleriffic.js"></script>
<script type="text/javascript" src="scripts/jquery.opacityrollover.js"></script>
As can be seen the former CSS3 Transitions links to jquery 1.6.1 while the later slideshow gallery links to jquery 1.3.2. Do I have to refer to both these files?
I tried removing one link and the other as well but if either of the link is removed, neither the CSS3 Hover Transitions work nor the Slideshow Glaeery work. Alos if I place the above in my head element, they dont work. They only work If I have them at the bottom after the footer and before the body element.
The following is in my head tag. (for the Slideshow Gallery)
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
And the following is at the bottom. (for the Slideshow Gallery)
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 5500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play',
pauseLinkText: 'Pause',
prevLinkText: 'Previous',
nextLinkText: 'Next',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: true,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>

It is complicated and undesirable to put two different versions of jQuery in the same page. Your first goal is to avoid this entirely - you'd rather only have the newer version of jQuery in the page.
So, your first order of business is to do some research on the jQuery plug-ins you're using and see if they will all work with a common version of jQuery.
If you determine that they will all work with a common version of jQuery, then just include jQuery in your page before the plugins and include the plugins before your code that uses them. The jQuery code can go in the HEAD section or in the BODY section as long as it's before anything that tries to use it. The plug-in code can probably go anywhere after the jQuery code, but you'd have to consult the plug-in doc to make sure.
If you determine that you have to have two different versions of jQuery, then you need to work out how you go about doing that. Here's a related question on how that is done: Can I use multiple versions of jQuery on the same page?.
When using two versions of jQuery, you end up having to define a unique symbol that represents a particular version of jQuery using jQuery.noConflict() (not jQuery and not $) and then ALL code that uses that plug-in has to use that unique symbol.

jquery tooltip shows a div's content

I want to use either http://onehackoranother.com/projects/jquery/tipsy/ or http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ and I was wondering if lets say I have a div on my page that has a class 'item_info'.
Can I have my tooltip that is created output the div inside the tooltip and formatted properly according to my css?
Is there another plugin I should be looking into?
Thanks. I hope this is clear enough.

You could look into qTip
http://craigsworks.com/projects/qtip/demos/

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ allows you to specify additional css class for your tooltip styling as well as display "dynamic" data for the text. Take a look at the example below.
Notable areas: bodyHandler specifies which text to show in your tooltip (this will return your html from div), extraClass specifies css style to apply. Hope that helps.
$("#your_tooltip_element").tooltip(
{
bodyHandler: function() {
return $("#your_div").html();
},
showURL: false,
track: true,
delay: 0,
showURL: false,
opacity: 1,
fixPNG: true,
extraClass: "item_info",
top: -15,
left: 5,
cursor: "hand"
}
);

How can I create a photo slider on iPhone Safari with jQuery?

I'd like to create an product image viewer for an iPhone version of an ecommerce site, and have it behave something like the Photos app.
Ideally, you would be able to slide images to move back and forth in the product image gallery.
This will all be done in mobile Safari.
I did a little experimenting with jqTouch, but its doesn't look like it would support this idea (it has swipe support, but there's no apparent way to link sliding to dragging an image).
Any plugin or implementation ideas? Thanks!

i needed the same, solution was to use cycle and swipe plugins:
"#gallery" is a container with all img tags in it.
$(function() {
$('#gallery').cycle({
fx: 'scrollHorz',
timeout: 0,
next: '',
prev: '',
speed: 300,
nowrap: 0
});
});
$(function() {
$('#gallery').swipe({
swipeLeft: function() { $('#gallery').cycle("next"); },
swipeRight: function() { $('#gallery').cycle("prev") },
threshold: {
x: 15,
y: 99999
},
preventDefaultEvents: false
});
});
it works, but not exactly like Photo library, because images doesnt drag to 50% of width before changing. just like in crmunro's solution, but based on jQuery and plugins.

not sure if you've solved this, but an iWebkit a user has created http://worldofsai.com/photos_flick.html - maybe you could base it on that?

you can check this example. open it in safari on your iPhone))) you can rotate, move and scale images

Qtouch received a significant update in july.
The full source package now include demos for video embedding and swipeable image galleries.
You can find the download of r148 at this url:
http://code.google.com/p/jqextensions/downloads/list
It works very well.