As the title says; I want the content of an external file (text,html,php etc.) onto a div.
There is basically text in an external file, called: text_1.txt or *text_1.html* , and I want that text displayed within a div that is located on a homepage.
The perfect solution would be a pretty basic code to display text from a text or html file
by inserting it onto a div classed: content
Here I have illustrated the issue with basic code, use this as an example to write a solution.
Code in text_1.html:
<p>Hello world.</p>
Code in index.html:
<!doctype html>
<html>
<head>
<title>Homepage</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
This is as simple as I can put it.
I highly appreciate all the answers I receive, thank you.
PS here are some things you should avoid answering:
Use iframes, or any other frame type solution.
Make use of the onclick function within jquery etc.
Use ineffective textfields to replace certain text.
Make usage of an insertion code for virtual server or similar methods.
There's no way to do this unless and until you use Server Side Includes using PHP, ASP, or JSP
http://en.wikipedia.org/wiki/Server_Side_Includes
If you want to do it using php you can use this:
require_once('filename.php'); /* For including files */
Or use native functions to open .txt files in your pages
Why dont you just do it with jquery
$(document).ready(function() {
$('.content').load('text_1.html');
});
Related
I'm building a Gatsby app and I need to insert a few SSI lines (styled as HTML comments). Example
<!--#set var="section" value="#{section}"-->
<!--#include virtual="/virtual/3.0/script-app.inc"-->
I can't find how to do this.
I need to put these (and other scripts) before the head tag, inside the head tag, at the end of the body tag and directly after it.
I've tried a lot of ways but none of them work. I've tried changing html.js but it just strips the comments out of the outputted code. I also tried working with gatsby-ssr and gatsby-browser but I keep thinking I don't know exactly what to do in those documents.
What I expect the output to be (with the exemplified codes):
<!DOCTYPE html>
<!--#set var="section" value="#{section}"-->
<html>
<head>
<!--#include virtual="/virtual/3.0/script-app.inc"-->
[rest of head code]
</head>
<body>
</html>
What happens: my output page has no comments whatsoever OR has it stringified (as in <!--#include virtual="/virtual/3.0/script-app.inc"-->
I solved this using gatsby-node.js and onPostBuild(). Copying the html/js then adding custom components (like <ssi-code /> then replacing them using replace-in-file:
replace.sync({
files: ['./public/**/*.html', './public/*.html'],
from: /<SSI-before-html>(.*?)<\/SSI-before-html>/g,
to: '<!--#include virtual="/virtual/example.inc"-->',
});
I am using angular with sightly. So I have angular html template surrounded by script tag, which also has sightly attributes like data-sly-resource.
Below example code will give you clear idea.
<script type="text/ng-template" id="example.html">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div>
</section>
</script>
It works fine in non-edit mode , but in edit mode, I can not author data-sly-resource part. It looks like <script> tag is not letting it work roperly because when I remove <script> tag ,than I can author it.
And removing script tag is not an option as well.
So how can I stop script tag form breaking sightly functionality in edit mode?
I ended up doing repetition of code , one for author mode and other for non edit mode.
Below is close resemblance of my solution.
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
<script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
</script>
As you can see in above code, what to show and when works via data-sly-test="${wcmmode.edit}".
I also tried to to create sightly template for redundant code and than try data-sly-use but now, it works in author mode but sightly can't put template inside <script> tag even though I used # context='unsafe'
There is a workaround based on the Sightly Reference
Put the markup inside a separate html file say mymarkup.html parallel to mycomponent.html
In Component HTML file (e.g mycomponent.html) use <script type="text/ng-template" data-sly-include="mymarkup.html"></script>
In mymarkup.html we can use Sightly tags normally and those would be evaluated/executed normally, we would not even need to specify the # context for variables we would read using use API. The final markup rendered by component mycomponent.html when dragged to page would render something like this below
<script type="text/ng-template">
//mymarkup.html evaluated content here
</script>
In your script tag you could add data-sly-unwrap="${wcmmode.edit}"
This will remove script tag in edit mode allowing you to edit included components but in any other mode the script tag gets rendered.
I found the following mention in Netcentric's AEM Sightly Style Guide:
Then, because the HTML grammar ignores elements located inside a
< script > or < style > elements, no block statement can be used within
them.
Although it's not explicitly stated in the Sightly spec, it makes sense. So your fix is right.
I have spent 2 hours + on the lightbox. I have checked paths to CSS and Javascript. I have used both the included jquery and Google's imported JQuery.
When I click an image it opens a new window with that image larger on a white background. I want it to overlay the current page with <> and x.
You can see an example: http://demopbdesignsource.tierstrategies.com/a.aspx
Thanks
Looking at your code on your page I do not see where you are calling the lightbox.js script - that needs to be called right before the body close tag.
Also lightbox help states : If you already use jQuery on your page, make sure it is loaded before lightbox.js. - ◦Include the Javascript at the bottom of your page before the closing /body tag:
I used the lightbox-plus-jquery.js and called that just before the close of the body tag and it worked. I called the lightbox-plus-jquery.js just before the close of the body tag because it has both jquery and lightbox combined.
I am still working on the page and I am just using html not .net but the lightbox would work the same. If you look at my source you will see the script call right before /body tag.
http://just-in.com/recycledDresser/index.htm
Hope this helps.
Debra W.
You need to call the Lightbox script.
Something like
Placing it in the line before the line works for me.
Both
http://demopbdesignsource.tierstrategies.com/X/LightBox.css
and
http://demopbdesignsource.tierstrategies.com/X/LightBox.js
cannot be found.
The link provided in the question is giving 404 right now.
but I think you just need to follow the steps given at
http://lokeshdhakar.com/projects/lightbox2/
to set up lightbox.
you may have missed either of the following :
Include the CSS at the top of your page in your <head> tag:
<link href="path/to/lightbox.css" rel="stylesheet">
Include the Javascript at the bottom of your page before the closing </body> tag:
<script src="path/to/lightbox.js"></script>
I am new to caman js. I want to edit image residing at my local machine using caman js. I searched for it but could not find appropriate code. I also went through tutorial of caman js.
link: http://camanjs.com/guides/
Can anyone please help me?
Thank you.
The link you provided gives the information you are looking for. If I understand your question correctly, these are the basic steps you need to take.
Make sure the Camanjs plugin is included in your project.
Have an img or canvas element on your working DOM
After the DOM is ready Initialize Camanjs by passing to it either a selector or DOM element. Here is the relevant code to the link you provided:
Caman("#image-id", function () {
// Setup whatever options or image processing you want here
// Make sure to render after
this.brightness(5).render();
});
Your question asks about a file on your local machine. From my understanding, your image has to be present in the DOM to work on it with Camanjs. Therefore, your image should be located somewhere your html/javascript can find. (i.e. 'img/myLocalPicture.jpg' relative to your .html file)
For me, looking at the source code of Camanjs was very helpful as well as looking at the API docs: http://camanjs.com/api/
If you want a more specific answer please rephrase your question to be more specific.
You can load a file using the HTML5 File API.
If you are using JQuery, the following will allow you to browse for a local file, and then apply an effect to it. (You don't need jquery, this is just a feature of HTML5)
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/caman.full.min.js"></script>
</head>
<body>
<img id="myimage" alt="Image go here" />
<form>
<input type="file" id="fileinput" />
</form>
</body>
<script>
$("#fileinput").change(function(evt) {
var image = evt.target.files[0];
$("#myimage").attr("src", URL.createObjectURL(image));
processImage();
});
function processImage() {
Caman("#myimage", function() {
// Perform your effects here
});
}
</script>
</html>
Im using the WebBrowser control to launch and browse some html files loaded locally in the windows phone 7 emulator and device. All works fine until a web page navigation with a query string us used. The javascript needs to read these query strings but the navigation totally fails when the query string is included. The navigation works fine without the query string.
Im big time stuck on this and would really appreciate your thoughts.
Tony
I too can't find a way to pass a query string to a local HTML file. (I copied the HTML file to Isolated Storage and viewed it from there.)
However...
I can successfully navigate to a local HTML file and specify a fragment. And it even works if the fragment includes equals signs (=) and ampersands (&) so you can do this:
webBrowser1.Navigate(new Uri("index.html#123=abc&456=def", UriKind.Relative));
And get the value with the following
<html>
<head>
<script type="text/javascript">
function onLoad() {
fs.innerHTML = document.location.href.split("#")[1];
}
</script>
</head>
<body onload="onLoad()" >
<p id="fs" />
</body>
</html>
to display the following on the page (in the browser control).
123=abc&456=def
(Obviously you could do something more appropriate with the value in javascript as necessary.)
Yes, you can just use the fragent like the querystring.
This, obviously, works fine as long as you don't need to use both.
You need a webserver if you pass a querystring.
This is because the browser does not know what is a query string in difference of another file. It only thinks the file is named "file.html?param=value" search this file and does not find it locally.
So locally without a webserver it is impossible.
Solutions
Spawn a tiny webserver locally.
Hack some js to know when it is local and replace all links with query string to hashtags