I am making a jQuery carousel that is populated using JSON. I need it to stop at the end. I calculate the width of the list by multiplying the number of list items by the width of the list item, so new items can be added without changing the width in the CSS. Here is my code
slider.js
$(document).ready(function() {
var w = $("#carouselList").css("width");
var slider = $("#carouselList");
var leftProperty, newLeftProperty;
$("#rightButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty - 991 <= -w) {
newLeftProperty = 0;
}
else {
newLeftProperty = leftProperty - 304;
}
slider.animate({left: newLeftProperty}, 500);
});
$("#leftButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty < 0){
newLeftProperty = leftProperty + 304;
}
else {
newLeftProperty = 0;
}
slider.animate({left: newLeftProperty}, 500);
});
});
the HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">
</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->
<script>
$.getJSON('jsonData.json', function(data){
var items=[];
$.each(data, function(key, val){
items.push(val);
$("#carouselList").append(items[2]);
var c =$("#carouselList li").size();
$("#carouselList").css("width", c*250);
});
});
</script>
</body>
</html>
Related
i made slider that changes images every 1 sec, but i cant figure how to make the if statement loop, the images just stays on the first slide i tried to loop with while and for but i cant make it work. Can you please help me :)
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
document.getElementById("currentImage").src = images[counter-2];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
<script src="script.js"></script>
</body>
When counter>=2 condition, you are not changing the counter variable.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
counter -= 1; // modify the counter variable
document.getElementById("currentImage").src = images[counter];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
I have created this snippet so you can have as many images as you want in the array.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg"];
let count = 0;
const displayImage = () => {
document.getElementById("currentImage").src = images[count];
if( count >= (images.length-1)) count = 0;
else count++;
}
setInterval( displayImage, 1000 );
<img src="" id="currentImage" />
This is a working example, using recursion.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var sliderElement = document.getElementById("currentImage");
(function slider(counter, len){
sliderElement.src = images[counter];
counter ++;
if(len === counter){
counter = 0;
}
setTimeout(slider, 1000, counter, len);
})(0, images.length);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
I am trying to build a very simple points counter on a website. The numbers and button press aren't showing up in the main HTML. I am somewhat familiar with javascript, but not how to implement it onto a website. Help?
I've tried putting the javascript in a tag in the header, but it still doesn't show up.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/public_html/script.js"></script>
</head>
<body>
<div id="main-container">
<div class="health-box" id="opponent-health">
<img src="https://www.trzcacak.rs/myfile/full/208-2086167_runic-letter-othalan-rune-odal.png">
<div class="health-counter" id="opponent-health-counter">
</div>
<div class="health-adjust health-minus" id="opponent-health-minus">
▼
</div>
<div class="health-adjust health-plus" id="opponent-health-plus">
▲
</div>
</div>
<div class="health-box" id="your-health">
<p> LP </p>
<div class="health-counter" id="your-health-counter">
</div>
<div class="health-adjust health-minus" id="your-health-minus">
▼
</div>
<div class="health-adjust health-plus" id="your-health-plus">
▲
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
//Variable set-up
var opponentHealth = 0;
var yourHealth = 10;
$("#opponent-health-counter").html(opponentHealth);
$("#your-health-counter").html(yourHealth);
//Health adjust code
$(".health-adjust").click(function() {
if (this.id == "opponent-health-minus" && opponentHealth > 0) {
opponentHealth -= 1;
}
else{
opponentHealth -= 0;
};
if (this.id == "your-health-minus") {
yourHealth -= 1;
};
if (this.id == "opponent-health-plus" && opponentHealth < yourHealth) {
opponentHealth += 1;
}
else{
opponentHealth += 0;
};
if (this.id == "your-health-plus") {
yourHealth += 1;
};
$("#opponent-health-counter").html(opponentHealth);
$("#your-health-counter").html(yourHealth);
});
});
Here is a link to a Pen where the programming works as expected. https://codepen.io/iph33r/full/LYPpOJm
Since your script uses Jquery, you need to load that first.
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/public_html/script.js"></script>
</head>
I made a simple "spacebar simulator" game with HTML and JavaScript. Every time the user presses spacebar an image is replaced with another one, and when the key is released it is reset to the original image.
I would like to add a counter to the page, which counts the number of times the user has pressed spacebar. The source code is below:
var myRealUrl = "./assets/spacebar.png";
$("body").on("keydown", function (e) {
if(e.which == 32){
$("#spacebar").attr("src", "./assets/spacebar_pressed.png")
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
var button = document.getElementById('counter'),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Click me: " + count;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
<span id="counter"><p></p></span>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed</p><p id="counter">0</p><p> times.</p>
<footer>
<p>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
So set up a page level variable and increment it in the keydown event handler.
Your attempt at the "button" click code didn't work because the p element that needed to be clicked had no content inside of it, so it wasn't rendering on the screen and therefore there was nothing to click on.
Also, you can't have more than one element with the same id and it's invalid to put a p inside of a span.
var counter = 0; // Variable to hold the count
var myRealUrl = "./assets/spacebar.png";
var count = document.getElementById('counter');
$("body").on("keydown", function (e) {
if(e.which == 32){
counter++; // Increment the counter
$("#spacebar").attr("src", "./assets/spacebar_pressed.png");
count.textContent = counter; // Log the count
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed <span id="counter">0</span> times.</p>
<footer>
<p>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
before i reinvent the wheel, i wanted to know if anyone already has written a js/jquery library that allows user to select multiple div elements by left clicking and holding the hot keys (just like in windows)
Currently i have only this much
http://jsfiddle.net/abarik/nv9hnusu/3/
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by abarik</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.selected {
background-color:green;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.selectable').click(function (e) {
// $('.console').append('shiftKey'+e.shiftKey)
$('.console').append('ctrlKey'+e.ctrlKey)
if (e.ctrlKey) {
$(this).toggleClass('selected');
}
});
var ids = new Array();
$('#btn').click(function () {
var selected_activities = $('.selected');
var ids = new Array();
selected_activities.each(function () {
var id_str = $(this).attr("id");
var id_arr = id_str.split("_");
var selval = id_arr[1];
if (selval != 'undefined' && selval != '' && selval != null) {
ids.push(selval);
}
});
alert(ids);
});
});//]]>
</script>
</head>
<body>
<div class="left_column">
<div class="selectable selected" id="participant_1">----1----</div>
<div class="selectable" id="participant_3">----2----</div>
<div class="selectable selected" id="participant_5">----3----</div>
</div>
<div class="right_column">
<div class="selectable" id="participant_2">----4----</div>
<div class="selectable" id="participant_4">----5----</div>
<div class="selectable" id="participant_6">----6----</div>
</div>
<input type="button" id="btn" value="Get selected ids">
<div class="console">ctrlKeyfalsectrlKeyfalsectrlKeytruectrlKeytrue</div>
</body></html>
found an library that does exactly what i need to http://evulse.github.io/finderSelect/
I am creating a chat service, everything works fine except for one little detail, the scrollbar. I'm using the jQuery Custom Scrollbar plugin.
It doesn't go to the bottom, sometimes it's does really well but sometimes it stuck in the half from the last message, I have been working in this detail for one week and I can't figure out what's the problem yet.
Here's my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>---</title>
<!-- Main CSS -->
<link rel="stylesheet" href="css/default.css">
<!-- Extra CSS -->
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<!-- All JS Scripts-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.elastic.source.js"></script>
<script type="text/javascript" src="js/jquery.xdomainrequest.min.js"></script>
<script type="text/javascript" src="js/flowtype.js"></script>
<script type="text/javascript" src="js/cpg_smartphones_proto.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Perfect Scrollbar
<link href="css/perfect-scrollbar.css" rel="stylesheet">
<script src="js/perfect-scrollbar.js"></script>-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if !IE]><!--><script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</head>
<body onload="initialize()">
<div class="row">
<div id="chat_intro">
<div class="chat_caller" onclick="goToChat()">
<h1>Enter</h1>
</div>
</div>
</div>
<div id="chat_box">
<div id="chat_top" hidden="hidden">
<div id="chat_header">
<h4>Personal support</h4>
<p>Find the best product for you.</p>
</div>
<div id="chat_avatar"></div>
</div>
<div id="chat_container">
<div id="history_div">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" type="text" onkeypress="chatHandler(event)">
</textarea>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#chat_box').hide();
$('#chat_footer').hide();
});
</script>
</script>-->
</body>
</html>
And now, the JS:
function goToChat() {
origin = BANNER_NAME + "_" + uid + metaData;
$("#chat_intro").hide();
$("#chat_box").show();
$("#chat_top").show();
$("#chat_container").show();
$("#chat_footer").show();
$("#history_div").mCustomScrollbar( {
theme : "dark-thick",
advanced : {
updateOnContentResize : true
}
});
document.getElementById('input_area').focus();
chat();
}
function chatHandler(event) {
// ENTER key
var key;
if (window.event) // IE8 and earlier
{
key = event.keyCode;
} else if (event.which) // IE9/Firefox/Chrome/Opera/Safari
{
key = event.which;
}
InputInterface.restartTimeout();
if (key == 13) {
chat();
$('#input_area').focus();
event.keyCode = 0;
}
}
function chat() {
// Build request
var chatText = "";
if (!initialized) {
chatText = "hi";
}
else {
chatText = input_area.value;
if(chatText.trim()=="")return;
var userAnswer = USER + input_area.value + TIME + getTimeStamp() + TIME_END + FONT_END;
history_mc.innerHTML += userAnswer;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
$("#history_div").mCustomScrollbar("scrollTo", "bottom");
});
$(input_area).val("");
if(getUrlParameter("isMobile") == "true") hideKeyboard();
}
$("#deleteThis").remove();
InputInterface.prepareSending(chatText);
setTimeout(function(){history_mc.innerHTML += TYPING_MESSAGE;
$("#history_div").mCustomScrollbar("scrollTo", "bottom");});
if(!initialized){
InputInterface.flush();
initialized = true;
}
}
//Start calling recursively getMsgId until the retries max out or succesfully get an Id
function getResponse(json) {
start = new Date().getTime();
processRetries = 0;
responseRetries = 0;
getMessageId(json);
}
function displayResponse(response) {
$("#deleteThis").remove();
history_mc.innerHTML += BM_INI+ response_number +BM_FIN + response + TIME + getTimeStamp() + TIME_END + FONT_END;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
if (DEBUG) console.log("#conv"+response_number);
$("#history_div").mCustomScrollbar("scrollTo", "#conv"+response_number);
response_number++;
},250);
document.getElementById('input_area').focus();
}
I hope you can shine me with you jedi powers, thank you so much.
Greetings.