I have two images I want to be stuck together for lack of a better term. As the image on the left animates off the screen, the right image just sits there not moving. I have tried to use position: relative; in the CSS for the right-hand image and even tried to animate it by adding to the javascript (see comments in the js file) but it didn't change anything.
The HTML
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="slidetest01.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script src="./javascripts/picslider01a.js"></script>
</HEAD>
<BODY onload="picrotate()">
<div id="slideshow"><img id="picshown" src="./pix/mtn01.jpg">
<img id="pichidden" src="./pix/mtn02.jpg"></div>
</BODY>
</HTML>
The CSS
#slideshow {
position: relative;
left:0px;
top:0px;
width: 1200px;
float: left;
}
#picshown {
position: relative;
float: left;
}
#pichidden {
float: left;
}
The javascript
function picrotate () {
var picts = new Array();
picts[0] = "./pix/mtn01.jpg";
picts[1] = "./pix/mtn02.jpg";
picts[2] = "./pix/mtn03.jpg";
picts[3] = "./pix/mtn04.jpg";
picts[4] = "./pix/mtn05.jpg";
var count = 2;
function rotator() {
$("#picshown").animate({left: "-600px"});
//Tried adding $("#pichidden").animate({left: "0px"}); here but did not work
//Need to delay since the rest triggers immediately after transition starts.
setTimeout(function () { //1 second should be enough time for the slide.
count = (count+1)%5;
var discard = document.getElementById("picshown"); //removes old picture
discard.parentNode.removeChild(discard);
document.getElementById("pichidden").setAttribute("id", "picshown"); //makes current picture the active one
ith = document.createElement("img"); //create a new image
ith.id = "pichidden";
ith.src = picts[count];
$("#slideshow").append(ith);//Append it to the slideshow
}, 1000);
} //end rotator
setInterval(rotator, 2000);
} // end picrotate
Related
I have a few URLs that each show the status of some industrial equipment. I'm trying to create an HTML/Javascript solution that, on load, cycles through each of the websites at a set interval, with two buttons to stop the cycle (to take a closer look at something) and restart the cycle (either from the beginning or where it left off, I'm not picky). I'm REALLY rusty, but I got what I think is a good start. Unfortunately, it doesn't work. Here are the CSS and HTML:
html,
body {
height: 100vh;
width: 100vw;
}
#btStart {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 50px;
}
#btStop {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 120px;
}
#infoFrame {
width: 100%;
height: 100%;
}
.holder {
width: 100%;
height: 100%;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)";>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
Before I added the buttons it would load, then 5 seconds later it would cycle correctly, and so on. Now it only shows the buttons. Looking at the requests, I believe what's happening in my CSS and structure is trash, and it's loading the appropriate URL, but not displaying. I should add, prior to the buttons I only had the iframe with the script in it as a proof of concept. I div'd it, added the stylesheet, and added the buttons, and now here we are.
This may be a rookie mistake, or something more complicated. I haven't done development in a long time, and I'm just trying to solve a little problem at work. If you could spare a minute, I'd be happy to know how to fix this, and also any feedback on what I could be doing better. I'd love to get back into doing more of this, so I'm interested to learn anything the community can share. I've searched the site and the internet, and I've found a couple of related solutions but nothing for this in particular.
Thanks!
EDIT:
In case it helps, below is the HTML before the buttons and stylesheet, which worked (it rotated between webpages every 7 seconds):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Info Cycle</title>
</head>
<body>
<iframe id="frame" src=""
style="
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
"></iframe>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('frame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 7000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</body>
</html>
The iframe style was something I found in an old file I'd written (probably copied and pasted from Stack Overflow to just get a thing to work).
The problem here is having the script inside the iframe. If you move your script out of the iframe and put it under body or head then it will work.
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1) ? -1 : count;
return url;
}
function cycleTimer() {
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
u.innerHTML = '';
i.src = nextUrl();
i.onload = function () {
u.innerHTML = i.src;
}
}
</script>
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)" ;>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
How to add a transition effect when the image changes?
When the array loops through images, how do I add a transition so that its more smooth.
var i = 0;
var images = [];
var time = 3000;
images[0] = 'test.jpg';
images[1] = 'test1.jpg';
images[2] = 'test2.jpg';
function changeImg() {
document.slide.src = images[i];
if(i < images.length - 1) {
i++
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
My easiest way to do it is putting all the images into 1 wrapper.
Then use loop to set active image by element index.
Something like this
<style>
.wrapper { position: relative; }
.wrapper img {
opacity: 0;
visibility: hidden;
transition: 0.5s opacity;
position: absolute;
}
.wrapper img.active {
opacity: 1;
visibility: visible;
position: relative;
}
</style>
<div class="wrapper">
<img src={images[0]} />
<img src={images[1]} />
<img src={images[2]} />
<img src={images[3]} />
</div>
What you are asking for is called cross-fading, this is a possible duplicate of How can I smoothly transition CSS background images?
But a more detailed guide that worked for me in the past can be found here.
http://css3.bradshawenterprises.com/cfimg/
Keep in mind that you might have to take browser compatibility into consideration if you go the CSS route. Properties such as the -webkit CSS extension is just one of many.
One of the easiest ways I found is using w3.css.
In your html code add these lines.
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<img class="w3-animate-fading" name="slide" src="" width="800" />
</body>
</html>
The class parameter in your image tag will call the predefined css animations deom w3.css file.
There are many more options such as slide right, slide left etc. You can view them all here
Codepen Demo
I'm using JQuery to have my .wrapper div snap back to its original margin-top after being moved to margin-top. The original margin-top is dependent on browser height. I'm trying to do this by storing the original margin-top value into a variable, and using it for JQuery animate when I want to .wrapper div to snap back later on.
$(document).ready(function() {
//Adjust .wrapper Margin-top to adjust position to 1/4 of Window Broswer Height
var marginWindowSpace = ($(window).height()) / 4;
$(".wrapper").css("margin-top", marginWindowSpace);
var originalMargin = $(".wrapper").css("margin-top").toString();
});
$(".title").click(function() {
$("#results-container").empty();
$(".wrapper").animate({
'margin-top': originalMargin
}, 200);
$(".title-tag, .or, .random-article, .random-article-underline").fadeIn(500);
$("footer").addClass("footer-pos1");
});
QUESTION: Why wont my the animate margin-top accept my variable (where the original margin-top value is stored), even when converted to string? I don't want to use a static value as my margin-top.
If you want to see the app code, it's here. http://codepen.io/myleschuahiock/pen/zqvvNZ
Any help is appreciated! Thanks!
EDIT: I changed the click function to $('.go-back'), but the animate for magin-top should still be the same
Move the whole $(".title").click(function(){}) into the $(document).ready(function(){})
The problem exists because at the time of the initialisation of the $(".title").click(function(){}) originalMargin is not set yet because the document is not ready yet.
Do like this. there are some errors in your animate part.margin-top should be correct as marginTop and your string should convert as int and do like this.I implement as an example.hope this will help to you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.testing{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
div.two{
width: 200px;
height: 200px;
background-color: green;
position:
}
</style>
<body>
<div class="testing"></div>
<br><br>
<h3 class="clk">Click me!</h3>
<div class="two"></div>
<script type="text/javascript">
$(document).ready(function(){
var one = $(".testing").css("margin-top").toString();
var vaL = parseInt(one,10);
$(".clk").click(function(){
$(".two").animate({'marginTop':vaL+'px'},1000);
});
});
</script>
</body>
</html>
note :
var one = $(".testing").css("margin-top").toString();
int this part get the margin-top value as a string.
var vaL = parseInt(one,10);
convert it to an integer.
then the animate part
$(".two").animate({'marginTop':vaL+'px'},1000);
I'm trying to do something with iframes and am struggling a little bit at the moment. Basically, I have a script that generates a grid of squares (image below) and I want to make it so that when I click on a square, I display something in a different iframe.
So for instance, say I had frame 1 (which contains the grid) and frame 2 (this is the "display" frame). If I click the top left square, then I want to display "index(0,0)" in the display frame. If I click the (1, 1) square, then I want to display "index(1,1)" and so on.
I already know how to do this within the same frame (ie I can display "index(0,0)" within frame 1 if I click on a square in frame 1), but I am just confused on how to do this in a separate frame. I've tried quite a few things but nothing seems to be working.
I will include all of my code below as well as a picture for your reference. Any help is greatly appreciated!
Javascript:
// I know this isnt good coding practice, but I was getting desperate
// trying things xD
var currentDisplay = "display";
function changeSquare() {
var image = document.getElementById(this.id);
// If image is currently green square, change to red, and vice versa
if (image.src.match("http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png")) {
image.src = "http://www.clker.com/cliparts/1/J/s/o/7/y/red-square-button-md.png";
} else {
image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
}
currentDisplay = this.id;
};
function printInfo() {
document.write(currentDisplay);
}
// Creates a grid of dimensions width by height
function makeGrid(height, width) {
// Loop over height and width to create black square objects with
// buttons in middle
for (i = 0; i < height; i++) {
for (j = 0; j < width; j++) {
// Outer div is black square
var div = document.createElement("div");
div.className = "square";
div.id = ("div").concat(i,",", j);
var innerDiv0 = document.createElement("div");
innerDiv0.className = "content";
div.id = ("innerDiv0").concat(i,",", j);
div.appendChild(innerDiv0);
// InnerDiv1 & 2 are table structures (necessary for alignment)
var innerDiv1 = document.createElement("div");
innerDiv1.className = "table";
div.id = ("innerDiv1").concat(i,",", j);
innerDiv0.appendChild(innerDiv1);
var innerDiv2 = document.createElement("div");
innerDiv2.className = "table-cell";
div.id = ("innerDiv2").concat(i,",", j);
innerDiv1.appendChild(innerDiv2);
// Add green square image
var image = document.createElement("img");
image.id = ("image").concat(i,",", j);
image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
image.className = "rs";
innerDiv2.appendChild(image);
document.body.appendChild(div);
// Add onclick feature
image.onclick = changeSquare;
}
}
};
GridTest.html
<head>
<link rel="stylesheet" type="text/css" href="GridTest.css">
</head>
<body>
<script src="GridTest.js">
</script>
<script>
makeGrid(20, 20);
</script>
</body>
displayPanel.html
<head>
<link rel="stylesheet" type="text/css" href="GridTest.css">
</head>
<body>
<script src="GridTest.js">
</script>
<script>
printInfo();
</script>
</body>
nestTest.html (here is where I create the iframes)
<head>
<link rel="stylesheet" type="text/css" href="GridTest.css">
<script src = "GridTest.js"> </script>
</head>
<iframe id="frame1" scrolling="no" src="GridTest.html">
</iframe>
<iframe id="frame2" scrolling="no" src="displayPanel.html"></iframe>
CSS (probably unnecessary but I'll include it anyways)
.square {
float:left;
position: relative;
width: 5%;
padding-bottom: 2.8125%;
background-color:#1E1E1E;
overflow:hidden;
outline: 1px solid #FFFFFF;
}
.whiteSquare {
float:left;
position: relative;
width: 5%;
padding-bottom: 2.8125%;
background-color:#FFFFFF;
overflow:hidden;
outline: 1px solid #FFFFFF;
}
/*
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
*/
.content {
position:absolute;
height:40%;
width:47%;
padding: 5% 26.5%;
text-align:center;
}
.content .rs{
width:auto;
height:auto;
max-height:90%;
max-width:100%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
body {
font-size:20px;
font-family: 'Lato',verdana, sans-serif;
color: #000000;
background:#ECECEC;
}
.numbers{
font-weight:900;
font-size:100px;
}
Picture of current result.
In your changeSquare method, try something like this:
var frame2 = $('#frame2', top.document) //Give you top level frame jQuery Object.
for more backwards compatibility, you can use something like:
window.parent.$('#frame2')
Or something like this for no jQuery:
window.parent.getElementById('#frame2')[attributeName]
Once you have the root iFrame object, you can proceed with regular jQuery/DOM manipulation.
EDIT: here is a fully working and tested solution (Safari/Mac OS). Only the changes are highlighted below:
displayPanel.html:
<head>
<link rel="stylesheet" type="text/css" href="GridTest.css">
</head>
<body>
<script src="GridTest.js">
</script>
<script>
printInfo();
</script>
<div id="label1"></div> <!--Added a div for displaying text -->
</body>
GridTest.js:
function changeSquare() {
var image = document.getElementById(this.id);
//First get a reference to the second frame document
var secondFrameDocument = window.top.document.getElementById('frame2').contentWindow.document;
//Now set the value of the Div
secondFrameDocument.getElementById('label1').textContent=this.id;
// If image is currently green square, change to red, and vice versa
if (image.src.match("http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png")) {
image.src = "http://www.clker.com/cliparts/1/J/s/o/7/y/red-square-button-md.png";
} else {
image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
}
currentDisplay = this.id;
};
Depending upon your exact scenario, you may run into security issues, particularly with Chrome. A better solution would be to perhaps use two Divs instead of iFrames.
Here's a screenshot:
I am trying this code. It is supposed to generate an image and set its container div to full-screen when the p is clicked.
<html>
<head>
<style>
img { height: 643px; width: 860px; }
img:-moz-full-screen { height: 643px; width: 860px; }
div:-moz-full-screen { background: white; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("p").click(function() {
setTimeout(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
},5000);
});
});
</script>
</head>
<body>
<p>Foo</p>
</body>
What it does is wiat for 5 seconds and prepend the image all right, but it is not set to full-screen. However, if you remove the timer and do it normally:
$("p").click(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
});
it works fine, it prepends the image and immediately sets it to full-screen.
Is this intentional, or a bug? Either way, is there any way to make it work?
The method has to be called in response to a user input event (ie. keypress, mouseevent).