Un-ending image using mouse scroll - javascript

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Frog</title>
<script type="text/javascript">
window.onscroll = infinity;
function infinity () {
document.write("<img src='frog.gif'>" + "<br/>");
}
while(window.onscroll){
infinity();
}
</script>
</head>
<body>
<img src='earth.png'>
<br/>
<img src='tiger.jpg'>
<br/>
</body>
</html>
Hi guys, I want to know how would I loop the frog when every time I scroll down the frog image appears again thanks in advance!

If you need to add image when user actually turns mouse wheel (even when no actual scrolling is involved) - you need to capture "mousewheel" event. Universally crossbrowser you can to it like this:
if (document.addEventListener) {
document.addEventListener("mousewheel", MouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else {
document.attachEvent("onmousewheel", MouseWheelHandler);
}
If you create a placeholder to hold your future images:
<div id="fdiv">Froggies:</div>
You can add images to it on mousewheeling like this:
function MouseWheelHandler(e) {
var e = window.event || e;
var delta = e.wheelDelta
if (delta < 0)
var img = document.createElement("img");
img.src = "frog.gif";
document.getElementById("fdiv").appendChild(img);
}
What this does is detects whether user scrolls mouse down (delta < 0) and if so - creates a new frog image and adds it to the DIV.
Here's demo: http://jsfiddle.net/Z8AxG/2/ place the mouse over window with words "Froggies:" and turn mouse wheel down.

What you could try is to make a div modify its height when you scroll down (using Javascript). Then apply the image on the background and let it repeat using CSS:
div#infinity {
background-image: url('frog.gif');
background-repeat: repeat-y;
}
With other words, this script will add images when you scroll down:
<!DOCTYPE html>
<html>
<head>
<title>TEST: Infinity Scroll</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var lastScrollTop = 0;
$(window).scroll(function(event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('div#infinity').append(
$('<div>').attr("id", "infinityimage")
);
}
else {
// upscroll code
}
lastScrollTop = st;
});
</script>
<style type="text/css">
html, body {
height: 101%;
}
div#infinityimage {
height: 190px;
background-image: url('https://www.google.nl/images/srpr/logo6w.png');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="infinity">
</div>
</body>
</html>

Related

Rotate image via Range Slider

Hi guys how to make the image rotate via range slider?
I built the function so it can range between 0 and 360 and show the value range, it's working fine, but how to apply this to rotate the image?
The crop image script documentation is here
I updated the code with the crop script, please help to rotate the image and output to a div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cropper.js</title>
<!-- <link rel="stylesheet" href="dist/cropper.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" />
<style>
.container {
max-width: 640px;
margin: 20px auto;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Cropper with a range of aspect ratio</h1>
<div>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">
</div>
<button onclick="cropper.getCroppedCanvas()">Save</button>
</div>
<!-- <script src="dist/cropper.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var image = document.querySelector('#image');
var minAspectRatio = 1.0;
var maxAspectRatio = 1.0;
var cropper = new Cropper(image, {
ready: function () {
var cropper = this.cropper;
var containerData = cropper.getContainerData();
var cropBoxData = cropper.getCropBoxData();
var aspectRatio = cropBoxData.width / cropBoxData.height;
var newCropBoxWidth;
if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);
cropper.setCropBoxData({
left: (containerData.width - newCropBoxWidth) / 2,
width: newCropBoxWidth
});
}
},
cropmove: function () {
var cropper = this.cropper;
var cropBoxData = cropper.getCropBoxData();
var aspectRatio = cropBoxData.width / cropBoxData.height;
if (aspectRatio < minAspectRatio) {
cropper.setCropBoxData({
width: cropBoxData.height * minAspectRatio
});
} else if (aspectRatio > maxAspectRatio) {
cropper.setCropBoxData({
width: cropBoxData.height * maxAspectRatio
});
}
}
});
});
</script>
<script>
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}
</script>
<input type="range" name="rangeInput" min="0" max="360" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">
<!-- FULL DOCUMENTATION ON https://github.com/fengyuanchen/cropperjs -->
</body>
</html>
You can use some javascript to set the rotation of the image when the slider value changes. Since you have jQuery:
$(function(){
let slider = $('input[type=range]'),
image = $('#image');
slider.on('change mousemove', function(){
image.css('transform', 'rotate(' + $(this).val() + 'deg)');
});
});
Side note: This type of event assignment - finding the element in javascript, rather than adding onchange attributes to the input - is much more flexible and maintainable.
Here's an example: https://codepen.io/benjamin-hull/pen/ewxboE
A couple of things to watch:
I've added the 'mousemove' event listener as well as 'change', so the user gets real-time feedback as they move the slider. This might be a problem, as mousemove can produce 100's of events. You might need to look at 'debouncing' that event to limit it to a sensible value.
In my example, I've set the slider to min -180, max 180 and a default of 0. This allows the user to rotate left and right.
You probably want the rotation to scale the image as well, so it always fills the frame.

