小编tec*_*ant的帖子

我在将jQuery的toggleClass函数添加到我的其余代码中时遇到了麻烦.该页面上有几个HTML5音频标签,通过jQuery控制.我试图将切换功能添加到我的jQuery音频控制功能,但它没有添加类,随后音频控件不起作用..所以我想这是一些奇怪的语法错误.

你们推荐什么？下面是一个jsFiddle和我(不幸的)弱尝试:)

http://jsfiddle.net/danielredwood/FTfSq/10/

HTML:

<div id="music_right">
    <div class="thumbnail" id="paparazzi">
        <a class="playback">
            <img class="play" src="http://www.lucisz.com/imgs/play.png" />
        </a>
        <audio>
         <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
    </div>
    <div class="thumbnail" id="danceinthedark">
        <a class="playback">
            <img class="play" src="http://www.lucisz.com/imgs/play.png" />
        </a>
        <audio>
         <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
    </div>
    <div class="thumbnail" id="bornthisway">
        <a class="playback">
            <img class="play" src="http://www.lucisz.com/imgs/play.png" />
        </a>
        <audio>
         <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" …

虽然功能很快就会打到页面,所以我需要用纯JavaScript编写它并将其包含在头部.不确定如何去做,因为据我所知,通过使用.replace(),新元素将被移动到页面上的不同位置.jQuery的replaceWith()行为是理想的.

$("#imagefiles").replaceWith("<input type='file' name='imagefiles' id='imagefiles' />");

在加载然后用户交互之后动态地将图像添加到页面,并且在该图像完全加载之后无法触发功能.我认为使用jQuery的.load()方法会很好..但根据我的控制台和一堆文档.log业务,它从未执行过.见下文..谢谢!

$('body')
    .append('<img id="ad" src="img/ad.jpg" alt="Advertising Network" />')
    .load(function(){
        console.log('ad load complete');
        $('#submit').click();
    });

更新:

为了澄清,这是双方后document和window负载.

我在页面中嵌入了一个HTML5视频,该页面设置为加载时自动播放.当菜单切换时,它被隐藏,一系列图像取而代之.当菜单关闭时,视频返回.建议我在隐藏视频时停止视频,并在恢复后恢复视频以节省资源,我想做,但停止并重新启动(而不是恢复).

有什么建议？我知道这是一片灰色地带.

谢谢!

HTML:

<div id="content">
    <video id="vid_home" width="780" height="520" autoplay="autoplay" loop="loop">
        <source src="Video/fernando.m4v" type="video/mp4" />
        <source src="Video/fernando.ogg" type="video/ogg" />
        Your browser does not support this video's playback.
    </video>
    <img id="img_home" src="Images/home.jpg" alt="Fernando Garibay />
</div>

使用Javascript:

