I am trying to create sliding images effect:
Online demolink text.
The problem is when you click rapidly and randomly on the buttons and not wait for animation to finish causing unpredicted results and even stopping the functionality to work. (and once it stopped in the middle of 2 images...)
How Can I make it work without bugs?
I know that there are some other tools for that sliding like jquery and other approaches like changing the position attribute and not the scrollLeft attribute.
But I want to do it as it is, with scrollLeft, if it possible of course.
The Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body
{
padding:0px;
margin:0px;
}
#imageContainer
{
width: 500px;
position: relative;
}
#div
{
overflow: hidden;
white-space: nowrap;
}
#div img {
cursor: pointer;
vertical-align: bottom;
width: 500px;
padding:0px;
margin:0px;
display:inline;
}
</style>
<script type="text/javascript">
var scrollIntervalID;
var currentIndex=0;
function Scroll(ind){
var dir = ind ==currentIndex?0:ind<currentIndex?-1:1;
var steps = Math.abs(ind-currentIndex);
scrollIntervalID = setInterval(function(){
var i=(steps*10)-1;
return function(){
if (i <= 0)
clearInterval(scrollIntervalID);
var elm = document.getElementById("div");
elm.scrollLeft +=dir * 50;
i--;
document.getElementById("span").innerHTML=elm.scrollLeft;
}
}(), 15);
currentIndex=ind;
}
</script>
</head>
<body>
<div id="imageContainer">
<div id="div">
<img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/>
</div>
</div>
<div>
<input type="button" value="1" onclick="Scroll(0);"/>
<input type="button" value="2" onclick="Scroll(1);"/>
<input type="button" value="3" onclick="Scroll(2);"/>
<input type="button" value="4" onclick="Scroll(3);"/>
</div>
<span id="span"></span>
</body>
</html>
I would sriously recommend you to use frameworks like jQuery but if you insist to work on the current version, you have to take care of scenarios which happens during the animation.
You have scrollIntervalID, but it is not used outside the scope of the function. You can try clearing the interval timer by using clearInterval when a previous sliding animation is in progress and advance the position to the intended one before performing the next animation.
You need to stop the previous animation from operating before starting a new one. At the beginning, set:
var scrollIntervalID= null;
Then at the start of function Scroll add:
if (scrollIntervalID!==null) {
clearInterval(scrollIntervalID);
scrollIntervalID= null;
}
You'll also want to base the starting position of the animation on the current value of scrollLeft, rather than trying to remember the currentIndex.
this is a quick fix, I am not a javascript expert. but it works based on my quick testing
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body
{
padding:0px;
margin:0px;
}
#imageContainer
{
width: 500px;
position: relative;
}
#div
{
overflow: hidden;
white-space: nowrap;
}
#div img {
cursor: pointer;
vertical-align: bottom;
width: 500px;
padding:0px;
margin:0px;
display:inline;
}
</style>
<script type="text/javascript">
var scrollIntervalID;
var currentIndex=0;
var start = true;
function Scroll(ind){
if(start){
var dir = ind ==currentIndex?0:ind<currentIndex?-1:1;
var steps = Math.abs(ind-currentIndex);
scrollIntervalID = setInterval(function(){
start = false;
var i=(steps*10)-1;
return function(){
if (i <= 0)
clearInterval(scrollIntervalID);
var elm = document.getElementById("div");
elm.scrollLeft +=dir * 50;
i--;
document.getElementById("span").innerHTML=elm.scrollLeft;
}
}(), 0);
currentIndex=ind;
start = true;
}
}
</script>
</head>
<body>
<div id="imageContainer">
<div id="div">
<img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/>
</div>
</div>
<div>
<input type="button" value="1" onclick="Scroll(0);"/>
<input type="button" value="2" onclick="Scroll(1);"/>
<input type="button" value="3" onclick="Scroll(2);"/>
<input type="button" value="4" onclick="Scroll(3);"/>
</div>
<span id="span"></span>
</body>
Related
I am using jquery to create an element, i would then like the user to input the x and y values of the desired position of the element, and then click a button so the element would then appear at that position. This is a rough code of how the page is setup. want #newelement to appear in a new position after the forms are filled and the button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
margin: 0 auto;
}
#newElement {
height: 100px;
width: 100px;
margin: 0 auto;
background-color: red;
position: absolute;
}
</style>
</head>
<div id= "parent"></div>
<br><br>
<!-- Script to insert div element -->
<script>
function insert() {
$("#parent").append('<div id = "newElement">A '
+ newdiv </div>');
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>First Name:</b> <input type="text" name="positionX">
<br><br>
<b>Last Name: </b><input type="text" name="positionY">
<input type="submit" value="Submit">
</body>
</html>
Using the "top" and "left" style attributes can be used if you want to position the top left corner of the new div relative to the top left corner of the parent
i.e. something like
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
}
#newElement {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="parent"></div>
<!-- Script to insert div element -->
<script>
function insert() {
// Get the X and Y from the form elements
var x = parseInt($("[name='positionX'").val());
var y = parseInt($("[name='positionY'").val());
var newElement = $('<div id="newElement">newdiv</div>').css({top: y, left:x});
$("#parent").append(newElement);
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>X:</b><input type="text" name="positionX" />
<br />
<b>Y:</b><input type="text" name="positionY" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Hi i have looked every where for this but cant find a good way of doing it :/
I have a dynamically populated list on my website that looks like this:
<li>
name: blue<br/>
procesor: blue<br/>
<div class="right top">2001</div>
<input type="hidden" name="Description" value="short">
</li>
I have been looking for a way to have a small popup show with the contents of the hiddent text field in the list.
I have tried many free modal javascript code but they all seem to either stop working or destroy my template.
Dose anyone know how I could do this. I have no working javascript code as from now and am looking for the best way todo this. It doesn't need to be fancy. Just a white boc with the popup
The easiest way is to add title property to li:
<li title="Some short desc">
...
</li>
This should work on all desktop browsers, but not on mobiles.
Another way is to use excellent hint.css from http://kushagragour.in/lab/hint/
It does not rely on any JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. You can fine tune orientation, colours, and even animations.
Try this one
$(function() {
$(".list li input[type=hidden]").each(function(index, obj) {
$(".popup").append($(obj).val() + "<br/>");
});
$(".popup").show();
});
.popup {
position: relative;
top: 10px;
border: solid 2px #E5988A;
width: 200px;
text-align: left;
margin: 0px auto;
z-index: 2;
background-color: #FFF;
padding: 10px;
}
.disabled {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
display: block;
background-color: #333;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
<li>
name: blue
<br/>procesor: blue
<br/>
<div class="right top">2001</div>
<input type="hidden" name="Description" value="short" />
</li>
<li>
name: green
<br/>procesor: gree
<br/>
<div class="right top">2002</div>
<input type="hidden" name="Description" value="anothershort">
</li>
</ul>
<div class="popup"></div>
<div class="disabled"></div>
Html Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="app1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
</head>
<body>
<div>
Select <select id = "MyList"></select>
</div>
<input type="hidden" name="Description" value="short" id="hiddendiv">
</body>
</html>
Javascript
$(document).ready(function(){
var select = document.getElementById("MyList");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
$('#MyList').hover(
function(){
var value=$('input').val();
alert(value);
}, function() {
}
)
});
I created an input (type text) box and made it auto-resize quite simply. However, there are a few glitches that I can't seem to fix:
when I start typing the box shrinks a tiny bit
when I press backspace (or directional arrows), the box expands first, and then shrinks when I continue typing.
Here is my code:
function Expander() {
this.start = function () {
$("#inputbox").keydown(function(e) {
this.style.width = 0;
var newWidth = this.scrollWidth + 10;
if( this.scrollWidth >= this.clientWidth )
newWidth += 10;
this.style.width = newWidth + 'px';
});
}
}
$(function() {
window.app = new Expander();
window.app.start();
});
input {
margin-left:3em;
min-width:100px;
max-width:600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<meta charset="UTF-8">
<body>
<div id="wrap">
<input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." width="100px"/>
</div>
<div id="counter"></div>
</body>
You can try this.
We put the content in a hidden span & then adjust width according to span scrollWidth.
function Expander() {
this.start = function () {
$('#inputbox').on('keydown',function(e) {
$("#hidden_span").html("");
$("#hidden_span").append("<p>"+$(this).val()+"</p>");
var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;
if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
$(this).css("width",hidden_span_scroll_width);
}
});
}
}
$(function() {
window.app = new Expander();
window.app.start();
});
input {
margin-left:3em;
min-width:100px;
max-width:600px;
}
#hidden_span{
position:absolute;
top:0px;
left:0px;
visibility:hidden;
width:10px;
white-space:nowrap;
overflow:hidden;
}
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="wrap">
<input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." />
</div>
<div id="counter"></div>
<span id="hidden_span"></span>
</body>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<title>Test page</title>
</head>
<body>
<style>
input {
margin-left:3em;
min-width:100px;
max-width:600px;
}
#hidden_span{
position:absolute;
top:0px;
left:0px;
visibility:hidden;
width:10px;
white-space:nowrap;
overflow:hidden;
}
</style>
<script>
function Expander() {
this.start = function () {
$('#inputbox').on('keydown',function(e) {
$("#hidden_span").html("");
$("#hidden_span").append("<p>"+$(this).val()+"</p>");
var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;
if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
$(this).css("width",hidden_span_scroll_width);
}
});
}
}
$(function() {
window.app = new Expander();
window.app.start();
});
</script>
<div id="wrap">
<input type="text" id="inputbox" name="input" placeholder="yes" />
</div>
<div id="counter"></div>
<span id="hidden_span"></span>
</body>
</html>
At first you can use jQuery methods to avoid crossbrowser problem. And scrollWidth returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. So enlarge newWidth only when content width strongly larger than element width.
$("#inputbox").keydown(function(e) {
var a = $(this).width(), newWidth;
if(this.scrollWidth - a > 0){
newWidth = a + 10;
}else if(e.keyCode==8){
newWidth = a - 10;
}
$(this).css("width", newWidth);
});
If you don't want to make input smaller when pressed backspace - delete else if part of code.
<input type="text" id="inputbox" name="input" placeholder="yes" width="100px"/>
Remove the width="100px", like this:
<input type="text" id="inputbox" name="input" placeholder="yes"/>
And it won't resize down anymore when starting to type.
Live example:
http://jsfiddle.net/2EMfd/
Though, the exanding function doesn't seem to work in my browser?
*Edit, did a simple expand function on the inputbox is this what you where trying? http://jsfiddle.net/2EMfd/1/
I'm working on a Joomla website. Now I need a slider to change when someone hovers over a text link. I'm using some javascript. It's working on the first div with the id=slider, but not on the second div with id=slider in the article. Can someone tell me why it's doing this?
I'm using the following code in a custom code module for Joomla.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen">
<!--
.boxVisible {
background-color: #eee;
display: block;
padding: 5px;
float: left;
border: solid 1px #000040
}
.boxHidden {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function showHide(slider) {
theBox = document.getElementById(slider);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<p>More</p>
</body>
</html>
This is my article:
<div id="slider" class="boxVisible">{loadposition slider1}</div>
<div id="slider" class="boxHidden">{loadposition slider2}</div>
<p><br /><br /><br /> {loadposition java}</p>
IDs must be unique identifiers. For multiple elements, use class names.
Id's should be unique on a page.
You could wrap your slider divs in a wrapper div and use that as basis for iterating through your sliders something like this.
HTML:
<div id="sliders">
<div class="boxVisible"></div>
<div class="boxHidden"></div>
</div>
Javascript:
function showHide2(slider) {
var sliders = document.getElementById(slider).getElementsByTagName("div");
for (s in sliders) {
if (sliders.hasOwnProperty(s)) {
if (sliders[s].className == "boxVisible") {
sliders[s].className = "boxHidden";
alert('changed visible');
} else if (sliders[s].className == "boxHidden") {
sliders[s].className = "boxVisible";
alert('changed hidden');
}
}
}
}
showHide2("sliders");
the dom elements can't have the same id's! if you give the same id to the multiple dom elements, javascript will take only the first one.
I'm wondering how to stop an animation made with jQuery timers. I think I have tried everything, I would really like your help.
<!DOCTYPE html>
<html>
<head>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<title>HeartMath - Danmark</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js' type='text/javascript'></script>
<script src='inc/jquery.timers-1.1.2.js' type='text/javascript'></script>
<script type="text/javascript" >
jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
}; var fixgeometry = function() {
/* Some orientation changes leave the scroll position at something
* that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".header:visible");
var footer = $(".footer:visible");
var content = $(".content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();;
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(document).ready(function() {
$(window).bind("orientationchange resize pageshow", fixgeometry);
var animationSpeed = 3500;
var animationHeight = $(window).height() * 0.70;
$("input[type='radio']").bind( "change", function(event, ui) {
if($(this).val() == "true") {
startAnimation(animationSpeed);
$(this).log("animationen burde starte");
}
else {
stopAnimation();
$(this).log("animationen burde stopppe");
}
}).log("der blev trykket");
function startAnimation(animationDuration) {
$(".breather").everyTime(10, function(){
$(".breather").animate({top:animationHeight}, animationDuration).animate({top:"0"}, animationDuration);
}).log("startAnimation");
};
function stopAnimation() {
$(".breather").stopTime().stop().log("stopAnimation");
};
});
</script>
<style type="text/css">
html, body {
width: 100%;
}
div.breather {
display: block;
position:relative;
}
}
</style>
<link href='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="jquery-mobile/hm-mobile-theme.css">
</head>
<body>
<div data-role='page' data-theme='a'>
<div class='header' id="header" data-role='header'> <img src="img/hm-logo.png" style="margin:0px auto;" height="40" /> </div>
<div class='content' data-role='content'>
<div class="breather">landscape!</div>
</div>
<div class='footer' data-role='footer'>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="ignition" id="start" value="true" />
<label for="start">Start</label>
<input type="radio" name="ignition" id="stop" value="false" checked="checked" />
<label for="stop">Stop</label>
</fieldset>
</div>
</div>
</div>
</body>
</html>
What happens now is that when i press stop.. the animation just reverses and loops again
When you call .stop() to stop the jQuery animation, change it to .stop(true) to clear the animation queue (docs here). I'm not sure why there is a queue, but it looks like it has something to do with the timers plugin that you are using. Use queue().length to see how many animations are left in the queue.
Please make sure that the stopAnimation is being called by adding some debugging (console.log()). You call stopAnimation without an argument, but the function has an argument, that's not used.
So add some debugging to stopanimation and the if(val==false) statement. If that all works as expected we can continue the search.