Missing Images on print

I want to open a new window/tab, put some HTML in the document, then bring up the browser print dialog to print that new window. I am using the following to accomplish this:
var w = window.open();
w.document.write(html);
w.document.close();
w.focus();
w.print();
w.close();
HTML:
<body>
<img src='url1' />
<img src='url2' />
<img src='urln' />
</body>
This all works, the window pops up, and the print dialog is shown for the new page and prints all images fine. However, for some reason, some of images are printing, and instead the image alt message is printed.
There are lots of images, and they are dynamically generated on the server side (which takes about 1 second to load each).
What needs to be done to make sure all images are loaded and printed?
This happens in IE and Firefox that I've confirmed. I appreciate any help.
Try to use a JS library that detect when images have been loaded.
You can use it like this:
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
imagesLoaded(document.body, function() {
window.print();
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<style type="text/css">
body, div, image{
text-align: center;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
var c = $("<canvas />");
c.get(0).width = $(this).get(0).naturalWidth;
c.get(0).height = $(this).get(0).naturalHeight;
var cxt = c.get(0).getContext("2d");
cxt.drawImage($(this).get(0), 0, 0);
var base64Code = c.get(0).toDataURL("image/png");
c.remove();
$("body").append($("<div/>").append($("<image/>").attr("src", base64Code)));
if($("body").find("image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<style type="text/css">
body, div, v\:image{
text-align: center;
margin: 0px;
padding: 0px;
}
div{
page-break-after:always;
}
v\:image{
behavior: url(#default#VML);
display: block;
width: 1078px;
height: 1527px;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
$("body").append($("<div/>").append($("<v\:image/>").attr("src", $(this).attr("src"))));
if($("body").find("v\\:image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>

Font increase animation doesn't work JavaScript

i am trying to recreate a simple jQuery animation with JavaScript. And it doesn't work. I would be very happy if you tell me what is wrong, because for me it seems right. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").animate({fontSize: "100px"}, "slow");
});
</script>
</head>
<body>
<div style="background:#98bf21;height:200px;width:600px;">Hello World</div>
</body>
</html>
And below is the JavaScript animation:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is a title!!!</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="background-color: #98bf21; width: 200px; height: 600px;">Hello World!</div>
<button onclick="startFontIncrease()">Click me</button>
<script>
function startFontIncrease() {
var element = document.getElementsByTagName("div")[0];
var fontSize = element.style.fontSize;
var id = setInterval(increaseFont, 5);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
}
else {
fontSize++;
element.style.fontSize = fontSize;
}
}
}
</script>
</body>
</html>
There are numerous problems with the transcription to plain JS.
To begin with, you have not set an initial font-size in the inline style and it is thus an empty string when you try to access it. So the HTML should be like this:
<div style="background-color: #98bf21; width: 200px; height: 300px; font-size: 12px;">
Hello World!
</div>
Then, you must get the initial font size out of the font-size increasing function and you must also parse it to make sure you get the number (and not the "12px" string, otherwise it will be NaN when you try to increment).
var element = document.getElementsByTagName("div")[0];
var fontSize = parseInt(element.style.fontSize);
function startFontIncrease() {
var id = setInterval(increaseFont, 5);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
}
else {
fontSize++;
element.style.fontSize = fontSize + 'px';
}
}
}
Instead of giving slow attribute,adjust them in milliseconds if possible.
<script>
$(document).ready(function(){
$("div").animate({fontSize: "100px"}, 2000);
});
</script>
Your implementation doesn't work because the fontSize you get for the div is ""
What you have to is
document.getElementById("btn").addEventListener("click",startFontIncrease);
function startFontIncrease() {
var element = document.getElementsByTagName("div")[0];
var fontSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size'));
var id = setInterval(increaseFont, 100);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
} else {
fontSize++;
element.style.fontSize = fontSize + "px";
}
}
}
For the jQuery version Hameed Syed seams to be correct.

How Block UI until page load with wait image using javascript/CSS only

I want to block html page until it loads completely with wait image by javascript or CSS but WITHOUT JQUERY
I want to achieve like these demos http://malsup.com/jquery/block/#demos
Please don't suggest with jquery solutions.
HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
var ld = (document.all);
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
if (ns4)
ld = document.loading;
else if (ns6)
ld = document.getElementById("loading").style;
else if (ie4)
ld = document.all.loading.style;
function init() {
if (ns4) { ld.visibility = "hidden"; }
else if (ns6 || ie4) ld.display = "none";
}
</script>
</head>
<body onload="init()">
//image which has size of 40 mb.
<img src="show.jpg" />
<div id="loading" style="position:absolute; width:100%; text-align:center; top:300px;">
//loading image to see while loading background image
<img src="loading.gif" />
</div>
</body>
</html>
Here a solution that will show the wait image when js is active, and keep the wait image hidden if js is not active:
Create a default rule that hides the #loading and a .is-loading #loading that shows the wait image
Use JS to add the class wait image to the html element
When the content (or image) is loaded remove the is-loading class.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
(function() {
var html = document.getElementsByTagName('html')[0];
html.className += ' is-loading';
window.onload = function() {
html.className = String(html.className).replace('is-loading','');
}
}());
</script>
<style>
#loading {
display : none;
position : absolute;
width : 100%;
text-align : center;
top : 300px;
}
.is-loading #loading {
display: block;
}
</style>
</head>
<body>
<!--image which has size of 40 mb. -->
<img src="show.jpg" >
<div id="loading">
<!-- loading image to see while loading background image -->
<img src="loading.gif" >
</div>
</body>
</html>

