Email template: Inside Linking - html

I have a HTML template for my emails, i wanted to know if its posible like to implement a menu, and the link redirect to the corresponding part of the content.
example: imagine the menu is: banna, apple, juice, coke.
and then the content goes: banna etcetcetc, apple etc etc etc...
make each one link to the exact content? thanks..

Nope, sorry. What you're talking about requires some sort of conditional, and that would require a script. Most email clients strip your <script> and <link> tags. Unless you want to get your hands dirty with some server-side code like gif sockets why not link to a little webpage where you can do any of those?
EDIT FROM COMMENTS
Thinking about it now.. Would hashtag linking work for you? Like clicking a link and having the scroll bar jump to that position? you can accomplish that with <a name="linktotop">Other link will scroll to this</a> and Scroll! I just tested it in outlook.com and gmail and it seems to work. No promises on the other clients though.

Related

wants that when I click on the any index hyperlink, then it is displayed on main description page

I have made an web page. There are two iframes
In it. First is of index and second one is description page. I want that when I click on the any index hyperlink, then it is displayed on main description page.
How it will be possible? please give me the HTML code
You can use a button and when clicking it, change the url of the iFrame using Javascript like this:
document.getElementById('iframe-id').src = newLink;
You can use the data-attribute to store the wanted link in your html.
In case you want to do that: It is not possible to react to things outside of an iFrame through an iFrame. So you cannot put a link in iFrame1 and have it reload iFrame2, because those are two different websites and don't see each other.
Now, idk what exactly you are planing to do, but I really hope, that you don't want to make your entire site like that. Using iFrames is really only useful for things like inserting widgets (like Codepen etc.), but should never be used to display information from your own site. If you don't want to copy your html for every site then use PHP. If you don't want to reload your entire webpage (which is pretty much never a problem) you can use AJAX-requests to load parts of your website. (Frameworks like React.js, Angular.js and Vue.js do that for you)

Facebook, StaticHTML and form summission

This is weird!
I have set up a form using RapidMailer, and on an external site it works fine. (Just to complicate matters, the form is within a <div> as I display a background image, and then use the <div> to position the signup box halfway down the page)
But ...
Put it within an Facebook (Thunderpenny) StaticHTML page, (which I think is <iframe>?) and whilst I can enter name/email, and the submit button shows mouse up/mouse down events, it just won't submit.
I tried adding "pointer-event:auto" to the div so that it was to the fore, but no go. And no good asking the app creator as I doubt I'll get a response. Anyone any ideas? (** I could include page code, but it's 90% links to external js files Rapidmailer sets up)
Is it 'cos I got a <div> within an <iframe>? Do I need to add an <object> to the code somewhere???
It turns out that for some reason, the HTML code cannot find / use the javascripts even with direct URL's. I strongly suspect it's to do with "cross browser" limitations. In otherwords, the StaticHTML <iframe> is on one server, and the HTML code is trying to access javascript on a second server. And as the RapidMailer script is using three scripts direct from jquery.com, it's difficult to know what can be eliminated as they all contain error trapping routines.
In the end, I had to add a direct link to a status update on the Facebook page, and redirect it to the signup form on my blog. I then pinned the post the top. Alas, now for some reason it won't display a graphic with the link, and instead insists on showing the URL itself! Oh well!

How to open an iframe from clicking an image

I'm wondering if anyone can help me. I'm hoping I can open an iFrame in the centre of my webpage from clicking a picture. So in effect the iframe would be hidden until the picture is clicked. I have a very small and simple upload form on another page that I would like to appear when the user needs to upload and click the picture. I've had a good look round on this site and google in general but not found what I'm looking for, or the basics weren't included because it's common knowledge for most people here. Would there also be a way of closing this when it's finished uploading too? The form currently diverts to the homepage when finished so It would be handy to have a close option as in the end (post successful upload) the iframe contents will be the same as the page it's displayed on.
The best/easiest I have come across has been on w3schools but I have read using html for iFrames is not widely accepted or it isn't the best option cross-browser.
I have been viewing and trying different code but without even the basic knowledge I can't get my head around it.
If anyone is able to help, please assume I'm 5 years old. I'm not daft but in terms of code I'm literally just starting.
Thanks in advance
You would need to add a javascript onclick function to your img tag which would open a new window upon a click. You would pass the window.open function the name of the html file you want to display. Something like this:
<img src="image.jpg" onclick="window.open('welcome.html')">

