嗨,我正在尝试在简单的JS中制作工具提示,在悬停时显示.就像stackoverflow中悬停在配置文件名称上的那个一样,显示了一个div.
我尝试使用hover,div并添加onmouseover为用户几秒钟将鼠标移到工具提示内容上.但它并没有按照我的想法运作.
我真的很喜欢纯粹的js而不是使用任何库.有人可以帮我吗？
这就是我在PURE JS中所做的
HTML
<div class = "name" onmouseover="show()" onmouseout="hide()">
NAME
<div class = "tooltip">
PROFILE DETAILS
</div>
</div>
<div class = "name" onmouseover="show()" onmouseout="hide()">
NAME 2
<div class = "tooltip" >
PROFILE DETAILS 2
</div>
</div>
<div class = "name" onmouseover="show()" onmouseout="hide()">
NAME 3
<div class = "tooltip" >
PROFILE DETAILS 3
</div>
</div>
CSS
.name{
float:left;
margin:100px;
border:1px solid black;
}
.tooltip{
position:absolute;
margin:5px;
width:200px;
height:100px;
border:1px solid black;
display:none; …我想将元素的div高度设置为浏览器的innerHeight.我不希望在这里发生css或jQuery.它必须通过窗口大小调整动态地改变它的高度.所以我制作了这个剧本,它不像我想的那样工作.
这是我的代码:
window.onload=
window.onresize=function(){
var left = document.getElementById("left");
var height = window.innerHeight;
left.style.height = 'height +('px')';
}
有人可以纠正我的代码并使其工作.任何帮助将不胜感激.
谢谢.
您可以添加height:500px;到左侧元素.看看我想要什么.但我需要适应浏览器的高度.
解决了
//<![CDATA[
function resize()
{
var heights = window.innerHeight;
document.getElementById("left").style.height = heights -50 + "px";
}
resize();
window.onresize = function() {
resize();
};
//]]>
感谢Thirumalai murugan的回答.
这个问题对许多人来说可能是愚蠢的.我在纯JS中滚动后制作粘性div.有些人可能建议在jQuery中使用它,但我对它不感兴趣.我需要的是类似的东西这个.div在这里一直移动到顶部,但我需要它有60px顶部.我制作了一个剧本,但它不起作用.谁能帮我解决这个问题？
这是我的代码.
HTML
<div id="left"></div>
<div id="right"></div>
CSS
#left{
float:left;
width:100px;
height:200px;
background:yellow;
}
#right{
float:right;
width:100px;
height:1000px;
background:red;
margin-top:200px;
}
JS
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
这就是我需要实现的目标.左侧div必须具有margin-top:200px和position:absolute页面加载.当用户滚动页面时,左侧div应滚动,当它到达top:60px;其位置时,margin-top应更改为position:fixed和margin-top:60px;
这是FIDDLE
我有很多服务器输入复选框.我给了第一个复选框id all.默认情况下,它将被检查.当用户选中其他复选框时,all将取消选中带有id的复选框.如果all选中,则将取消选中其他复选框.为了实现这一点,我制作了代码但没有发生任何事情.
这是我尝试过的.
<form>
<input type="checkbox" id="all" value="all" name="all" onChange="check()" checked/>ALL <br/>
<input type="checkbox" id="servers" value="xampp" name="server[]" onChange="check()" />XAMPP <br/>
<input type="checkbox" id="servers" value="wamp" name="server[]" onChange="check()" />WAMP <br/>
<input type="checkbox" id="servers" value="mamp" name="server[]" onChange="check()" />MAMP <br/>
<input type="checkbox" id="servers" value="amp" name="server[]" onChange="check()" />AMP <br/>
</form>
function check(){
var all = document.getElementById("all"),
group = document.getElementById("servers");
if(all.checked == true){
group.checked == false;
}elseif(group.checked == true){
all.checked == false;
}
}
我想我的代码一样的工作本.
我不想出于某些原因使用jQuery.所以我需要我的代码在纯JS中.
任何帮助将不胜感激.
我正在学习使用基于mysqli的视频教程制作网站.我开始知道使用预准备语句更安全,我正在尝试创建一个登录系统.这是我到目前为止所做的.
此代码可帮助我完全登录成功.
<form action ="" method="post">
User Name:<br/>
<input type='text' name='username' />
<br/><br/>
Password:<br/>
<input type='password' name='password' />
<br/><br/>
<input type='submit' name='submit' value='login'>
</form>
<?php
if(isset($_POST['submit'])){
$username = $_POST['username'];
$password = md5($_POST['password']);
$stmt = $con->prepare("SELECT username, password FROM users WHERE username=? AND password=? LIMIT 1");
$stmt->bind_param('ss', $username, $password);
$stmt->execute();
$stmt->bind_result($username, $password);
$stmt->store_result();
if($stmt->num_rows == 1) //To check if the row exists
{
while($stmt->fetch()) //fetching the contents of the row
{$_SESSION['Logged'] = 1;
$_SESSION['username'] = $username;
echo 'Success!';
exit();
}
} …