Why isn't my text bouncing left to right - javascript

The JSFiddle works but when I place it into my index.html it won't work. I think it's the <span> tags. Is there a different tag I can use?
$(document).ready(function(){
var counter = 0,
$chars = $(".arthed").children();
setInterval(function () {
$chars.eq(counter).effect( "bounce", {times:1}, 500 );
counter++;
if (counter >= $chars.length) {
counter = 0;
}
}, 250);
});
.arthed {
font-family: montserrat;
}
.ui-effects-wrapper {
display : inline-block;
font-family: montserrat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="arthed"><span>s</span><span>o</span><span>m</span><span>e</span> <span>t</span><span>e</span><span>x</span><span>t</span></div>


It should be some issue related to fonts and text rendering (even also). Your snippet bounces left to right and after changing font to sans, at least on my device, stops horizontal bounces.
$(document).ready(function() {
var counter = 0,
$chars = $(".arthed").children();
setInterval(function() {
$chars.eq(counter).effect("bounce", {
times: 1
}, 500);
counter++;
if (counter >= $chars.length) {
counter = 0;
}
}, 250);
});
.arthed {
font-family: sans;
}
.ui-effects-wrapper {
display: inline-block;
font-family: sans;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<div class="arthed">
<span>s</span>
<span>o</span>
<span>m</span>
<span>e</span>
<span>t</span>
<span>e</span>
<span>x</span>
<span>t</span>
</div>
So, maybe the only way to prevent it from bouncing left and right could be saving the width of the span before animation and fix the width. This snippet is dirty working example. Using position: absolute
$(document).ready(function() {
var counter = 0,
$chars = $(".arthed").children();
$chars.each((i,el) => {el.style.left=el.offsetLeft+"px"});
$chars.each((i,el) => {el.style.position="absolute"})
setInterval(function() {
$chars.eq(counter).effect("bounce", {
times: 1
}, 500);
counter++;
if (counter >= $chars.length) {
counter = 0;
}
}, 250);
});
.arthed {
font-family: montserrat;
position: absolute;
}
.ui-effects-wrapper {
display: inline-block;
font-family: montserrat;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<div class="arthed">
<span>s</span><span>o</span><span>m</span><span>e</span>
<span>t</span><span>e</span><span>x</span><span>t</span>
</div>

Related

A few questions about photos not showing up in my gallery

I'm trying to make a gallery using ajax, but my code runs into some errors (this is for homework). The error is showing up on developer console around my two splits. Also my webpage opens but no photos show up, how can i properly call the pictures from my text file? I'm new to javascripting.
Thank you.
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style src="text/css">
.navBtn {
padding: 5px 10px;
background-color: red;
font-weight: 1000;
color: white;
}
div {
border: 2px solid black;
padding: 10px;
width: 70%;
text-align: center;
}
</style>
</head>
<body>
<div id="imgContainer">
<img id="image" />
</div>
<div>
<button class="navBtn" onclick="previous()">
<< Previous</button>
<button class="navBtn" onclick="next
()">Next >></button>
<br>
<button onclick="pageLoad.init
()">Update Image </button>
</div>
<script type="text/javascript">
var totalImage;
var currentIndex;
var pageLoad = {
imgData: "5",
pagePrefix: "Null",
slides: "5",
init: function () {
$.ajax({
url: "./images.txt",
async: false,
success: function (data) {
pageLoad.imgData = data.split
('\n');
totalImage =
pageLoad.imgData.length;
currentIndex = 0;
changeImg();
}
});
}
};
pageLoad.init();
function changeImg() {
document.getElementById
("image").setAttribute("src", "./img/" +
pageLoad.imgData[currentIndex].split(' ')[0]);
setTimeout(function () {
next();
}, pageLoad.imgData[currentIndex].split('
')[1]);
}
function previous() {
if (currentIndex == 0) {
currentIndex = totalImage - 1;
} else {
currentIndex--;
}
changeImg();
};
function next() {
if (currentIndex == totalImage - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
changeImg();
};
setTimeout(function () {
next();
}, 3000);
</script>
</body
The webpage opens showing 5 photos that you can go through

How to speed up fadein / fadeout

I'm using the following code to fadein/fadeout images every second which works fine but I would like to fade the images in and out every 1/2 second. I can change the setInterval to 500 but this simply causes a bit of a mess. I clearly need to redfine fadein and fadeout.
I have bootstrap loaded so I'm guessing the functions are defined within the bootstrap js but how do I respecify their timing?
var $els = $('div[id^=image]'),
i = 0,
len = $els.length;
var start = 1;
var end = 999999999999999;
jQuery(function () {
$els.slice(1).hide();
spin = setInterval(function () {
$els.eq(i).fadeOut(function () {
i = Math.floor(Math.random() * len);
$els.eq(i).fadeIn();
});
start = new Date().getTime();
if (start > end) {
clearInterval(spin);
}
}, 1000);
{% for m in myusers %}
if (i == {{ forloop.counter0 }}) { document.getElementById('name{{ forloop.counter0 }}').style.display = 'Block';}
{% endfor %}
});

Since you are using jQuery, why not use fadeOut/fadeIn or fadeToggle?
$(document).ready(function() {
setInterval(function() {
$('.a1, .a2').stop().fadeToggle(500);
}, 500);
});
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 1px;
display: inline-block;
}
.a1,
.a2 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: blue;
}
.a2 {
display: none;
background-color: red;
}
.wrapper2 .a1 {
display: none;
}
.wrapper2 .a2 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="wrapper wrapper2">
<div class="a1"></div>
<div class="a2"></div>
</div>

var box = document.getElementById('box');
function fadeOutIn(elem, speed ) {
if (!elem.style.opacity) {
elem.style.opacity = 1;
} // end if
var outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0) {
clearInterval(outInterval);
var inInterval = setInterval(function() {
elem.style.opacity = Number(elem.style.opacity)+0.02;
if (elem.style.opacity >= 1)
clearInterval(inInterval);
}, speed/50 );
} // end if
}, speed/50 );
} // end fadeOut()
fadeOutIn(box, 2000 );
Hello please see my solution . It is your helpful or not.
Thanks.

Text slideshow with jQuery not functioning correctly when there's <br>

I'm trying to create a simple text slideshow which transits between a phrase to another and loop itself but when I added a break rule to the text, the slideshow doesn't seem to function correctly. It only works when the text is a single line. Your assistance would be greatly appreciated.
Here's the code and jsFiddle: http://jsfiddle.net/rezasan/fnbn8sbc/
//HTML
<div id="index_splashtext">
<h3>An<br/>Intimate<br/>Hideaway</h3>
<h3>A<br/>Paradise<br/>Preserved</h3>
</div>
//CSS
#index_splashtext {
width:311px;
margin:0 auto;
height: 330px;
margin-top: 25px;
text-align:center;
}
#index_splashtext h3 {
position: absolute;
font-size: 4.5em;
line-height: 1.2em;
font-family: "adobe-garamond-pro",sans-serif;
letter-spacing: 0.05em;
font-weight: 400;
margin-bottom: 70px;
color: red;
}
//jQuery
$(function(){
$('#index_splashtext h3:gt(0)').hide();
setInterval(function(){
$('#index_splashtext :first-child').fadeOut(2500)
.next('h3').fadeIn(2500)
.end().appendTo('#index_splashtext');},
8000);
});

