css « Code our life

19八/100

Navigation like Themify Page

仿Themify首页的导航效果

无意中了解到Themify这个网站，看到首页的导航效果挺漂亮（实话说，主要是图片够漂亮），就仿造了一个。
点击查看demo

PS:这个demo没有什么技术含量，纯属做个记录。图片和css基本上是直接从Themify中copy过来的，js效果是自己实现，核心代码如下：

// 代码不多，加上没有什么技术含量，不做注释
var $contents = $('#slider .slides');
var $navs = $('#slider .slider-nav li');
$navs.click(function(){
    var $this = $(this);
    $this.siblings().find('a').attr('class', '');
    $('a', this)[0].className = 'activeSlide';
    var index = $navs.index($this);
    var $content = $contents.find('li').eq(index);
    $content.fadeIn();
    $content.siblings().fadeOut();
    return false;
});

标签: css, demo, fadeIn, fadeOut, JavascriPt, jquery, js, themify 没有评论

9八/100

Detection of iPad & iPhone & iPod

下一个项目是做Ipad的web应用，在网上做了一些功课，记录一些开发中可能会用到东西。

使用javascript判断设备类型

    // platform的可能值为 iPad, iPod, iPhone
    alert(navigator.platform);

对应横屏竖屏引用不同的css文件

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"><!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"><!-- 橫屏 -->

用javascript判定当前是否横屏

    alert(window.orientation)

* window.orientation 为 0 表示竖屏
* window.orientation 为 90 表示向左横屏（相对于设备下方的操作按钮）
* window.orientation is -90 表示向右横屏（相对于设备下方的操作按钮）
* window.orientation is 180 表示向反竖屏（相对于设备下方的操作按钮）

通过JS动态判断横竖屏

当用户进行横竖屏转换的时候，可以通过onorientationchange事件监听

通过CSS截取字符串，并用...结尾

.title
{
   width:200px;
   white-space:nowrap;
   word-break:keep-all; // 目前在webkit下有效 2010.8.20
   overflow:hidden;
   text-overflow:ellipsis;
}

其它

不知道有没有强制禁止竖屏或横屏的方法，希望知道的朋友告知一声:)

标签: css, detection, ipad, iphone, ipod, orientation, verticle, 截取, 检测, 横屏, 竖屏没有评论

13七/100

HTML5中的classList

HTML5的API加入了一个很有用的功能，那就是classList。
classList对象被添加在所有的DOM元素中，提供了DOM元素的class相关操作，如添加、删除等。
classList对象结构如下：

node.classList = {
	length: {number}, /* # of class on this element */
	add: function() { [native code] },
	contains: function() { [native code] },
	item: function() { [native code] }, /* by index */
	remove: function() { [native code] },
	toggle: function() { [native code] }
}

正如你所看到的，classList对象内容不多，但都是一些很有用的属性和方法。

添加一个class

myDiv.classList.add('myCssClass');

删除一个class

myDiv.classList.remove('myCssClass');

切换class

myDiv.classList.toggle('myCssClass');

检测元素是否拥有某个class

myDiv.classList.contains('myCssClass');

现在只有firefox支持classList这个对象。相信其他浏览器也会陆续支持。

标签: class, classList, css, dom, html5 没有评论

22四/100

使用helper时指定文件路径

在使用 $html->css和$html->image时，例如$html->css('style')，cake会指向webroot\css目录下的style.css文件，同样$html->image('pic.png')会指向webroot\img\目录下的pic.png。

可是有时由于各种原因，我们的文件资源不一定放在CSS或者IMG等cake默认指向的文件夹下，比如我们要指向webroot\myimg目录下的mypic.png应该如何指向呢？

通过查看html helper的源码或者官方API文档可以看到这么一句注释：
If `$path` is prefixed with '/', the path will be relative to the webroot of your application.
Otherwise, the path will be relative to your CSS path, usually webroot/css.

这样一来，我们使用 $html->image('/myimg/mypic.png');就可以指向我们想要的图片。css等函数同理

标签: css, helper, iimg, 路径没有评论

4十二/090

多列背景同高

在网上看纯CSS无heck实现多列背景同高的方法，自己跟着做了一遍

查看demo

个人觉得这个也只并不是最好的解决办法，但现在只有这样了，不知道在html5中会不会比较容易实现

标签: css, 多列, 背景, 高没有评论

30七/090

浮动元素父元素闭合

给父元素设定css属性：

overflow:auto;

_height:1%;//for IE6

在各浏览器测试结果如下

	IE 6	IE 7	IE 8	FF	CH	OP
overflow	×	○	○	○	○	○
height	○	○	×	×	×	×

Code our life 日日行，不怕千万里；时时学，不怕千万卷