我正在尝试创建一个位于博客文章标题旁边的社交媒体面板(从视口顶部约200px左右),当用户向下滚动页面时,我希望面板只有固定位置当社交面板的顶部命中视口的顶部时.我正在尝试做的一个例子是Mashable网站上的任何帖子,例如:http: //mashable.com/2011/12/05/facetones/.请注意内容面板左侧的社交媒体面板如何与页面一起滚动,直到它到达浏览器视口的顶部,然后它变得固定.任何解释如何使用纯CSS或(更好)jQuery执行此操作的教程将非常有用,因为我自己无法找到任何内容.我想我甚至都不知道如何开始寻找这样的事情.
目前我已经想出如何设置我的HTML/CSS来显示固定在内容面板旁边的页面的社交媒体面板,它工作得很好,但是我希望它能够向上滚动页面,然后它就会被修复.如上所述,点击视口的顶部,而不是像我的代码当前那样完全不滚动地固定到页面.到目前为止,这是我的代码:
HTML:
<div id="fixed">
<div id="sharebox-wrapper">
<div id="sharebox">
<div class="inner">
share
</div>
</div>
</div>
</div>
CSS:
#fixed {position:fixed;}
#sharebox-wrapper {position:relative;left:0px;top:0px;}
#sharebox {width:100px;background:#F3F3F3 url(images/sharebox-bg.png) repeat-y right 0px;border:1px solid #CFCFCF;border-right:0px;position:absolute;left:-116px;top:25px;height:400px;}
#sharebox .inner {padding:12px;}
我用javascript脚本遇到了一个奇怪的问题.
这是我的代码:
function checkDiscountCode()
{
var discountCode = $('#korcode').val();
var errorMessage = $('#errorMessage').text();
if(discountCode.length > 2)
{
$.getJSON( 'calc.php?code=' + discountCode, function( json )
{
var color = json.color;
var soort = json.soort;
var waarde = json.waarde;
var message = json.message;
if(errorMessage != message)
{
$('#error').html('<font color="' + color + '" id="errorMessage">' + message + '</font>');
}
if(message == 'OK!')
{
var outputData = soort + '-' + waarde;
console.log('outputData = ' + outputData);
return outputData;
}
});
}
} …如何用jquery在同一个div名称中添加不同的样式？
像这样的例子.
<div id="link">
<div class="one">This is first link</div>
<div class="one">This is second link</div>
<div class="one">This is third link</div>
</div>
我希望为所有文本添加不同的颜色.
第一个一个用#FFF
,第二个一个用#000
,第三个一个用#333
非常感谢这里对新手的任何帮助.我有一个简单的if/else if语句,由于某种原因只能达到第二个条件,即使满足第三个条件.我已经尝试添加其他东西到最后,尝试了几乎所有但仍然没有.我知道它不起作用,因为我添加了警报触发器,无论它从未达到第三个条件.我在这里错过了什么？我周围环顾了很多,所以如果我在这里打死马,我很抱歉,但我找不到解决办法.我应该注意到,我正在尝试更改选择下拉框的条件.谢谢!!!
我的代码:
$('#table_two select:eq(6)').change(function(e){
var allDiv = $('#table_two,#table_three,#table_four');
var parBoxOne = $('#par_one').val();
var totalOne = 1 - parBoxOne;
var totalTwo = 2 - parBoxOne;
if ($(this).val() == "made_shot"){
$(allDiv).hide();
$('#score_one').val(totalOne);
$('#score_total').val($('.score_input').val());
alert('ACE!!');
}
else if ($(this).val() == 'green', 'trees', 'fairway', 'rough', 'sand' ){
$('#score_one').val(totalOne);
$('#score_total').val($('.score_input').val());
$('#table_two').hide();
$('#butt_two').html('Show stroke');
alert('triggered two');
}
else if ($(this).val() == 'other', 'penalty_water', 'penalty_ob', 'penalty_sand' ){
$('#score_one').val(totalTwo);
$('#score_total').val($('.score_input').val());
$('#table_two').hide();
alert('triggered three');
}
});
HTML:
<div class="box">
<div><p>Hello World</p></div>
</div>
<input type="button" id="add" value="Add" />
jQuery的:
$(document).ready(function(){
var count = 0;
$("#add").click(function(){
$(".box").append('<div id="'+count+'"><button type="button" class="close">× </button></div>');
count++;
$(".close").click(function(){
alert("hi");
});
});
});
当我点击添加按钮后,一个接一个地附加.当我单击类ID为0的类关闭的第一个按钮时,警告框将显示先前添加按钮的次数.
我的意思是如果我追加5个按钮,当我按下close(id = 0)时,警告框出现5次.
如果id = 1,4次
id = 2,3次
id = 3,2次
id = 4,1次
如果我在JQuery add函数之外放置JQuery close click函数,那么警报框根本不会出现.
每当我按任何关闭按钮时,如何让警报框只出现一次？
希望我以别人能理解的方式解释它,如果不是我很抱歉.任何帮助将不胜感激!
如果我这样做的话
var x="the dog then the cat ran";
var y=x.replace(/the/g,"");
然后你会相等
"dog n cat ran"
从那时起删除(或替换)字母"the"之后,n将保留.
我该如何防止这种情况发生？
我正在制作一个 javascript 库，并想制作一个自定义变量语法，所以不要像 php 那样使用 var 使用 $。需要明确的是，我不想使用 PHP。我正在制作一个供公众使用的特殊图书馆。
老实说，我不在乎你是否给我一个函数，我只是真的需要使用 $ 而不是 var 请我真的需要这个。
var x = 10; // Normal JavaScript variable
$x = 10; // Custom Variable Syntax which is what I would like
我正在编写一个客户端应用程序,鉴于这些成分将为您提供鸡尾酒配方.输入后,单击按钮将搜索成分.如果输入"all",您将被重定向到包含所有配方的页面.
我刚刚开始这么说,所有功能都是我做过的唯一部分.它工作正常.为了练习,当你输入"all"时它会重定向到facebook的url.无处不在(没有新的变化)它开始给我一个错误,它没有读取输入,它正在读取它为null.
相关的HTML:
<input type="text" id="alcohol">
<h4 class="btn" type="submit" onclick="whole()"> Search</h4>
JS:
var input = document.getElementById('alcohol').value;
function whole() {
if (input == "all") {
window.location = "http://www.facebook.com";
};
};
这里发生了什么事？它为什么停止工作？
我创建了一个获得2个参数的命名函数.第一个参数是没有表达式的图像文件名(str).第二个参数是像素的图像高度(num).我想在html文档中显示给定高度的图像.
例如:
<div><script>showImage('test', 100);</script></div>
我相信函数不是正确的方式.如何正确调用函数来显示任何div内的图像.
function showImage (imgfilename, imgheight) {
var img = '';
imgheight = typeof(imgheight) !== "undefined" ? imgheight : "64";
imgheight = 64 + (imgheight - 64);
img += '<img src="https://i.imgsafe.org/'+imgfilename+'.png" width="64px" height="'+imgheight+'px">';
//console.log (img);
return img;
} body {background-color: #ccc;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="img1"><script>showImage('7a622f4233', 68);</script></div>
<div id="img2"><script>showImage('7a622f4233', 80);</script></div>
<div id="img3"><script>showImage('7a5fa34d31', 60);</script></div>我正在尝试为循环练习做一些操作,并使用click事件将蓝色样式应用于所有"listing"类.除此之外,我还想在每个循环中打印"i"的值.任何人都可以指出代码中缺少的东西.谢谢,这是我的代码:
function changeClass(){
for (i=0;i<3;i++) {
var list = document.getElementsByClassName("listing")[i];
list.style.color = "blue";
var values = document.getElementsByClassName("value");
document.write(i);
}
}
document.getElementById("change").addEventListener("click", changeClass); <ul id="groupList">
<li class="listing">First</li>
<li class="listing">First</li>
<li class="listing">First</li>
<li class="value"></li>
</ul>
<button id="change">change listing</button>