xbsoftware / enjoyhint Goto Github PK

In runtime this error is coming. "JavaScript runtime error: Unable to get property 'left' of undefined or null reference"

Can you help me regarding this.

Thanks in advance
With regards
Priyank Keshri

Hi,

I am using enjoyhint in my webpage.. I want add new hints dynamically according to newly added fields in page.. Please suggest me any solutions

For hints on a small (11") screen, hints on elements in the top right get rendered very poorly

Would of great help if anyone can point me to a library similar to this built in reactJS!. Thanks in advance!

If I downloaded from this link: http://xbsoftware.github.io/enjoyhint/enjoyhint/enjoyhint.css then it works well. But if I pull and use enjoyHint.css from respository then nothing displayed.

Due to 'marker-end' using a url reference to put the arrow head on the pointers, I was only seeing the arc, but not the end of the arrow in my Ember App. I soon discovered it was because of the way Ember manages its routing.

Managed to fix it by getting the URL when making the SVG, then adding it to the properties in the renderArrow function:

var currentURL = window.location.href
... 'marker-end': "url(" + currentURL + "#arrowMarker)" ...

Not sure if its worth fixing for the limited cases, but thought I'd leave this here in case any one had a similar issue

Can we have 2 arrows at the same time? I want to show 2 divs at the same time.

if use JQuery 1.8.x removeClass(undefined) will remove all classes from the button include default class.

that.clear = function(){
// (Remove userClass and set default text)
if(that.nextUserClass!=undefined)
$(".enjoyhint_next_btn").removeClass(that.nextUserClass);
$(".enjoyhint_next_btn").text("Next");
if(that.skipUserClass!=undefined)
$(".enjoyhint_skip_btn").removeClass(that.skipUserClass);
$(".enjoyhint_skip_btn").text("Skip");
}

This will be OK.
Is it a JQuery bug?

Or any examples of one?

If click is not accurate (miss a few pixels on a div), an error occurs, workaround...
did a workaround for me, but it's just a hack, should be cleanly treated.

CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
    var self = this;
    try {
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        this.beginPath();
        this.moveTo(x + r, y);
        this.arcTo(x + w, y, x + w, y + h, r);
        this.arcTo(x + w, y + h, x, y + h, r);
        this.arcTo(x, y + h, x, y, r);
        this.arcTo(x, y, x + w, y, r);
        this.closePath();
        return this;
    } catch (e) {
        //todo: catching errors if click is not accuarte and just announce to BB frame on exit, per Sean 9-22-2015
        console.log('error::::::::::::::::::::: enjoyhint' + e);
        // announce to my framework to close the wizard cleanly
        BB.comBroker.fire('CLOSE_WIZARD', this, e);
    }

};

example - http://board.sa-wd.ru
when hint opened on "menu" button(step 12), arrow directed to the right, but I expect it will be directed to the left.

The latest changes in 3.1.0 don't account for custom event_name's when passed into the public trigger() method. The switch case that's used is only looking for [next|skip].

So when a public trigger() is made with a custom event name, as per the docs:

enjoyhint_instance.trigger('custom_event_name');

it's ignored since it's not accounted for in the switch case.

See changeset:
7ead6d2#diff-573685d4ad7e32dee5ab052f7f229d67L238

First off, thank you for making Enjoyhint available for free!

I'm just learning javascript, so I'm learning as I go. I'm stuck as to where I would place the codes to make the overlay activate only on the home page?

Would there happen to be a Wordpress tutorial that I could check out? Or would you be able to advise where or how to place the code in my Wordpress site?

Thank you!

P.S. Not sure if this is the proper place to ask for help, GitHub is new to new as well. Apologizes in advance.

In version 3.1.0 of GitHub, PD. the bower packge is not updated

After debugging, I think the document should be edited as follows:

//Example of using custom event_type
$.get('/load/some_data', function(data){
//trigger method has only one argument: 'next 'or 'skip'
enjoyhint_instance.trigger('next');
});

I am using Enjoyhint with cookies when cookies are stored then no "Uncaught ReferenceError: EnjoyHint is not defined" but when i am deleting cookies is showing above error.
`if (cookie.indexOf('visited=', 0) == -1) {
document.cookie = "visited=1;expires=30 June 2035 23:59:59 GMT ;path=/";
setTimeout(function () {
var enjoyhint_instance = new EnjoyHint({});
var enjoyhint_script_steps = [
{
'next .tour_sidebar' : 'Filter your search by locations, spors, specific dates, price, days and categories'
},
{
"next .collections_wrap": "Check out our curated collections"
}
];
enjoyhint_instance.set(enjoyhint_script_steps);

        //run Enjoyhint script
        enjoyhint_instance.run();
    }, 2000);            
}`