You want to use $('#index_splashtext h3:first') instead of $('#index_splashtext :first-child'). In this case, :first-child is also being applied to the <br /> elements, so they get hidden but never faded back in:
$(function () {
$('#index_splashtext h3:gt(0)').hide();
setInterval(function () {
$('#index_splashtext h3:first').fadeOut(2500)
.next('h3').fadeIn(2500)
.end().appendTo('#index_splashtext');
},
8000);
});
jsFiddle example

well this is how i achieved your desired effect, and it is scalable too :)
html:
<div id="index_splashtext">
<h3></h3>
</div>
javascript:
$(function(){
var messages=[];
var counter=0;
var fadeInLength = 2500;
var fadeOutLength = 2500;
var hold = 1000;
messages.push('An<br />Intimate<br />Hideaway');
messages.push('A<br />Paradise<br />Preserved');
$('#index_splashtext h3').hide();
setInterval(function(){
$('#index_splashtext :first-child').
html(messages[counter]).
fadeIn(fadeInLength).
delay(hold).
fadeOut(fadeOutLength);
counter++;
if(counter > messages.length-1){counter=0;}
},fadeInLength+fadeOutLength+hold + 1000);
});

Timer is not counting down in Fixed position

I am developing one game app in HTML5 for android devices. In that game I am using simple count down method with setInterval method and I am displaying that counter in timer div. When I make div element position is fixed then count down is not running whenever I touched the screen then only count down starts and stops. BUT this is running good in absolute position, I don't want to make that div as absolute. I have tried all the possibilities, No luck
Please any one help me to resolve this problem
Here is my code
HTML:
<div id="time">
<p id="txt2"></p>
</div>
CSS:
#time {
right: 150px;
top: 11px;
z-index: 999;
position: fixed;
font-size: 30px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 30px;
color: #FFFFFF;
}
JS:
function timedCount(){
sec = 119 - c;
document.getElementById("txt2").innerHTML = sec;
c=c+1;
tt=setTimeout(function(){
timedCount()
},10000);
}
function doTimer(){
//alert("TImer starts");
if (!timer_is_on){
timer_is_on=1;
timedCount();
}
}
function stopCount(){
//alert("Timer stops");
clearTimeout(tt);
timer_is_on=0;
//c = 0;
}
Please check this one I refered http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_stop

