I have tried to make a div (id="hoe") that sticks to the top of the from the moment the user scrolls. before scrolling, the div is located under the header. Unfortunately, i can't get it to work after lot's of trying. Any tips and help on what I do wrong is greatly appreciated. Here is my code in a test version:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<style type="text/css">
#header
{
background-color: blue;
width: 100%;
height: 125px;
}
#hoe
{
background-color: red;
height: 180px;
width: 100%;
z-index: 9999;
top: 125;
position: fixed;
}
#een
{
margin-top: 180px;
background-color: green;
height: 700px;
width: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
if ($('body').hasClass('lock')) {
bar_pos = $('#hoe').offset();
if (bar_pos.top >= (125+180)) {
$('#hoe').css('top', 0);
//document.getElementById("hoe").style.top="0"; also tried this
}
});
});
</script>
</head>
<body class="lock">
<div id="header">
</div>
<div id="hoe">
</div>
<div id="een">
</div>
</body>
</html>
I've modified your code and created a fiddle here: http://jsfiddle.net/UcX4A/
There was a surplus bracket in your javascript
$(document).ready(function() {
if ($('body').hasClass('lock')) {
bar_pos = $('#hoe').offset();
if (bar_pos.top >= (125+180)) {
$('#hoe').css('top', 0);
//document.getElementById("hoe").style.top="0"; also tried this
}
}); <<< Surplus bracket
});
Also, the "scroll" event wasn't attached to anything, so wasn't being evaluated. I changed your:
$(document).ready(function() {
To a:
$(window).scroll(function() {
See this: http://jsfiddle.net/WTnEd/
Use $(window).scroll()
$(document).ready(function () {
var bar_pos;
$(window).scroll(function (e) {
if ($('body').hasClass('lock')) {
bar_pos = $('#hoe').offset();
if (bar_pos.top >= (125 + 180)) {
$('#hoe').css('top', 0);
}
else{
$('#hoe').css('top', 125);
}
};
});
});
As I understand the question, this is an alternate way to stick div to top of page when start scrolling:
<div id="header" style="position:fixed; top:0px; left:0px; right:0px;
height:100px; z-index:2; background:blue;"></div>
<div id="hoe" style="position:fixed; top:100px; left:0px; right:0px;
height:100px; z-index:2; background:red;"></div>
<div id="een" style="position:absolute; top:200px; left:0px; right:0px;
height:100px; z-index:1;">
<p>dummy text</p>
<p>dummy text</p>
<p>dummy text</p>
</div>
Related
So HERE is the code. I simple want to change the color of the h1 heading when the scroll is 1000px from top. I would like to use purely javascript for this purpose.Please try and ignore how poorly the code has been written. Any suggestion would be more than welcome. Thank you for you time.
<html> <head> <title> scroll </title>
<!-- CSS !-->
<style> .redbox {
background-color: red;
position: absolute;
top: 10px;
height: 90px;
width: 100px;
} .reveal {
position: fixed;
top:450px;
transition: width 2s;
display: block;
} </style>
</head>
<!-- HTML !-->
<body>
<div class='redbox' id='red'> , </div>
<h1 class='reveal' id='demo'> The comes up on 1000 scroll! </h1>
<h1 style='position: absolute;top: 1900px;'> END </h1>
<!-- JS !-->
<script>
var top = window.pageYOffset || document.documentElement.scrollTop
if (top == 1000) {
document.getElementById('demo').style.color = 'red'}
</script> </body> </html>
You could check the current scroll offset using an event handler:
document.body.addEventListener('scroll', function() {
if(window.scrollY > 499) {
document.getElementById('myDiv').classList.add('appear'); // or whatever...
}
});
I have a html file which positions one image on top of another. However I wish to that the superimposed image can be dragged around by the user, confined within the boundaries of the underlying image. Anyone may be kind enough to provide suggestions?
<html>
<head>
<style type="text/css">
#about {
z-index:1;
position:absolute;
top:10%;
left:3%;
opacity: 0.6;
}
#main-content-image {
height:100%;
position:relative;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(function () {
var img = new Image();
$(img).load(function () {
$('#main-content-image').append(this);
}).attr('src', 'foo.jpg');
});
});
</script>
</head>
<body>
<div id="main-content-image">
<img id="about" src='bar.jpg'>
</div>
</body>
</html>
You just need to use the function draggable from jQuery UI.
$(document).ready(function () {
$(function () {
$("#draggable").draggable();
});
});
Here is a working example:
https://jsfiddle.net/rv8kcjqd/
You can use the jQueryUI Draggable Widget which allows you define a containment setting, which will not allow moving outside of the bounding box.
Here's a small example:
$(function() {
$("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false });
});
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
<p>I'm contained within the box</p>
</div>
</div>
I have managed to accomplish a delay and then translate on my image - then I wanted to rotate it a little as it moved, so I found a way to rotate it from here https://code.google.com/p/jqueryrotate/
So I managed to apply it but the outcome is that the rotation ignores the delay and the translate I've tried a few ways to combine the functions together but not sure how the best way to do it is.
I would just use css transforms but ideally I need it to work in IE7.
Is there a more simple way I can try?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.hold{
width:250px;
height: 400px;
margin: 0 auto;
background: #eee;
position: relative;
}
.pos{
position: absolute;
}
.ccard{
width:250px;
height: 400px;
background: red;
}
.rcard{
width:250px;
height: 400px;
background: blue;
left:0px;
}
.lcard{
width:250px;
height: 400px;
background: green;
left:0px;
}
</style>
<body>
<div class="hold">
<div class="lcard pos" style="left:0px;">
</div>
<div class="rcard pos">
</div>
<div class="ccard pos">
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<!-- Jumping Animation -->
<script type="text/javascript">
$(function(){
$('.lcard').delay(2600).animate({'top': '-12px', 'left': '100px'}, 800,'easeOutQuart');
$('.rcard').delay(2600).animate({'top': '-12px', 'left': '-100px'}, 800,'easeOutQuart');
});
var rotation = function (){
$(".lcard").rotate({
angle:0,
animateTo:20,
});
}
rotation();
</script>
</html>
Try using setTimeout(). It's used to call a method after a specified time. Example suitable for this case.
setTimeout(function() {
$(".lcard").rotate({
angle:0,
animateTo:20,
});
}, 2600);
More information on setTimeout() here https://developer.mozilla.org/en/docs/Web/API/window.setTimeout
I'm trying to change the cursor to a custom image with a sound effect. My current problem is the cursor disappears but the replacement image does not show up, and the sound clip is not playing. What did I do wrong?
<head>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1152px;
height:864px;
z-index:2;
left:25px;
top:25px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function setCursor() {
oBoxInner.innerText=sInput.value;
oBoxInner.style.display='block';
oBox.style.cursor="crosshair.gif";
}
</SCRIPT>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML="<embed src=\""+gunshot.mp3+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body bgcolor="#000000">
<div id="apDiv1">
<span id="gunShot" onclick="playSound('gunshot.mp3');">
<a href="3.html" onmouseover="setCursor" onmouseclick="playSound('gunshot.mp3')"> <img src="score.gif" width="1152" height="864" alt="yep" />
</a></span>
</div>
</body>
Thank you for your help.
EDIT:
I'm using dreamweaver with both PC and Mac for multiple browser compatibility, mainly IE, Firefox, Chrome, and Safari. I was thinking the .gif might be part of the issue instead of .cur. The other cursor code I'm using is this:
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#test-area').mouseout(function(){
$('#mycursor').hide();
return false;
});
$('#test-area').mouseenter(function(){
$('#mycursor').show();
return false;
});
$('#test-area').mousemove(function(e){
$('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
});
});
</script>
<style type="text/css">
#test-area {
height: 1152px;
width:864px;
border: 3px dashed #CCCCCC;
background: #FFFFFF;
padding: 20px;
cursor: none;
top: 25px;
left: 25px;
z-index:1;
}
#mycursor {
cursor: none;
width: 100px;
height: 100px;
background: url(crosshairs.cur);
repeat: no-repeat;
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 10000;
}
</style>
</head>
<body bgcolor="#000000">
<div id="test-area">
Move mouse over this area.
</div>
<div id="mycursor">
</div>
</body>
you have a few errors in the code
oBox is not defined. oBox.style.cursor="crosshair.gif";
The cursor is best to be .cur
the embed tag i only think supports MIDI, and your referencing gunshot.mp3 in your oncick and trying to call reffrence to \""+gunshot.mp3+"\" in the src, should be soundfile
and you have document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML TWICE?
What browsers are you wanting to support the sound? Netscape, IE6, Chrome.. ect
I want to do the same slideshow like in this site: http://groupme.com/iphone
I would like to do exectly the same with an iphone image and 5 different images inside of it that change with the same effects.
Some example code will be helpful or a jquery library as well.
Thanks.
How about this? I can refine/add dots if you want.
<html>
<head>
<style>
.mask {
position: absolute;
left: 31;
top: 122;
width: 239;
height: 342;
overflow: hidden;
}
.canvas {
position: relative;
width: 2195;
height: 342;
}
.page {
width: 239;
height: 342;
float:left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $canvas
$(function(){
$canvas=$("div.canvas")
setInterval(scroll, 5000);
});
function scroll(){
if ($canvas.position().left!=-956){
$canvas.animate({left: "-=239"});
}else{
$canvas.animate({left: 0});
}
}
</script>
</head>
<body>
<img src="http://groupme.com/images/apps/iphone.png">
<div class="mask">
<div class="canvas">
<div class="page">a</div>
<div class="page">b</div>
<div class="page">c</div>
<div class="page">d</div>
<div class="page">e</div>
</div>
</div>
</body>
</html>
What's wrong with viewing their source?