I recommend adding "Jump to step" method
will be very useful.

somebody could help me out with non-standards events samples using 'custom' and enjoyhint_instance.trigger('custom_event_name'); ?

Modify two codes

171:21

var coords = {
          x: offset.left + Math.round(w / 2)  - $(document).scrollLeft() ,
          y: offset.top + Math.round(h / 2)  - $(document).scrollTop()
      };

591:57

var label_left = label.offset().left - $(document).scrollLeft();

Hello guys, i'm trying to apply interactive tutorials in my web application. I decided to use enjoyHInt. But on my first test i received the error below.
I just make the initial steps. So i do:

1st import (it's ok);
2nd ctrl + c / ctrl + v in the script provided by "https://github.com/xbsoftware/enjoyhint"
3º i created a div and a button with class especified on the code js.

And i started my web application and i received this error on my console:

VM1533 enjoyhint.js: 22 Uncaught TypeError: $ body.enjoyhint is not a function
At init (VM1533 enjoyhint.js: 22)
At new EnjoyHint (VM1686 enjoyhint.js: 173)
At VM1536 Cad119Action! Browser.action: 364

Do you have somthing to help me?

full code:

	<link rel="stylesheet" href="enjoyhint/enjoyhint/jquery.enjoyhint.css" type="text/css">
	<script type="text/javascript" src="enjoyhint/enjoyhint/enjoyhint.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

	<title>Teste Framework</title>
</head>

<style>
	.new_btn{
		width: 50px;
		height: 50px;
		margin-top: 99px;
	}
</style>

	
<body>
	<div class="pendenciasTeste">
	<button class="new_btn" onclick="teste();"></button>
	</div>
</body>

//initialize instance
var enjoyhint_instance = new EnjoyHint({});

//simple config.
//Only one step - highlighting(with description) "New" button
//hide EnjoyHint after a click on the button.
var enjoyhint_script_steps = [
{
'click .new_btn' : 'Click the "New" button to start creating your project'
}
];

//set script config
enjoyhint_instance.set(enjoyhint_script_steps);

//run Enjoyhint script
enjoyhint_instance.run();
</script>

Hi there
the skip button is not initialized with the enjoyhint_skip_btn CSS class as it should. It uses the enjoyhint_next_btn class (line 263 of enjoyhint.js).

Thanks!

Hi! If you have a div in a left position and when you click it if change the position, the hint it's not in the correct position!

Nice works!! Regards!!

It would be nice if we have an option to show all the steps in one overlay. I have check the documentation I dont think this feature is available.

Please let me know if this is already present.

Hi, thanks for the repo,

When I run the demo arrow heads are there,

but when I import css and js into our project arrow heads are gone, everything else works fine,

all help appreciated,

I am using enjoyhint in a .NET environment. I am able to run basic examples with hints showing, however next and skip buttons are missing. Anyone know what the issue could be?

When I press f12 tab, the style for nextbutton and skip button is missing. However, it's there in the css file.

This project is active?

Quick tip, if you wish to avoid false positive on neighboring elements catch the event and shoot'em down to help enjoyhint get only destined bubbling events.

as in

 $('#fooDiv).on('click',function(e){
                if (e.target.tagName != 'rect'){
                    e.preventDefault();
                    e.stopImmediatePropagation()
                    return false;
                }
            });

i want to add previous step in my code,but i can't find it .can you add this function?

whenever I am refreshing the page it loads automatically. help me to fix the issue. I just want it to load only one time when the user login for first time.

Hey there

It would be nice to be notified when the user hits the skip button. Some specific actions may need to be done when the user skips the process, so it would be great if we could define a callback in the constructor that would be called only when the user ends enjoyhint by clicking the skip button.

What do you think?

Labels are hidden on when the screen is smaller. The elements are drawn in the DOM elements but hidden.

