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?
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 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 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>
I have an image in the front and a text at the back. I want to make the text selectable while the image still being in the front. How can I achieve this ?
Link to jsfiddle is http://jsfiddle.net/G5BeU/
Sample code
<html><head><style type="text/css">#media print { .gmnoprint { display:none }}#media screen { .gmnoscreen { display:none }}</style>
<title>Google Maps JavaScript API v3 Example: Custom StreetView</title>
<meta charset="utf-8">
<style>
#parent-street-view{position:relative}
#map_canvas{position:absolute !important;width: 500px; height: 400px; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);z-index:0}
#parent-street-view .overlay-pollution{width: 500px; height: 400px;position:absolute;z-index:100; }
</style>
</head>
<body>
<div id="parent-street-view">
<div id="map_canvas" >This is supposed to be visible and selectable</div>
<img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
</div>
<!--<canvas id="canvas" width="500px" height="500px" style="position:absolute;top:500px;"></canvas>-->
</body></html>
Simple, set the pointer-events CSS property of the image to none. This will allow you to select the text behind.
You might also want to lower the opacity on the image, so you can partially see the text.
#parent-street-view .overlay-pollution {
width: 500px;
height: 400px;
position: absolute;
z-index: 100;
opacity: 0.5;
pointer-events:none;
}
Here is a demonstration: http://jsfiddle.net/G5BeU/2/
Use this code.
<html><head><style type="text/css">#media print { .gmnoprint { display:none }}#media screen { .gmnoscreen { display:none }}</style>
<title>Google Maps JavaScript API v3 Example: Custom StreetView</title>
<meta charset="utf-8">
<style>
#parent-street-view{position:relative}
#map_canvas{position:absolute !important;width: 500px; height: 400px; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);z-index:0}
#parent-street-view .overlay-pollution{width: 500px; height: 400px;position:absolute;z-index:100; }
.overlay-pollution:hover + #map_canvas , #map_canvas:hover
{
z-index: 1000;
}
</style>
</head>
<body>
<div id="parent-street-view">
<img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
<div id="map_canvas" >This is supposed to be visible and selectable</div>
</div>
<!--<canvas id="canvas" width="500px" height="500px" style="position:absolute;top:500px;"></canvas>-->
</body></html>
Note :
Style added
.overlay-pollution:hover + #map_canvas , #map_canvas:hover
{
z-index: 1000;
}
HTML code tag change places
<img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
<div id="map_canvas" >This is supposed to be visible and selectable</div>
See this example at http://jsfiddle.net/Ct2X8/1
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