I know this has been asked multiple times but I can't figure out why this won't work for me. Trust me, I've done research but I still can't see what's wrong with this. I'm also a complete noob at html and javascript/jquery so please be nice :)
My goal is to load a simple text from text.html onto index.htmlusing jQuery.
This is my code as of right now
index.html
<head>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$('#content').load("text.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
text.html
<body>
<p>Hello there!</p>
</body>
I have jQuery 3.4.1 in the same folder as these two files as well. When I drag index.html into Google Chrome I get a blank page. Of course, if I had any text in index.html it did show up when I loaded the html.
I'd also like to mention that I'm using <div> because I'm trying to do the same thing on another project by loading a div onto an html, so I'm seeing if even this small code would work, but sadly it's not. I've changed <div> in index.html into <p> and it made no difference.
Any help would be greatly appreciated!
Edit: My goal is to have "hello there!" display. When I drag index.html into my web browser to preview what my output should look like, "Hello there!" does not display - instead, I get a blank page. I've tested index.html to have some other text in it, and it displays perfectly fine. The problem is that code from text.html doesn't seem to display.
Related
I want to make a Chrome Extension that will show me my grades in school. They put these grades on a website and they are always in a chart. I have selector gadget, but I'm not really sure how I can use it.
At first I tried document.getElementById().innerhtml but couldn't figure out how to replace <p> text with my grades. Then I read up on PHP and stuff like that but I really can't do anything like that. i need it all to be in Javascript (at least I think that's what Google Chrome Extensions allow).
Here's where I'm a so far:
<html>
<head>
<style>
.default {
}
</style>
</head>
<body>
<p class="default">art: </p>
<p id="artScore"></p>
<script>
document.getElementById("artScore").innerHTML = "success";
</script>
</body>
</html>
(I know extensions have different files for scripts, I'm going to put the scripts in a separate file once I get everything working)
I'm really not sure exactly how to go about this, maybe it's not even possible. But it would be great if I could get this to work somehow.
as the title says I need to show a div from one website on another. I've created a small test below that afaik should work using jQuery's .load, but when I open it up nothing shows. Any help would be appreciated!
<html>
<head>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js">
</head>
<body>
<script>
$('#transaction-section'.load('ajax/http://warburgrealty.com/agent/AGENT-69db6245d34d32e69208161ebcc412fe/samantha-frith #past-transactions-section');
</script>
<div id="transaction-section"></div>
</body>
</html>
You have a couple of things going on.
First, the syntax isn't quite right. I would also move the JavaScript after the div definition.
<div id="transaction-section"></div>
<script>
$('#transaction-section').load('http://warburgrealty.com/agent/AGENT-69db6245d34d32e69208161ebcc412fe/samantha-frith');
</script>
Secondly, unless you are running this code on warburgrealty.com, you are going to run into a cross-origin request error.
You can read more about cross-origin resource sharing here: https://enable-cors.org/
I've been trying to load a button from another page onto my page using jQuery. I've been following theinstructions detailed in the following url and havent beeen able to get it to work. I am still a bit new to jQuery so i may have small mistakes. Anything will help. iframe to Only Show a Certain Part of the Page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script> $("#m").load('https://www.minds.com/theantimedia .minds-subscribe-button');
</script>
<div id="m"></div>
Update: I've been running it by opening it from an html file in my browser. I dont know if its like php and wont work. Also if i've broken any rules by posting this please warn me and i'll delete this question. Thanks!
I was searching around for an answer to this question but I can't seem to find the exact "words" or "phrases" to find relevant answers.
My question is, is it possible to have an ability to use a single html that stands as an "include" to another html page?
Example: Being able to use one file containing CSS styles so the same file can appear on every page of the site automatically that I include it on.
I made a template that has an extension of .html that contains only my header and footer for the whole theme of the site. Normally, I would copy and paste the contents of these templates to each new html page then add in the unique body content for that page.
What I would like to do is make a template that has an extension of .html containing only my header and footer so I can do something like include template.html which automatically would put the content of the template.html page on each page so I don't have to copy and paste each time. I am finding it harder and harder to update/maintain each page of the site that contains the header and footer script because I have to find and replace each instance of those scripts when changes are made and must be propagated throughout the site.
I know that html does not actually have an include function but I think there should be a way around this through other languages such as PHP or even JavaScript? I just am curious if its possible and if so, how?
I think you have a few different options. With PHP you could do something like this:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
See this link.
With AngularJS you could use something like this:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
</html>
See this link.
With just HTML5 you could try something like this:
<object name="foo" type="text/html" data="foo.inc"></object>
See this link.
Does that help answer your question?
What you are asking is possible in differents ways:
frame and iframe
take a look at this two tags
frame : http://www.w3schools.com/tags/tag_frame.asp
iframe : http://www.w3schools.com/tags/tag_iframe.asp
I do not recommend this solution because "frame" is not supported in HTML5 and "iframe" is made to include other website in a website, not part of a website. You will not be able to add CSS/JS to code in "iframe" tag.
back end solution
Depending on what kind of website you are working on you can include other file. For exemple in php:
include('youcode.html');
HTML5 solution
You can also use the "object" tag :
<object width="100%" height="500px" data="snippet.html"></object>
this is probably your best choice, see : http://www.w3schools.com/html/html_object.asp
Enjoy :)
This can't be done via HTML, you can either do a PHP include or use this W3 schools example:
http://www.w3schools.com/howto/howto_html_include.asp
PHP example
template.html rename to template.php
<html>
<?php include template.php ?>
</html>
For example I have a code that drags in my twitter feed via a javascript file, I have pasted the links directly in the div I wish for it to appear however my page won't validate (obviously) but I can't figure out how to send it to appear in that div with the Javascript code hidden in the header.
Below shows the div I need the information in and the javascript files that call the information
Any help would be greatly appreciated !
<div id="twitter_update_list"><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hookline_sinker.json?callback=twitterCallback2&count=1"></script>
<br />FIND US AT <br /><strong>#HOOKLINE_SINKER</strong></div>
The only reason that I can see for that not to validate is that the ampersands in the URI haven't been HTML encoded (i.e. as &).
<script> elements are allowed as child elements of <div> elements.
If you're using the JavaScript provided by Twitter then I don't think you can.
What you're after (if I understand correctly) is an external JavaScript file that you link to in the <head> of your page, that traverses the DOM on page-load, finds a div with an ID of "twitter_update_list" and inserts the content from Twitter.
While this functionality is quite easy to code, it would have to be within the JavaScript file itself. Since you're using Twitter's JavaScript then it's up to Twitter to provide this functionality within their JavaScript.
I think you'd have to look into writing your own JavaScript file that fetched your Twitter RSS feed and parsed it on your page.
You might want to look at Remy Sharp's solution - at a brief glance it looks to do what you want: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
<html>
<head>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
</head>
<body>
<br />FIND US AT <br /><strong>#HOOKLINE_SINKER</strong>
<div id="twitter_update_list">Updates will go here!</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hookline_sinker.json?callback=twitterCallback2&count=1"></script>
</body>
</html>