是否可以修复元素相对于父div而不是浏览器窗口的位置？
说我有:
<div id="pagecontainer">
<div id="linkspage">
<div class="sidelinks">
<a href="#page1" class="link">Link 1</a>
<p>
<a href="#page2" class="link">Link 2</a>
<p>
<a href="#page3" class="link">Link 3</a>
<p>
<a href="#page4" class="link">Link 4</a>
<p>
</div>
<div class="linkscontent">
content of links page
</div>
</div>
//OTHER PAGES
</div>
基本上是一个包含两个部分的页面,左侧部分是链接列表,而右侧部分是页面的内容.我希望内容可滚动,但链接保持固定到父#pagecontainer,这样当#pagecontainer滚动时它们不会滚动,但是当我滚动整个浏览器窗口时它们会移动.
我已经尝试过JQuery"fixto"插件:https://github.com/bbarakaci/fixto.但我不能使用那个,因为我的页面淡入/淡出,当父元素(#pagecontainer)的alpha为0时,脚本会出错,它认为父元素已经消失,无处可修复.
谢谢.
有谁知道为什么这个动画很好:
function setContainerHeight() {
$(".pagecontainer").animate({
height: '700px'
}, 500);
}
即一个固定的高度,但这根本没有动画？
function setContainerHeight() {
$(".pagecontainer").animate({
height: 'auto'
}, 500);
}
它仍然调整为自动,但没有动画,只是快照到它.
我的代码:
JS:
<script>
function setContainerHeight() {
$(".pagecontainer").animate({
height: 'auto'
}, 500);
}
$('.link').on('click', function(e){
$('.pagecontainer>div').fadeOut(0);
setContainerHeight();
$(this.getAttribute("href")).fadeIn();
});
</script>
CSS:
.pagecontainer {
min-height:450px;
width:80%;
min-width:800px;
padding:50px 0;
margin: 0 auto;
}
.pagecontainer>div{
display: none; /*wait until page needs to be faded in*/
padding-left:50px;
padding-right:50px;
position:relative;
}
HTML:
<div class="pagecontainer">
<a href="#page1" class="link">page 1</a>
<a href="#page2" class="link">page 2</a>
<a href="#page3" …是否可以检测html5音频播放器中的播放按钮何时被点击？例如：
<audio controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
....
....
$('playbutton').on('click', function(e){
//some functions
});
我有一堆锚链接,我使用javascript淡入不同的div来模仿页面.
<script type="text/javascript">
$(document).ready(function() {
showHomePage();
$('.homebutton').click(function() {
displayNone();
showWindow("homepage");
} );
$('.aboutbutton').click(function() {
displayNone();
showWindow("aboutpage");
} );
$('.gallerybutton').click(function() {
displayNone();
showWindow("gallerypage");
} );
$('.musicbutton').click(function() {
displayNone();
showWindow("musicpage");
} );
function displayNone() {
$('.pagecontainer>div').fadeOut(0);
}
function showHomePage() {
$('.pagecontainer').fadeIn();
$('#homepage').fadeIn();
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
<body>
....
....
<a href="#homepage" class="homebutton">Home</a>
<a href="#aboutpage" class="aboutbutton">About</a>
<a href="#gallerypage" class="gallerybutton">Gallery</a>
<a href="#musicpage" class="musicbutton">Music</a>
....
....
<div id="homepage">Home page</div>
<div id="aboutpage">About page</div>
<div id="gallerypage">Gallery page</div>
<div id="musicpage">Music page</div>
....
</body> …这让我很头疼......
我试图在左边有一个固定高度/宽度的图像,在右边有一个文本,当然在同一行.整个容器的动态宽度为视口的90%,这意味着右侧的文本也将具有动态宽度(90% - 图像宽度),因为左侧的图像是固定的.文本需要左对齐,因此"float:right"将不起作用.我已经尝试了无数浮子,对齐,表格单元等的组合,没有任何作用......我最接近的是它们在同一条线上,但文本被强制对齐到右边.
我的意思是:http://i.imgur.com/QRDhLro.png
#container {
overflow:hidden;
position:relative;
width:90%;
min-width:800px;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.leftimage {
width:600px;
height:100px;
}
.righttext {
float:right;
}
...
...
<div id="container">
<div class="righttext">lorem ipsum lorem ipsum <br> lorem ipsum lorem ipsum </div>
<div class="leftimage"><img src="../pictures/test.png"></div>
</div>
有谁知道如何使 CSS 链接悬停属性适用于未链接到另一个 html 页面或锚点的链接？
例如这有效：
<a href="page1.html">Page1</a>
<a href="#page9">Link</a>
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
但是当我将链接更改为不是锚点或 html 文件的链接时，假设是一个 mailto：
<a href='mailto:bla@bla.com'>Send email</a>
当我将鼠标悬停在链接上时，它不再改变颜色。为什么是这样？
以下代码有效（弹出警报）：
var sound = document.getElementById("music");
sound.addEventListener("play", function () {
alert("playing");
});
....
....
<audio controls id="music">
<source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/>
</audio>
但为什么这不起作用呢？
var sound = document.getElementsByClassName("music");
sound.addEventListener("play", function () {
alert("playing");
});
....
....
<audio controls class="music">
<source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/>
</audio>
如果 getElementsByClassName 返回与 getElementById 不同的内容，这也不起作用：
('.sound').addEventListener("play", function () {
alert("playing");
});
....
....
<audio controls class="music">
<source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/>
</audio>
我所更改的只是 ID，而不是 ID，而是给了它一个类（因为我有此音频播放器的多个实例），并使用 getElementsByClassName 而不是 getElementById。我认为 getElementsByClassName 现在与所有浏览器兼容？我正在使用最新的火狐浏览器。