// Navigation hover image preview
$('#img_home').css('display', 'none');
$('.nav').hover(function(){
    $('#vid_home').fadeOut(600, function(){
        $('#img_home').fadeIn(800);
    });
});
$('#item1').hover(function(){
    $('#img_home').attr('src', 'Images/music.jpg');
});
$('#item2').hover(function(){
    $('#img_home').attr('src', 'Images/photos.jpg');
});
$('#item3').hover(function(){
    $('#img_home').attr('src', 'Images/biography.jpg');
});
$('#item4').hover(function(){
    $('#img_home').attr('src', 'Images/discography.jpg');
});
$('#item5').hover(function(){
    $('#img_home').attr('src', 'Images/contact.jpg');
});
$('#item6').hover(function(){
    $('#img_home').attr('src', 'Images/blog.png');
});
// Navigation hover image leave
    $('#trigger').mouseleave(function(){ …

我知道Oldie但是好东西.这个问题被问了很多次,但我没有得到明确的答案.可伸缩的背景图像,最好只有CSS,如果必须的话,愿意使用jQuery支持.我遇到的一个问题(即使用CSS3背景图像)是图像下方的空白空间,当它的高度小于浏览器窗口高度时.(例如:http://css-tricks.com/examples/ImageToBackgroundImage/)

这就是我想要完成的事情:

• 保持纵横比
• 如果浏览器窗口小于图像大小,则剪裁图像的高度和宽度
• 图像以页面为中心,因此剪切不会偏移页面的流量

以下是一些说明这些目标的例子(尽管我认为可以做得更好):

• http://www.thakoon.com/collections/thakoon-addition/pre-fall-2011
• http://whatstheweather.net/weather/submit

谢谢你,谢谢你,谢谢你.

我为电子邮件注册构建了一个HTML表单.当您单击电子邮件输入的textarea时,Chrome中会出现一个模糊的灰色边框.我该怎么办呢？

http://jsfiddle.net/danielredwood/7Hs2r/

谢谢!

我的页面上有一个HTML5表单,其中包含一个带有文本夹文本的电子邮件输入.它工作得很漂亮,我喜欢原生验证!

我不确定如何最好地提供旧浏览器.我正在使用一些javascript复制占位符的文本并将其作为值进行打印.它运行良好,但随后表单验证会消失,因为文本中的文本不是表单中的电子邮件地址.

我不想失去验证..任何想法？

HTML

<input id="email" type="email" placeholder="Enter your email address">

JavaScript(原型):

var Placeholder = Class.create({
    initialize: function (element) {
        this.element = element;
        this.placeholder = element.readAttribute('placeholder');
        this.blur();
        Event.observe(this.element, 'focus', this.focus.bindAsEventListener(this));
        Event.observe(this.element, 'blur', this.blur.bindAsEventListener(this));
    },
    focus: function () {
        if (this.element.hasClassName('placeholder'))
            this.element.clear().removeClassName('placeholder');
    },
    blur: function () {
        if (this.element.value === '')
            this.element.addClassName('placeholder').value = this.placeholder;
    }
});
Event.observe(window, 'load', function(e){
    new Placeholder($('email'));

});

编辑:

如果支持占位符的浏览器忽略了value属性,那不是很好吗？

编辑2:

不,我不想将输入类型设置为文本.这会将验证的行为从电子邮件语法更改为拼写检查.

碰到一个奇怪的事情,我不知道发生了什么.

我已经抓住了DOM元素的索引.index(),找到了匹配的元素.get(),我试图通过它添加一个类.addClass().

我的控制台返回错误:" Uncaught TypeError: Object #<HTMLLIElement> has no method 'addClass'"...这特别奇怪,因为我的日志显示HTML元素很好(http://cloud.dhut.ch/image/2W3S0R3k2h2U)

我错过了什么吗？它没有返回数组或任何东西.困惑.

谢谢!

JavaScript的:

nFLi.get(active).addClass('active');

我正在尝试在动画播放后重置数据属性，并且在应用本文答案 2 中的技术时遇到了一些问题。

不确定我在这里缺少什么。对于each data属性等来说，理论上似乎是可行的。

更新：

值得一提的是，data钥匙都是不同的。例如data-1="abc"，data-2="abc"等，因此需要一个for简单地查找data属性的循环。

HTML

var total = 0;    
$.each($('*').data(), function(key, value) {        
    if (key){    
        var thiis = $(this);            
        total += key;            
        thiis.removeData();            
        thiis.data(total, value);
    }
});

我正在尝试从cookie中解析一个JSON编码的字符串，当我对该字符串运行json_decode（）时，它返回为null。这应该是一个简单的操作-我缺少什么？

/* Get */

    $cookie_exampleData = $_COOKIE['exmaple_data'];

    // Retrieves: '{\"FirstName\":\"Angus\",\"LastName\":\"MacGyver\",\"Email\":\"hello@email.com\",\"Phone\":\"8185555555\"}'

/* Decode */

    $cookie_exampleData_decoded = json_decode($cookie_exampleData);

/* Print */

    var_dump($cookie_exampleData_decoded);

    // Returns: NULL