maybe somone know how to use html adress hidding like this, i have rest api who response as Map<String, dynamic> with two variables, title and content. Variable content have all code inside and part of this code is a hidden link like below 'google-link' in postman i can follow link using ctrl+click but when i use Html widget in vsc with onLinkTap, he build page for me but when i try to use hyperlink debug console give info back '/google-link' is null
<a title=\"Google\" href=\"/google-link\"><img src=\"https://www.speedtest.pl/wiadomosci/wp-content/uploads/2016/11/google-logo.jpg\"
My question is how can i change body from this rest api from '/google-link' to 'https://www.google.com" and make this hyperlink working? or maybe is better way to do this?
thanks!
Related
Here is my apps home page url: http://localhost:4200/
Whenever the user selects a next button a new screen loads with a new url similar to the examples shown below:
http://localhost:4200/screen/static/text/1/0
http://localhost:4200/screen/activity/click-and-reveal/1/1
http://localhost:4200/screen/activity/click-and-reveal/3/2
and so on
I would really like the url to display a single value something like http://MyProjectName ..... as i think it looks rather unprofessional to have the url looking the way it is looking currently.
Any help as to how i could accomplish this would be greatly appreciated :).
The URL won't change if you use the navigation option SkipLocationChange on your links.
<a routerLink="/somePath" skipLocationChange>Settings</a>
Or in code behind:
this.router.navigate(['/somePath'], { skipLocationChange: true });
Their are few ways to achieve it:-
Redux
Shared Observable
I am trying to set up OAuth2.0 for an iPhone app I'm working on.
I have "http://www.mywebsite.com/success" set up as my RedirectURI to which the service I am working with appends a response code and state. My response becomes "http://www.mywebsite.com/success?code=ftlZcvFZ3RACFqzgxHypJw637jObmAoHowSuyxeM&state=".
The example I am following has me trying to access this code by the following:
[webView stringByEvaluatingJavaScriptFromString:#"document.title"];
Right now my page title is static and is always just Success, while the example expects it to include the code like: "Success ftlZcvFZ3RACFqzgxHypJw637jObmAoHowSuyxeM".
How do I modify my html to have the title reflect this?
Thanks!
You can use the sever-side language PHP. It's easy to learn.
I have an image servlet which basically loads an image template on a url.
i am also able to access it through img tag.
Based on my response after form submission, i need to display this image
Following is an excerpt from my ajax code
document.getElementById("outmessage").innerHTML = "<h2><img src=\"${pageContext.request.contextPath}/sort-code-image\"/> </h2>";
I basically need to modify/draw on this image template before i display it on my jsp page.
I am a bit confused as to how to proceed with this problem.
Do i modify the image on servlet everytime when i do some of my business logic
or is there a better way to do this?
Apologies for some terminologies as i am a bit new to servlet and ajax.
Any inputs is highly appreciated.
We can use the following to write a base64 encoded data to img src attribute in java script and can modify the image.
var src3="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUAB0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1hByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADABAAIRAxEAPwDi677TfhJr99py3UstraPJGHjgmLbwcjhwB8vy5Pc9AQOccDXs9h8ZdKNjD/aNheLebf3ot0Vo8+qksDg9cHp0yeteFho0ZN+1Z+r5zWzClCH1GN9devp9+p5TreiX3h7VJNP1CLZMnIYcrIvZlPcH/EBBFZ1dF408T/8JX4ga+SDyYI4xDCp+8UBJBbtklj06cDnGTztYVFFSajselhJVpUISrq07arzCiiipOgKKKKAP//Z";
document.getElementById("outmessage").innerHTML = "<h2> Image \<img src\= "+src3+" /></h2>";
I figured out the same when i faced the problem mentioned in following link
setting variable value in src attribute of image tag to a base64 encoded image in javascript/ajax
I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');
I'm using play framework in this project and I'm trying to send an E-mail with a Logo attached but I want to show this logo as part of my HTML code!
My Mailer:
EmailAttachment attachment = new EmailAttachment();
attachment.setDescription("Logo");
attachment.setName("logoMail.jpg");
attachment.setPath(Play.getFile("/public/images/email/logoMail.jpg").getPath());
addAttachment(attachment);
My HTML
The e-mail is sent, my Logo is attached there, but the image is never showed as a background on my DIV.
What am I doing wrong?
Thank you very much!
It depends on the e-mail client you are using to read your test e-mail. Most of them ignore or remove the background-image css property.
Take a look at the following:
http://www.email-standards.org/
http://www.campaignmonitor.com/design-guidelines/
I've been looking into embedding images into emails using MVC templates, and I think at the moment it's not supported.
As far as I can see, in order to use embedded images, the image attachment needs to have a Content-ID header on it. Attaching the image using addAttachment generates an attachment without this header.
The underlying email framework, apache commons email, allows you to embed images using the HtmlEmail.embed method, and there is an example of this in the Play documentation, but only when using Commons Email directly. addAttachment() will add an ordinary attachment, not an embedded one.
The problem is that HtmlEmail.embed returns the content id for the embedded image. The first problem is that there would need to be a mechanism for passing that content id forward into the template, so that you could reference it in the relevant link.
The second problem is that the way the Mailer.send() method is coded, the email itself is not created until after the template is rendered, and the result of attempting to render an html body is used to decide whether to create an HtmlEmail or a SimpleEmail. This method would need to be re-written to decide the type of email before rendering the template, and, if it was html, to create the HtmlEmail and attach the embedded images prior to rendering the template, so that it could pass the content ids to the renderer.
It certainly isn't impossible to make this change, and I might attempt it if I can find the time on my current project.
The solution could be to render HTML content manually and then put it into email. This code worked for me:
public static String test() throws EmailException, MalformedURLException {
HtmlEmail email = new HtmlEmail();
email.setHostName("smtp.server.com");
email.setAuthentication("username", "pwd");
email.setSubject("subject");
email.addTo("to#example.com");
email.setFrom("from#example.com");
URL url = new URL("https://example.com/image.png");
String cid = email.embed(url, "IMG1");
Template templateHtml = TemplateLoader.load("/Mails/test.html");
final Map<String, Object> templateHtmlBinding = new HashMap<String, Object>();
templateHtmlBinding.put("cid", cid);
String body = templateHtml.render(templateHtmlBinding);
email.setHtmlMsg(body);
return email.send();
}
I'm a bit late with my answer, but it is possible and integrates nicely with the MVC-Email tutorial. Assuming your mailer class is also notifiers.Mails, use this as a html template:
%{
String logoSrc = notifiers.Mails.getEmbedddedSrc("public/images/logo.png", "cool logo");
}%
<html>
<head>
</head>
<body>
Look at this cool image! <br>
<img src="${logoSrc}">
<br>
Amazing, no?
</body>
</html>