So I'm not that great with javascript, but I'm trying to make a mail notification or this sort of things.
So far I'm using gmails xml file that will display the number of unread emails under a fullcount tag. I want to fetch this with javascript and display it on a html page. Is there a better way to do this?
So far I've come up with this:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<script src="gmail.js"></script>
</head>
<body onload=getgmail();>
<div id="container">
<div id="gmail">
<p id="mail">0</p>
</div>
</div>
</body>
</html>
Javascript:
function getgmail() {
//loadpage
$.get("https://USERNAME:PASSWORD#mail.google.com/mail/feed/atom", function(data));
//get variable inside fullcount tags
var mailcount= document.getElementsByTagName('fullcount');
//output variable to html
document.getElementById('mail').innerHTML = fullcount;
}
I'm probably doing it completely wrong and I would appreciate your help! thanks
function getgmail() {
$.get("https://USERNAME:PASSWORD#mail.google.com/mail/feed/atom", function(data) {
var mailcount = data.getElementsByTagName("fullcount")[0].textContent;
document.getElementById('mail').innerHTML = mailcount;
);
}
You should check out $.get() API documentation.
Related
hi I am new to Javascript and I am trying to use jQuery but it doesn't work if I'm using it on another js file, but if directly inputted into my HTML file it works.
Here is the try.js file:
$("#btn1").click(fn1);
function fn1(){
$("#heading1").fadeToggle();
}
and the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript trial ANIMATIONS </title>
<script src="jquery.js"></script>
<script src="try.js" type='text/javascript'></script>
</head>
<body>
<h2 id="heading1">SETTING UP JQUERY</h2>
<button id="btn1">click me</button>
</body>
<HTML>
Also how can I see the library of jQuery while typing in another js file. I'm using vs code
May be you can use manipulation with dom when document will been load.
function fn1(){
$("#heading1").fadeToggle();
}
$(function() {
$("#btn1").click(fn1);
});
Check out responses to this question. You might get an idea on how to proceed.
I've been learning HTML and CSS this semester and originally started to code my project in HTML and CSS, but in order for my project to work, I had to link HTML pages to each other. It ended up making a lot of HTML pages just to change one line of text. I've been trying to get a handle on JavaScript to make my project more efficient. My HTML code looks like this:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Oakwood</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel=stylesheet type=text/css href=default.css>
</head>
<body>
<div id=back></div>
<div id=drdick></div>
<div id=choice></div>
<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>
<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>
</body>
</html>
My Javascript Looks like this:
var quoteIndex = 0;
var quotes = [
"Thank you.",
"Are you ok?",
"Yes, I’m not normally this clumsy"
];
function changeQuote() {
++quoteIndex;
if (quoteIndex >= quotes.length) {
quoteIndex = 0;
}
document.getElementById("text").innerHTML = quotes[quoteIndex];
}
function showPic()
{document.getElementById("drdick").src="img/drdickab.png";}
function changeThis() {
changeQuote();
showPic();
}
when I test my code my quotes update how I want them to. My picture does not show up at all. Is there something I am missing when it comes to how HTML and Javascript interact? I have been looking through the forums to figure out what I have wrong, and I haven't been able to figure that out.
Your image is not displaying because you did not specify your image anywhere in your markup, and your javascript is also not enough. But try this inside your body tag:
<body>
<!--replace your button with this code.-->
<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>
<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>
</div>
</body>
.
<!--There's really no need to have multiple scripts, just one will do the job-->
<script type="text/javascript">
function showMyImage(){
document.getElementById('myImage').style.visibility="visible";
}
</script>
I want to change the content of the p tag after three seconds using setInterval() method. Then after three seconds I want to change the content inside of the p tag, with a new interval of 5 seconds. This is my code snippet:
background.js
var notify;
var word=function(){
$.get("http://localhost/chrome-notification/dosya.php", function (data) {
$('#container').html(data);
});
};
setInterval(word,3000);
setInterval(function(){
$.get("http://localhost/chrome-notification/", function (response) {
notify=$(response).getElementsByTagName('p')[0].innerHTML;
});
},5000);
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="background.js"></script>
<title>Vocabulary</title>
</head>
<body>
<p id="container">
</p>
</body>
</html>
This can be done in pure js.
var text = document.getElementById('container').innerHTML;
Is this what you need?
Since you are using jQuery, you can simply do $(response).find('p:eq(0)').html()
I've written some more examples here https://jsbin.com/modaxayaki/edit?html,js,console
If i understaned good, i would recommend adding CSS and linking it to html.
(If is that for what you need it for)
Make tag in css and customize it
I'm trying to make a web page where some of the elements are dynamically created. I wrote the following:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<p>Here's some example text</p>
<script type="text/javascript">
var jselem = document.createElement ("div");
jselem.innerHTML = '<p>and here\'s some more</p>';
</script>
</body>
</html>
However, the JS section does not seem to be doing anything, the text and here's some more is not printed.
Can anyone shed some light on why it is not working? Any help is appreciated.
(Please do not suggest using document.write() or similar.)
Use document.body.appendChild() (fiddle)
<script type="text/javascript">
var jselem = document.createElement("div");
jselem.innerHTML = '<p>and here\'s some more</p>';
document.body.appendChild(jselem);
</script>
You created the element, but didn't insert it into the document yet. That doesn't happen automatically -- until you do so, it's just a div floating around in memory.
See https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
First: I am new to javascript so please forgive me if my syntax is novice.
I have been trying to get data in HTML tags using get() in jquery. But no matter how many different variations I try, it just won't work. Can someone please show me what I am doing wrong?
Below is the javascript I am using.
$.get('load.html', function(raw){
var bodyHtml = $(raw).filter('body').html();
var divHtml = $(raw).filter('div').html();
var title = $(raw).filter('title').text();
var tag = $(raw).filter('tag').html();
$('#body').html(bodyHtml);
$('#tag').html(tag);
$('#title').html(title);
$('#result').html(divHtml);
$('#raw').html(raw);
});
Below is the html on the load.html page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title load.html</title>
</head>
<body>
<div>div 1<tag>divtag</tag></div>
<tag>tag</tag>
</body>
</html>
This is the results once page has run. index.html
<html><head>
<title>index.html</title>
<script type="text/javascript" src="js/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$.get('load.html', function(raw){
var bodyHtml = $(raw).filter('body').html();
var divHtml = $(raw).filter('div').html();
var title = $(raw).filter('title').text();
var tag = $(raw).filter('tag').html();
$('#body').html(bodyHtml);
$('#tag').html(tag);
$('#title').html(title);
$('#result').html(divHtml);
$('#raw').html(raw);
});
</script>
</head>
<body>
<div id="title">title load.html</div>
<div id="body"></div>
<div id="result">div 1<tag>divtag</tag></div>
<div id="tag">tag</div>
<div id="raw">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>title load.html</title>
<div>div 1<tag>divtag</tag></div>
<tag>tag</tag>
</div>
</body></html>
One thing to note. It looks like the isn't sent back from jquery. Also if there is multiple on the page. Shouldn't this script make it a array (example being )
You need to wrap your $.get() call inside a "document ready" handler - at the moment the DOM elements you're trying to manipulate don't exist at the point you're making the call:
$(document).ready(function() {
// your code here
});
Here is the results. I thought it was the html() tag stripping the body, and head tags out of the variable. When I would do a alert(raw) from a url it would show the full html page. But then when I try and modify that variable, the tags () would disappear. I then thought it was jquery. So I tried a regular expression. Sure enough I got the same exact results. So I am only able to retrieve tags like title, divs, but not the body.
$(document).ready(function() {
$.get('load.html', function(raw){
var matches = raw.match(/<title\b[^>]*>(.*?)<\/title>/gi);
//var matches = matches[0].replace(/(<\/?[^>]+>)/gi, ''); // Strip HTML tags?
alert(matches);
}, "html");
});