Hey guys I'm trying to get the following to work...
demo_test.txt to load into the "div1" container
only have a href id "test" to trigger it
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("test").click(function() {
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<a id="test" href="#">Get External Content</a>
<br>
<a id="google" href="http://www.google.com/">Google</a>
</body>
</html>
Currently it doesn't run, but if I remove the Google line, it works. Is there something else I'm missing? Thanks!
Change your jQuery click handler to this:
$("#test").click(function() {
I've added a # in front of test to properly select your anchor tag.
Related
I'm struck in a project, I need to develop a project as agenty chrome extension, where it uses point and click css selector. First I have used iframe to display a site but I faced cross origin and security issues. Now I'm using object tag to display a site and I want to make like point and click css selector on a button click.
Here is my sample code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#dragit').click(function(){
// make $("#dvSource") to point and click css selector
});
});
</script>
</head>
<body>
<input type="submit" id="dragit" value="DragValues" />
<div id="dvSource">
<object type="text/html" data="http://validator.w3.org/" width="100%" height="600px" id="test">
</object>
</div>
</body>
</html>
I have placed in div (dvSource) and I have a button with id dragit, once I click that button I want to make point and click css selector for dvSource content
I am trying to make my 10 pages static website dynamic so that everytime i don't need to design every page as the same home page. I have tried few jquery statements to load data into div on click of a link.
I have tried the following code and it didn't work:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").load("demo.txt");
});
$("#link").click(function() {
$("#div1").load("demo.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
<br>
<br> click here </body>
</html>
I have got this from W3School's online Tryit editer. It works fine there but not in my local webpage on my machine. Can I get an explanation what is happening and what I am missing. Thanks.
<!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.
(sorry for my bad English)
I checked all posts about Jquery back button here and for some reason nothing worked with me so please help me...
I simply want when I run Jquery function by clicking on a link with hash, the browser will shows me the back button.
When I click the back button I want it to run the previous function.
here are the codes...
<!DOCTYPE html>
<head>
<script src="jquery.min.js" type="text/javascript"></script> //jQuery v1.10.2
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="prodmenu">
Link1
Link2
</div>
<script>
$("#link1").click(function() {
$("#div1").fadeOut();
$("#div2").animate({top:'500px'},"slow");
});
</script>
</body>
</html>
Thanks a lot.
You can use this jquery plugin for the #hash history.
Here is an example.
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.