I have a Homepage Takover running on our website. and I have already written code for displaying the image as background image and it is clickable.
But I need certain part of image needs to clickable to another URL.
<!DOCTYPE html>
<html>
<head>
<title>asdfasdf</title>
</head>
<body>
<div>
<script>
if (top == self) {
var interWindow = window;
var interDoc = window.document;
} else {
try {
var interWindow = window.parent;
var interDoc = window.parent.document;
} catch (e) {
/* The creative cannot escape the iframe. Show an appropriate alternative. The alternative will remain inside of the iframe. */
}
}
var timeDelay = 0;
var backgroundColor = '#ffffff';
function initBackground() {
high = window.screen.height;
size = window.screen.width;
if (size <= 1280) {
interDoc.body.style.backgroundImage = none;
} else if (size > 1280 && size < 1440) {
interDoc.body.style.backgroundImage = "url(https://i.ibb.co/L9hnZJ1/hpto.gif)";
} else {
interDoc.body.style.backgroundImage = "url(https://i.ibb.co/L9hnZJ1/hpto.gif)";
}
if (backgroundColor != '') {
interDoc.body.style.backgroundColor = backgroundColor;
}
interDoc.body.style.backgroundRepeat = 'no-repeat';
interDoc.body.style.backgroundPosition = 'top center';
interDoc.body.style.backgroundAttachment = 'fixed';
interDoc.onclick = backGroundClick;
}
var backGroundClick = function (e) {
if (document.all) {
if (event.button == 2 || event.button == 3) {
return false;
}
} else {
if (e.button == 2 || e.button == 3) {
e.preventDefault();
e.stopPropagation();
return false;
}
}
var link = 'google.com';
EE = e ? e : event;
if (!EE) {
return;
}
var t = EE.target ? EE.target : EE.srcElement;
if (t.tagName == "BODY" || t.tagName == "HTML" || t.tagName == "HEADER" || t.tagName == "SECTION" || t.tagName == "FOOTER") {
var ad = window.open("" + link);
} else {
console.log('link click event: ' + t.tagName);
}
}
interDoc.onmouseover = function (e) {
EE = e ? e : event;
if (!EE)
return;
var t = EE.target ? EE.target : EE.srcElement;
if (t.tagName == "BODY" || t.tagName == "HTML" || t.tagName == "HEADER" || t.tagName == "SECTION" || t.tagName == "FOOTER") {
interDoc.body.parentNode.style.cursor = 'pointer';
} else {
interDoc.body.parentNode.style.cursor = 'auto';
}
}
window.setTimeout("initBackground();", timeDelay);
</script>
</div>
</body>
</html>
The Red highlited part in the background image needs to redirect to another URL when onclick.
var BGLinks = (function() {
var that = {};
// can be set like BGLinks.parameter
that.version = 'NIV';
that.clickTooltip = false;
that.apocrypha = false;
that.showTooltips = true;
that.host = 'www.biblegateway.com';
var showTimer = 0;
var hideTimer = 0;
var container;
var addedCSS = false;
var setupRun = false;
var delay = 1000;
var bgHost;
var toolsHost;
var cdHost;
var browser = navigator.appVersion;
var book_string = 'Genesis|Gen?|Gn|Exodus|Exod?|Ex|Leviticus|Le?v|Numbers|Nu?m|Nu|Deuteronomy|Deut?|Dt|Josh?ua|Josh?|Jsh|Judges|Ju?dg|Jg|Ru(?:th)?|Ru?t|(?:1|i|2|ii) ?Samuel|(?:1|i|2|ii) ?S(?:a|m)|(?:1|i|2|ii) ?Sam|(?:1|i|2|ii) ?Kin(?:gs?)?|(?:1|i|2|ii) ?Kgs|(?:1|i|2|ii) ?Chronicles|(?:1|i|2|ii) ?Chr(?:o?n)?|(?:1|i|2|ii) ?Cr|Ezra?|Nehemiah|Neh?|Esther|Esth?|Jo?b|Psalms?|Psa?|Proverbs|Pro?v?|Ecclesiastes|Ec(?:cl?)?|Song (?:O|o)f Solomon|Song (?:O|o)f Songs?|Son(?:gs?)?|SS|Isaiah?|Isa?|Jeremiah|Je?r|Lamentations|La(?:me?)?|Ezekiel|Eze?k?|Daniel|Da?n|Da|Hosea|Hos?|Hs|Jo(?:el?)?|Am(?:os?)?|Obadiah|Ob(?:ad?)?|Jon(?:ah?)?|Jnh|Mic(?:ah?)?|Mi|Nah?um|Nah?|Habakkuk|Hab|Zephaniah|Ze?ph?|Haggai|Hagg?|Hg|Zechariah|Ze?ch?|Malachi|Ma?l|Matthew|Matt?|Mt|Mark|Ma(?:r|k)|M(?:r|k)|Luke?|Lk|Lu?c|John|Jn|Ac(?:ts?)?|Romans|Ro?m|(?:1|i|2|ii) ?Corinthians|(?:1|i|2|ii) ?C(?:or?)?|Galatians|Gal?|Gl|Ephesians|Eph?|Philippians|Phil|Colossians|Co?l|(?:1|i|2|ii) ?Thessalonians|(?:1|i|2|ii) ?Th(?:e(?:ss?)?)?|(?:1|i|2|ii) ?Timothy|(?:1|i|2|ii) ?Tim|(?:1|i|2|ii) ?T(?:i|m)|Ti(?:tus)?|Ti?t|Philemon|Phl?m|Hebrews|Heb?|Jam(?:es)?|Jms|Jas|(?:1|i|2|ii) ?Peter|(?:1|i|2|ii) ?Pe?t?|(?:1|i|2|ii|3|iii) ?J(?:oh)?n?|Jude?|Revelations?|Rev|R(?:e|v)';
var apoc_books = '|Tobit?|To?b|Judi(?:th?)?|Jdt|(?:1|2) ?Mac(?:cabees)?|(?:1|2) ?Ma?|Wi(?:sdom)?|Wi?s|Sir(?:ach)?|Ba(?:ruc?h)?|Ba?r';
that.linkVerses = function() {
updateURLs();
insertBiblerefs(document.body);
if (that.showTooltips === true) {
addBiblerefListeners();
}
setup();
}
var updateURLs = function() {
bgHost = window.location.protocol + '//' + that.host;
toolsHost = bgHost + '/share/tooltips/data';
cdHost = bgHost + '/public/link-to-us/tooltips';
}
var insertBiblerefs = function(node) {
if (node.nodeType === 3) {
var new_nodes = searchNode(node,0);
return new_nodes;
}
else if (node.tagName != undefined && node.tagName.match(/^(?:a|h\d|img|pre|input|option)$/i)) {
return null;
}
else {
var children = node.childNodes;
var i = 0;
while(i<children.length) {
var new_nodes = insertBiblerefs(children[i]);
i += new_nodes +1;
}
}
return null;
}
var searchNode = function(node, inserted_nodes) {
var apoc_string = that.apocrypha === true ? apoc_books : '';
//finds book and chapter for each verse that been separated by &,and,etc...
var book_chap = '((?:('+book_string+apoc_string+')(?:\.)? ?)?(?:(\\d*):)?(\\d+(?:(?:ff|f|\\w)|(?:\\s?(?:-|–|—)\\s?\\d+)?)))([^a-z0-9]*)';
var regex_string = '(?:'+book_string+apoc_string+')(?:\.)? ?\\d+:\\d+(?:ff|f|\\w)?(?:\\s?(?:(?:(?:-|–|—)\\s?(?:(?:'+book_string+apoc_string+')(?:\.)?\\s)?)|(?:(?:,|;|&|&|and|cf\\.|cf)))\\s?(?:(?:(?:vv.|vs.|vss.|v.) ?)?\\d+\\w?)(?::\\d+\\w?)?)*';
var regex = new RegExp(regex_string,'i');
var verse_match = node.nodeValue.match(regex);
if (verse_match == null) {
return inserted_nodes;
} else {
var text = node.nodeValue;
var before_text = text.substr(0,text.indexOf(verse_match[0]));
var after_text = text.substr(text.indexOf(verse_match[0])+verse_match[0].length);
if (before_text.length > 0) {
var newTxtNode = document.createTextNode(before_text);
node.parentNode.insertBefore(newTxtNode, node);
inserted_nodes++;
}
var book_chap_regex = new RegExp(book_chap, 'gi');
var book;
var chapter;
var verse;
while (matched = book_chap_regex.exec(verse_match[0])) {
// break up what may be multiple references into links.
if (matched[2] != '' && matched[2] != null) {
book = matched[2];
}
if (matched[3] != '' && matched[3] != null) {
chapter = matched[3];
}
verse = matched[4];
var newLinkNode = document.createElement("a");
newLinkNode.className = 'bibleref';
newLinkNode.target = '_BLANK';
var passage = book+' '+chapter+':'+verse;
newLinkNode.href = bgHost+'/passage/?search='+passage+'&version='+that.version+'&src=tools';
newLinkNode.innerHTML = matched[1];
if (that.clickTooltip === true) {
newLinkNode.onclick=function() {return false};
}
node.parentNode.insertBefore(newLinkNode, node);
inserted_nodes++;
if (matched[6] != '') {
var newTxtNode = document.createTextNode(matched[5]);
node.parentNode.insertBefore(newTxtNode, node);
// do we need to update inserted_nodes with this?
}
}
if (after_text.length > 0) {
var newTxtNode = document.createTextNode(after_text);
node.parentNode.insertBefore(newTxtNode, node);
node.parentNode.removeChild(node);
inserted_nodes = searchNode(newTxtNode,inserted_nodes+1);
}
else {
node.parentNode.removeChild(node);
}
}
return inserted_nodes;
}
var addCSS = function() {
if (!addedCSS) {
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
if (browser.search('MSIE 6.0') != -1) {
browser = 'ie6';
css.href = cdHost+'/theme/bglinks-ie.css';
} else {
css.href = cdHost+'/theme/popover.css';
}
css.media = "screen";
var n1 = document.getElementsByTagName("head")[0].childNodes[0]
n1.parentNode.insertBefore(css,n1);
addedCSS = true;
}
}
var addBiblerefListeners = function() {
var links = document.getElementsByTagName('a');
for ( var i = 0;i< links.length;i++) {
var link = links[i]
if (link.className && link.className == 'bibleref') {
if (that.clickTooltip !== true) {
addListener(link,'mouseover', linkMouseover);
addListener(link,'mouseout', linkMouseout);
} else {
addListener(link,'click', toggleTooltip);
}
}
}
}
var addListener = function (listen_object, action, callback) {
if (listen_object.addEventListener) {
if (action == 'mouseover') {
listen_object.addEventListener("mouseover",callback,false);
} else if (action == 'mouseout') {
listen_object.addEventListener("mouseout",callback,false);
} else if (action == 'click') {
listen_object.addEventListener("click",callback,false);
}
} else if (listen_object.attachEvent) {
if (action == 'mouseover') {
listen_object.attachEvent("onmouseover",callback);
} else if (action == 'mouseout') {
listen_object.attachEvent("onmouseout",callback);
} else if (action == 'click') {
listen_object.attachEvent("onclick",callback);
}
} else {
if (action == 'mouseover') {
listen_object.onmouseover = callback;
} else if (action == 'mouseout'){
listen_object.onmouseout = callback;
} else if (action == 'click') {
listen_object.onclick = callback;
}
}
}
var toggleTooltip = function(e) {
if (!e) {
e = window.event;
}
link = e.target || e.srcElement;
var reference;
var bibleref;
if (bibleref = link.getAttribute('data-bibleref')) {
reference = bibleref;
} else {
reference = link.href.match(/search=(.*?)(?:&.*)?$/)[1];
}
var id = reference.replace(/%20| /g, '');
var id = reference.replace(/:/g, '_');
var tooltip = document.getElementById('bg_popup-'+id);
if (tooltip === null || tooltip.style.display == 'none') {
showTooltip(e);
} else {
hideTooltip(e);
}
}
var showTooltip = function(e) {
if (!e) {
e = window.event;
}
link = e.target || e.srcElement;
var reference;
var bibleref;
if (bibleref = link.getAttribute('data-bibleref')) {
reference = bibleref;
} else {
reference = link.href.match(/search=(.*?)(?:&.*)?$/)[1];
}
var id = reference.replace(/%20| /g, '');
id = id.replace(/:/g, '_');
id = id.replace(/ /g, '');
var tooltip = document.getElementById('bg_popup-'+id);
hideAllTooltips(e);
if (tooltip === null) {
tooltip = getTooltip(reference, link);
} else {
tooltip_loc = tooltipLocation(link);
tooltip.style.left = tooltip_loc.offsetX+'px';
tooltip.style.top = tooltip_loc.offsetY+'px';
tooltip.style.display = 'block';
}
}
var hideTooltip = function(e) {
if (!e) {
e = window.event;
}
target = e.target || e.srcElement;
var reference;
var bibleref;
if (bibleref = link.getAttribute('data-bibleref')) {
reference = bibleref;
} else {
reference = link.href.match(/search=(.*?)(?:&.*)?$/)[1];
}
reference = reference.replace(/%20| /g, '');
reference = reference.replace(/:/g, '_');
var tooltip = document.getElementById('bg_popup-'+reference);
if (tooltip) {
tooltip.style.display = 'none';
}
}
var hideAllTooltips = function(e) {
var divs = container.children;
for (var i = 0;i < divs.length;i++) {
divs[i].style.display = 'none';
}
}
var linkMouseover = function(e) {
if (!e) {
e = window.event;
}
if (e.target.nodeName.toLowerCase() == 'a') {
window.clearTimeout(showTimer);
showTimer = window.setTimeout(function() {showTooltip(e)}, delay);
}
}
var linkMouseout = function(e) {
if (!e) {
e = window.event;
}
if (e.target.nodeName.toLowerCase() == 'a' && showTimer) {
window.clearTimeout(showTimer);
window.clearTimeout(hideTimer);
hideTimer = window.setTimeout(function() {hideTooltip(e)}, delay);
}
}
var tooltipMouseover = function(e) {
if (!e) {
e = window.event;
}
var relNode = e.relatedTarget || e.fromElement;
while (relNode && relNode != null && (!relNode.className || relNode.className.indexOf('bg_popup-outer') == -1) && relNode.nodeName.toLowerCase() != 'body') {
relNode = relNode.parentNode;
}
if (relNode && relNode.className && relNode.className.indexOf('bg_popup-outer') != -1) return;
window.clearTimeout(showTimer);
window.clearTimeout(hideTimer);
}
var tooltipMouseout = function(e) {
if (!e) {
e = window.event;
}
var relNode = e.relatedTarget || e.toElement;
while (relNode && relNode != null && (!relNode.className || relNode.className.indexOf('bg_popup-outer') == -1) && relNode.nodeName.toLowerCase() != 'body') {
relNode = relNode.parentNode;
}
if (relNode && relNode.className && relNode.className.indexOf('bg_popup-outer') != -1) return;
window.clearTimeout(hideTimer);
hideTimer = window.setTimeout(function() {hideAllTooltips(e)}, delay);
}
var createContainer = function() {
container = document.createElement('div');
container.id = 'bg_popup-container';
document.body.appendChild(container);
}
var getTooltip = function(reference, link) {
var tooltip = document.createElement('div');
tooltip.style.display='none';
tooltip.className = 'bg_popup bg_popup-outer';
var tooltip_loc = tooltipLocation(link);
tooltip.style.top = tooltip_loc.offsetY+'px';
tooltip.style.left = tooltip_loc.offsetX+'px';
var id = 'bg_popup-'+reference.replace(/%20/g, '');
id = id.replace(/:/g, '_');
id = id.replace(/ /g, '');
tooltip.id=id;
tooltip.innerHTML = '<div class="bg_popup-header"><div class="bg_popup-header_title"><strong>'+reference.replace(/%20/g, ' ')+'</strong></div></div><div class="bg_popup-content"><div class="bg_popup-spinner"><img alt="loading" src="'+cdHost+'/theme/images/tools/spinner.gif"/></div></div><div class="bg_popup-footer"><a class="bg_popup-bglogo" href="'+bgHost+'/" target="_blank"></a></div>';
tooltip.style.display = 'block';
addCloseButton(tooltip);
tooltip = container.appendChild(tooltip);
if (that.clickTooltip !== true) {
addListener(tooltip,'mouseover', tooltipMouseover);
addListener(tooltip,'mouseout', tooltipMouseout);
}
var remote_passage = document.createElement('script');
remote_passage.type = 'text/javascript';
remote_passage.src = toolsHost+'/?search='+reference+'&version='+that.version+'&callback=BGLinks.updateTooltip';
remote_passage.id = 'bg_remote_passage_script-'+reference.replace(/%20/g, '');
remote_passage.id = remote_passage.id.replace(/:/g, '_');
remote_passage.id = remote_passage.id.replace(/ /g, '');
var hook = document.getElementsByTagName('script')[0];
hook.parentNode.insertBefore(remote_passage, hook);
return tooltip;
}
that.updateTooltip = function(tooltip_content) {
var id = 'bg_popup-'+tooltip_content.reference.replace(/%20/g, '');
id = 'bg_popup-'+tooltip_content.reference.replace(/:/g, '_');
id = id.replace(/ /g, '');
var tooltip = document.getElementById(id);
var reference_display = tooltip_content.reference_display.replace(/%20/g,' ');
if (tooltip_content.text == undefined) {
if (tooltip.text == undefined) {
tooltip_content.text = 'Retrieving Passage...'
}
else {
tooltip_content.text = tooltip.text;
reference_display = tooltip.reference_display;
}
}
tooltip.innerHTML = '<div class="bg_popup-header"><div class="bg_popup-header_title"><strong>'+reference_display+' '+tooltip_content.version+'</strong></div></div><div class="bg_popup-content"><div class="bg_popup-content-bible"><p>'+tooltip_content.text+' <a class="bg_popup-copyright" href="'+bgHost+tooltip_content.version_url+'" target="_blank">('+tooltip_content.version+')</a> <a class="bg_popup-more" href="'+bgHost+'/passage/?search='+tooltip_content.reference+'&version='+tooltip_content.version+'&src=tools" target="_blank">More</a></p></div></div><div class="bg_popup-footer"><a class="bg_popup-bglogo" href="'+bgHost+'/" target="_blank"></a></div>';
addCloseButton(tooltip);
}
var addCloseButton = function(tooltip) {
var divs = tooltip.getElementsByTagName('div');
for (var i = 0; i < divs.length;i++) {
if (divs[i].className == 'bg_popup-header_right') {
addListener(divs[i], 'click', hideAllTooltips);
}
}
}
var tooltipLocation = function(link) {
var tooltip_height = 234;
var tooltip_width = 362;
if (typeof(window.innerWidth) == 'number') {
width = window.innerWidth;
height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
width = document.body.clientWidth;
height = document.body.clientHeight;
}
var display_loc = {};
var offsetPos = getOffsetPos(link);
var leftPos = offsetPos.leftPos;
var topPos = offsetPos.topPos;
if (link.offsetWidth/link.parentNode.offsetWidth >.5) {
leftPos = getOffsetPos(link.parentNode);
leftPos = leftPos.leftPos;
}
if ((leftPos + tooltip_width+5) > width) {
leftPos -= tooltip_width;
if ((leftPos + tooltip_width + link.offsetWidth) <= width) leftPos += link.offsetWidth;
if (leftPos + tooltip_width + 25 <= width) leftPos += 25;
if (leftPos - (link.offsetWidth/2) >= 0) leftPos -= (link.offsetWidth/2);
} else {
if (leftPos + (link.offsetWidth/2) <= width && link.offsetWidth/link.parentNode.offsetWidth <=.5) leftPos += (link.offsetWidth/2);
if (leftPos - 35 >= 0) {
leftPos -= 35;
}
}
var scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;;
if ((topPos+link.offsetHeight+tooltip_height+15) <= height +scrollY || topPos-tooltip_height+5 <0) {
topPos += link.offsetHeight + 10;
} else {
topPos -= tooltip_height + 10;
}
display_loc.offsetY = topPos;
display_loc.offsetX = leftPos;
return (display_loc);
}
var getOffsetPos = function(linkObj) {
var topPos = leftPos = 0;
do {
topPos += linkObj.offsetTop;
leftPos += linkObj.offsetLeft;
if(document.all) {
topPos+=linkObj.clientTop;
leftPos+=linkObj.clientLeft;
}
} while ((linkObj = linkObj.offsetParent) != null);
return {'topPos' : topPos, 'leftPos' : leftPos};
}
var setup = function() {
if (!setupRun) {
if (that.showTooltips === true) {
addCSS();
addListener(document, 'click', hideAllTooltips);
}
createContainer();
setupRun = true;
}
}
return that;
})();
$(document).ready(function() {
BGLinks.linkVerses();
});
This is the script, located at http://churchofcwa.wikia.com/wiki/MediaWiki:Common.js/bglinks.js, that I am encountering an error with css, this script was copied from https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js and is not made by me. The issue I am encountering is via the css page (MediaWiki:Common.css) when changing the color of the script by
.bg_popup-content-bible {color:#000000}
The font color of the p tag within that div does not change. Originally I had it set to the p tag specifically of that div, but a css checker said that styling would be overqualified, and it was not functional nevertheless. What the script does is take all Bible verses listed on a page, and automatically links them to Biblegateway and creates a preview popup when hovering. However, the font is very unreadable and so I have tried to change it to black.
The popup currently has a near-white font (that blends with the popup)
and needs to have a black font, with the rest of the page content needs the near white font. When the script runs through it generates a div surrounding each bible verse, and the js applies to it (the div in which the Bible verse text appears is in the bg_popup-content-bible with a <p> tag), making it popup like so.
I have noted that in the script there is a section that calls for a "addedCSS"
var addCSS = function() {
if (!addedCSS) {
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
if (browser.search('MSIE 6.0') != -1) {
browser = 'ie6';
css.href = cdHost + '/theme/bglinks-ie.css';
} else {
css.href = cdHost + '/theme/popover.css';
}
css.media = "screen";
var n1 = document.getElementsByTagName("head")[0].childNodes[0]
n1.parentNode.insertBefore(css, n1);
addedCSS = true;
}
}
I do not believe it is possible to change the url that the addedCss pull from, from the MediaWiki:Common.css, as this script was not made for the specific system being used (when removing or altering the variable the script does not work). I don't know if this is not happening because of a javascript issue (which is beyond me, and it's difficult to alter the script without breaking it) or if it's just a matter of incorrect css, but I have been working on this for several months here and there, and would like to get this final detail to work.
Try changing it to
.bg_popup-content-bible {color:#000000 !important;}
Ignore the CSS specificity checker. I have tested the below css on your site and it works. Make sure to put it in your site.css.
.bg_popup-content-bible p {
color: #000000;
}
It needs to be written as above because it has to override the <p> styling you've already set earlier in site.css:
p {
color: #f5f5f5
}
EDIT
It is not a problem with the script. Based on what you have said in the comments it seems like you are unable to actually edit / output css. So the other option is just to modify the script you've posted above:
Change this:
tooltip.innerHTML = '<div class="bg_popup-header"><div class="bg_popup-header_title"><strong>'+reference_display+' '+tooltip_content.version+'</strong></div></div><div class="bg_popup-content"><div class="bg_popup-content-bible"><p>'+tooltip_content.text+' <a class="bg_popup-copyright" href="'+bgHost+tooltip_content.version_url+'" target="_blank">('+tooltip_content.version+')</a> <a class="bg_popup-more" href="'+bgHost+'/passage/?search='+tooltip_content.reference+'&version='+tooltip_content.version+'&src=tools" target="_blank">More</a></p></div></div><div class="bg_popup-footer"><a class="bg_popup-bglogo" href="'+bgHost+'/" target="_blank"></a></div>';
to this:
tooltip.innerHTML = '<div class="bg_popup-header"><div class="bg_popup-header_title"><strong>'+reference_display+' '+tooltip_content.version+'</strong></div></div><div class="bg_popup-content"><div class="bg_popup-content-bible"><p style="color:#000000">'+tooltip_content.text+' <a class="bg_popup-copyright" href="'+bgHost+tooltip_content.version_url+'" target="_blank">('+tooltip_content.version+')</a> <a class="bg_popup-more" href="'+bgHost+'/passage/?search='+tooltip_content.reference+'&version='+tooltip_content.version+'&src=tools" target="_blank">More</a></p></div></div><div class="bg_popup-footer"><a class="bg_popup-bglogo" href="'+bgHost+'/" target="_blank"></a></div>';
Given the way Stack formats the code above, to make it very clear you are editing the part of the line above that says:
<p>'+tooltip_content.text+'
and making it:
<p style="color:#000000">'+tooltip_content.text+'
I'm using this javascript to display text when clicking a button in a website:
<script type="text/javascript">
function toggleMe(a)
{
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none")
{e.style.display="block"}
else
{e.style.display="none"}
return true;
}
</script>
and i'm calling the script with <A Onclick="return toggleMe('content')" >[Website Content]</A>
The problem is that i have three "buttons" (help, gpgkey, content) and i would like that only one text be displayed at the time. I've never done java before and Im not even sure of totally understanding the first code.
This is one of my attempts
<script type="text/javascript">
function toggleMe(a)
{
var e=document.getElementById(a);
if(!e)return true;
if(e==document.getElementById("content")
{
var f=document.getElementById("help");
var g=document.getElementById("gpgkey");
}
if(e==document.getElementById("help")
{
var f=document.getElementById("content");
var g=document.getElementById("gpgkey");
}
if(e==document.getElementById("gpgkey")
{
var f=document.getElementById("content");
var g=document.getElementById("help");
}
if(e.style.display=="none")
{
e.style.display="block"
if(f.style.display!="none")
{f.style.display="none"}
if(g.style.display!="none")
{g.style.display="none"}
}
else
{e.style.display="none"}
return true;
}
function toggleMe(a) {
var eContent = document.getElementById("content"),
eHelp = document.getElementById("help"),
eGPGKey = document.getElementById("gpgkey");
if(!eContent || !eHelp || !eGPGKey)
return;
if (a === "content" && eContent.style.display === "none") {
eContent.style.display = "block";
eHelp.style.display = "none";
eGPGKey.style.display = "none";
}
else if (a === "help" && eHelp.style.display === "none") {
eContent.style.display = "none";
eHelp.style.display = "block";
eGPGKey.style.display = "none";
}
else if (a === "gpgkey" && eGPGKey.style.display === "none") {
eContent.style.display = "none";
eHelp.style.display = "none";
eGPGKey.style.display = "block";
}
else if (a === "content") {
eContent.style.display = "none";
}
else if (a === "help") {
eHelp.style.display = "none";
}
else if (a === "gpgkey") {
eGPGKey.style.display = "none";
}
}
http://jsfiddle.net/Z68p7/
http://jsfiddle.net/YaMhn/8/
^^^^Take a look and see if you can help solve this
Ok so I added the label showhide to my script
function showHide(lbl)
{
if(document.getElementById('mydiv').style.display == "none")
{
lbl.innerHTML="Hide";
document.getElementById('mydiv').style.display="";
}
else
{
lbl.innerHTML="Show";
document.getElementById('mydiv').style.display="none";
}
}
function showhide(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
obj.style.display = "none";
} else {
obj.style.display = "";
}
}
}
function hide(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "none") {
obj.style.display = "none";
} else {
obj.style.display = "none";
}
}
}
function hideall(id1,id2,id3,id4) {
var status1 = document.getElementById(id1).style.display;
var status2 = document.getElementById(id2).style.display;
var status3 = document.getElementById(id3).style.display;
var status4 = document.getElementById(id4).style.display;
if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
hide(id1); hide(id2); hide(id3); hide(id4); return;
}
if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
hide(id1); hide(id2); hide(id3); hide(id4); return;
}
}
function show(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
obj.style.display = "";
} else {
obj.style.display = "";
}
}
}
function showall(id1,id2,id3, id4) {
var status1 = document.getElementById(id1).style.display;
var status2 = document.getElementById(id2).style.display;
var status3 = document.getElementById(id3).style.display;
var status4 = document.getElementById(id4).style.display;
if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
show(id1); show(id2); show(id3); show(id4); return;
}
if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
show(id1); show(id2); show(id3); show(id4); return;
}
}
Here is my Header code:
Header #1: (titled Runway Information Click to Expand/Close)
<div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id1'); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong> Runway Information</strong></font></td><td align=right><div id='mydiv' style='display:none'></div></td></tr></table></div>
The Header works prefectly, shows and hides just as I coded. But I want it to say "Show" when hidden and "Hide" when shown.
Previously it was written like this:
Click to Expand/Close
The problem is the new showHide(lbl) does not work as intended.
What do I need to change?
It is simple -- use innerHTML:
style.display="block"
innerHTML="click here to expand"
and to hide:
style.display="hide"
innerHTML="click here to close"
The only change I made was else to else if, and it is now fixed.
http://jsfiddle.net/YaMhn/18/
Thank You Ashraf for the help. I would upvote you but I only have a 13 rep lol.
I made you an example : http://jsfiddle.net/YaMhn/
I check if a given url matches another one (which can have wildcards).
E.g. I have the following url:
john.doe.de/foo
I'd now like to check whether the url is valid or not, the user defines the string to check with, e.g:
*.doe.de/*
That works fine, but with the following it should NOT work but it gets accepted:
*.doe.de
Here the function i wrote till now, the urls are stored as firefox prefs and i the "checkedLocationsArray" containts all urls to be checked.
function checkURLS(index)
{
if(index >= 0)
{
var pos = getPos("URL-Mask");
var url = tables[index][pos];
if(url != null && url != "")
{
var urlnow = "";
if(redlist_pref.prefHasUserValue("table.1"))
{
var checkedLocationsArray = new Array();
for(i = 0; i < tables.length; i++)
{
checkedLocationsArray[i] = tables[i][pos];
}
for(i=0;i<checkedLocationsArray.length;i++)
{
urlnow = checkedLocationsArray[i];
if(urlnow == url)
{
return true;
}
if(urlnow.indexOf('*.') != -1)
{
while(urlnow.indexOf("*.") != -1)
urlnow = urlnow.replace("\*.", "\.[^\.]*");
}
if(urlnow.indexOf('.*') != -1)
{
while(urlnow.indexOf(".*") != -1)
urlnow = urlnow.replace(".\*", "([^\.]*\.)");
}
if(urlnow.indexOf('/*') != -1)
{
while(urlnow.indexOf("/*") != -1)
urlnow = urlnow.replace("/*", /\S\+*/)
}
else if(url.lastIndexOf('/') != -1)
{
return false;
}
var regex = new RegExp(urlnow);
var Erg = regex.exec(url);
if(Erg != null)
return true;
}
}
return false;
}
}
}
i think the "else if(url.indexOf('/') != -1)" is the important part. It should work just fine like that, if I alert it I even get that the result is true but it seems like the if is not being executed..
If anything is unclear, please just post a comment. Thanks in advance!
Why don't you just add the characters for beginning and end of string?
function checkURLS(index)
{
if(index >= 0)
{
var pos = getPos("URL-Mask");
var url = tables[index][pos];
if(url != null && url != "")
{
var urlnow = "";
if(redlist_pref.prefHasUserValue("table.1"))
{
var checkedLocationsArray = new Array();
for(i = 0; i < tables.length; i++)
{
checkedLocationsArray[i] = tables[i][pos];
}
for(i=0;i<checkedLocationsArray.length;i++)
{
urlnow = checkedLocationsArray[i];
if(urlnow == url)
{
return true;
}
//Check there's nothing else in the string
urlnow = '^' + urlnow + '$';
if(urlnow.indexOf('*') != -1)
{
while(urlnow.indexOf("*") != -1)
urlnow = urlnow.replace("\*", ".*");
}
else if(urlnow.lastIndexOf('/') != -1)
{
return false;
}
var regex = new RegExp(urlnow);
var Erg = regex.exec(url);
if(Erg != null)
return true;
}
}
return false;
}
}
}
The problem seems that you don't check for the start and the end of the string. Change your code to something like
urlnow = '^'+urlnow+'$'; // this is new
var regex = new RegExp(urlnow);
^ is the RegExp code for string-start and $ the code for string-end. That way you ensure that the whole url has to match the pattern and not only a part of it.
I figured out that I did the url was not the current url, I changed that below.
I also changed that the * are now replaced with a regular expression and the dots have to be there in this situation.
function redlist_checkURLS(index)
{
if(index >= 0)
{
var pos = getPos("URL-Mask");
var url = currenturl.replace("http://", "");
if(url != null && url != "")
{
var urlnow = "";
if(pref.prefHasUserValue("table.1"))
{
var urlsok = 0;
var checkedLocationsArray = new Array();
for(i = 0; i < tables.length; i++)
{
checkedLocationsArray[i] = tables[i][pos];
}
for(i=0;i<checkedLocationsArray.length;i++)
{
urlnow = checkedLocationsArray[i];
if(urlnow == url)
{
return true;
}
if(urlnow.indexOf('*') != -1)
{
while(urlnow.indexOf("*") != -1)
urlnow = urlnow.replace("*", "\\S+")
}
var regex = new RegExp(urlnow);
var Erg = regex.exec(url);
if(Erg != null && Erg == url)
return true;
}
}
return false;
}
}
}
Thanks for your help thought!