Seems there may be a problem between Snippets and Yellow Fade. I could not find the Snippets menu until I turned off Yellow Fade and now I am able to click on the Snippets link and the Snippets menu will appear. With Yellow Fade active clicking on the Snippets link pastes the snippet into the active new discussion window without the extended menu ever appearing.
Yep it is pretty obvious what the culprit is. It is not something entirely under my control.
Various extension need to load when the page is rendered or DOM is ready. They are knocking each other off. Especially the event can only hold one thing at the time, and as there is no convention naturally there is going be conflicts. What you can do is pass a container, pushing all the function you want to load into this. That is essentially what jquery and mootols do.
This all comes under the wider problem that is lovely and easy to create extensions for vanilla, yet the chance of extension conflicting with one another is quite likely. I have a bit to say on the subject of how to address this without sacrificing the freedom or being bogged down with configuration, etc. However I will ask mark what he is doing on that front for vanilla 2.
I can update my extensions to have a decent domready script basically what JQuery uses. But that won't solve your problem. You will have to do the same for Yellow Fade.
As yellow fade is quite minor you might as well monkey patch by replacing the functions.js with: // This technique is a combination of a technique I used for highlighting FAQ's using anchors // and the ever popular yellow-fade technique used by 37 Signals in Basecamp.
// Including this script in a page will automatically do two things when the page loads... // 1. Highlight a target item from the URL (browser address bar) if one is present. // 2. Setup all anchor tags with targets pointing to the current page to cause a fade on the target element when clicked.
// This is the amount of time (in milliseconds) that will lapse between each step in the fade var FadeInterval = 100;
// This is where the fade will start, if you want it to be faster and start with a lighter color, make this number smaller // It corresponds directly to the FadeSteps below var StartFadeAt = 28;
// This is list of steps that will be used for the color to fade out var FadeSteps = new Array(); FadeSteps[1] = "ff"; FadeSteps[2] = "ee"; FadeSteps[3] = "dd"; FadeSteps[4] = "cc"; FadeSteps[5] = "bb"; FadeSteps[6] = "aa"; FadeSteps[7] = "99"; FadeSteps[8] = "99"; FadeSteps[9] = "aa"; FadeSteps[10] = "bb"; FadeSteps[11] = "cc"; FadeSteps[12] = "dd"; FadeSteps[13] = "ee"; FadeSteps[14] = "ee"; FadeSteps[15] = "ee"; FadeSteps[16] = "ee"; FadeSteps[17] = "dd"; FadeSteps[18] = "cc"; FadeSteps[19] = "bb"; FadeSteps[20] = "aa"; FadeSteps[21] = "99"; FadeSteps[22] = "99"; FadeSteps[23] = "aa"; FadeSteps[24] = "bb"; FadeSteps[25] = "cc"; FadeSteps[26] = "dd"; FadeSteps[27] = "ee"; FadeSteps[28] = "ff";
//DOM ready borrowed (and botched). Thanks to John Resig (jquery.com) if (typeof DomReady == 'undefined'){ (function(){
var DomReady = window.DomReady = {};
// Everything that has to do with properly supporting our document ready event. Brought over from the most awesome jQuery.
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used var browser = { version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1], safari: /webkit/.test(userAgent), opera: /opera/.test(userAgent), msie: (/msie/.test(userAgent)) && (!/opera/.test( userAgent )), mozilla: (/mozilla/.test(userAgent)) && (!/(compatible|webkit)/.test(userAgent)) };
var readyBound = false; var isReady = false; var readyList = [];
// Handle when the DOM is ready function domReady() { // Make sure that the DOM is not already loaded if(!isReady) { // Remember that the DOM is ready isReady = true;
// From Simon Willison. A safe way to fire onload w/o screwing up everyone else. function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } };
// does the heavy work of working through the browsers idiosyncracies (let's call them that) to hook onload. function bindReady() { if(readyBound) { return; }
readyBound = true;
// Mozilla, Opera (see further below for it) and webkit nightlies currently support this event if (document.addEventListener && !browser.opera) { // Use the handy event callback document.addEventListener("DOMContentLoaded", domReady, false); }
// If IE is used and is not in a frame // Continually check to see if the document is ready if (browser.msie && window == top) (function(){ if (isReady) return; try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch(error) { setTimeout(arguments.callee, 0); return; } // and execute any waiting functions domReady(); })();
if(browser.opera) { document.addEventListener( "DOMContentLoaded", function () { if (isReady) return; for (var i = 0; i < document.styleSheets.length; i++) if (document.styleSheets[i].disabled) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions domReady(); }, false); }
if(browser.safari) { var numStyles; (function(){ if (isReady) return; if (document.readyState != "loaded" && document.readyState != "complete") { setTimeout( arguments.callee, 0 ); return; } if (numStyles === undefined) { var links = document.getElementsByTagName("link"); for (var i=0; i < links.length; i++) { if(links[i].getAttribute('rel') == 'stylesheet') { numStyles++; } } var styles = document.getElementsByTagName("style"); numStyles += styles.length; } if (document.styleSheets.length != numStyles) { setTimeout( arguments.callee, 0 ); return; }
// and execute any waiting functions domReady(); })(); }
// A fallback to window.onload, that will always work addLoadEvent(domReady); };
// This is the public function that people can use to hook up ready. DomReady.ready = function(fn) { if(typeof JQuery != 'undefined'){ JQuery(document).ready(fn) return; }else if(typeof MooTools != 'undefined'){ window.addEvent('domready', fn) return; } // Attach the listeners bindReady();
// If the DOM is already ready if (isReady) { // Execute the function immediately fn.call(window, []); } else { // Add the function to the wait list readyList.push( function() { return fn.call(window, []); } ); } };
bindReady();
})(); }
// The function that initializes the fade and hooks the script into the page function initFades() { if (!W3CDOM) return;
// This section highlights targets from the URL (browser address bar)
// Get the URL var currentURL = unescape(window.location); // If there is a '#' in the URL if (currentURL.indexOf('#')>-1) // Highlight the target DoFade(StartFadeAt, currentURL.substring(currentURL.indexOf('#')+1,currentURL.length));
// This section searches the page body for anchors and adds onclick events so that their targets get highlighted
// Get the list of all anchors in the body var anchors = document.body.getElementsByTagName('a');
// For each of those anchors for (var i=0;i<anchors.length;i++)
// If there is a '#' in the anchors href if (anchors[i].href.indexOf('#')>-1)
// Add an onclick event that calls the highlight function for the target anchors[i].onclick = function(){Highlight(this.href);return true}; }
// This function is just a small wrapper to use for the oncick events of the anchors function Highlight(target) {
// Get the target ID from the string that was passed to the function var targetId = target.substring(target.indexOf('#')+1,target.length); DoFade(StartFadeAt, targetId); }
// This is the recursive function call that actually performs the fade function DoFade(colorId, targetId) { if (colorId >= 1) { var target = document.getElementById(targetId); if (target) { target.style.backgroundColor = "#ffff" + FadeSteps[colorId];
// If it's the last color, set it to transparent if (colorId==1) { document.getElementById(targetId).style.backgroundColor = "transparent"; } colorId--;
// Wait a little bit and fade another shade setTimeout("DoFade("+colorId+",'"+targetId+"')", FadeInterval); } } }
Your explanation of the DOM and the patch is a bit over my head. I just started getting into this a few months ago. My solution was just to turn off Yellow Fade since it really isn't that important to me. Didn't mean to create more work for you just trying to help anyone out who could not find the drop down menu in Snippits. Thanks for the fixes. So all I need to do on patch is replace the function.js file in Yellow Fade with the text in your prior message?
Also, since I installed the 0.1.1 version of Snippits I get a popup window when I try to read each message that says http://www.mylink.com say's "hi". I have to dismiss the window to keep reading the posts. Next post I click on the window say "hi" again. Very personable but annoying :-) It is gone if I turn off Snippits. It looks like a javascript alert.
Updated sorry about that. Yes the contents in the code above should be saved as the contents of function.js. It is an unofficial patch for what, as you say, is not a very critical functionality.
That took care of the popup. Installed the new functions.js but do not see the yellow fade effect. Snippets menu still works however. i will play around with this and see if it is something wrong on this end. I really don't need the fade.
If you have installed the webby chat extension you may notice that the snippets drop down menu is no longer functional when webby chat is set to the "page slide" mode. If you set webby chat to display over the page rather than slide the page the snippets menu again works. Not sure which extension is the problem but the edit and delete menus work in the "slide" mode but not snippets menu. I am just testing webby chat and am using the page management extension fix noted in the webby chat thread to get webby chat to work with page management.
Just a heads up if your snippets menu stops working, take Webby chat out of the slide mode and see if that fixes the problem.
I've just installed Snippets in a brand new Vanilla 1.1.9 forum (empty database, no customizations, no extensions except Snippets and SetList) and I get this error on every page:
Notice: Undefined index: QWIKPOST_MODE in /PATH/TO/ROOT/extensions/Snippets/default.php on line 50
Comments
http://picasaweb.google.com/backslashx00/SnippetsVanillaExtension?feat=directlink
Snippets:
http://picasaweb.google.com/lh/photo/H0y6wZHIN-PigPhKIXj1jQ?feat=directlink
Menu:
http://picasaweb.google.com/lh/photo/3xDzJnG5HixTEHbQEskgZg?feat=directlink
Notice:
http://picasaweb.google.com/lh/photo/MFgEWi5I53h3r4GlXVyaDg?feat=directlink
Using the short cuts keys (fragments):
http://picasaweb.google.com/lh/photo/TnxxpMDQWHzkkNu7S1k91Q?feat=directlink
Snippet store:
http://picasaweb.google.com/lh/photo/52PtHYiO_ov19aTahRhP3A?feat=directlink
Fragment with QwikPost
http://picasaweb.google.com/lh/photo/phy4PwlXevIM2fqUePHJ1w?feat=directlink
Example of tag cleanup with fragments:
http://picasaweb.google.com/lh/photo/lqSuJvI4MCmU4KDoewNopA?feat=directlink
Settings (via setlist):
http://picasaweb.google.com/lh/photo/rajeE6ARdsFmZEi0EyNxBQ?feat=directlink
grep is your friend.
grep is your friend.
Very, very nice!
Works with my previous "quoted" messages and I like the style of the title line and the information displayed.
Will continue to test it but now I can turn on QuikPost and keep all my quoted text.
Thanks!
Dan
Dan
grep is your friend.
Various extension need to load when the page is rendered or DOM is ready. They are knocking each other off. Especially the event can only hold one thing at the time, and as there is no convention naturally there is going be conflicts. What you can do is pass a container, pushing all the function you want to load into this. That is essentially what jquery and mootols do.
This all comes under the wider problem that is lovely and easy to create extensions for vanilla, yet the chance of extension conflicting with one another is quite likely. I have a bit to say on the subject of how to address this without sacrificing the freedom or being bogged down with configuration, etc. However I will ask mark what he is doing on that front for vanilla 2.
I can update my extensions to have a decent domready script basically what JQuery uses. But that won't solve your problem. You will have to do the same for Yellow Fade.
As yellow fade is quite minor you might as well monkey patch by replacing the functions.js with:
// This technique is a combination of a technique I used for highlighting FAQ's using anchors
// and the ever popular yellow-fade technique used by 37 Signals in Basecamp.
// Including this script in a page will automatically do two things when the page loads...
// 1. Highlight a target item from the URL (browser address bar) if one is present.
// 2. Setup all anchor tags with targets pointing to the current page to cause a fade on the target element when clicked.
// This is the amount of time (in milliseconds) that will lapse between each step in the fade
var FadeInterval = 100;
// This is where the fade will start, if you want it to be faster and start with a lighter color, make this number smaller
// It corresponds directly to the FadeSteps below
var StartFadeAt = 28;
// This is list of steps that will be used for the color to fade out
var FadeSteps = new Array();
FadeSteps[1] = "ff";
FadeSteps[2] = "ee";
FadeSteps[3] = "dd";
FadeSteps[4] = "cc";
FadeSteps[5] = "bb";
FadeSteps[6] = "aa";
FadeSteps[7] = "99";
FadeSteps[8] = "99";
FadeSteps[9] = "aa";
FadeSteps[10] = "bb";
FadeSteps[11] = "cc";
FadeSteps[12] = "dd";
FadeSteps[13] = "ee";
FadeSteps[14] = "ee";
FadeSteps[15] = "ee";
FadeSteps[16] = "ee";
FadeSteps[17] = "dd";
FadeSteps[18] = "cc";
FadeSteps[19] = "bb";
FadeSteps[20] = "aa";
FadeSteps[21] = "99";
FadeSteps[22] = "99";
FadeSteps[23] = "aa";
FadeSteps[24] = "bb";
FadeSteps[25] = "cc";
FadeSteps[26] = "dd";
FadeSteps[27] = "ee";
FadeSteps[28] = "ff";
//DOM ready borrowed (and botched). Thanks to John Resig (jquery.com)
if (typeof DomReady == 'undefined'){
(function(){
var DomReady = window.DomReady = {};
// Everything that has to do with properly supporting our document ready event. Brought over from the most awesome jQuery.
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
var browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test(userAgent),
opera: /opera/.test(userAgent),
msie: (/msie/.test(userAgent)) && (!/opera/.test( userAgent )),
mozilla: (/mozilla/.test(userAgent)) && (!/(compatible|webkit)/.test(userAgent))
};
var readyBound = false;
var isReady = false;
var readyList = [];
// Handle when the DOM is ready
function domReady() {
// Make sure that the DOM is not already loaded
if(!isReady) {
// Remember that the DOM is ready
isReady = true;
if(readyList) {
for(var fn = 0; fn < readyList.length; fn++) {
readyList[fn].call(window, []);
}
readyList = [];
}
}
};
// From Simon Willison. A safe way to fire onload w/o screwing up everyone else.
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
};
// does the heavy work of working through the browsers idiosyncracies (let's call them that) to hook onload.
function bindReady() {
if(readyBound) {
return;
}
readyBound = true;
// Mozilla, Opera (see further below for it) and webkit nightlies currently support this event
if (document.addEventListener && !browser.opera) {
// Use the handy event callback
document.addEventListener("DOMContentLoaded", domReady, false);
}
// If IE is used and is not in a frame
// Continually check to see if the document is ready
if (browser.msie && window == top) (function(){
if (isReady) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0);
return;
}
// and execute any waiting functions
domReady();
})();
if(browser.opera) {
document.addEventListener( "DOMContentLoaded", function () {
if (isReady) return;
for (var i = 0; i < document.styleSheets.length; i++)
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
domReady();
}, false);
}
if(browser.safari) {
var numStyles;
(function(){
if (isReady) return;
if (document.readyState != "loaded" && document.readyState != "complete") {
setTimeout( arguments.callee, 0 );
return;
}
if (numStyles === undefined) {
var links = document.getElementsByTagName("link");
for (var i=0; i < links.length; i++) {
if(links[i].getAttribute('rel') == 'stylesheet') {
numStyles++;
}
}
var styles = document.getElementsByTagName("style");
numStyles += styles.length;
}
if (document.styleSheets.length != numStyles) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
domReady();
})();
}
// A fallback to window.onload, that will always work
addLoadEvent(domReady);
};
// This is the public function that people can use to hook up ready.
DomReady.ready = function(fn) {
if(typeof JQuery != 'undefined'){
JQuery(document).ready(fn)
return;
}else if(typeof MooTools != 'undefined'){
window.addEvent('domready', fn)
return;
}
// Attach the listeners
bindReady();
// If the DOM is already ready
if (isReady) {
// Execute the function immediately
fn.call(window, []);
} else {
// Add the function to the wait list
readyList.push( function() { return fn.call(window, []); } );
}
};
bindReady();
})();
}
// The function that initializes the fade and hooks the script into the page
function initFades()
{
if (!W3CDOM) return;
// This section highlights targets from the URL (browser address bar)
// Get the URL
var currentURL = unescape(window.location);
// If there is a '#' in the URL
if (currentURL.indexOf('#')>-1)
// Highlight the target
DoFade(StartFadeAt, currentURL.substring(currentURL.indexOf('#')+1,currentURL.length));
// This section searches the page body for anchors and adds onclick events so that their targets get highlighted
// Get the list of all anchors in the body
var anchors = document.body.getElementsByTagName('a');
// For each of those anchors
for (var i=0;i<anchors.length;i++)
// If there is a '#' in the anchors href
if (anchors[i].href.indexOf('#')>-1)
// Add an onclick event that calls the highlight function for the target
anchors[i].onclick = function(){Highlight(this.href);return true};
}
// This function is just a small wrapper to use for the oncick events of the anchors
function Highlight(target) {
// Get the target ID from the string that was passed to the function
var targetId = target.substring(target.indexOf('#')+1,target.length);
DoFade(StartFadeAt, targetId);
}
// This is the recursive function call that actually performs the fade
function DoFade(colorId, targetId) {
if (colorId >= 1) {
var target = document.getElementById(targetId);
if (target) {
target.style.backgroundColor = "#ffff" + FadeSteps[colorId];
// If it's the last color, set it to transparent
if (colorId==1) {
document.getElementById(targetId).style.backgroundColor = "transparent";
}
colorId--;
// Wait a little bit and fade another shade
setTimeout("DoFade("+colorId+",'"+targetId+"')", FadeInterval);
}
}
}
grep is your friend.
grep is your friend.
Your explanation of the DOM and the patch is a bit over my head. I just started getting into this a few months ago. My solution was just to turn off Yellow Fade since it really isn't that important to me. Didn't mean to create more work for you just trying to help anyone out who could not find the drop down menu in Snippits. Thanks for the fixes. So all I need to do on patch is replace the function.js file in Yellow Fade with the text in your prior message?
Also, since I installed the 0.1.1 version of Snippits I get a popup window when I try to read each message that says http://www.mylink.com say's "hi". I have to dismiss the window to keep reading the posts. Next post I click on the window say "hi" again. Very personable but annoying :-) It is gone if I turn off Snippits. It looks like a javascript alert.
Any ideas about that?
Thanks
Dan
grep is your friend.
grep is your friend.
That took care of the popup. Installed the new functions.js but do not see the yellow fade effect. Snippets menu still works however. i will play around with this and see if it is something wrong on this end. I really don't need the fade.
Thanks!
Dan
Just a heads up if your snippets menu stops working, take Webby chat out of the slide mode and see if that fixes the problem.
Dan
Notice: Undefined index: QWIKPOST_MODE in /PATH/TO/ROOT/extensions/Snippets/default.php on line 50
Any ideas what could be wrong?