Here is my piece of code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Shout!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var status=1;
function action() {
if(status==1) {
$("#Layer1").hide("slow");
$("#Layer3").hide("fast");
$("#Layer4").hide("slow");
$("#close").attr("src","open.jpg");
status=0;
}
else if(status==0) {
status=1;
$("#Layer1").show("slow");
$("#Layer3").show("fast");
$("#Layer4").show("slow");
$("#close").attr("src","close.jpg");
}
}
function sendline() {
$("#msg").val(" ");
}
function type() {
var text=$("#msg").val();
$("#Layer6").html(text);
}
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 179px;
top: 3px;
}
#Layer2 {
position:absolute;
width:69px;
height:64px;
z-index:2;
left: 570px;
top: 543px;
}
#Layer3 {
position:absolute;
width:124px;
height:22px;
z-index:3;
left: 473px;
top: 474px;
}
.style1 {
color: #FFFFFF;
font-family: "Segoe UI";
font-weight: bold;
}
#Layer4 {
position:absolute;
width:72px;
height:27px;
z-index:4;
left: 744px;
top: 485px;
}
#Layer5 {
position:absolute;
width:274px;
height:70px;
z-index:5;
left: 422px;
top: 62px;
}
#Layer6 {
position:absolute;
width:638px;
height:356px;
z-index:5;
left: 272px;
top: 105px;
}
-->
</style></head>
<body>
<div class="style1" id="Layer3">
<textarea id="msg" style="height:50px;width:250px" rows="10" cols="80" onkeyup="type()"></textarea></div>
<div id="Layer1">Hello World!<img src="body.jpg" alt="Shout !" width="842" height="554" /></div>
<div id="Layer2"><img src="close.jpg" id="close" width="63" height="64" OnClick="action()"/></div>
<div id="Layer4">
<input type="button" value="Send Line" onclick="sendline()" /></div>
<div id="Layer6" style="color:#FFFFFF;"></div>
</body>
</html>
I'm facing a problem with the type() function.Its simply not running
Any advice on how to get it rnnning?
Thanks!
Your function is running, however it's throwing an error because of the function name:
Uncaught TypeError: string is not a function
or in Firefox:
type is not a function
In short, you can't use type as a function name here, you just need to give it a slightly different name, for exampled typed.
Here's your code only changing the function name, working :)
Rename your type function to something else (try somethingElseThanType just to test), and it should work
Related
can i ask a question. I try to make a reading GPS ( the Latitude and Longitude ), i follow this link https://www.itilog.com/ but it just using innerHTMl or sthing. the idea is how to sending data ( the Latitude and Longitude ) into the input tag so that i can have the data the user who enter these data. Here are the code i follow W3school:
<!DOCTYPE html>
<html>
<body>
<p>Displaying location using Latitude and Longitude</p>
<button class="geeks" onclick="getlocation()">
Click Me
</button>
<input type="text" id="demo1" onkeyup="showLoc()"></input>
<script>
var variable1 = document.getElementById("demo1");
function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc);
}
function showLoc(pos) {
variable1.innerInput =
"Latitude: " +
pos.coords.latitude +
"<br>Longitude: " +
pos.coords.longitude;
}
</script>
</body>
</html>
I have the code in html and css:
#NOTE: U need to using responsive to see the code files
this is html file:
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="generateqr.css">
</head>
<body>
<div class="container">
<h3>Course's name</h3>
<div class="body">
<div class="small_container">
<button>Generate QR</button>
</div>
<div class="small_container">
<button>Your Files</button>
</div>
<div class="info">
<div class="title1">
<p>Longitude:</p>
<input placeholder="type here...">
</div>
<div class="title2">
<p>Latitude:</p>
<input placeholder="type here...">
</div>
</div>
<div class="location">
<a id="check" href="https://www.itilog.com/">check here if you don't know your location</a>
</div>
</div>
</div>
<div class="footer">
Back
</div>
</body>
</html>
and CSS file:
* {
background-color: #7879f1;
position: relative;
}
h3 {
text-align: center;
}
.body{
width: 110%;
height: 500px;
margin-left: -10px;
background-color: white;
position: absolute;
}
.small_container{
background-color: white;
margin-left: 10%;
margin-top: 20%;
display: inline-block;
}
.footer{
margin-top: 515px;
background-color: white;
width: 110%;
margin-left: -10px;
margin-bottom: -20px;
padding-bottom: 20px;
}
button{
height: 50px;
width: 100px;
margin-left: 20px;
}
a{
background-color: white;
margin-left: 50px;
padding-bottom: 20px;
}
.info{
width: 100%;
height: 20%;
margin-left: 10%;
background-color: white;
margin-top: 10%;
}
.input{
background-color: white;
}
input {
background-color: white;
}
p {
background-color: white;
display: inline-block;
padding-left: 10%;
}
.location {
margin-top: 20%;
background-color: white;
}
.title1{
background-color: white;
}
.title2{
background-color: white;
}
i hope that we can send the data to the input ( i already have 2 input tag for the Latitude and Longitude )
You can change inputs like that :
var input = document.getElementById("input");
input.value = 'value';
For your context i made a jsfidle for you understand how to do it :
<!DOCTYPE html>
<html>
<body>
<p>Displaying location using Latitude and Longitude</p>
<button id="_button">
Click Me
</button>
<input type="text" id="latitudeInput" value=""></input>
<input type="text" id="longitudeInput" value=""></input>
<script>
var button = document.getElementById('_button');
var latitudeInput = document.getElementById("latitudeInput");
var longitudeInput = document.getElementById("longitudeInput");
button.addEventListener('click', function(){
getlocation();
});
function getlocation() {
// Callbacks
const successCallback = (position) => {
// Set inputs values
latitudeInput.value = position.coords.latitude;
longitudeInput.value = position.coords.longitude;
};
// Manage error messages
const errorCallback = (error) => {
alert(error.code+' : '+error.message);
};
// Call
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
}
</script>
</body>
</html>
jsfiddle.net/EdvaldoFilho/ermup5a9/4/
Hope it helps you !
I want fix on mouse over and mouse out so it can work for div.As you can see it cant worked,i dont know why.I want to do it when i move my mouse to change it to yellow,the other colors should be aqua.I did a lot but it didn't worked for me.How can i do single div be yellow by mouserover and how can i do it mouseout to do it aqua?thanks a lot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>exams</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#style
{
background-color: #00FFFF;
border-style: dotted;
}
#node2
{
background-color:#00FFFF;
border-style: dashed;
}
#node3
{
background-color: #00FFFF;
border-style: solid;
}
#node4
{
background-color: #00FFFF;
border-style: ridge;
}
#node5
{
background-color: #00FFFF;
border-style: inset;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: red;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
.feedback {
position: relative;
width: 60px;
}
#mybutton {
position: absolute;
top: 10px;
right: 10px;
}
}
#mybutton2{
position: absolute;
top:30px;
right:30px;
}
</style>
</head>
<body onload="myFunction()">
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div style="width:300px; height:200px; overflow:auto; background-color:#00FFFF;">
<span id="redText" style="color:red ">Red text for scroll test.</span>
<div style="height:200px;"></div>
</h1>
<h2 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node2">keimeno1</div> </h2>
<h3 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node3">keimeno2</div></h3>
<h4 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node4">keimeno3</div><h4>
<h5 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node5">keimeno4</div>
</div>
</h5>
<script>
function myFunction() {
alert("Page is loaded");
}
function mytimeFunction() {
setInterval(function(){ alert("Hello"); }, 5000);
timetrick();
}
function timetrick() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
}
function mouseOver() {
document.getElementById("demo").style.color = "yellow";
}
function mouseOut() {
document.getElementById("demo").style.color = "aqua";
}
</script>
<div id="mybutton">
<button class="1">first button</button>
</div>
<div id="mybutton2">
<button class="2">Second button</button>
</div
</body>
</html>
The solution for your functionality to work is to update the formatting in your script. It is quite obvious it wouldn't work because the script has an abundance of syntax errors. Firstly check your script block and you will find you've added a lone brace after the timetrick func, that prevents the mouseOver func to even get defined during runtime. Also the header tags (h1, h2,...) are very messy. For example, you have an extra div endtag before the h5 endtag. Also, like many others have already stated: remove the 'demo' id's. They are unnecessary. And add document.getElementById("node2").style.color = "yellow"; instead of the demo part. duplicate those lines inside of the function for every node in your body. This should be more than enough to make the mouseover work correctly.
Something like that could be helpful?
$('.acqua').mouseover(function() {
$('.acqua' ).css('background-color','yellow');
});
$('.acqua').mouseout(function() {
$('.acqua' ).css('background-color','aqua');
});
.acqua{
background-color: aqua;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acqua">Some text here</div>
I have a button within my code that should change the text 'hello' to 'Goodbye' but it doesn't work. What mistake have I made? My code is correctly indented in my coding program.
Here is my code:
<!doctype html>
<html>
<head>
<title>chat</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0px;
}
#topBar {
background-color:#33ccff;
width:100%;
height:100px;
z-index:1;
margin:0px;
padding:0px;
position:fixed;
}
'#logo' is the ID of the div that holds the text that I want to change and '#loginbutton' is the button that I want to use.
#logo {
width:15%;
height:60px;
float:left;
background-color:white;
margin-left:20px;
margin-top:20px;
}
#login {
width:10%;
height:60px;
float:right;
margin-right:20px;
margin-top:20px;
border-radius:8px;
}
#loginbutton { --this is the button that I want to change the text with
background-color: #lightgrey;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 30px;
cursor: pointer;
width:100%;
height:60px;
border-radius:10px;
font-family:Impact;
line-height:60px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#loginbutton:hover {
background-color: black;
color: white;
box-shadow: 2px 2px 2px rgba(0,0,0,0.24), 2px 2px 2px 2px rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<div id="topBar">
Here is the button and the div with the text:
<div id="login">
<button id="loginbutton">LOG IN</button> <!--This is the button-->
</div>
<div id="logo">hello</div> <!--This is the text I am trying to change-->
</div>
Here is my JavaScript code that I was using:
<script type="text/javscript">
document.getElementById("loginbutton").onclick=function {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
</body>
</html>
you need to specify () for the function which is missing in this case.
<script type="text/javscript">
document.getElementById("loginbutton").onclick=function() {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
I recommend using an event listener instead, to add your click handler
<script type="text/javscript">
document.getElementById("loginbutton").addEventListener('click', function(e) {
document.getElementById("logo").innerHTML = "Goodbye";
});
</script>
Update
Your existing code has a syntax error making it not work properly, where it is missing the parenthesis () after the word function and should look like this
document.getElementById("loginbutton").onclick=function() {
It should be
<script type="text/javscript">
document.getElementById("loginbutton").onclick = function() {
document.getElementById("logo").innerHTML = "Goodbye"; }
//further code
</script>
The spelling text/javscript is not correct. Correct the spelling and then add () after the function word.
See the corrected code snippet below:
<script type="text/JavaScript">
document.getElementById("loginbutton").onclick=function() {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
I am stuck on a problem . I am having Code to fill autocomplete with results from wipipedia using wikidata api I have used the following git hub resource .
My HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementing Autocomplete Search using Wikipedia OpenSearch API - Demo by W3lessons</title>
<style>
body {
background: #a8a8a8 url(bg.png);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
color: #7f7f7f;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:18px;
width:100%;
}
h1 { color:#F7F7F7; font-size:24px; font-weight:normal; }
#search input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}
#search button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}
#search button:hover {
background-color:#000;
}
</style>
</head>
<body>
<center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5104998679826243";
/* mysite_indivi */
google_ad_slot = "0527018651";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
<div style="width:50%; margin:0 auto;">
<p style="margin:20px;"><img src="http://w3lessons.info/logo.png" /></p>
<div style="margin:20px;">
<h1>Autocomplete Search using Wikipedia Opensearch API</h1>
<form method="get" id="search">
<input type="text" class="searchbox" value="Type here.. " onblur="if(this.value == '') { this.value = 'Type here..'; }" onfocus="if(this.value == 'Type here..') { this.value = ''; }" name="s">
<button type="submit">Submit</button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(".searchbox").autocomplete({
source: function(request, response) {
console.log(request.term);
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function(data) {
response(data[1]);
}
});
}
});
</script>
</body>
</html>
My Problem is I want to get data in autocomplete in particular category like if I can use this autocomplete on video in page then it should show results only related to video autocomplete in or for music it should show fill only music category results in autocomplete or so on from which category it needs to
action:opensearch is for autocomplete. Use the regular search with incategory:<category_name> prefix:<word_prefix>.
This is a slideshow,and my problem is the pause button doesn't work and it doesn't pause the slideshow.It doesn't have any errors in firebug.The button changes to resume but doesn't pause the slideshow.
I will be really really thankfull for your help.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication4.WebForm6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript" src="cycle.js"></script>
<script style="text/javascript">
$(function () {
$('.slider img:gt(0)').hide();/*hides first 2th 3th pics*/
setInterval(function () {
$('.slider :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slider');
},
3000);
});
$(document).ready(function ($) {
$('#playbutton').click(function () {
$(this).css('margin-left', '-9999px');
$('#pausebutton').css('margin-left', 0);
});
$('#pausebutton').click(function () {
$(this).css('margin-left', '-9999px');
$('#playbutton').css('margin-left', 0);
});
});
$(document).ready(function ($) {$('#playbutton').click(function() {
$('#mg').cycle('resume');
}); });
$(document).ready(function ($) {$('#pausebutton').click(function() {
$('#mg').cycle('pause');
});
});
</script>
<style type="text/css">
.slider
{
position:fixed;
width:750px;
height:400px;
background-color:white;
top: 9px; left: 12px; z-index:-1;
background:transparent url(loading.gif) no-repeat 50% 50%;
}
.slider img {
border-style: none;
border-color: inherit;
border-width: medium;
position:fixed;
top: 42px;
left: 50px;
height: 220px;
width: 651px;
bottom: 267px;
}
#pausebutton {
left: 356px;
margin-left:0px;
position:absolute;
top: 273px;
height: 27px;
}
#playbutton {
left: 356px;
margin-left:0px;
position:absolute; top: 273px;
height: 27px;
}
</style>
</head>
<body >
<div class="slider" id="mg" >
<img src="slider-2.jpg" />
<img src="slider-3.jpg" />
<img src="slider-4.jpg" />
</div >
<img src="play.png" alt="play button" title="Play" />
<a href="#" id="pausebutton" ><img src="pause.png" alt="pause button" title="Pause" /></a>
</body>
</html>
I think you'll need to stop the default behaviour of the <a> tag as clicking it will cause your page to refresh.
$('#pausebutton').click(function(e) {
e.preventDefault();
$('#mg').cycle('pause');
});
I think your code has logic error because when firebug hasn't any errors it show your code has not any Syntax errors.try debugging your code by firebug or check again your code. other thing is testing your code in multiple browser most of the time java scripts code dos not work true in all browsers .