<!DOCTYPE html>
<html>
<head>
<title> Cookie Clicker! </title>
<script type="text/javascript">
var logAt=function(id,message){
document.getElementById(id).innerHTML=message;
};
</script>
</head>
<body>
<h1> Cookie Clicker </h1>
<p> Keep collecting cookies and start your very own sweet empire!</p>
<p>
<div id="cookiesPerSecond"> </div>
<button type="button" onClick="getCookie()"><img src="http://thinkprogress.org/politics/2011/04/26/161276/penn-parents-cookies-cuts/" alt="Cookie"
style="width:304px;height:228px"></button>
<h3 id="cookies">Cookies:0 </h3>
</p>
<script type="text/javascript">
var cookies=0;
var cookiesPerSecond=0;
function getCookie(){
cookies+=1;
logAt("cookies","Cookies:"+cookies);
};
</script>
</body>
</html>
My image inside of the button is not displaying, and defaults to the "alt". I am programming this on notepad, and am opening it in chrome. What should I do to make it work?
What you linked is not a link to a direct image. You need to link directly to an image. This is the link you need to change:
<img src="http://thinkprogress.org/politics/2011/04/26/161276/penn-parents-cookies-cuts/"
Change it to this:
<img src="http://d35brb9zkkbdsd.cloudfront.net/wp-content/uploads/2011/04/cookie.gif"
Also, like User Roko C. Bulijan said, you need to use CSS to make it a background-image or it won't show up.
Related
I am making a random quote generator. But I am not able to share it via twitter. I am getting a twitter page but the text box for the tweet is empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div1">
<p id="quote"></p>
<p id="author"></p>
<button id="btn">getquote</button>
<div>
<a href="https://twitter.com/intent/tweet" target="_blank">
<button type="button" id="twitter-share-button">tweet</button>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is my Javascript code
var url1="http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?";
//var url1=" http://date.jsontest.com/";
var getQuote=function(data){
//console.log(data);
var quot="https://twitter.com/intent/tweet?text=" + data.quoteText+data.quoteAuthor;
console.log(quot);
$('#quote').text(data.quoteText);
$('#author').text(data.quoteAuthor);
$('#twitter-share-button').attr("href", quot);
};
$(document).ready(function(){
$.getJSON(url1,getQuote,'jsonp');
});
$("#btn").on("click",function(){
$.getJSON(url1,getQuote,'jsonp');
});
I get the quote randomly but clicking on tweet button in my code doesnt change the href using .attr in Jquery. Am I doing it correctly?
I don't know if I'm just missing something, but it looks like you are trying to change the href attribute of the button, but the button doesn't have a href attribute (and probably shouldn't).
$('#twitter-share-button').attr("href", quot);
Instead you want to do
$('#twitter-share-anchor').attr("href", quot);
And give the actual anchor the id:
<a id="twitter-share-anchor" href="https://twitter.com/intent/tweet" target="_blank">
You're applying the href to the button, instead of its containing <a>. Because the <a> is the direct parent of your button, you can easily just change your $('#twitter-share-button').attr("href", quot); line to include a .parent(), like so:
$('#twitter-share-button').parent().attr("href", quot);
How to load divs from page 2 into page 1 with JavaScript.
Page2.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content2"> this is content2</div>
<div id="content3"> this is content3</div>
</div>
</body>
</html>
I want to get and use the id content2 from page2 to create a div into page1 with the content of that div, after link was clicked and deleted, and do the same with content3, content4 and successively.
Page1.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
get content
</div>
</body>
</html>
And then would be like that.
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>
I'm new in JavaScript and i have no ideia how to do that. If someone can help. Thanks.
Edited: I wanted a way to do it only with javascript and without jquery if that's really possible. I want my project working offline and I can't do that with jquery, because it doesn't work. I've downloaded jquery plugin and pasted it in my directory, but, didn't work, too.
You can use a combination of JavaScript, jQuery, and AJAX to accomplish this.
First, include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Then write a JavaScript function similar to this one which will replace your div element's html content with the Page2.html file:
var loadNewContent = function {
$.ajax("Page2.html", {
success: function(response) {
$("#content2").html(response);
}
});
};
And then you would need some 'trigger' to run this function such as this:
$("#content2").on('click', loadNewContent);
Hope this helps.
I wrote a small library called ViaJS using javascript & jquery. It basically lets you load content (like a div) from a source to the page. Check it out.
Via is a small library that allows you to load content on to a page dynamically
I have seen some posts regarding wanting to do something like this, but I am at a loss to understand why my code doesn't work. I'm trying to make sure that users who visit a page have javascript enabled. If disabled, I want to hide all content and display a simple page with a message that the main page cannot be displayed without javascript.
I have the following:
<html>
<head><title>my site</title>
<noscript><style type="text/css">site {display:none;} </style></noscript>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<script type="text/javascript">document.getElementById("noscriptmsg").style.display = 'none';</script>
</body>
<body>
<div class="site">
<!--content -->
</div>
</body>
</html>
Currently this shows the correct javascript-enabled page, but a completely blank javascript-disabled page. What would cause this?
Why not use the build in noscript in one body tag:
<html>
<head><title>my site</title>
</head>
<body>
<noscript>
<style type="text/css">
#site {display:none;}
</style>
<div id="noscriptmsg">
You need to have javascript enabled in order to view this site.
</div>
</noscript>
<div id="site">
</div>
</body>
</html>
It looks like in the body onload you are trying to call the method hideDiv()
First, I'd recommend moving your script tag
<html>
<head><title>my site</title>
<noscript><style type="text/css">.site {display:none;} </style></noscript>
<script type="text/javascript">
// to the head tag
// and define the hideDiv() method
function hideDiv() {
document.getElementById("noscriptmsg").style.display = 'none';
}
</script>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<div class="site">
<!--content -->
</div>
</body>
</html>
and remove the extraneous body tags. You can use css to have the first div (the one with the notice) display at 100% width and 100% height. Also, someone pointed out you were missing the css class selector.
how to get Element From an Iframe?
i want when the attribute of an element that its in a frame is true;
it show a text, and else show another text;
(sorry for bad english!)
like that:
<!DOCTYPE html>
<html>
<head>
<title>document</title>
</head>
<body>
<iframe id="frame" src="">
<!--we think in frame there is a span tag with button id-->
<span id="button" aria-passed="true">sss</span>
</iframe>
<br>
<!--if its true-->
<p id="content1" style="display:none;">
true
</p>
<!--if its false-->
<p id="content2" style="display:none;">
false
</p>
<!--now we want that, if aria-passed=true show content1 else content2.-->
<script type="text/javascript">
var Frame = document.getElementById('frame');
if(new RegExp ("true","gim").test(frame.contentWindow.document.getElementById('button').aria-passed="true") == true) {
document.getElementById('content1').style.display="block";
}
else {
document.getElementById('content2').style.display="block";
}
</script>
</body>
</html>
now i want to say why this code does not work????
any ideas?
It's much easier if you use jquery.
Example Code:
var elementattibutevalue = $("#frameID").contents().find("#htmlelementID").attr("SampleAttribute");
Hope it helps. (^_^)
I think the iframe in your code above is just a demonstration of how the loaded page code looks like?
Take a look at this post Javascript - Get element from within an iFrame.
Also change your 'Frame' variable to lowercase.
If a webpage has a base href, is there anyway to ignore it when we're using #ElementId, without refreshing the page?
Here's some code:
<html>
<head>
<base href="http://www.google.com/" />
</head>
<body>
<div id="test">
Test
</div>
<button onclick="location.href='#test'">Back to Test</button>
Back to Test!
</body>
</html>
When I click on either the button or the link, I want the browser to bring the page to div#test. Without the base href tag, everything works - However, with the base-href tag, I can't do it without the help of Javascript. Is there a way to do it in a more "natural" way?
Below's a workaround that I have at the moment...
<html>
<head>
<base href="http://www.google.com/" />
<script type="text/javascript">
function goToElement(elementId) {
var baseTag = document.getElementsByTagName("base")[0];
var existingBaseHref = baseTag.href;
baseTag.href = "";
location.href = "#" + elementId;
baseTag.href = existingBaseHref;
}
</script>
</head>
<body>
<div id="test">
Test
</div>
<button onclick="goToElement('test')">Back to Test</button>
<a onclick="goToElement('test')">Back to Test!</a>
</body>
</html>
This will scroll to the element with id="test" and the return false will make it stay on the page.
Go to div with id=test
It does not seem to be possible to do what you want without either using script or addIng the full path to the href on the server
You might just have to output the full absolute URL in your link's href attribute.
For example, you could do something like this in ASP.NET (using the AntiXss library):
<a href="<%= AntiXss.HtmlAttributeEncode(Request.Url.AbsoluteUri) %>#test">
Link text...
</a>
Or something like this in PHP:
<a href="<?php echo htmlentities($_SERVER['REQUEST_URI'], ENT_QUOTES, 'ISO-8859-1'); ?>#test">
Link text...
</a>
I had a similar issue when using . This was my solution that worked on interior pages, for example www.mozilla.org/about
<div>
<p>Content...</p>
<div id="target">
Target Div
</div>
</div>