At the moment I am building an chatbox for my work, I got it all working fine on PC, it refreshes on a certain second, when I send/receive a message the last message is shown at the bottom.
The problem now, is that everything works too on the phone EXCEPT, auto scrolling down to the last message. So you only see the second last message, you need to scroll down with your finger on the phone to see the last message.
I tried many things as in cSS only or jQuery methods, nothing seems to work, maybe you guys can help me find the golden ticket.
Current code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/chatbox.css?v=5121">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div class="main">
<div class="box">
<h1>Chat</h1>
<section class="chatbox">
<section class="chat-window">
<div id="chatboxajax"></div>
</section>
<form class="chat-input" method="post">
<input type="text" name="message" autofocus autocomplete="off" placeholder="Message..." />
<input type="submit" style="position: absolute; left: -9999px"/>
<button>Send</button>
</form>
</section>
</div>
</div>
<script>
$('#chatboxajax').load("chatboxAjax.php");
setInterval(function(){
$('#chatboxajax').load("chatboxAjax.php");
}, 1000);
</script>
</body>
</html>
Related
Im trying to do a frontent Mentor challenge active-stats -- link for the image
And what i want to do is to show that errors that appears when i click the button "Claim your free trial".
I learned some javascript and i know that i can use "onclick" and then the function etc, but in this case im not sure how to do it, because i learned to use "onclick" function in the same place i that i am clicking. In this case, you click on the button but the message appears in the other boxes. Can someone help? Html code below, thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="./src/assets/css/style.css">
<title>Frontend Mentor | Intro component with sign up form</title>
<!-- Feel free to remove these styles or customise in your own stylesheet đź‘Ť -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header>
<h1>Learn to code by watching others</h1>
<p class="text1">
See how experienced developers solve problems in real-time. Watching scripted tutorials is great,
but understanding how developers think is invaluable.
</p>
</header>
<main>
<section class="tryit">
<strong>Try it free 7 days</strong> then $20/mo. thereafter
</section>
<section class="form">
<form>
<input type="text" placeholder="First Name"></input>
<input type="text" placeholder="Last Name"></input>
<input type="text" placeholder="Email Adress"></input>
<input type="text" placeholder="Password"></input>
<input class="claim" type="submit" value="CLAIM YOUR FREE TRAIL"></input>
</form>
<p class="terms1">By clicking the button, you are agreeing to our <a class="terms2" href="#">Terms and Services</a></p>
</section>
</main>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Lucas Passos.
</p>
</footer>
</body>
</html>
I have a basic test page:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-2">
<p>Test</p>
<form name="scan">
Field 1
<br>
<input type="text" name="first" id="first">
<br>
Field 2
<br>
<input type="text" name="second">
<br>
Field 3
<br>
<input type="text" name="third">
<br>
<br>
<input type="submit" name="submit">
</form>
</div>
<script>
$( document ).ready(function() {
$("input:text:visible:first").focus();
});
</script>
</body>
</html>
It works as expected in all Windows browsers.
The Jquery code does not work when loaded into Safari or Chrome on an iPhone with the latest iOS.
I also tried:
document.getElementById("first").focus();
I also put some alerts around the commands and the alerts worked but the focus did not happen into the first field.
Where am I going wrong?
Thanks
Ken
You have this code
$("input:text:visible:first").focus();
You want to focus on the first textual input. You can do it like this:
$("input[type=text]:first").focus();
Where inside the square braces your selector specifies the value of the type attribute and we use the :first presudo-selector.
I’m trying to build a Samsung Smart TV (Tizen) app. Now the app works on real Testing TV Series 6000.
I have four textfields with autofocus in the first textfield. The TV keyboard opened and I see the “Done” button. What can I do to have consecutive input with “Next” Button?
Please look at 5.4: https://www.samsungdforum.com/UxGuide/2014/05_text_input.html
I doesn’t find any information about that…
My source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1920, initial-scale=1.0, maximum-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script language="javascript" type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script language="javascript" type="text/javascript" src="scripts/keyTizen.js"></script>
<script language="javascript" type="text/javascript" src="scripts/main.js"></script>
</head>
<body>
<div class="first">
<input type="text" placeholder="Dein Name" name="yourName" id="yourName" autofocus />
<input type="text" placeholder="Band / Interpret deines Wunschsongs" name="band" id="band" />
<input type="text" placeholder="Titel deines Wunschesongs" name="title" id="title" />
</div>
<div class="second">
<textarea placeholder="Deine persönliche Grußnachricht" name="message" id="message"></textarea>
</div>
</body>
</html>
You can try 'blur' and 'focus' of consecutive text fields using their element id and bind the action to other keys available on keyboard.
Use triggering 'keydown' event to focus to next input.
Specific keyCode for other keys and event listener are described here.
https://www.samsungdforum.com/TizenGuide/tizen271/index.html
I'm trying to create a file browser app.Here on click of a folder should be inserted into the text box provided.
Suppose if I click on app folder,I want the /app folder to be inserted into the provided text box.I've followed this URL in order to make this file browser app.
My template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
Can anyone please suggest me regarding this issue ...
Since you're using jquery already I would say the easiest would set the jquery event click for the folders to select the text input element and use the .val () function to set your new value so it would look something like this
$(".folder selector").click (function (){
$(".textbox selector").val ("/"+this.text());
});
I'm not sure if the value function works on input elements but if not you could change it to a <textarea></textarea>
I just make a example site because I want to make a mobile site..
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<link href="./framework/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="./framework/jquery-1.6.4.min.js"></script>
<script src="./framework/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Button</h1>
button
</div>
<div data-role="content">
button
button <br/>
button <br/>
button <br/>
button <br/>
button
</div>
<div data-role="footer">
<h1>Copyright</h1>
</div>
</div>
</body>
</html>
But when it is started in Mobile, a scrollbar has appeared..
When I don't use jQueryMobile, the scrollbar has gone..
I'm curious why scrollbar is made..
Because of ajax-loader? or Because of jQuery-css setting?
The scrollbar just conduct 1mm scrolling.. I want to remove it
Sample site is http://mbtistudy.cafe24.com/jstest.html
I'll appreciate your help..
Ok then you have to remove the min-height from ui-page ui-body-c ui-page-active which is causing the scrollbar. Also remove min-height where ever it's found also to .ui-mobile, .ui-mobile .ui-page if it's still showing then add overflow: hidden to this.
Add following style class into your page it will remove scroll bar.
.ui-mobile .ui-page
{
min-height: 300px;
overflow: hidden;
}
Add this in your CSS this will probability help:
.ui-content .ui-listview, .ui-panel-inner>.ui-listview { margin:0em}