pickhardt / guiders-js Goto Github PK
View Code? Open in Web Editor NEWGuiders.js: A Javascript library for guiders.
Guiders.js: A Javascript library for guiders.
A few people suggested this.
Feedback:
It would be a lot easier to lock down (or roll back to a particular version) if each release was tagged. It'd also help see what the history was for that version.
Ask pulkit for loading animation.
when i allow a user to submit into a text area multi line value, i.e:
"this is the first line
and this is the second line
and this is an html in the third line"
and then i take this value and put it as it is in the desc field:
desc: "this is the first line
and this is the second line
and this is an html in the third line"
the plugin breaks, and the guider won't show up
Are onclick events for the xButton possible? Anyone interested in that functionality?
This can be useful to know what is the next and previous step's id or other information.
next_guider = guiders.next()
next_step = next_guider['id']
This is a simple patch that adds this feature:
diff --git a/static/js/libraries/guiders-1.2.8.js b/static/js/libraries/guiders-1.2.8.js
index 90ec37a..22a8cd4 100644
--- a/static/js/libraries/guiders-1.2.8.js
+++ b/static/js/libraries/guiders-1.2.8.js
@@ -380,6 +380,7 @@ var guiders = (function($) {
guiders._dehighlightElement(currentGuider.highlight);
}
guiders.show(nextGuiderId);
+ return myGuider;
}
};
@@ -407,6 +408,7 @@ var guiders = (function($) {
guiders._dehighlightElement(prevGuider.highlight);
}
guiders.show(prevGuiderId);
+ return prevGuider;
}
}
Cheers,
Miguel
Guider content should strive to always remain within the screen, while sill pointing to the desired selector.
Check out this screenshot: http://i.imgur.com/ugoblq4.png
I want the guider there to be positioned as it is, below the selector (rather than to the right), but I want it to stay within the screen.
Hey,
When I try to use a modal guider, in IE8 - the background doesn't use opacity. Is there anyway to fix this?
There is an issue with IE8 when using the overlay and using jQuery's fadeIn() and fadeOut(). The overlay is fully opaque, all black. I thought it was related to opacity, but the correct css rules are already specified and work; turned out to be some inline css filter rules that were messing with it. The rules apparently are a result of using fadeIn and fadeOut.
This article mentions a similar issue and how to solve it:
http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/
Changing _showOverlay to remove the inline filter rule fixed it for me (same need sto be done with hideOverlay):
_showOverlay: function() {
$("#guider_overlay").fadeIn("fast", function(){
if(this.style.removeAttribute){
this.style.removeAttribute('filter');
}
});
},
Worked for me, although a more optimal solution that doesn't involve the use of callbacks would be desirable.
We are using Guiders to create tooltips. We leave and re-enter the DOM (via Rails "render" method) which removes and re-adds DOM elements relating to the Guiders position. For some reason this causes the Guiders to re-position themselves based on this DOM manipulation. Is there a way we can delay execution of the position for the guiders until after the DOM is manipulated? Is there some way of "refreshing" the Guiders to adjust their position accordingly without re-creating them?
i'm facing this problem cause i have an absolute position div containing a form and i use guiders to help the user fill it in. The div can change its left and top css values to remain always centered on page even if the user scrolls down. from my understanding guiders calculate their position when being created but don't attach to any events to see if their target element has moved.
this can be easily fixed if we had a parameter to specifically tell guiders where in the DOM the guider div is to be created.
It'd be really helpful to know what included and involved with each upgrade if there was a human-readable changelog. Unfortunately, git commit messages can be terse and often don't tell the whole story. They're also in reverse chronological order, making them hard to read in GitHub.
If pagedesign involves several tabs on same page and you only want one help/tour link you need some additional code.
The idea is to change id on help link depending on active tab, thus triggering different topic id's
Workaround snippets listed below
$('#guidedTour').click(function(){
guiders.show('tour1-T01');
});
function OnActiveTabChanged(s, e) {
hiddenField.Set('ActiveTabId', e.tab.index.toString());
grid.PerformCallback("ActiveTabChanged");
SetSelCnt();
var tourStart='tour'+(e.tab.index+1).toString()+'-T01';
$('#guidedTour').unbind('click');
$('#guidedTour').click(function(){
guiders.show(tourStart);
});
Hi, I work for a charity and have found Guiders-js to be fantastic thx to Jeff for his work. I've encountered a problem I've not been able to figure out and was hopeful of some guidance or a code snipit or maybe a fix though I think the issue may well be my end.
When the auto focus should scroll to Step 3 on this page http://www.myinet.co.uk it's not scrolling although step 4 (at the top) does auto scroll. Is this normal behaviour when moving down the page?
I've also seen an issue on Ipad where the Overlay renders on top of the guider, the zindex looks fine wondering if anyone else has encountered this issue?
All the best
John
Apparently guiders.js is not able to get the elements offset when using Twitter's bootstrap framework system.
A 1-char fix to save copy-pasters some headaches: Change
guider.hideAll
to
guiders.hideAll
in the README. :)
Feedback from a user:
Elements nested within a fixed element can have guiders attached to them no problem, the "bubble" shows up where it should (at first). Under the following two conditions, however, I ran into a few snags. Solved the second (mentioned here as more of a note in case others have the same issue), but the first is still causing problems.
If 'overlay = true' and 'highlight=[insert selector for element nested in fixed div]', the element inside of a fixed element is not highlighted at all and remains inaccessible/darkened behind the guider_overlay div. I have ruled out spelling mistakes (sounds dumb, but it happens). Making the child element any other position style does not resolve the issue. The only solution I found was to change the parent element's position to something other than fixed, which is a problem in my particular situation as the page header needs to be fixed.
If the page is large enough to require scrolling, the guider does not stay fixed with the nested element (which also remains fixed on the page), it scrolls up with the page. I was unable to get the 'useFixedPosition' feature (mentioned in a resolved issue) to work, couldn't find it in the documentation or .js file either. Solution that worked? Explicitly state the position of the nested element as fixed. Fixed the scrolling problem, but not the aforementioned one.
It would be great to extend the guider specs so that you can specify a function to be executed when a certain guider is shown.
That would make it far easier to style. See, for example, how borders are used to create arrows in minitip.
When you scroll down the page, click on the next of the guider, its not pointing the fixed element its add the scroll length and showing the guider some other place.
Right now it is not possible to do a "redirect event" with a click on the buttons.
or at least I cant get it to work.
what I'm trying to do is sending a user with a click on a button to an other site, where a new guider will explain the content of that site.
I tried adding "window.location.href = '-the-url-;"
to the onclick event of my next button, but it seems like this code is triggered instantly when loading the page.
Maybe I am doing sth. wrong, if so a way to fix this is highly appreciated, if not, this is a new feature request.
~neX
It would be great if the guiders position could respond to a window's resize.
I'm planning to use your great jQuery plugin for a web service which uses RWD pattern. Guiders would work greatly for with just a few changes to JS code:
Change parameter
width: 400,
to
width: "400px",
maxWidth: "80%",
Then change
myGuider.elem.css("width", myGuider.width + "px");
to
myGuider.elem.css("width", myGuider.width);
myGuider.elem.css("maxWidth", myGuider.maxWidth);
This should do it. Now guiders are newer wider than viewport.
Why should the width have also unit? Because it allows using e.g. "20em" instead of pixels, which ensures good text legibility.
Additionally, images inside a guider can be forced to fit to the width of guider in the CSS file with
.guider_content img {max-width:100%}
But IMO this could also be left to developer to choose.
This code runs in IE8/9 (including in Standards mode) despite them actually supporting fixed position. As a result, IE8/9 users can scroll the page and the darkened overlay is only partially, or not at all visible.
if (guiders._isIE) {
$("#guiders_overlay").css("position", "absolute");
}
Testing under IE7 with Guiders 1.3.0 I noticed that the arrows that point to a particular element when using attachTo are not displayed. I was somewhat surprised because the sample at jeffpickhardt.com/guiders does work correctly under IE7. Seems that is an older version and some recent changes have removed the arrows under IE7.
If we already are using prototype, we can't use Guiders because of the $ usage. I believe the code should be using either the jQuery object or a shortcut to $.
At this url: http://100wires.com/guiders/index.html#guider=3
I have this script:
<script>
function somef() {
console.log('somef() has run');
}
$(document).ready(function() {
guiders.createGuider({
overlay: true,
buttons: [{name: "Next"}],
description: "meh",
id: "3",
next: "4",
position: 3,
title: "Click to create a customer for this request.",
});
guiders.createGuider({
overlay: true,
buttons: [{name: "Something", onclick: somef() }],
description: "meh",
id: "4",
//next: "4",
position: 3,
title: "This is the next one.",
});
});
</script>
The function somef() only logs to console that it has run. In the code, you can see that somef() is only supposed to run when the button 'Something' on guider with id 4 is clicked. However, if you go to the url with the hash, you can see in the console that somef() runs immediately.
In version 2, the highlight option does not work on its own. You have to specify an attachTo value. If you just specify a highlight value, nothing is highlighted on the page. In version 1.3 this was not the case.
This is somewhat of a problem in my app because I want to highlight a major portion of the page and show the guider on top of it, instead of attaching the guider to one of the sides.
When I set highlight and attachTo and do not specify a position, the guider is set to be behind the highlight part of my app, so I am unable to see it. The z-index of the guider is 900001 and the z-index of the highlighted area is 900003. As a fix, I have set the guider z-index to be 900004 so it will always be above the highlighted area.
All the calls to _.highlightElemnt and _.dehilightElement are passing in myGuider.highlight, when they should be passing in myGuider.attachTo
https://github.com/jeff-optimizely/Guiders-JS/blob/master/guiders-1.1.4.js#L364
the code is repeated further down... not sure if this is new, but it needs fixing there too or things break for me.
probably a work around possible, but this is an easy fix.
I've found a small bug in a hideAll function. Instead of this code:
line 484:
if (currentGuider && currentGuider.highlight) {
guiders._dehighlightElement(currentGuider.highlight);
}
It should probably be something like this:
if (currentGuider && currentGuider.highlight && currentGuider.attachTo) {
guiders._dehighlightElement(currentGuider.attachTo);
}
Otherwise this code:
guiders._dehighlightElement = function(selector) {
$(selector).removeClass('guiders_highlight');
};
Tries to remove the class from the "true" value.
Guider is not fixed positioned for the fixed elements, we need a way to fix the guider for the fixed elements on the document so that they will point the correct position even though the page is scrolled.
If guiders are attached to elements that are in an element with a top margin, then the vertical position of the guiders is wrong by the amount of the margin.
For example, if I have the following structure:
body -> div.content -> table -> various elements with guiders
The div.content has a relatively large margin-top, and the guiders are all off-position by the size of that margin. I've confirmed this by "fixing" it for myself with the following hack:
top -= ($("div.content").outerHeight(true) - $("div.content").outerHeight(false));
But that's not a portable solution :-)
This is true (ie broken) on Firefox 21, Chrome 28, Safari 6.0.5, IE 10, and I expect on earlier versions of IE as well.
This will save a few kbs
Implement the ability to auto close and auto open the guider after a number of x miliseconds.
There are some cases where there should be an ability to not open the guider at page load but after a limited time.
This could be done with additional jquery but it will be nice to allow a parameter for this.
In addition an option to autoclose after a number of x milliseconds will be very practical.
That way you could display a timer going back the number of seconds until closure instead of the close or x buttons.
I just spent at least half an hour tracking down a "bug" in my code that was simply a case of using {name: "prev"}
rather than {name: "back"}
because I trusted line 54 of README.md to be accurate.
(After I spent another 15 minutes or so fiddling around with explicitly passing in prev
as an option because I didn't trust the reference to be complete because something as fundamental as next
isn't listed.)
Probably a good idea to fix at least the first oversight.
It would be nice to have a way to write some general code that executed on every onClose
callback, a function that wraps the callback or having an event that flags that the tour was closed.
For example, I want to do a certain action on all steps closing and I don't want to write a onClose
function for every single step repeating code or calling the same function.
I believe this is not possible currently. Meanwhile I've added an event to handle this case.
thanks, cheers,
Miguel
A z-index value of 100,000,000 !important
is way too over the to. A value of 5000 should be enough to cover everything, ever. Or at least drop the !important
so we optionally show modal dialogs over the top of the guider window without having to edit guiders.js source and break updating flows.
I'm using guiders with the highlight option. It appears to highlight input elements, but not divs. I've verified that it is applying the guiders_highlight class to the element. But it appears to not actually highlight anything.
Is there any way to get highlight to work with divs?
See https://gist.github.com/1043482
Works great on desktop browsers (even with JQuery Mobile), but with JQM on a mobile device, I suspect that the event that triggers the hide of the browser's URL bar is conflicting with something in guiders. Displays perfectly as seen here: http://screencast.com/t/7gKFsNOX6X2
But cannot click on "Next".
There is a call to unbind that unbinds all keydown handlers on document, not just those added by guiders.
The easiest solution for this is to use jQuery's namespaced events. Strictly, it is only needed when you're doing an unbind. But for consistency (and so unbinds can be added easily later), it's better to do it everywhere.
I will try to do a pull request for this shortly.
I'm using the 1440 CSS Grid -> cssgrid.net and it seems to be causing the Guider to set it's left position incorrectly. Typically it will place itself off the screen if I'm trying to attach it to an object.
Hello,
there is a bug that all buttons are duplicated when the tour is run second time. For example, create a link on the page that runs the tour manually, and after your complete the tour one time, the second click on the tour opens guiders with duplicated buttons
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.