if (is_center) { if (is_top) { setArrowData('bottom', 'top', 'top'); } else if (is_bottom) { setArrowData('top', 'bottom', 'bottom'); } else { return; // When elements are in smaller screens, they end up in this code segment which prevents them from drawing the rest of the labels. } } else if (is_left) { sideStatements( ['right', 'top', 'top'],//top ['bottom', 'left', 'bottom'],//mid_top ['right', 'left', 'top'],//mid ['top', 'left', 'top'],//mid_bot ['right', 'bottom', 'bottom']//bot ); } else {//right sideStatements( ['left', 'top', 'top'],//top ['bottom', 'right', 'bottom'],//mid_top ['left', 'right', 'top'],//mid ['top', 'right', 'top'],//mid_bot ['left', 'bottom', 'bottom']//bot ); }

I'm trying to import enjoy hint ( import '../enjoyhint.min'); ) but I get Uncaught Error: Cannot find module 'canvas', is there a certain way I should import it to avoid the error?

Thanks

love enjoyhint!!!!
However Kinetic is bloated and no longer maintained.
I recommend moving to something much lighter, like the super HOT GSAP: http://greensock.com/gsap

Thanks for the library. It looks great!

Can the step be ignored without script error if the element selector does not return anything? This is useful when the elements are either hidden or not rendered in dynamic pages and the step is not valid.

If the last selector is invalid, the next button should not be displayed in the last but one step.

Currently when the element does not exits the next button does not work and the following script error occurs:
Uncaught TypeError: Cannot read property 'left' of undefined(anonymous function) @ enjoyhint.js:176

Hi,

what an excellent project.

We are having a problem and would like some guidance to try to fix it. We have a fixed header that is "over" the page. when the Autoscroll feature moves the page up and down, sometimes the highlighted area is incorrectly scrolled under the header.

the work arounds we have thought of are either:

1. tell the system to not count the top xx pixels when calculating the automatic scroll;
2. disable the automatic scrolling and manage the scroll manually.

Are either of these possible?

Thanks!

Hello, i've an issue when in the webpage there is a fixed (position fixed in CSS) menu/toolbar (with z-index).
The highlighting is behind my menu...

Any tricks ?
Or maybe, add a offset adjustement parameter in the step settings like scrollAnimationSpeed to adjuste manually if necessary

Thanks you realy much.

Fix for custom event trigger. I found that in the latest version, when set up a event trigger in onBeforeStart for a custom event, it won't work. Fix addressed here: #33

Transparent overlay does not display on the iPad Air.

Is it possible to start enjoyhint not on window load but with a click handler say from a button?

Hi,

I am trying to put together a slight custom job on this library for a tour. Couple of issues I am facing, I hope you can assist with:

1. I want to remove the 'x' icon for closing the code. Is there a method/event for doing this?
2. I have a large area I require to have highlighted at the bottom of the page...this causes the white pointer line to cut over the Next Button. Is there a way to configure the position of the buttons or text or line position point in-built?
3. The onSkip function does not work from the documentation. How else can I create a Skip event?

Please help with these queries soon.

Thanks.

Is it possible to add demo page that available in your website into github repository to take reference?

I get this error in console:

GET http://uikit.dev/assets/vendor/enjoyhint/Casino_Hand/casino_hand-webfont.woff
GET http://uikit.dev/assets/vendor/enjoyhint/Casino_Hand/casino_hand-webfont.ttf 

I don't know what those are for but enjoyhint is working fine.

Hi,

When the selector is large and in the middle of the screen or when it's just a normal footer at the bottom of the page, EnjoyHint does not point to it correctly.

It would be nice if you help me!

After instantiate enjoyhint using window.enjoyhint_instance.run(); the vertical swipe (scroll) is not working yet using angular-touch.js (the horizontal swipe still working fine).

I'm using:

• AngularJS v1.4.7
• jQuery v2.1.0

Thank you!

After including enjoyhint.js in html, i am getting the error that "Uncaught ReferenceError: require is not defined". My application using NodeJS for backend and Angular and Jade for front end.
script(src="/enjoyHint/enjoyhint.min.js")

I am working on implementing enjoyhint on a Table.

#tbData tr:first td:nth-child(n+4):nth-child(-n+9)

jQuery is selecting the range correctly - but the component is not using the whole range. It's only highlighting the first TD in the range.

Suggestions?

At now, we need to full reinitialize:

tour._instance = new EnjoyHint({
onSkip: function(){
setTimeout(function(){
delete tour._instance;
tour.init()._instance.setSteps(tour.steps);
}, 300);
}
});