I'm working on a mobile-app that uses cordova, so it's basically a html-website runing in an app. And I have a lot of elements and html-code that has to be present on all pages, e.g. navigation but also popups and so on and so on.
While working on larger webprojects I usually wrap these kind of code-segments in php-files and use "php include" to create my html file. Here however I can't work with php since there is no server. So since I would like to avoid having countless copies of the same code in every html-file, I'm looking for a way to include html code into an html file using jquery maybe?
I did try it with:
$("#includeContent1").load( "mod_navigation.html" );
and
$.get('mod_navigation.html', function(data) { $('body').append(data);});
Both worked, not as great as php, but did the trick. Problem is, the additional content (in this case the navigation) is being loaded "after" the parent html file is shown, making the navigation just pop up with a slight delay. This looks just horrible, because the navigation at the bottom of the screen just keeps flickering while using the app.
Is there a way to avoid these delays? Maybe by jumping to the new page AFTER everything in the html file has been loaded ... or any other way?
could you just try to create the whole DOM in a variable, and when all the HTML code is saved in the variable append it to the body? Say
$("body").empty(); // clear all
var content = "";
/* start to create content here */
$("body").append(content);
Althoug I have no idea how fast this is...
Cheers
You cannot use JavaScript that's on your page to preprocess that page's HTML as it is part of the document and therefore by definition executed after the document has been loaded.
You could however use a callback function to only display the new page after it has fully been loaded.
Related
Is there a way for me to render and parse the SVG element from a html page rendered by javascript in Java,
for example: http://bl.ocks.org/mbostock/raw/4063269/, which in the case is using d3.js.
If I understood you question correctly, your problem is that tools you used (HtmlUnit) cannot handle complex JS (d3.js).
In this case there is nothing better than using an actual browser. You can use Selenium to open your page with a remote controlled browser instance and get JS rendered html from there.
This tutorial contains pretty much all you need. Except the getting html part, you can find it in this SO answer.
After that you can feed the html to any parser you want.
EDIT
Just thought of another way, you can try WebKit Html2Pdf. Its purpose is to create PDF files but it uses WebKit under the hood and you can inject custom script (like document.onload callback) that will post SVG contents to you service after page is loaded.
But I wouldnt go that road, it has many limitations (basically only works for direct urls) and overall is pretty messed up.
If what you're trying to do is get the SVG content as a String, Selenium is your best choice, like #chimmi said. But, you might get away without a real browser window opening by using PhantomJS instead.
In theory, it should work like this:
System.setProperty("phantomjs.binary.path", "/path/to/phantomjs");
WebDriver driver = new PhantomJSDriver();
// Open your page with SVG
driver.get("http://localhost:8080/svgpage");
// Find the SVG
WebElement svg = driver.findElement(By.tageName("svg"));
// Get its XML content
String xml = svg.getAttribute("outerHTML");
From here, you could use Batik if you want to actually render the SVG on screen in your non-web app.
Or, if all you wanted was to make assertions on the SVG contents for testing purposes, remember you can select sub-elements using normal CSS or XPath selectors:
//Select all <path> elements within the SVG
Lis<WebElement> pathElementsInSVG = svg.findElements(By.tagName("path"));
//Assert there is 4 <path>s
assert pathElementsInSVG.size() == 4
I'm looking for a solution to this and I have searched the web for an answer with nothing. I need a scrolling message on my webpage that can be updated by the same website but on a different page. (e.g www.webpage.com <-- has the scrolling message on it, www.webpage.com/settings <-- has a form in which you can change/update the scrolling message)
I'm pretty sure this is achievable with Java, but my knowledge on Java is slim and all my efforts have come to a fail. I have managed to get a scrolling message on my webpage and I'm sure if I could read a text file (with the message in) then assign that to a 'var', I could make that scroll but I don't know how to do that.
If you know a completely different method of doing this I am happy to change mine.
Thanks in advance,
Tom.
I would recommend javascript instead of java, since java is not really conventional anymore and looks ugly too (and requires a special plugin).
It depends on how fast you want to update the scrolling text how you want to do this. I would say save the text to a .txt or database from settings, and then have your page get it.
You can then use php to read the value from the .txt file or database to display it on your website.
If you want it to be extremely up to date you can let javasript call a little .php file that reads the file and gives you the content.
To make your text scroll you don't really need anything other than html, like so:
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>
You can read more about that here: http://www.quackit.com/html/codes/scrolling_text.cfm
Is there a way to change the css style(defined in the page source) dynamically with Java? I know it is possible to do it with JavaScript. If there isn't, are there other situations where JavaScript is the only choice developing a web app?
Matthew is right. The question should be specified better.
If you are about applet that is running on current page your can call any javascript including javascript code that changes style of any element.
You just have to add attribute mayscript to applet tag and then use code like the following:
JSObject win = (JSObject) JSObject.getWindow(this);
win.eval("documeent.getElementById('myelem').style='border-color: red'");
If you are asking about sevlet/jsp you can
1. generate full html code including css
2. bind style element to URL that is mapped to servlet or JSP that generates CSS.
where styles URL brings us to servlet that generates css dynamically using parameter "id".
I hope it helps. Otherwise please try to specify you question.
Why don't you use JS in the JSP page like you would in a regular HTML page?
I have an editor pane which displays an HTML file. When I ask it to do it once, it displays the HTML file fine. I then make changes to my HTML file and use the setPage method so that it prints the updated HTML file but it doesn't do this even though the HTML file is changed.
Is this a problem with the Editor pane or is there something wrong with my code?
Looking at the JavaDoc for setPage, I see the following:
If the desired URL is the one currently being displayed, the document will not be
reloaded. To force a document reload it is necessary to clear the stream description
property of the document. The following code shows how this can be done:
Document doc = jEditorPane.getDocument();
doc.putProperty(Document.StreamDescriptionProperty, null);
I've done some tests and I've reproduced this behaviour. When I am calling setPage and passing as argument the same URL that was passed previously in the same method, the JEditorPane seems to ignore the call.
A simple work around: test if the new Url is the same as the previous one. If yes, format the Url a bit differently. For example add an %20 at the end. The new Url actually refers to the same page, but the JEditorPane will consider it as a new one and it will properly reload it.
I'm viewing HTML in an SWT Browser widget. I am appending logging messages to the end of the content and would like to keep the bottom visible all the time. Currently, whenever I append text to the content, I first set the new text:
browser.setText(content);
And then I scroll down the Browser widget via JavaScript:
browser.execute("window.scrollTo(0,100000);");
The problem with this is that when I set the text, the widget switches to the top again before scrolling down, so when I append lots of messages quickly, the browser widget is showing the top part most of the time, occasionally flickering when switching to the bottom. This makes it impossible to follow what is being logged at the bottom.
I am aware that I could use a tree viewer and get all the convenience of the Eclipse platform, but there is a Swing version of the app too and both should use the same HTML with CSS presentation.
Ideally I'd like to avoid embedding a Swing component, but if there is one that would allow this, I'd be happy to hear about it. I have tried it with a JEditorPane inside a JScrollPane, appending to the content via the editor kit's read method:
editorPane.getEditorKit().read(/*...*/);
And then scrolling down like this:
editorPane.setCaretPosition(editorPane.getDocument().getLength());
This works very smoothly for the standalone Swing app, but embedded in Eclipse it flickers and does not keep up with fast updates of the HTML content.
Right now the only way I can make this work smoothly inside Eclipse is prepending to the Browser widget's content instead of appending, but I'd really prefer adding new messages at the bottom, not at the top.
Rewriting the whole HTML content every time seems unnecessarily busy-work, and there may not be a way to prevent some browsers from scrolling to the top each time you redraw the entire page. Especially if you allow the logs you show to get very long, this will get slower and slower as the log gets longer.
A better solution might be to use JavaScript to append to the page. You're already using
browser.execute()
How about something like this (assuming "itemID" is the ID of the DIV containing the content):
String newContent = newContent.replaceAll("\n", "<br>").replaceAll("'", "\\\\'");
browser.execute("document.getElementById(\"itemID\").innerHTML += '"
newContent + "'");
You have to do the replaceAll() and you may need a couple more transformations, depending on your log content. I've noticed that browser.execute() doesn't like it if the script contains newlines, for example, and single quotes in your string needed to be quoted as I show above.
I would have just added this as a comment, but it wouldn't let me (not enough reputation). You can ship XUL in a nonstandard location on the mac, by setting a system property.
System.setProperty("org.eclipse.swt.browser.XULRunnerPath", "/fubar/xul/Versions/1.9.0.7/");