Styling encoded mailto address - javascript
I have used an online email encoder to generate a sort-of harvester-proof email-link, but this link won't adapt to my styling. Does anybody know how I can style this kind of link? As of now I don't know where to call the css class.
Here is an example of the link I've encoded:
<div class="mailto-link"><script type="text/javascript"><!--
var gefmyis = ['m','r','l','l','i','a','m','m',' ','e','o','a','"','h','m','e','<','e','/','o',':','a',
'>','a','s','t','c','m','s','l','"','=','.','i','t','>',
'l','f','i','#','.','s','s','"','<','e','"','o','a','c',
't','l','m','t','#',' ','c','=','e','e','i','t','a','a'];
var lmmezyh =
[29,4,25,55,54,53,9,22,31,5,14,23,38,3,40,51,0,17,61,28,15,
34,45,62,36,13,27,52,18,43,8,37,26,24,49,63,33,6,11,20,56,35,
48,30,60,39,44,58,1,32,46,12,59,16,50,2,57,7,47,21,42,19,10,41];
var bsmqvte= new Array();for(var i=0;i<lmmezyh.length;i++)
{bsmqvte[lmmezyh[i]] = gefmyis[i]; }for(var i=0;i<bsmqvte.length;i++)
{document.write(bsmqvte[i]);}
// --></script>
<noscript>Please enable Javascript to see the email address</noscript></div>
Thanks!
Edit:
By just inspecting in Console what is actually created by that script you'll notice this:
<a class="email" href="mailto:test#email.com">test#email.com</a>
means a.email in your CSS will suffice:
a.email{
font-weight: bold;
color:red;
}
http://jsfiddle.net/990exhow/
Simply use:
a[href^="mailto:"]{
font-weight: bold;
color:red;
}
http://jsfiddle.net/pbve1aum/1/
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Or wrap all into a SPAN
<span class="mailtoStyle">
<!-- all in here -->
</span>
and in your CSS:
.mailtoStyle a{
font-weight: bold;
color:red;
}
http://jsfiddle.net/pbve1aum/2/
Related
How create new container tag in html
i have read about this theme but not solved. Something similar to header and footer html tag with content. Ok it not standard html custom tag, but i want something like:
<html>
<body>
<content>
This is a text
</content>
</body>
</html>
So, I have defined CSS as:
content {
backuground-color: red;
display: block;
padding: 1em;
}
And Javascript as:
var customTag = document.createElement('content');
var customTag = new customTag();
document.body.appendChild(customTag);
But something not work. How i can fix problem? What i forget to do more?
Thanks very much.
<content> used to be an HTML tag (I think)...
Here's a way with <customcontent>, instead:
var cc=document.createElement("customcontent");
cc.innerText="Hello! I'm a custom content tag!";
document.body.append(cc);
customcontent {
background-color: red;
display: block;
padding: 1em;
}
Google app script : Separating HTML and CSS
i have a question connected with title. Currently i am trying to follow google "best practice". https://developers.google.com/apps-script/guides/html/best-practices
I have no idea why its not working.
Here is a MainPageCSS.html
<pre>
<style>
p {
color: green;
}
</style>
</pre>
Then comes server-side function:
function includeCSS() {
var content = HtmlService.createTemplateFromFile('MainPageCSS').getRawContent();
//.getContent();
return content;
}
I am using a sidebar via HtmlService, and calling google.script.run.withSuccessHandler(SuccessAddCss).includeCSS();
I tried different ways of adding css into page, but noone worked...
function SuccessAddCss(Style){
var styles = document.getElementById("allStyles").innerHTML += "p { color:red }";
var text = styles.innerHTML;
var styleNode = document.createElement('style');
var styleText = document.createTextNode('p { color:red; } ');
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);
alert("ok");
};
function teso()
{
google.script.run.withSuccessHandler(SuccessAddCss).includeCSS();
alert(text);
};
In order to add somehow css from MainPageCSS to MainPage
id="allStyles" type="text/css"
<pre>
<style id="allStyles" type="text/css">
h2{
font-family: Times New Roman, Times, serif;
font-size: 14px;
text-align: center;
}
</style>
</pre>
Also sidebar is launched in SandBox.Native mode, so it allows css dynamic changes.
Thank you for help.
In my website, I use a scriptlet to include the CSS file.
HTML:
<?!= include('MainPageCSS'); ?>
<div>Some Content Here</div>
<form>A form</form>
<button>A button</button>
That's how the include function gets called from the HTML file. Just curious, could you try taking out the <pre> tags and see if that makes any difference?
How to hide the hyperlink underline and maintain the origin font color in javascripts?
How to hide the hyperlink underline and maintain the origin by avoid change to blue color font in JavaScript. My JavaScript code :
<a href="javascript:window.open('selectprofiletype.php','Crm.com - Create',
'width=700,height=350' ) "> User Profile</a>
Why javascript? Use the CSS.
a {
text-decoration: none;
color: black;
}
Hope this helps:
a {
color: #0060B6;
text-decoration: none;
}
a:hover
{
text-decoration:none;
color: #0060B6;
cursor:pointer;
}
this seems more like a css question
a{
text-decoration: none;
color: your colour here;
}
Please change the JavaScript to the following (and use any of the other answers for the CSS instead of using an inline style)
<a href="selectprofiletype.php" target="crm_create" style="text-decoration:none"
onclick="var w = window.open(this.href,this.target,'width=700,height=350');
return w?false:true;"> User Profile</a>
since your code will give problems in several browser - for example the window name may not have spaces
The code would be nicer if unobtrusive:
window.onload=function() {
document.getElementById("crm").onclick=function() {
var w = window.open(this.href,this.target,'width=700,height=350');
return w?false:true;
}
}
using just
<a id="crm" href="selectprofiletype.php" target="crm_create">User Profile</a>
Why doesn't this Javascript function work?
i would like to be able to click a link and have a form show up. ideally with smoothly maybe use delay? so far i click on the link and nothing happens.
My Javascript
<script type="text/javascript">
function showForm() {
document.getElementById('showme').style.display = "block";
}
</script>
my HTML
<a class="non_link" href="" alt="start a new post" onmouseclick="showForm();">
Start A New Post
</a>
<form action="#" id="showme" method="post">
my CSS
#showme {
font-size: 0.5em;
color: #000;
font-weight: normal;
margin-top: 20px;
display: none;
}
took out the # sign and still doesn't work
# is not part of the id:
document.getElementById('showme')
Additionally, that should probably be onclick you're using. Plus, try setting the href to something like href="javascript:void(0);" (other expressions that return a falsy value should work too afaik).
Don't use a # sign in getElementById
document.getElementById('showme').style.display = "block";
You want the id, not the selector. See here.
document.getElementById() doesn't need the # .That's a jquery standard kept in line with how you define css ids See MDN: https://developer.mozilla.org/en/DOM/document.getElementById
Your code is working in below test HTML file:
<html>
<head>
<style type="text/css">
#showme {
font-size: 0.5em;
color: #000;
font-weight: normal;
margin-top: 20px;
display: none;
}
</style>
<script type="text/javascript">
function showForm() {
document.getElementById('showme').style.display='block';
}
</script>
</head>
<body>
<a class="non_link" href="#" alt="start a new post" onclick="showForm()">
Start A New Post
</a>
<form id="showme" method="">
Content of the Form<br/>
Content of the Form
</form>
</body>
</html>
Make a textarea all caps?
I am trying to make a textarea that only will type in caps, even if the user isn't holding down shift or has caps lock on. Ideally this would accept the input no matter what and just automatically shift it to all caps. Most of the ways I am thinking of seem kind of clunky and would also show the lowercase before it gets converted. Any suggestions or strategies?
you can use CSS
textarea { text-transform: uppercase; }
however, this only renders on the browser. let's say if you want to inject the text into a script or db in the textarea as all caps then you'll have to use javascript's toUpperCase(); before injection or form submit.
here is the jsfiddle for example:
html:
<textarea>I really like jAvaScript</textarea>
css:
textarea{
text-transform: uppercase;
}
javascript:
var myTextArea = document.getElementsByTagName('textarea');
for(var i=0; i<myTextArea.length; i++){
console.log('Textarea ' + i + ' output: ' + myTextArea[i].innerHTML); //I really like jAvaScript
console.log('Textarea ' + i + ' converted output: ' + myTextArea[i].innerHTML.toUpperCase()); //I REALLY LIKE JAVASCRIPT
}
CSS:
textarea { text-transform: uppercase; }
Quintin,
Create a style in your CSS such as the following:
textarea{
text-transform:uppercase;
}
Try adding a
textarea{
text-transform: uppercase;
}
to the text area.
Add you can get it
CSS:
textarea { text-transform: uppercase; }
This can be achieved with the oninput attribute, like so: <textarea oninput="this.value = this.value.toUpperCase()"> <label for="upperCaseTextArea" style="display:block;"> Upper Case Text Area </label> <textarea id="upperCaseTextArea" name="upperCaseText" rows="5" cols="15" oninput="this.value=this.value.toUpperCase()" > </textarea>