This question already has answers here:
Can we set style to title tag in header
(6 answers)
Closed 7 years ago.
I want to create my custom font, having my logo as a symbol. And would set it for a <title> tag to display it in browsers.
— So, is it possible?
— Any tricks for it?
Thanks a lot for any help and ideas!
There is no way to change the font in the title. Sadly the W3C Standard does not allow this.
The only thing I know, is to set a custom behavior on the document.title with javascript.
Here are two examples, but you have to try it in your own enviroment, because in this build in stackoverflow-interpreter document.title is not available.
var titleText = " t i t l e ";
var pos = 0;
var blinkCount = 0;
var blink = [".....", ".. ..", ". ."];
var doScrollingTimeout = null;
var doBlinkTimeout = null;
function DoScrolling() {
clearTimeout(doBlinkTimeout);
document.title = titleText.substring(pos, titleText.length) + blink[0] + titleText.substring(0, pos);
pos++;
if (pos > titleText.length) {
pos = 0;
}
doScrollingTimeout = window.setTimeout("DoScrolling()", 150);
}
function DoBlink() {
clearTimeout(doScrollingTimeout);
document.title = blink[blinkCount % 3] + titleText.slice(0, blinkCount) + titleText.charAt(blinkCount).toUpperCase() + titleText.slice(blinkCount + 1, titleText.length - 1) + blink[blinkCount % 3];
blinkCount++;
if (blinkCount == titleText.length) {
blinkCount = 0;
}
doBlinkTimeout = window.setTimeout("DoBlink()", 350);
}
DoScrolling();
Copy the javascript and HTML to a local file, because in the stackoverflow-interpreter document.title is not available
<button onclick="DoScrolling();">Scroll</button>
<button onclick="DoBlink()">Blink</button>
Related
The users on my review type of platform highlight titles (of movies, books etc) in <em class="title"> tags. So for example, it could be:
<em class="title">Pacific Rim</em>
Using jQuery, I want to grab the content within this em class and add it inside a hyperlink. To clarify, with jQuery, I want to get this result:
<em class="title">Pacific Rim</em>
How can I do this?
Try this:
var ems = document.querySelectorAll("em.title");
for (var i = 0; i < ems.length; ++i) {
if (ems[i].querySelector("a") === null) {
var em = ems[i],
text = jQuery(em).text();
var before = text[0] == " ";
var after = text[text.length-1] == " ";
text = text.trim();
while (em.nextSibling && em.nextSibling.className && em.nextSibling.className.indexOf("title") != -1) {
var tmp = em;
em = em.nextSibling;
tmp.parentNode.removeChild(tmp);
text += jQuery(em).text().trim();
++i;
}
var link = text.replace(/[^a-z \-\d']+/gi, "").replace(/\s+/g, "+");
var innerHTML = "<a target=\"_blank\" href=\"http://domain.com/?=" + link + "\">" + text + "</a>";
innerHTML = before ? " " + innerHTML: innerHTML;
innerHTML = after ? innerHTML + " " : innerHTML;
ems[i].innerHTML = innerHTML;
}
}
Here's a fiddle
Update: http://jsfiddle.net/1t5efadk/14/
Final: http://jsfiddle.net/186hwg04/8/
$("em.title").each(function() {
var content = $(this).text();
var parameter_string = content.replace(/ /g, "+").trim();
parameter_string = encodeURIComponent(parameter_string);
var new_content = '' + content + '';
$(this).html(new_content);
});
If you want to remove any kind of punctuation, refer to this other question.
$('em.title').html(function(i,html) {
return $('<a/>',{href:'http://domain.com/?='+html.trim().replace(/\s/g,'+'),text:html});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em class="title">Pacific Rim</em>
UPDATE 1
The following updated version will perform the following:
Grab the contents of the em element
Combine with the contents of the next element, if em and remove that element
Create a query string parameter from this with the following properties
Remove the characters ,.&
Remove html
Append the query parameter to a predetermined URL and wrap the unmodified contents in an e element with the new URL.
DEMO
$('em.title:not(:has(a))').html(function() {
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'');
return $('<a/>',{href:'http://domain.com/?par='+encodeURIComponent(text),html:$(this).html()});
});
Or DEMO
$('em.title:not(:has(a))').html(function() {
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});
UPDATE 2
Per the comments, the above versions have two issues:
Merge two elements that may be separated by a text node.
Process an em element that's wrapped in an a element.
The following version resolves those two issues:
DEMO
$('em.title:not(:has(a))').filter(function() {
return !$(this).parent().is('a');
}).html(function() {
var nextNode = this.nextSibling;
nextNode && nextNode.nodeType != 3 &&
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});
Actually,if you just want to add a click event on em.title,I suggest you use like this:
$("em.title").click(function(){
q = $(this).text()
window.location.href = "http://www.domain.com/?="+q.replace(/ /g,"+")
}
you will use less html code on browser and this seems simply.
In addition you may need to add some css on em.title,like:
em.title{
cursor:pointer;
}
Something like this?
$(document).ready(function(){
var link = $('em').text(); //or $('em.title') if you want
var link2 = link.replace(/\s/g,"+");
$('em').html('' + link + '');
});
Ofcourse you can replace the document ready with any type of handler
$('.title').each(function() {
var $this = $(this),
text = $this.text(),
textEnc = encodeURIComponent(text);
$this.empty().html('' + text + '');
});
DEMO
This is all so confusing, I've seen so many examples of how to do different things and cannot seem to find a valid example for what I am trying to do.
I'm using the YQL for the stock quotes only to get just the major indexes, DOW S&P 500 and NASDAQ.
The project is getting the data and working, but I need to determine if the stock value is returning + or - (up or down).
if the market is up or flat, I want to add a CSS class to set it to green, if it is down, I want to set a CSS to red.
One other issue, this only seems to work when I place the function between the head and body, not in the head, not in the body.
<script type="text/javascript">
function stock_quotes(obj)
{
var items = obj.query.results.quote;
var output = '';
var num_quotes = items.length;
items[0].symbol = "DOW ";
items[1].symbol = "NASDAQ ";
items[2].symbol = "S&P 500 ";
//var posquote = {"\d\.?\d{0,9}\.\d{0,9}\s\+"};
//var negquote = {"\d\.?\d{0,9}\.\d{0,9}\s\-"};
for (var i = 0; i < num_quotes; i++) {
var link = items[i].url;
var symbl = items[i].symbol;
var Change_PercentChange = items[i].Change_PercentChange;
var LastTradePriceOnly = items[i].LastTradePriceOnly;
output += "<table><tr><td>" + "<a href='" + link + "'>" + symbl + "</a>" + LastTradePriceOnly + " " + Change_PercentChange + "</td></tr></table>";
}
// Place news stories in div tag
document.getElementById('results').innerHTML = output;
}
This is the HTML with the query
<div id='results'></div>
<script type="text/javascript" src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22DOW%22%2C%22%5EIXIC%22%2C%22%5EGSPC%22)%0A%09%09&format=json&diagnostics=true&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=stock_quotes'></script>
Ideally I'd like to predefine the html elements which would make it easier to set the css class but one headache at a time.
In the end, this seemed to work just fine
var match_nas_neg = nas_result.match(/\-/);
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am trying to apply the custom layer provided by WeatherBug for temperature/Radar/Humidity. etc into my google map using google javascript library.
I need to apply the transparant tile over my google map.
I get the tile images from the below url. So how can i bind this into my map?
http://i.wxbug.net/GEO/Google/Temperature/GetTile_v2.aspx?as=0&c=0&fq=0&tx=0&ty=0&zm=1&mw=1&ds=0&stl=0&api_key=xxxxx
You should be able to add this as a Google Custom Map Type. Basically when requesting the WeatherBug API, you get back a tile that you can use on Google Maps.
You can find the documentation from Google Maps here.
The code for you to start should probably look like this, you can work on from this point:
var tileLayerOverlay = new GTileLayerOverlay(
new GTileLayer(null, null, null, {
tileUrlTemplate: 'http://i.wxbug.net/GEO/Google/Temperature/GetTile_v2.aspx?as=0&c=0&fq=0&tx={X}&ty={Y}&zm={Z}&mw=1&ds=0&stl=0&api_key=xxxxx',
isPng:true,
opacity:1.0
})
);
map.addOverlay(tlo);
Also check the WeatherBug description and the links in there.
Here is a solution for WMS services inpired by : http://code.google.com/p/biodiversity-imageserver/source/browse/trunk/unittest/gmap3/MCustomTileLayer.js?r=49
You can simply ajust the function for your needs.
function MCustomTileLayer(map,url) {
this.map = map;
this.tiles = Array();
this.baseurl = url;
this.tileSize = new google.maps.Size(256,256);
this.maxZoom = 19;
this.minZoom = 3;
this.name = 'Custom Layer';
this.visible = true;
this.initialized = false;
this.self = this;
}
MCustomTileLayer.prototype.getTile = function(p, z, ownerDocument) {
for (var n = 0; n < this.tiles.length ; n++) {
if (this.tiles[n].id == 't_' + p.x + '_' + p.y + '_' + z) {
return this.tiles[n];
}
}
var tile = ownerDocument.createElement('IMG');
tile.id = 't_' + p.x + '_' + p.y + '_' + z;
tile.style.width = this.tileSize.width + 'px';
tile.style.height = this.tileSize.height + 'px';
tile.src = this.getTileUrl(p,z);
if (!this.visible) {
tile.style.display = 'none';
}
this.tiles.push(tile);
while (this.tiles.length > 100) {
var removed = this.tiles.shift();
removed = null;
}
return tile;
};
MCustomTileLayer.prototype.getTileUrl = function(p,z) {
var url = this.baseurl +
"&REQUEST=GetMap" +
"&SERVICE=WMS" +
"&VERSION=1.1.1" +
"&BGCOLOR=0xFFFFFF" +
"&TRANSPARENT=TRUE" +
"&SRS=EPSG:3857" +
"&WIDTH=256" +
"&HEIGHT=256" +
"&FORMAT=image/png" +
"&mode=tile" +
"&tilemode=gmap" +
"&tile="+ p.x + "+" + p.y + "+" + z
return url;
}
You can use it like that
var hMap = new MCustomTileLayer(map, "http://my_base_url");
map.overlayMapTypes.insertAt(0, hMap);
And to delete the overlay
map.overlayMapTypes.setAt(0,null);
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
RegEx match open tags except XHTML self-contained tags
How can I match some alphanumerical words that are outside of an HTML Tag instead of match every words
Example:
<div id="mariano mariano mariano" nota="mariano/mariano">mariano was looking forward Mariano. I want to match this "Mariano" too. Mariano</div>
In this example I want to match all "Mariano" outside of the tag id.
I think the key of this issue is looking forward for a "<" before a ">" and match that word, but if the regex find ">" before a "<" this means that the word is in the tag,
But I couldn't manage to achieve/produce a Regex for this.
I fail trying to concat this Regex (?<=^|>)[^><]+?(?=<|$) with another one.
And my final lowest quality solution was:
<!-- language: lang-js -->
var searchFor = new RegExp("((!?<=^|>)" + termino + ")","ig");
var searchFor2 = new RegExp("(" + termino + "(?=<|$))","ig");
var searchFor3 = new RegExp("(!?<=^|[\\s\\.;,])" + termino + "(?=[\\s\\.;,]|$)","ig");
but those 3 don't cover all the alternatives.
Edit: Im working with javascript:
<script>
container.find("p, span, div, .texto,").each(function() {
var containerText = $(this).html();
for (var i = 0; i < terms.length; i++) {
var termino = terms[i];
// 1st issue ">termino" was remplaced for: ">Pedro"
var searchFor = new RegExp("((!?<=^|>)" + termino + ")","ig");
containerText = containerText.replace(searchFor,">Pedroedro");
// 2nd issue "termino<" was remplaced for: "Pedro"
var searchFor2 = new RegExp("(" + termino + "(?=<|$))","ig");
containerText = containerText.replace(searchFor2,"Pedro");
// 3rd issue "[\.\s,;:]termino[\.\s,;:]
var searchFor3 = new RegExp("(!?<=^|[\\s\\.;,])" + termino + "(?=[\\s \\.;,]|$)","ig");
containerText = containerText.replace(searchFor3," Pedro");
};
$(this).html(containerText);
});
</script>
A few things -
Welcome to stackoverflow!
Please, search for questions before asking. There are numerous results for parsing
xml with regex.
Don't use regex expressions for parsing xml/html! Try xpath!
var termino = // how ever you were defining before...
// Give me all divs, where the text content contains value of "termino"
var iterator = document.evaluate('//div/text()[contains(.,' + termino + ')]', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
try {
// init thisNode to the first item in the iterator
var thisNode = iterator.iterateNext();
// go through all items, alert their content (which should contain termino)
while (thisNode) {
alert( thisNode.textContent );
thisNode = iterator.iterateNext();
}
}
catch (e) {
dump( 'Error: Document tree modified during iteration ' + e );
}
Is there a way to do it(serialization of HTML DOM into XML) in IE 8 or any other older version of IE.
In firefox :
var xmlString = new XMLSerializer().serializeToString( doc );
does it.I haven't tried it, though.
XMLSerializer causes error in IE 8, that it is not defined.
var objSerializeDOM = {
//Variable to hold generated XML.
msg : "",
serializeDOM : function() {
dv = document.createElement('div'); // create dynamically div tag
dv.setAttribute('id', "lyr1"); // give id to it
dv.className = "top"; // set the style classname
// set the inner styling of the div tag
dv.style.position = "absolute";
// set the html content inside the div tag
dv.innerHTML = "<input type='button' value='Serialize' onClick='objSerializeDOM.createXML()'/>"
"<br>";
// finally add the div id to ur form
document.body.insertBefore(dv, document.body.firstChild);
},
/**
* XML creation takes place here.
*/
createXML : function() {
objSerializeDOM.msg += "";
objSerializeDOM.msg += "<?xml version='1.0' encoding='UTF-8'?>\n\n";
// Get all the forms in a document.
var forms = document.forms;
for ( var i = 0; i < forms.length; i++) {
// Get all the elements on per form basis.
elements = document.forms[i].elements;
objSerializeDOM.msg += "<FORM name=\"" + forms[i].name + "\" method=\""
+ forms[i].method + "\" action=\"" + forms[i].action + "\">\n\n";
for ( var j = 0; j < elements.length; j++) {
objSerializeDOM.msg += " <" + elements[j].tagName + " type=\""
+ elements[j].type + "\"" + " name=\""
+ elements[j].name + "\"" + " Value =\""
+ elements[j].value + "\" />\n";
}
alert(document.forms[i].elements[1].event);
}
objSerializeDOM.msg += "\n\n</FORM>\n\n";
alert(objSerializeDOM.msg);
objSerializeDOM.writeToFile(objSerializeDOM.msg);
},
/**
* Writes the msg to file at pre-specified location.
* #param msg
* the XML file created.
*/
writeToFile : function(msg) {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.CreateTextFile("c:\\myXML.xml", true);
fh.WriteLine(msg);
fh.Close();
}
};
objSerializeDOM.serializeDOM();
I wrote this JS, I run this javascript using GreaseMonkey4IE. This simply puts a button on every page of the domain you specify in GM4IE. On click of that button it will parse the HTML document and create an XML file. It will also display the same as an alert first and will save the XML in your local drive on path specified.
There a still many improvements I am planning to do, but yes it works and may be give you guys an idea.The program is self-explanatory, I hope.
please have a look here How to get Events associated with DOM elements?Thanks