I have created a template to redirect to a specific website . And I am passing website dynamically . So when user click It must redirect to then this dynamic website href="*|URL:redirect_link|*". But Instead of this website finding link on Mandrill website like this https://mandrillapp.com/templates/*%7CURL:redirect_link%7C* . It should open as a new website. What Wrong I am doing ?
<a class="mcnButton " title="Register and explore!"
href="*|URL:redirect_link|*"
target="_blank"
style="font-weight: normal;
letter-spacing: normal;
line-height: 100%;
text-align: center;
text-decoration: none;
color: #FFFFFF;
">Register and explore!</a>
Sorry i was wrong. here is the details from mailchimps knowledge base:
*|URL:YOUR_MERGETAG|*
Encodes the value of your merge tag for inclusion in a URL. For
example, if you have a list field with the merge tag, |QUERY|, and
the value includes something like I love monkeys — in your link, use
http://www.yourwebsite.com/|URL:QUERY| to URL encode the value like:
http://www.yourwebsite.com/I+love+monkeys.
more info can be found here.
Hope that helps.
Related
I'm working with MadCap Flare, and our team currently has four websites that we are supporting. We want to be able to link these different websites together, so we've added a navigation bar that links to each separate website. The navigation bar works as intended, but we have to assign the Active tag to the correct website link in each project. We're trying to avoid these kinds solutions because manually configuring settings in each project is not our preferred way of working.
We're looking for a way to automatically detect the URL and assign an Active tag based on the URL. This doesn't seem too difficult, and I've found a lot of similar questions and solutions, but I can't seem to figure out how to do this with our current setup. Our team does not consist of coders/programmers, so we could just be missing a very easy solution.
One major challenge is the fact that the hard links, such as https://example.com/Site1/Default.htm, are default links that redirect to the site's homepage, such as https://example.com/Site1/Home.htm, so I can't even do a simple comparison between the current page and the link. Many of the solutions I've found so far seem to break down at this point.
Here's our relevant code:
HTML
<div class="my-header">
<ul class="XLink">
<li class="XLink">Site 1
</li>
<li class="XLink">Site 2
</li>
<li class="XLink">Site 3
</li>
<li class="XLink">Site 4
</li>
</ul>
</div>
CSS
ul.XLink
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
li.XLink
{
float: left;
}
li.XLink a
{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.active
{
background-color: #1c5a97;
}
/* Change the link color to #111 (black) on hover */
li.XLink a:hover
{
background-color: #111;
}
div.my-header
{
background-color: #103d78;
margin-bottom: 15px;
width: 75%;
I've tried a handful of Javascript that I've found online, but nothing has achieved what I was attempting. I've tried adding IDs to the line items, but I'm just too unfamiliar with Javascript to even know what I'm doing. Does anyone have some advice?
You could start by establishing some conventions.
All your "links" to said websites have a classname called "XLink", which I see you're already doing.
Each of these "links" has id=uniqueID of the associated website.
<div class="my-header">
<ul class="XLink">
<li class="XLink" id="Site1">Site 1
</li>
<li class="XLink" id="Site2">Site 2
</li>
<li class="XLink" id="Site3">Site 3
</li>
<li class="XLink" id="Site4">Site 4
</li>
</ul>
</div>
Next, you'd have to detect the address change via JS
function onHashChange(){
links = document.getElementsByClassName("XLink")
.forEach(link =>{
if(location.href.includes(link.id){
link.classList.add("active");
break;
}
}
}
$(document).ready(onHashChange);
window.onhashchange = onHashChange;
PS: this is just a trivial solution, assuming your website's URL dont have edgecases like https://example.com/Site1/page/Site3/Something.htm. For which you need to do a more fine grained regex match.
Definitely not the cleanest of the solutions though.
I was wondering what this paragraph actually meant?
It is taken from a website for disadvantages about inline scripts
Poor accessibility : When it comes to inline JavaScript code, such as in
the above example, it’s applied to an element which doesn’t have any
built-in fallback interaction handler
Link: https://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
<div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
<div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
<span id="get-shit" onclick="callSomeFunction()">News</span>
</div>
</div>
He is saying that in above function if callSomeFunction, redirects a page to some other page... but for some reason(Due to network error it can't load) callSomeFunction isn't loaded in the page, then it will be a dead link which will do nothing, so rather it should be implemented in such a way that without javascript it should also work reasonably...
even browser provides a configuration to disable javascript for the user, so in that case above link will do nothing
So he is saying by using below code that,
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<script type="text/javascript" src="js/base.js"></script>
<div id="container">
<div id="navigation">
<a id="get-news" href="news-proper-url">News</a>
</div>
</div>
/*
CSS code, in separate file (base.css)
*/
#container {
width: 800px;
margin: 1em auto:
font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif;
}
#navigation {
float: left;
width: 400px;
padding: 1em 2em;
font-size: 0.9em;
}
/*
JavaScript code, in separate file (base.js)
*/
window.onload = function () {
document.getElementById("get-news").onclick = function () {
// Get news through AJAX
};
}
Here, If javascript is not loaded then clicking on "News" will redirect you to the new page,
If javascript is loaded then he will send an AJAX request and load the news in the same page
Which are the cases on unavailability of javascript are listed in the same page
Doesn’t Everyone Have JavaScript Nowadays?
First: no they don’t. Second: some people purposely turn it off (for
instance, the NoScript Firefox extension has had 31 million downloads
to this date). Third, very often is not up to the end user, but
external circumstances that they don’t control, which will, to some
extent or another, lead to JavaScript being unavailable. These factors
are:
Antivirus programs and firewalls being a bit too harsh in their
JavaScript security judgement. Company proxy servers filtering out
code (for example, read An important lesson learned about AJAX and
accessibility). Other company internet access settings preventing
proper JavaScript execution.
Example With Progressive Enhancement
Click me
Here, if the JavaScript fails, then the link works as normal and the important message is displayed by loading a new page from the server.
(If the JavaScript is successful the clicks default behaviour is canceled and the link isn't followed).
The built-in interaction handler of a link is "go to a URL". By layering JavaScript over it we can use that as a fallback.
Example Without Progressive Enhancement
<button type="button" onclick="alert('Important message');">Click me</a>
Here, if the JavaScript fails, then nothing happens at all. It's just a button that doesn't do anything.
This doesn't actually have anything to do with the JavaScript being inline. The same issues occur with modern JavaScript loaded from script elements and bound with addEventListener.
I'm building a Chrome Extension, where in, based on the search query I want to display some stuff(let's assume links for now) on the RHS of the Google results page. Very similar to what Wajam does.
I understand I need to use Content-Scripts for such tasks, which is clear and fine.
The problem is, Google seems to return divs with different IDs each time based on the query in its html. For instance if you search for a movie name, there seems to be different set of IDs in the html as opposed to, let's say when you search for a Javascript error message.
I wonder how Wajam has implemented its plugin, which works so reliably and displays links on the RHS.
How should I go about it? Any specific IDs you can see in the html that I can use or build upon reliably?
Just to be clear for folks who are not into Chrome Extensions, the question doesn't require knowledge of Extension architecture/APIs. It's a seemingly simple html/javascript/css related question.
I don't know anything about Chrome Extensions developement, but I tried to understand Google results page structure, and I hope that will help you :
Every google result page has a #rhs div, even if there are no additional informations on the right. This div has an unique id, so I think it would be easy to put dynamical content inside.
I've tried with Web Developer Tools, and that worked very well :
I think you'll just have to append content to this div to get what you want : the "different IDs based on the query" may be children of this parent and unique #rhs div. So I don't think you have to care about these children "random id" divs, just append your content (custom css, images, videos...) in this #rhs div :)
if you want to try with a Web Developer Tool :
just paste this code instead of the original <div id="rhs">...</div>
<div id="rhs" style="
border: 2px solid red;
padding: 16px;">
Put whatever you want here
<div style="
font-weight: 700;
padding: 12px;
border: 1px solid #aaa;
background-color: #eee;
margin: 20px;
-webkit-box-shadow:0 1px 2px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 2px rgba(34,25,25,0.4);
box-shadow:0 1px 2px rgba(34,25,25,0.4);
font-size: 1.4em;
">
Custom CSS
</div>
<img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png"> images
<iframe id="ytplayer" type="text/html" width="340" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://example.com" frameborder="0"></iframe>
</div>
and you'll get the same result as me.
Hope I helped you ! :)
I hope someone can help as .asp is new to me and this is giving me a lot of head scratching!
Basically we have an ecommerce Volusion template, in the header we'd like to add a new graphic next to one that already exists, should be easy but some .asp code seems to be hiding elements in the header. I try to explain in the code:
ASP
$("#content_area").find("table:contains('Home >')").css("display", "none").html("");
var a = $(".productnamecolorLARGE").html();
if (document.location.href.indexOf("help") == -1) {
if ($(".productnamecolorLARGE").html() != 'Order Status') {
if ($.browser.msie) {
$(".productnamecolorLARGE").html("<tr><td></td><td width='490'><div style='font-size: 21px; margin-bottom: -2px; padding-top: 19px;'>" + a + "</div></td></tr>");
} else {
$(".productnamecolorLARGE").html("<tr><td></td><td width='490'><div style='font-size: 21px; margin-bottom: -25px; padding-top: 19px;'>" + a + "</div></td></tr>");
}
};
} else {
$("#content_area").find("img").eq(0).remove();
}
$("#lnk1").css("color","#79496a");
$("#Header_ProductDetail_ProductDetails_span").parent().parent().parent().parent().parent().remove();
$("#headerTop").find("a").eq(0).html("<ing border=0 src='/v/vspfiles/templates/192/images/view_bag_small.png'>");
$(".video_container").css("padding", "17px 10px 16px 45px");
HTML
<div id="header" style="z-index: 999;">
<div id="display_homepage_title">www.domain.com</div>
<div id="headerTop">
View Bag
About
My Account
This is what I am trying to do:
<div id="headerTop">
<!-- This line is being added --> <ing src="newgrahpic.jpg" width="100" height-"50">
View Bag
About
My Account
When making this change the .asp seems to be adding the existing View bag graphic (line 2) against my new (line 1) and then displays "My Account" to the right of it, whereas My account is hidden with the Display:none; assigned to it before I add the new line.
I appreciate this may sound like a load of nonsense but I hope someone can make some sense of what its doing?!
Thanks in advance for any help.
Rich
Actually it’s impossible :( sorry to disappoint you. Volusion claims to have simple to use structure, but any changes made to template will not work. Only CSS changes work (due to their weird CMS ASP engine that seems to re-write our custom codes). Here is an article that shares in-depth look at complexity of volusion’s templates: http://tech-hive.com/reviews/shopping-carts/volusion-every-themers-nightmare-20100615/#
The real question, is there any other reputable provider that has CML that would allow us to do custom coding? And that’s the question I seek answer to.
I'm trying to get a line of flags wiht google translate on my site. This other site already has it, but it uses blogger API. I changed the JS accordingly, but I found out that my forum software encodes de apostrophe as \'
Is there any way I can write the same html+js below without using apostrophes?
<a target="_blank" rel="nofollow"
onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(document.URL)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Chinese (Simplified) BETA"><img style="border: 0px solid ; cursor: pointer; width: 24px; height: 24px;"
alt="Google-Translate-Chinese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png"
title="Google-Translate-Chinese">
As it is, the forum engine translates it as ""window.open(\'http://www.google.com/translate?u=\'+"
Try using something like this
onclick="window.open(\"http://www.google.com/translate?u=\"+encodeURIComponent
(document.URL)+\"&langpair=pt%7Czh-CN&hl=pt&ie=UTF8\"); return false;"
Since you are already using escape string, your forum engine might not replace this with another '\'.