i having problem in creating textbox using jquery that is implemented in webview. here is the code
<html>
<head>
<title>jQuery Mobile List Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
counter++;
});
});
</script>
</head>
<body>
<div data-role="page" id="AddQuestion">
<div data-role="header" data-position="fixed">
<h1>AddQuestion</h1>
</div>
<div data-role="content">
<form name="newdocument">
<div data-role="listview" id="TextBoxesGroup"></div>
<input type="button" value="Add Option" id="button">
</form>
</div>
</div>
</body>
</html>
i have tried this code in jsfiddle and when i press the add option button it shows unstyle textbox. what would be the problem?
You need to trigger create on the page to have jQuery mobile apply the additional markup and classes required for styling.
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
$('#AddQuestion').trigger('create');
counter++;
});
});
</script>
Related
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>
I can focus on the text input when I click the button but it doesn't focus on the text input when page first loaded even though I am using the same function. How can I focus at the input textfield once the page is loaded ?
http://codepen.io/anon/pen/derwi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
function generate_question (){
var num1 = Math.floor(Math.random()*10),
num2 = Math.floor(Math.random()*10);
$('.result').hide();
$('.left').html(num1 + ' x ' + num2 + ' = <input type="text" size="3" class="answer">');
$('.answer').val('');
$('.answer').focus();
$('.answer').keypress(function(e){
if (e.which == 13) {
if ($(this).val() == num1 * num2) {
$('.result').html('Very Good!');
$('.result').show();
} else {
$('.result').html('Try Again');
$('.result').show();
}
}
})
}
$(document).ready(function(){
generate_question();
$('#again').click(function(){
generate_question();
});
$('#again').keypress(function(e){
if (e.which == 32){
generate_question();
}
});
})
</script>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="result"></div>
</div>
<div class="instruction">
Hit enter to check your answer.
<button type='button' id='again' style='margin-top: 10px;'>Do another one?</button>
</div>
</body>
</html>
Try $('.answer').focus(); in your ready function
$( document ).ready(function(){
$('.answer').focus();
});
DEMO: http://plnkr.co/edit/EX0xS9d8o3TqUqiEOAL5?p=preview
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.
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>
On my homepage there is a listview, where every element has a link to the same page, but with different URL parameter:
Those links work fine and they redirect me to the page player.html; the problem is that here the event pageinit is not fired:
<div data-role="page" data-add-back-btn="true" id="playerPage">
<script>
var favStorageKey = "youtubeTheaterFav";
var videoID = $.url().param("video");
var movieID = $.url().param("movie");
$("#playerPage").on('pageinit',function(){
console.log("init");
}
</script>
But if I refresh the page the event is triggered. Is there any way to trigger it when the page is loaded at first?
EDIT: This is player.html:
<!DOCTYPE html>
<html>
<head>
<title>Youtube Theater</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src = "js/themoviedb.js"></script>
<script src = "js/youtube.js"></script>
<script src="js/purl.js"></script>
<script src="js/jquery.fitvids.js"></script>
<style>
div.movie-info{font-size: 16px;margin-top: 10px; margin-bottom: 5px}
.toogle-container .ui-slider-switch { width: 9em}
</style>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="playerPage">
<script>
var favStorageKey = "youtubeTheaterFav";
var videoID = $.url().param("video");
var movieID = $.url().param("movie");
$(document).on('pageinit',"#playerPage",function(){
console.log("init");
$("#embdPlayer").attr("src","http://www.youtube.com/embed/" + videoID + "?autoplay=1");
$.when(getMovieInfo(movieID)).then(function(movie){
$("#poster").attr("src",movie.poster);
$("#title").html(movie.title + " <small>(" + movie.released + ")</small>");
$("#plot").html(movie.plot);
$("#cast").html("<strong>Director: </strong>" + movie.director+"<br> <strong>Stars: </strong>" + movie.cast);
if(isFavorite()){
$("#favoriteSlider").val("on").slider("refresh");
}else{
$("#favoriteSlider").val("off").slider("refresh");
}
});
$("#playerContainer").fitVids();
});
function getFavorites(){
var savedFavorites = localStorage.getItem(favStorageKey);
return JSON.parse(savedFavorites);
}
function isFavorite(){
if(localStorage.getItem(favStorageKey)){
var fav = getFavorites();
return fav[videoID]!=undefined;
}
return false;
}
function removeFromFavorites(){
var favMap = getFavorites();
delete favMap[videoID];
localStorage[favStorageKey] = JSON.stringify(favMap);
}
$("#favoriteSlider").change(function(){
if(isFavorite()){
removeFromFavorites();
}else{
saveToFavorites();
}
});
function saveToFavorites(){
var film = {
movie: movieID,
title: $("#title").text(),
poster: $("#poster").attr("src")
}
var favorites={};
if(localStorage.getItem(favStorageKey)){
favorites = getFavorites();
}
favorites[videoID] = film;
localStorage.setItem(favStorageKey,JSON.stringify(favorites));
}
</script>
<div data-role="panel" id="movieInfo" data-position="right" data-display="push" class="toogle-container">
<H3 id="title"></H3>
<img id="poster">
<div id="plot"></div>
<div id="cast"></div>
<select data-role="slider" id="favoriteSlider">
<option value="off">Unfavorite</option>
<option value="on">Favorite</option>
</select>
</div>
<div data-role="header" >
<H1>Youtube Theater</H1>
Movie Info
</div>
<div data-role="content">
<div id="playerContainer">
<iframe id = "embdPlayer" width="560" height="315" frameborder="0" ></iframe>
</div>
</div>
</div>
</body>
</html>
The pageinit event is the right one you looking for... Try navigating to player.html page with the following JavaScript code:
$.mobile.changePage( "player.html?video=34&movie=4354", { reloadPage : true });
This forces a reload of a page, even if it is already in the DOM of the page container.
Also you can try changing $("#playerPage").on('pageinit',function(){ to $(document).on('pageinit', '#playerPage',function(){.