Posted: May 12th, 2012 | Author: Julia | Filed under: Tips and Tricks | Tags: Cufon, cufon fonts on the same page, javascript | No Comments »
When I need to use any custom font at my design, my usual choice is Cufon javascript library. Once I was trying to implement 2 different cufon fonts on the same page. The solution is pretty easy, but you should know where to look for ))
-
<script type="text/javascript">
-
$(document).ready(function () {
-
Cufon.replace('.apercu_bold', { fontFamily: 'Apercu' });
-
Cufon.replace('.apercu_reg', { fontFamily: 'Apercu Light' });
-
});
-
</script>
How do I know that my fontFamily are ‘Apercu’ and ‘Apercu Light’? I’ve generated 2 files for my fonts (apercu_700.font.js and apercu_light_300.font.js). Cufon is getting the registration information with the curve data for each font. So if you view the source, you find how your custom fonts are named – line 29 for me, Cufon.registerFont({”w”:213,”face”:{”font-family”:”Apercu”,…}});
Posted: May 1st, 2012 | Author: Julia | Filed under: Tips and Tricks | Tags: javascript, jQuery, Lightbox, mobile, solution | No Comments »
Everyone knows jQuery LightBox plugin – it’s simple and elegant, used for handling images through the power of jQuery’s selector. It’s perfect for image galleries, portfolios (for example, try my portfolio page >> view full size images).
The plugin works perfect, just one day while testing a client’s website for mobile devices, I found a bug – every full size image appeared at the very bottom of my page and was hidden for the very first sight, I had to scroll down the page to see it.
After setting up alerts and trying the result )) the solution for Lightbox v2.05 (by Lokesh Dhakar) was found – see line 245 or nearby:
-
if ((navigator.userAgent.match(/HTC_/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i|>) ||
-
navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/blackberry/i|>) ||
-
navigator.userAgent.match(/Windows Phone OS 7/i) || navigator.userAgent.match(/webOS/i|>))) {
-
-
var arrayPageScroll = document.viewport.getScrollOffsets();
-
var lightboxTop = arrayPageScroll[1] + (100);
-
var lightboxLeft = (jQuery(window).width() / 2 – document.viewport.getWidth() /|> 2);
-
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
-
-
this.changeImage(imageNum);
-
}
-
else {
-
// calculate top and left offset for the lightbox
-
var arrayPageScroll = document.viewport.getScrollOffsets();
-
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
-
var lightboxLeft = arrayPageScroll[0];
-
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
-
-
this.changeImage(imageNum);
-
}
-
},
Note: I used navigator.userAgent.match(/HTC_/i) because navigator.userAgent.match(/Android/i) had no result for my HTC.
You can load Lightbox v2.05 with my changes here.
Related post: Your Mobile Website: be Up-to-Date!
Posted: March 21st, 2012 | Author: Julia | Filed under: Tips and Tricks | Tags: disable button, disabled submit for empty input, javascript, jQuery | No Comments »
One [working] day I was in need of a disabled submit button until my input fields have value. It’s a typical solution if you propose any service only after signing an agreement by your users (as it was at my case).
I had a form with input fields and a submit button on my page, I would like to have the feature that the ’submit’ button is disabled until there are values on input fields. This button should be clickable if and only if there are values input in all fields.
I decided to implement this with jQuery (so I included the jquery library at the head section firstly).
Read the rest of this entry »
Posted: March 8th, 2012 | Author: Julia | Filed under: Tips and Tricks | Tags: Cufon, hover, hover effect, hover option, javascript | No Comments »
One of the problems for Cufon developers is the strange behaviour of elements powered by Cufon.js which have defined :hover state in the CSS stylesheet. I stumbled upon this and tried so many different things to make it work the correct way… My
-
.cufon a:hover {color:#e7aa05;}
had no results, so after reading the official docs I set hover option for the certain element at the very beginning of my file – sure, after loading my custom Cufon script. The key phrase for the solution is ‘hover calls must go first’, because the hover option cannot be added to an element that has been replaced before:
-
<script type="text/javascript"> // should be called in the first place
-
Cufon.replace('a.cufon', {
-
color: '#222',
-
hover: {
-
color: '#e7aa05'
-
}
-
});
-
</script>
-
<script type="text/javascript"> // should be called after
-
Cufon.replace(".cufon", {
-
textShadow: '1px 1px 1px white'
-
});
-
</script>
Live example: click here>>
Related post: Using Non-standard Fonts with Cufón.js
Related post: Using Cufón.js with jCarousel
Posted: February 29th, 2012 | Author: Julia | Filed under: Tips and Tricks | Tags: button, css, dynamic button | No Comments »
Buttons are a very important element of any website, through buttons visitors trigger an action and interact with content.
As for my mind, CSS buttons are much more efficient than image-based buttons. They are rather easier to handle. It’s pretty simple to create dynamic buttons with cross browser compatibility, let me show the way I do it.
Since I need my button to be flexible, I make its width expand with the size of the button’s text and I use an <a> tag for that:
-
<a class="button" href="#">CSS Button</a>
Read the rest of this entry »