jquery background not repeating in IE

I have this code below. It works fine in safari however in IE the background just revolves once and stops on pink.
What am I missing?
Hope someone can help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Iridescent Ideas</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
<center>
<img src="logo.png" alt="Coming Soon" width="557" height="430" border="0" usemap="#Map" style="margin-top:100px;">
<map name="Map">
<area shape="rect" coords="106,377,454,406" href="mailto:gareth#iridescentideas.com" alt="Email">
</map>
</center>
<script type="text/javascript">
var colors = Array('#66ccff', '#ff99ff'); //List the hex codes you want to loop through here.
var color_index = 0;
var interval = 5000; //How long the color blend transition lasts. (in milliseconds, 1000 = 1 second)
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index == colors.length) { color_index = 0; } //If we are at the end of the colors array go back to the beginning.
else { color_index++; } //Lets move to the next color in the colors array.s
bg_color_tween();
});
}
$(document).ready(function() {
if( $(window).width() > 1024 ) {
//Kicks off the background color tweening.
bg_color_tween();
}
});
</script>
</body>
</html>
You could try setTimeout to delay the execution of the animation ever so slightly
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index == (colors.length-1)) { //If we are at the end of the colors array go back to the beginning.
color_index = 0;
} else { //Lets move to the next color in the colors array.s
color_index++;
}
setTimeout('bg_color_tween', 5);
});
}
In IE9 its working normally. There should be no problem. Are you testing in local or server environment?

Categories