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
Related
I am facing issue while developing one of My jQuery task. As....
I have a responsive Image(Working on all mobile device resolution), My Task is when I click on that image, I want to get a image position on which the image clicked.. I tried to complete this task using Page X and page Y behaviour of jQuery.but it gives the different value when I changed the resolution of screen.
Please help me and give me suggestion or provide a sample how can I do this. I guess position should be same even if the resolution would be different.
I'm not sure understand your issue but i think you want to do this
If i wrong please share your codes and more describe your isssue
$(function (){
'use strict';
$('.img1').click(function (){
$('.img2').css({
'z-index': 3
});
});
$('.img2').click(function (){
$(this).css({
'z-index': 1
});
});
});
.box {
position: relative;
width: 10em;
height: 10em;
}
.box .img1,
.box .img2 {
position: absolute;
width: 10em;
height: 10em;
-webkit-background-size: cover;
background-size: cover;
}
.img1 {
background-image: url(https://lh3.googleusercontent.com/-e8VRnumXmR0/AAAAAAAAAAI/AAAAAAAAAUQ/uk_p3w15PNs/photo.jpg?sz=128);
z-index: 2;
}
.img2 {
background-image: url(https://www.gravatar.com/avatar/5768f7edd993f3f1a5363f6d786d5ace?s=128);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<div class="img1"></div>
<div class="img2"></div>
</div>
</body>
</html>
You can simply change the CSS z-index by jquery:
$(target).css({
'z-index': 2
});
I am trying to make a background slide show effect. What i have managed to do is to make this slideshow but without any beautifully effect like sliding or other image appearing effect. Can someone help with some advice in creating the effect of sliding or any other more beautiful effects.
Here what I managed to do:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class='bannerbg'>
<div class='slider'></div>
</div>
</body>
</html>
CSS CODE
body{
margin: 0px;
margin-left: 0px;
}
.bannerbg{
background-size: cover;
position: relative;
height: 500px;
}
.bannerbg img{
width: 100%;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
position: relative;
margin: 0 auto;
top: -370px;
}
JavaScript CODE
$(document).ready(init)
images=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg"
);
function init(){
$('.bannerbg').prepend("<img id='principala' src='"+images[1]+"' />")
}
function left() // functia data schimba cu locul indexul din array la stinga cu 1 unitate
{
images.push(images.shift());
}
function change(){
p=document.querySelector("#principala");
p.src=images[1];
}
setInterval("left(); change()",1000);
I slide the elements by using the animate function and by setting the css property and animation time in miliseconds for that element, like that:
jQuery( "#slid_img1" ).animate({marginLeft: 0}, 250);
It slides very nicely then.
So, you could adapt your code to use the animate function to make the slide animate.
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?
Okay, so this bug has cost me quite a bit of time and embarrassment. It seems that any style variable with a - in it's name can't be modified by javascript.
As seen here:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class Test</title>
<meta charset="utf-8" />
<style>
body { text-align: center; background-color: #ffffff;}
#box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;}
</style>
<script type="text/javascript">
var box = 0;
</script>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
box = document.getElementById('box');
box.style.background-color = "#0000ff";
</script>
</body>
</html>
The box in said example will just remain red.
So how do I change a style variable with a - in it's name?
backgroundColor, camelCase.
background-color literally means "the value in background, minus the value in color"
You want backgroundColor
More info...