Try this one with jquery
<!DOCTYPE html>
<html>
<head>
<style>
#time {
right: 150px;
top: 11px;
z-index: 999;
position: fixed;
font-size: 30px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 30px;
color: red;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var c=1, timer_is_on = 0, tt;
$(document).ready(function(){
doTimer();
function doTimer() {
if (!timer_is_on){
timer_is_on=1;
timedCount();
}
}
function timedCount() {
var sec = 119 - c;
$("#txt2").html(sec);
//alert(c);
c = c + 1;
tt = setTimeout(function () {
timedCount()
}, 10000);
}
function stopCount() {
//alert("Timer stops");
clearTimeout(tt);
timer_is_on = 0;
//c = 0;
}
});
</script>
</head>
<body>
<div id="time">
<p id="txt2"></p>
</div>
</body>
</html>
Check this link

Event Handlers On Newly Created Elements

I have a web app with a number of textareas and the ability to add more if you wish.
When you shift focus from one textarea to another, the one in focus animates to a larger size, and the rest shrink down.
When the page loads it handles the animation perfectly for the initial four boxes in the html file, but when you click on the button to add more textareas the animation fails to accomodate these new elements... that is, unless you place the initial queries in a function, and call that function from the addelement function tied to the button.
But!, when you do this it queries as many times as you add a new element. So, if you quickly add, say 10, new textareas, the next time you lay focus on any textarea the query runs 10 times.
Is the issue in my design, or jQueries implementation? If the former, how better can I design it, if it is the latter, how can I work around it?
I've tried to chop the code down to the relevant bits... I've tried everything from focus and blur, to keypresses, the latest is on click.
html::
<html>
<head>
<link rel="stylesheet" type="text/css" href="./sty/sty.css" />
<script src="./jquery.js"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
//.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>boxdforstacks</title>
</head>
<body>
<div class="grid">
<div class="col-left" id="left">
<div class="module" id="scrollingDiv">
<input type="button" value="add" onclick="addele()" />
<input type="button" value="rem" onclick="remele()" />
<p class="display">The value of the text input is: </p>
</div>
</div> <!--div class="col-left"-->
<div class="col-midd">
<div class="module" id="top">
<p>boxa</p>
<textarea class="tecksd" placeholder="begin typing here..." id="boxa" ></textarea>
<p>boxb</p>
<textarea class="tecksd" placeholder="begin typing here..." id="boxb"></textarea>
<p>boxc</p>
<textarea class="tecksd" placeholder="begin typing here..." id="boxc"></textarea>
<p>boxd</p>
<textarea class="tecksd" placeholder="begin typing here..." id="boxd"></textarea>
</div>
</div> <!--div class="col-midd"-->
</div> <!--div class="grid"-->
</body>
</html>
<script type="text/javascript" src="boxd.js"></script>
js:
function onit(){
$('textarea').on('keyup change', function() {
$('p.display').text('The value of the text input is: ' + $(this).val());
});
}
$('textarea').on("click",function(){
//alert(this.id.substring(0,3));
if ( this.id.substring(0,3) == 'box' ){
$('textarea').animate({ height: "51" }, 1000);
$(this).animate({ height: "409" }, 1000);
} else {
$('textarea').animate({ height: "51" }, 1000);
}
}
);
var boxfoc="";
var olebox="";
var numb = 0;
onit();
function addele() {
var tops = document.getElementById('top');
var num = numb + 1;
var romu = romanise(num);
var newbox = document.createElement('textarea');
var newboxid = 'box'+num;
newbox.setAttribute('id',newboxid);
newbox.setAttribute('class','tecksd');
newbox.setAttribute('placeholder','('+romu+')');
tops.appendChild(newbox);
numb = num;
onit();
} //addele(), add element
function remele(){
var tops = document.getElementById('top');
var boxdone = document.getElementById(boxfoc);
tops.removeChild(boxdone);
} // remele(), remove element
function romanise (num) {
if (!+num)
return false;
var digits = String(+num).split(""),
key = ["","c","cc","ccc","cd","d","dc","dcc","dccc","cm",
"","x","xx","xxx","xl","l","lx","lxx","lxxx","xc",
"","i","ii","iii","iv","v","vi","vii","viii","ix"],
roman = "",
i = 3;
while (i--)
roman = (key[+digits.pop() + (i * 10)] || "") + roman;
return Array(+digits.join("") + 1).join("M") + roman;
} // romanise(), turn numbers into roman numerals
css :
.tecksd {
width: 97%;
height: 51;
resize: none;
outline: none;
border: none;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px 1px #0044FF;*/
}
.tecksded {
width: 97%;
resize: none;
outline: none;
border: none;
overflow: auto;
position: relative;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px #FFDD00;*/
}
/*#postcomp {
width: 500px;
}*/
* {
#include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-left {
width: 13%;
}
.col-midd {
width: 43%;
}
.col-rght {
width: 43%;
}
.module {
padding: $pad;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
body {
padding: 10px 50px 200px;
background: #FFFFFF;
background-image: url('./backgrid.png');
}
h1 {
color: black;
font-size: 11px;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
}
p {
color: white;
font-size: 11px;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
}

You should use the following:
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on("click", "textarea", function () {
event.preventDefault();
alert('testlink');
});
Since the textarea is added dynamically, you need to use event delegation to register the event handler.

Try
$(document).on('click', 'textarea', function() {
// do something
});

The issue is you are binding the textareas only on the page load. I made a JSFiddle with working code: http://jsfiddle.net/VpABC/
Here's what I changed:
I wrapped:
$('textarea').on("click", function () {
//alert(this.id.substring(0,3));
if (this.id.substring(0, 3) == 'box') {
$('textarea').animate({
height: "51"
}, 1000);
$(this).animate({
height: "409"
}, 1000);
} else {
$('textarea').animate({
height: "51"
}, 1000);
}
});
in a function so it looked like this:
function bindTextAreas() {
$('textarea').unbind("click");
$('textarea').on("click", function () {
//alert(this.id.substring(0,3));
if (this.id.substring(0, 3) == 'box') {
$('textarea').animate({
height: "51"
}, 1000);
$(this).animate({
height: "409"
}, 1000);
} else {
$('textarea').animate({
height: "51"
}, 1000);
}
});
}
bindTextAreas();
What this does is it allows you to call this function, bindTextAreas, whenever you create a new textarea. This will unbind all the current events than rebind them. This will make it so your new textarea is has the click handler setup.
An place where this function is called is in the addele function like this:
function addele() {
var tops = document.getElementById('top');
var num = numb + 1;
var romu = romanise(num);
var newbox = document.createElement('textarea');
var newboxid = 'box' + num;
newbox.setAttribute('id', newboxid);
newbox.setAttribute('class', 'tecksd');
newbox.setAttribute('placeholder', '(' + romu + ')');
tops.appendChild(newbox);
numb = num;
onit();
bindTextAreas();
} //addele(), add element
Notice the bindTextAreas(); line near the bottom. This reloads all the click handlers.

Categories

Resources