I see in almost news websites bar called quick news and its appear and reading character by character like this site http://www.filgoal.com/English/DefaultDynamic.aspx in the latest news section under menus.
i hope if any one can help me to know how it works or give me a sample for that.
thanks,
There is a good jQuery plugin that does exactly this. You can read the documentation and download it from
http://plugins.jquery.com/project/BBCnewsTicker
There is an example of it in action on this page
http://www.makemineatriple.com/jquery?newsTicker=
The BBC style news ticker plugin for jQuery will do what you want.
Well, something like this would do if you don't want to use any plugins:
<html>
<head>
<script>
function printTextDelayed(item, text, symbolNum) {
if (symbolNum == undefined) symbolNum = 0;
if (symbolNum < text.length-1) {
item.innerHTML = text.substring(0,symbolNum+1)+"_";
setTimeout(function() {
printTextDelayed(item, text, symbolNum+1);
}, 100+Math.random()*300);
} else {
item.innerHTML = text;
}
}
function printButtonClick() {
printTextDelayed(document.getElementById("dynalink"), document.getElementById("dynatext").value);
}
</script>
</head>
<body>
<input type="text" id="dynatext">
<input type="button" value="Print" onclick="printButtonClick();"/>
<br/>
</body>
</html>
Related
Here's the Script.
javascript
function linkPageContact(clicked_id){
if(clicked_id === 'website-design-check'){
$('#website-design').attr('checked',true);
window.location.href = "/contact";
}
}
}
I want to check my checkboxes when I click the button with an id=website-design-check.
Here is my HTML.
first.html
<a href="/contact" target="_blank">
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>
Here's the second HTML file where checkbox is.
second.html
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
Now how can I achieve what I want base on the description given above. Can anyone help me out guys please. I'm stuck here for an hour. I can't get any reference about getting a checkbox state from another page.
To do this, you can modify your button link and add in additional parameters that you can then process on the next page.
The code for the different pages would be like:
Edit: I changed it to jQuery, it should work now.
Script
function linkPageContact(clicked_id){
if(clicked_id === 'website-design-check'){
window.location.href = "second.html?chk=1";
}
}
second page
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
<script type="text/javascript">
var url = window.location.href.split("?");
if(url[1].toLowerCase().includes("chk=1")){
$('#website-design').attr('checked',true);
}
</script>
since your checkbox is in another html page, so it's totally normal that you can't get access to it from your first html page!
what I can offer u is using the localstorage to keep the id and then use it in your second page to check if it's the ID that u want or not.
so change your function to this :
function linkPageContact(clicked_id){
localStorage.setItem("chkId", "clicked_id");
window.location.href = "/contact";
}
then in your second page in page load event do this :
$(document).ready(function() {
var chkid = localStorage.getItem("chkId");
if(chkid === 'website-design-check'){
$('#website-design').attr('checked',true);
});
You can't handle to other sites via JavaScript or jQuery directly. But there's another way. You can use the GET method to achive this.
First you need to add to the link an attribute like this in your first.html:
/contact?checkbox=true
You can change the link as you want with JavaScript.
Now it will refer to the same page but it can be now different. After that you can receive the parameter with this function on the second.html.
function findGetParameter(parameterName) {
var result = null,
tmp = [];
var items = location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
}
return result;
}
I got it from this post thanks to Bakudan.
EDIT:
So here is an short theory.
When the user clicks the button on the first page, then you change the link from /contact to /contact?checkbox=true. When the user get forwarded to second.html then you change the checkbox depending on the value, which you got from the function findGetParameter('checkbox').
As all have mentioned you need to use session/query string to pass any variable/values to another page.
One click of the first button [first page] add query string parameter - http://example.com?chkboxClicked=true
<a href="secondpage.html?chkboxClicked=true>
<button>test button</button>
</a>
In the second page- check for the query string value, if present make the checkbox property to true.
In second page-
$(document).ready(function(){
if(window.location.href.contains('chkboxClicked=true')
{
$('#idOfCheckbox').prop('checked','checked');
}
})
Add it and try, it will work.
Communicating from one html file to another html file
You can solve these issue in different approaches
using localStorage
using the query parameters
Database or session to hold the data.
In your case if your application is not supporting IE lower versions localStorage will be the simple and best solution.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<a href="contact.html" target="_blank">
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>
<script>
function linkPageContact(clicked_id) {
localStorage.setItem("chkId", clicked_id);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
<script>
$(document).ready(function () {
var chkid = localStorage.getItem("chkId");
if (chkid === 'website-design-check') {
$('#website-design').attr('checked', true);
}
});
</script>
</body>
</html>
I'm new to the forum and new to html. I've tried may of the answers in the forums but nothing is seaming to work. While like I said i'm new I've tried looking through w3shools and having a hard time figuring this out.
what I want is to when I click the button, I would like is for it to look at the <h1><h1> and are you = x, if you are = to x then please change to work. if you are = to work please change to x.
<!DOCTYPE html>
<html>
<Head>
<title>Heather I Love You!</title>
</head>
<body style= background-color:#A8A8A8>
<!========This is the header===========>
<div id="header" style= "background-color:#00FF33;" >
<h1><p id="hheader">Heather this is a series of Pitures, Videos, and Poems to
show you the love that I have for you!"</p></h1></div>
<!=============The side bar that will allow a list of where she Wants to
go==========>
<div id="Menu" Style="background-
color:#660033;height:300px;width:125px;float:left;">
<Talbe>
<b><h3{color:white}>Categories</h3></b><br>
<button type="button" onclick="ChangeHead()">click here!</button><br>
<!--Functions-->
<Script>
function ChangeHead()
{
var g=document.getElementById("hheader")
x="Heather this is a series of Pitures, Videos, and Poems to show you the
love that I have for you!"
work="Here are some pictures of us and the boys"
if (document.getElementById("hheader").innertext == x)
{
document.getElementById("hheader").innerHTML= =work;
}
else
{
document.getElementById("hheader").innerHTML== x
}
}
</Script>
</body>
</Html>
Assuming that you have an element with the id 'hheader':
<div id='hheader'>Heather this is a series of Pitures, Videos, and Poems to show you the love that I have for you!</div>
The following script should work:
<script>
function ChangeHead() {
var g = document.getElementById("hheader");
var x = "Heather this is a series of Pitures, Videos, and Poems to show you the love that I have for you!";
var work = "Here are some pictures of us and the boys";
if (document.getElementById("hheader").innerText == x) {
document.getElementById("hheader").innerHTML = work;
} else {
document.getElementById("hheader").innerHTML = x;
}
};
ChangeHead();
</script>
So that the script will change the text of the 'hheader' div to the value of the work variable
I've found a few syntax errors in your code and I corrected them accordingly.
Here you can see a working demo:
http://jsfiddle.net/robertp/LvcCe/
1- You have an unterminated string literal at line 34 :
x="Heather this is a series of Pitures, Videos, and Poems to show you the
love that I have for you!"
For your script to work, you have to replace the line breaks in your string with "\n" in between "to " and "show". Also, take out the line breaks.
2- innerText does not work with Firefox, just use innerHTML all the time instead at line 38 :
if (document.getElementById("hheader").innertext == x)
3- = = makes no sense if you want to assign a value. Use only 1 equal sign when you assign a value to a variable.
Use two only when you are making an if statement!
Watch it at :
line 40 :
document.getElementById("hheader").innerHTML= =work;
and at line 44 :
document.getElementById("hheader").innerHTML== x
4- Line 13 has an extra quote at the end that you want to take out :
show you the love that I have for you!"
If you replace all these mistakes, your script works.
Please look at a modified version of your script that works here:
http://lespointscom.com/a/misc/stackoverflow/2014_01_29/new.html
Or just copy paste this html as is:
<!DOCTYPE html>
<html>
<Head>
<title>Heather I Love You!</title>
</head>
<body style= background-color:#A8A8A8>
<!========This is the header===========>
<div id="header" style= "background-color:#00FF33;" >
<h1><p id="hheader">Heather this is a series of Pitures, Videos, and Poems to
show you the love that I have for you!</p></h1></div>
<!=============The side bar that will allow a list of where she Wants to
go==========>
<div id="Menu" Style="background-
color:#660033;height:300px;width:125px;float:left;">
<Talbe>
<b><h3{color:white}>Categories</h3></b><br>
<button type="button" onclick="ChangeHead()">click here!</button><br>
<!--Functions-->
<Script>
function ChangeHead()
{
var g=document.getElementById("hheader")
x="Heather this is a series of Pitures, Videos, and Poems to \n\nshow you the love that I have for you!"
work="Here are some pictures of us and the boys"
if (document.getElementById("hheader").innerHTML == x)
{
document.getElementById("hheader").innerHTML=work;
}
else
{
document.getElementById("hheader").innerHTML= x
}
}
</Script>
</body>
</Html>
<html>
<head>
</head>
<body>
<div id = "start">
<h3>Start</h3>
<script>
if(Go==false)
document.write("<p>None </p>");
else
document.write("<p>Month: Day: Hour: Min: </p>");
</script>
</div>
<script>
var change = function(){
document.getElementById('start').innerHTML +=document.write("<p>NO</p>");
};
</script>
<input type = "button" value =start onClick = "change(); return false;"/>
<body>
</html>
With this it refreshes the page and I need it to be added to the div "start". Any Ideas? I have been looking up things online with fixes and none seem to work for me. I use chrome, I don't know if that will help.
Try this:
var change = function(){
document.getElementById('start').innerHTML += "<p>NO</p>";
};
This is a similar question of question on SO.
Is as to avoid of the use document.write("<p>NO</p>"); because this needs to refresh page.
Then I suggest for you use document.getElementById('start').innerHTML +="<p>NO</p>";
Or create the element!!
var p= document.createElement('P');
p.appendChild( document.createTextNode("NO") );
document.getElementById("start").appendChild(p);
Yup, what sjkm said. document.write does not return anything, it just appends whatever you give it to the end of the document. Also, your Go variable isn't declared and has no value assigned to it
I have included a file named test.php in the file index.php
lets assume index.php is like this
<html>
<head>
</head>
<body>
<h1 id="dash">Index</h1>
<div id='tab.php'>
<?php include('tab.php'); ?>
</div>
</body>
</html>
and tab.php is like this
<html>
<head>
</head>
<body>
<ul>
<li id='date' onClick="change_head(this.id);">Dates</li>
<li id='appoint' onClick="change_head(this.id);">Appointments</li>
<ul>
</body>
</html>
Here what i would like to do is, if the list item date is clicked(list items are actually tabs). The inner html of the h1 tag with id dash should be changed to Dates and if the list item appoint is clicked the inner html of same h1 tag with id dash should change to appointments.
how can i do that ?? i tried the usual javascript way by taking the ids and applying the if condition to change the innerHTML but it was not working..anyone pls help me how to do it
JAVASCRIPT (this is the js i tried to achive it...i added this in index.php)
function change_head(id){
dash = document.getElementById('dash').innerHTML;
if(id == date){
dash = "Date";
}
else if(id == appoint){
dash = "Appointment";
}
else{
dash = "Index";
}
}
You could try using jquery... something like this:
<script type="text/javascript">
$(document).ready(function () {
$("li#date").click(function () {
$("h1#dash").val("Dates");
});
$("li#appoint").click(function () {
$("h1#dash").val("Appointments");
});
});
</script>
Of course, if you had more of these tabs, I would create a single click event handler for all "li" elements and switch on the ID :-)
Assuming you're new to jquery, you'd also have to include the jquery script in your page. Something like:
<script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
Check out jquery.com to get started.
If you want do it with JavaScript (i.e. without page reloading), so you need use DOM innerHTML.
Something like (if you didn't use jQuery), didn't test this code through, hope you get idea:
var changetext = function(e,t) {
e.innerHTML = t;
},
elemheader = document.getElementById('dash'),
elemdate = document.getElementById('date'),
elemappoint = document.getElementById('appoint');
if (elemdate.addEventListener) {
elemdate.addEventListener('click',changetext(elemheader,'Date'),false);
}
if (elemappoint.addEventListener) {
elemappoint.addEventListener('click',changetext(elemheader,'Appoint'),false);
}
I am following a JavaScript tutorial on the W3Schools website and I have the following code:
<html>
<head>
<title>Hello!</title>
</head>
<body>
<script type="text/javascript">
function confirmShow
{
var r = confirm("Press one...")
if (r == true)
{
alert("Button pressed == OK")
}
if (r == false)
{
alert("Button pressed == Cancel")
}
}
</script>
<input type="button" onclick="confirmShow()" value="Show Confirm Box" />
</body>
</html>
and whenever I preview it in Coda or in Safari the alert never shows up.
Thanks in advance!
"function confirmShow" => "function confirmShow()"
Firebug is good for js debugging, try it. Safari has options too, AFAIK.
function confirmShow
{
function confirmShow()
{
?
I don't know if this is your problem, but your button is outside the <body> tag. That might cause you some trouble...
Also one would usually put a script like this in the <head> element. Just FYI.
1) w3schools is filled with errors and omissions. Better tutorials can be found at howtocreate.co.uk
2) You have no DOCTYPE declaration, and you're using XHTML syntax.
2.1) IE doesn't support true, see webdevout.net/articles/beware-of-xhtml for more information
3) You need to encapsulate the within a element as well as another block-level element as per the specification
See below for a proper HTML5 document. Notice the location and syntax
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<script>
function confirmBox() {
var ret = confirm('Some Text');
/*
Note the 3 equal signs. This is a strict comparison operator, to check both the 'value' as well as the type. see https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators for more
*/
if(ret === true) {
alert('Alert box for "Okay" value');
}
else if(ret === false) {
alert('Alert box for "Cancel" value');
}
}
window.onload = function() {
// Execute the confirmBox function once the 'button' is pressed.
document.getElementById('confirmBox').onclick = confirmBox;
}
</script>
</head>
<body>
<form>
<p>
<input type="button" id='confirmBox' value="Show Confirm Box">
</p>
</form>
</body>
</html>