Make a link completely invisible?

I'm pretty sure that many people have thought of this, but for some reason I can't find it using Google and StackOverflow search.
I would like to make an invisible link (blacklisted by robots.txt) to a CGI or PHP page that will "trap" malicious bots and spiders. So far, I've tried:
Empty links in the body:
<a href='/trap'><!-- nothing --></a>
This works quite nicely most of the time, with two minor problems:
Problem: The link is part of the body of the document. Even though it is pretty much unclickable with a mouse, some visitors still inadvertently hit it while keyboard-navigating the site with Tab and Enter. Also, if they copy-paste the page into a word processor or e-mail software, for example, the trap link is copied along and sometimes even clickable (some software don't like empty <a> tags and copy the href as the contents of the tag).
Invisible blocks in the body:
<div style="display:none"><a href='/trap'><!-- nothing --></a></div>
This fixes the problem with keyboard navigation, at least in the browsers I tested. The link is effectively inaccessible from the normal display of the page, while still fully visible to most spider bots with their current level of intelligence.
Problem: The link is still part of the DOM. If the user copy-paste the contents of the page, it reappears.
Inside comment blocks:
<!-- <a href='/trap'>trap</a> -->
This effectively removes the link from the DOM of the page. Well, technically, the comment is still part of the DOM, but it achieves the desired effect that compliant user-agents won't generate the A element, so it is not an actual link.
Problem: Most spider bots nowadays are smart enough to parse (X)HTML and ignore comments. I've personally seen bots that use Internet Explorer COM/ActiveX objects to parse the (X)HTML and extract all links through XPath or Javascript. These types of bots are not tricked into following the trap hyperlink.
I was using method #3 until last night, when I was hit by a swarm of bots that seem to be really selective on which links they follow. Now I'm back to method #2, but I'm still looking for a more effective way.
Any suggestions, or another different solution that I missed?
Add it like you said:
<a id="trap" href='/trap'><!-- nothing --></a>
And then remove it with javascript/jQuery:
$('#trap').remove();
Spam bots won't execute the javascript and see the element, almost any browser will remove the element making it impossible to hit with tabbing to it
Edit: The easiest non-jQuery way would be:
<div id="trapParent"><a id="trap" href='/trap'><!-- nothing --></a></div>
And then remove it with javascript:
var parent = document.getElementById('trapParent');
var child = document.getElementById('trap');
parent.removeChild(child);
this solution seems to work well for me, luckily i have bookmarked it. I hope it helps you as well.
you can create a hidden link like this and put it at the very top left of your page and to prevent regular users from accessing it too easily you can use css to lay a logo image over this image.
<img src="images/pixel.gif" border="0" alt=" " width="1" height="1">
if you are interested in setting up how to blacklist the bots refer to this link for detailed explaination of howto.
http://www.webmasterworld.com/apache/3202976.htm

How do I override the title of a bookmark for a web page?

When adding a bookmark or favorite the browser uses the TITLE tag of the page to automatically populate the title of the bookmark. However, my web pages use SEO-friendly titles which are not really user-friendly. Is there a method to override the title when the browser makes a bookmark?
I am aware that I can create a link on the page that calls javascript:
javascript:window.external.addFavorite("url","custom title");
But is is possible to do something similar when a user uses the menu or hotkey to create a bookmark?
You're trying to solve the wrong problem.
However, my web pages use SEO-friendly titles which are not really user-friendly
This is what you need to fix. Your page titles should be user friendly.
To be honest, if you're doing it right SEO and User friendly titles should be synonymous... can you post some examples as to why you feel the need for them to be so different?
I can't see how that would be possible. The browser takes the Title loaded, which is the Title displayed on the top of the page. When saving a bookmark, it doesnt go through the code. It just adds the URL and takes the site Title.
You could check if the "bookmark"-pressing triggers a javascript event, though, i think it woudlnt be cross-browser :)