I have no Idea how to init my banner array with the text inside my spans. Do you have any Idea? Better to use javascript or JQuery?
<script language="javascript" type="text/javascript">
var i = 1;
function fun() {
var banner = new Array();
//How to init array here from inner text of spans?
i++;
document.getElementById("img1").src = "slide/" + banner[i] + ".jpg";
if (i == 3) //here 2 is number of images i want to display in the slide show
{
i = 0;
}
}
setInterval("fun()", 4000);
</script>
<div class="imagesContainer" style="display:none;">
<span>
73defe4b-9819-4e12-b351-3813686e0c83.gif
</span>
<span>
4c2ed116-500d-42ad-8aa5-983bf214d5d3.png
</span>
</div>
You can use .map()
var i = 1;
function fun() {
var banner = $('.imagesContainer span').map(function () {
return $.trim($(this).text())
}).get();
//How to init array here from inner text of spans?
i++;
document.getElementById("img1").src = "slide/" + banner[i] + ".jpg";
if (i == 3) //here 2 is number of images i want to display in the slide show
{
i = 0;
}
}
setInterval("fun()", 4000);
jQuery(function () {
var i = 0;
var banner = $('.imagesContainer span').map(function () {
return $.trim($(this).text())
}).get();
function fun() {
//How to init array here from inner text of spans?
i++;
if (i == banner.length) {
i = 0;
}
$('#img1').attr('src', '//placehold.it/128/' + banner[i])
}
setInterval(fun, 1000);
})
PoC: Demo
Here's how you can do it using jQuery:
var banner = [];
$('.imagesContainer span').each(function() {
banner.push($(this).text());
});
// you can now use the banner array here
Related
I have a code to loop images but based on an Img source, but how to improve it to make it work for the "background-image" property of a div?
HTML
<div id="section2"></div>
CSS
#section2 {
background-image: 'url(..images/banner1.jpg');
}
JAVASCRIPT
<script type = "text/javascript">
(function() {
var i = 1;
var pics = [ "images/banner1.jpg", "images/banner2.jpg", "images/banner3.jpg" ];
var el = document.getElementById('section2');
function toggle() {
el.src = pics[i];
i = (i + 1) % pics.length;
}
setInterval(toggle, 3000);
})();
</script>
Thanks in Advance :)
One way would be to use CSS classes instead of sources.
JS:
<script type = "text/javascript">
(function() {
var i = 1;
var classes = [ "bgd-1", "bgd-2", "bgd-3" ]; // adjusted
var el = document.getElementById('section2');
function toggle() {
el.className = classes[i]; // adjusted
i = (i + 1) % classes.length; // adjusted
}
setInterval(toggle, 3000);
})();
</script>
CSS:
#section2.bgd-1 {
background-image: url('..images/banner1.jpg');
}
#section2.bgd-2 {
background-image: url('..images/banner2.jpg');
}
#section2.bgd-3 {
background-image: url('..images/banner3.jpg');
}
Note:
Use el.className += ' ' + classes[i]; to append a class name instead of replacing all element classes.
I am new to javascript and have come up with this counter
Here is the JSFiddle - http://jsfiddle.net/ep6s616z/
and below is the javascript
I'm trying to figure out how i could add more values so that it goes up to 20 on the counter tool.
It must stay the same size, so how could i achieve this?
Would the new values be hidden and slide in?
Any help would be much appreciated!
var pages = ["1", "2", "3", "4", "5", "6", "7", "8"];
$(document).ready(function () {
var num = 1;
updatePrice(num);});
function updatePrice(num) {
pages.forEach(function(entry) {
if (entry == num) {
document.getElementById(entry).className = "page-selected page";
}
else {
document.getElementById(entry).className = "page";
}
document.getElementById('circle').innerHTML = num });
}
function addOne() {
var current = document.getElementsByClassName('page page-selected')[0].id
if (current < 8) {
current++;
updatePrice(current);
}
}
function takeOne() {
var current = document.getElementsByClassName('page page-selected')[0].id
if (current > 1) {
current--;
updatePrice(current);
}
}
I did a complete re-write as the events are far cleaner in pure jQuery. I also added an extra div to allow the scrolling you wanted:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/ep6s616z/18/
Simpler HTML:
<div id="circle">1</div>
<div id="calculator">
<div id="slider-left">-</div>
<div id="slider">
<div id="page-holder"></div>
</div>
<div id="slider-right">+</div>
</div>
Code:
// Generate n items
for (var i = 1; i <= 20; i++) {
$('#page-holder').append($('<div>').addClass('page').text(i));
}
// Outer slider - allows for scroller
var $slider = $('#slider');
// Actual page holding div
var $pageHolder = $('#page-holder');
// Listen for clicks on any .page divs
$pageHolder.on('click', 'div.page', function (e) {
var $div = $(this);
$('#page-holder .page').removeClass('page-selected');
$div.addClass('page-selected');
$('#circle').html($div.html());
// Ensure the element is visible - of not scrill it into view
var offset = $div.offset();
// Range of the visible area
var areaStart = $slider.scrollLeft();
var areaEnd = areaStart + $slider.width();
var x = ($div.index() + 1) * $div.outerWidth();
if (offset.left > areaEnd)
{
$slider.animate({scrollLeft: x}, 100);
}
else if (offset.left < areaStart)
{
$slider.animate({scrollLeft: x-$div.width()}, 100);
}
});
$('#slider-right').click(function () {
var $div = $('#page-holder .page-selected');
if (!$div.length) {
$div = $('#page-holder .page:first');
} else {
$div = $div.next();
}
$div.trigger('click');
});
$('#slider-left').click(function () {
var $div = $('#page-holder .page-selected');
if (!$div.length) {
$div = $('#page-holder .page').last();
} else {
$div = $div.prev();
}
$div.trigger('click');
});
Note: the scrolling to keep it in view is not perfect, as the range checks are not quite right, but you need something to do. :)
i guess this is what u wanted . i have added a button control for adding the more limits on the slider.
HTML code
<input id="add" name="addmore" type="button" value="AddMore" />
Jquery code:
$('#add').on('click', function () {
var divEle = '<div onClick="updatePrice(this.id)" id="' + count + '" class="page">' + count + '</div>';
$('#calculator').width($('#calculator').width() + sizeCounter);
$('#page-holder').width($('#page-holder').width() + sizeCounter);
$('#page-holder').append(divEle);
pages[count - 1] = count;
count++;
if (count == 10) sizeCounter += 4;
});
Live Demo :
http://jsfiddle.net/dreamweiver/ep6s616z/23/
Happy Coding :)
I am use this code for Writing Text Effect:
<script type="text/javascript">
$(document).ready(function () {
function changeText(cont1, cont2, speed) {
var Otext = cont1.text();
var Ocontent = Otext.split("");
var i = 0;
function show() {
if (i < Ocontent.length) {
cont2.append(Ocontent[i]);
i = i + 1;
};
};
var Otimer = setInterval(show, speed);
};
$(document).ready(function () {
changeText($("#TypeEffect p"), $(".p2"), 150);
});
});
</script>
but its not working for multiline, I use this code:
changeText($("#TypeEffect p, #TypeEffect br"), $(".p2"), 150);
so, its not working.
please help me for Writing Text Effect in multi line.
Try
$(document).ready(function () {
function changeText(cont1, cont2, speed) {
var contents = $(cont1).contents().map(function () {
if (this.nodeType == 3) {
if ($.trim(this.nodeValue).length) {
return this.nodeValue.split("")
}
} else {
return $(this).clone().get();
}
}).get();
var i = 0;
function show() {
if (i < contents.length) {
cont2.append(contents[i]);
i = i + 1;
} else {
clearInterval(Otimer)
}
};
var Otimer = setInterval(show, speed);
};
$(document).ready(function () {
changeText($("#TypeEffect p"), $(".p2"), 150);
});
});
Demo: Fiddle
Try this:
$("[class*=autoWrite]").each(function(e){
autoWriteText($(this));
})
function autoWriteText(elm){
var clas = elm.attr("class");
clas = clas.split("-");
var speed = clas[1];
var delay = clas[2];
var txt = elm.html();
elm.html("");
setTimeout(function(){
elm.fadeIn("fast");
txt = txt.split("");
var txtI = 0;
var html = "";
var intrvl = setInterval(function(){
html = html + txt[txtI] ;
elm.html(html + "_");
txtI = txtI + 1;
if(txtI == txt.length){
clearInterval(intrvl);
}
},speed);
},delay)
}
.autoWriteText{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h5 class="autoWrite-10-0" >This element will write a <b>letter every 10 milliseconds</b> in this box, with a <b>delay of 0 milliseconds</b>.</h5>
<hr>
<h5 class="autoWrite-50-1000" >This element will write a <b>letter every 50 milliseconds</b> in this box, with a <b>delay of 1 second</b>.</h5>
<hr>
<h5 class="autoWrite-200-3000" >This element will write a <b>letter every 200 milliseconds</b> in this box, with a <b>delay of 3 second</b>.</h5>
<hr>
<h5 class="autoWrite-500-5000" >This element will write a <b>letter every 500 milliseconds</b> in this box, with a <b>delay of 5 second</b>.</h5>
<hr>
I am trying to add text into a div using JavaScript and/or jQuery and then have that text change to different text every 10 seconds -- so somewhat like a slideshow of just plain text. Here's my code:
<div id="textslide"><p></p></div>
<script>
var quotes = new Array();
quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";
var counter = 0;
while (true) {
if (counter > 4) counter = 0;
document.getElementById('textslide').firstChild.innerHTML = quotes[counter];
counter++;
setTimeout( // not sure what to put here, 500); // Want to delay loop iteration
}
</script>
HTML:
<div id="textslide"><p></p></div>
JavaScript/jQuery:
var quotes = [
"quote1",
"quote2",
"quote3",
"quote4",
"quote5",
];
var i = 0;
setInterval(function() {
$("#textslide").html(quotes[i]);
if (i == quotes.length) {
i = 0;
}
else {
i++;
}
}, 10 * 1000);
Working demo here
Use a function and call it on body onload
<html>
<head>
<script>
var counter = 0;
function changeText()
{
var quotes = new Array();
quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";
if (counter > 4)
{
counter = 0;
}
document.getElementById("textslide").innerHTML = quotes[counter];
setTimeout(function(){changeText()},10000);
counter ++;
}
</script>
</head>
<body onload="changeText();">
<p id="textslide"></p>
</body>
</html>
Here is a suggestion with plain JS
function loop() {
if (counter > 4) counter = 0;
document.getElementById('textslide').firstElementChild.innerHTML = quotes[counter];
counter++;
setTimeout(loop, 500);
}
loop();
Demo here
If you want to use jQuery you can use this: $('#textslide p:first').text(quotes[counter]);
Demo here
Instead of while, use:
setInterval(function () {
//do your work here
}, 10000);
The following javascript code takes randomly selected value from a array and types it in the input box. I've used jquery. I want to end setInterval "zaman2", so after It ends I can retype the next random string to the input box. But the loop doesn't end and gets stuck. How can I solve this?
Link to jsFiddle: http://jsfiddle.net/AQbq4/4/
var dersler = [...very long list...];
var zaman = setTimeout(function() {
var yeniDers = dersler[Math.floor(Math.random()*dersler.length)];
sayac = 0;
var zaman2 = setInterval(function() {
var harf = yeniDers.slice(0,(sayac+1));
sayac++;
$('#main-search').attr('placeholder', harf).typeahead({source: dersler});
if (sayac == yeniDers.length) {
clearInterval(zaman2);
}
},450);
},2000);
Don't you mean
DEMO
var tId, tId2;
function show() {
var ran = arr[Math.floor(Math.random()*arr.length)];
cnt = 0;
tId = setInterval(function() {
var char = ran.slice(0,(cnt+1));
cnt++;
$( '#main-search' ).attr('placeholder', char);
if (cnt == ran.length) {
clearInterval(tId);
tId2=setTimeout(show,2000);
}
},450);
}
show();