I want to add a delay to this header when the user scrolls 200px up: https://codepen.io/iabhinavr/pen/BaKxvRx
If see the codepen, right now it only delays on scrolls down.
This is what I have tried:
// menu hide on scroll
(function(){
var doc = document.documentElement;
var w = window;
var curScroll;
var prevScroll = w.scrollY || doc.scrollTop;
var curDirection = 0;
var prevDirection = 0;
var header = document.getElementById('site-header');
var toggled;
var threshold = 350;
var thresholdScrollUp = 200;
var checkScroll = function() {
curScroll = w.scrollY || doc.scrollTop;
curScrollBottom = w.scrollY || doc.scrollTop;
if(curScroll > prevScroll) {
// scrolled down
curDirection = 2;
}
else {
//scrolled up
curDirection = 1;
}
if(curDirection !== prevDirection) {
toggled = toggleHeader();
}
prevScroll = curScroll;
if(toggled) {
prevDirection = curDirection;
}
};
var toggleHeader = function() {
toggled = true;
if(curDirection === 2 && curScroll > threshold) {
header.classList.add('hide');
jQuery('#site-header-sticky-wrapper').addClass('hide');
}
else if (curDirection === 1 && curScrollBottom > thresholdScrollUp) {
jQuery('#site-header-sticky-wrapper').removeClass('hide');
header.classList.remove('hide');
}
else {
toggled = false;
}
return toggled;
};
window.addEventListener('scroll', checkScroll);
})();
I added:
var thresholdScrollUp = 200;
and changed:
else if (curDirection === 1)
to:
else if (curDirection === 1 && curScrollBottom > thresholdScrollUp)
Any help would be appreciated
Your provided code pen code work differently. Checkout this one
(function(){
var doc = document.documentElement;
var w = window;
var curScroll;
var prevScroll = w.scrollY || doc.scrollTop;
var curDirection = 0;
var prevDirection = 0;
var lastY = 0;
var header = document.getElementById('site-header');
var toggled;
var threshold = 200;
var checkScroll = function() {
curScroll = w.scrollY || doc.scrollTop;
if(curScroll > prevScroll) {
// scrolled down
curDirection = 2;
}
else {
//scrolled up
curDirection = 1;
}
if(curDirection !== prevDirection) {
toggled = toggleHeader();
} else {
lastY=curScroll
}
prevScroll = curScroll;
if(toggled) {
prevDirection = curDirection;
}
};
var toggleHeader = function() {
toggled = true;
if(curDirection === 2 && (curScroll-lastY) > threshold) {
lastY=curScroll
header.classList.add('hide');
}
else if (curDirection === 1 && (lastY-curScroll) > threshold) {
lastY=curScroll
header.classList.remove('hide');
}
else {
toggled = false;
}
return toggled;
};
window.addEventListener('scroll', checkScroll);
})();
I succeeded to design a drag-drop with mousedown and mousemove. Here is the code:
$('.item').live( {
mousedown : function() {
var $elem = $(this);
if (self.selectedItem != null) {
self.selectedItem.removeClass('selected');
self.selectedItem = null;
firstSelectedItem = null;
switchingItem = false;
} else {
self.selectedItem = $elem.addClass('selected');
firstSelectedItem = $elem;
switchingItem = true;
}
},
mousemove : function() {
var $elem = $(this);
if (switchingItem === true && $elem.attr('id') != firstSelectedItem.attr('id')) {
self._swap(firstSelectedItem, $elem);
self.selectedItem.removeClass('selected');
self.selectedItem = null;
firstSelectedItem = null;
switchingItem = false;
}
},
});
I try in vain to do it again with the touchevents. Except that $this value is the same to touchstart and touchmove, so the swapping does not work:
$('.item').live( {
touchstart : function(e) {
e.stopPropagation();
e.preventDefault();
var $elem = $(this);
if (self.selectedItem != null) {
self.selectedItem.removeClass('selected');
self.selectedItem = null;
firstSelectedItem = null;
switchingItem = false;
} else {
self.selectedItem = $elem.addClass('selected');
firstSelectedItem = $elem;
switchingItem = true;
console.log (firstSelectedItem.attr('id'));
}
},
touchmove : function (e) {
e.stopPropagation();
e.preventDefault();
var elem = $(this);
if (switchingItem === true && $elem.attr('id') != firstSelectedItem.attr('id')) {
self._swap(firstSelectedItem, $elem);
self.selectedItem.removeClass('selected');
self.selectedItem = null;
firstSelectedItem = null;
switchingItem = false;
}
},
});
What to do?
Thank you so much
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 am using the Easy Smooth Scroll Plugin for Wordpress.
Below is the .js file that the plugin uses:
var ss = {
fixAllLinks: function() {
var allLinks = document.getElementsByTagName('a');
for (var i = 0; i < allLinks.length; i++) {
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf('#') != -1) && ((lnk.pathname == location.pathname) || ('/' + lnk.pathname == location.pathname)) && (lnk.search == location.search)) {
ss.addEvent(lnk, 'click', ss.smoothScroll);
}
}
},
smoothScroll: function(e) {
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;
if (target.nodeName.toLowerCase() != 'a') {
target = target.parentNode;
}
if (target.nodeName.toLowerCase() != 'a') return;
anchor = target.hash.substr(1);
var allLinks = document.getElementsByTagName('a');
var destinationLink = null;
for (var i = 0; i < allLinks.length; i++) {
var lnk = allLinks[i];
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk;
break;
}
}
if (!destinationLink) destinationLink = document.getElementById(anchor);
if (!destinationLink) return true;
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent && (thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}
clearInterval(ss.INTERVAL);
cypos = ss.getCurrentYPos();
ss_stepsize = parseInt((desty - cypos) / ss.STEPS);
ss.INTERVAL = setInterval('ss.scrollWindow(' + ss_stepsize + ',' + desty + ',"' + anchor + '")', 10);
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
},
scrollWindow: function(scramount, dest, anchor) {
wascypos = ss.getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0, wascypos + scramount);
iscypos = ss.getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
window.scrollTo(0, dest);
clearInterval(ss.INTERVAL);
location.hash = anchor;
}
},
getCurrentYPos: function() {
if (document.body && document.body.scrollTop) return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
if (window.pageYOffset) return window.pageYOffset;
return 0;
},
addEvent: function(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent("on" + evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
}
ss.STEPS = 25;
ss.addEvent(window, "load", ss.fixAllLinks);
The live page is here: http://iamjoepro.com/album/promaha/
I have the smooth scroll scrolling to an anchor, but I would like to offset it by the height of my fixed header (120px)
I am no javascript expert, I'm hoping this is easy for someone, but I can't decipher where to add the offset in my .js file?
I had a similar issue and found that the following solution worked for me.
Change the line:
var desty = destinationLink.offsetTop;
to read:
var desty = destinationLink.offsetTop - 120;
(where '120' is the height in pixels of your fixed header)
Then, remove the line:
location.hash = anchor;
(otherwise, the page will scroll to your 120px offset but then return back to the location of the anchor)
Hope this helps!
The following smooth scrolling script messes up my navigation in Safari (anchor tags don't work anymore). I'm a Javascript newbie, could anyone tell me how to detect Safari in this script and prevent it from executing when it detects Safari? Many thanks!
// JavaScript Document
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 1300, function() { // scroll speed
location.hash = target;
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
var isSafari = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") == -1;
if(!isSafari){
// do your magic
}
Refer: http://api.jquery.com/jQuery.browser/, to detect browser and execute script only if it is not safari
Perhaps this:
$(document).ready(function()
{
if (navigator.appVersion.match(/WebKit/) && !navigator.vendor.match(/Google/))
{
return;
}
//rest of your code
});
if you have any code outside the $(document).ready callback, you could kill the script by throwing an error, by writing this at the top of your script(s):
if (navigator.appVersion.match(/WebKit/) && !navigator.vendor.match(/Google/))
{
throw new Error('Safari not supported');
}