Selective overlay and expose with tooltips - javascript

I want to show my first-time users different functions of my web-app. To do this, I want to make an in-page tutorial that will guide the users through different parts of the page.
I would like to use tooltip modals with instructional content. When the modal is showing, the page element in question will be exposed while the rest of the page is darkened. When the user presses "next" on the instructional modal, another set of instructions will show up and another part of the page will be exposed and the rest of the page will still be dimmed.
What's the best approach to take for this? Please advise. thanks!

jQuery Tools expose should take care of that nicely.

Related

Remove appended anchor/#link from url after use

Over the past month I've been working on a new website which is based on a WordPress theme. The site is a pseudo one-page design, where the primary page serves as the main page for information. However, it also has a gallery where you can enter several individual portfolio projects - which effectively takes you to another page (and therefore the use of "pseudo"). So that's the design and layout of the site...
On the main page of the site I added anchor links to the various sections for ease of use, which will scroll/take the user to the desired section of choice, by simply clicking on the navigation menu. The links all work fine, but a problem arises when you've entered and returned from a portfolio project.
The problem:
After having clicked on an anchor link, a hashtag is then added to the URL "www.example.com/#anchor". If the user enters a different page and then returns the hashtag/anchor is then reactivated and scrolls to the linked section. This is a real pain and anything but user-friendly, since it is taking the user away from where it was.
I've been trying as many Javascript/JQuery codes I can find, many from this very site, but none has managed to solve the problem... I need to find a way to effectively remove the hashtag after use so the URL is left with only "www.example.com" again.
EDIT: Forgot to add that I also need to be able to click on the navigation menu whilst in a portfolio project and having the menu call to open the main page and take the user to the section of choice.
Does anyone have a solution? I am all out of ideas here.
Please also tell me where to add the piece of code if you are so kind to help.
Thank you!

Share button with different pages

I researche it quite a bit, and thus it seems simple, I couldnt find the answer.
So I have a website that has different articles,each with a custom facebook share button. Every time the user wants to share, I activate javascript sdk and it works. However it shares the opengraph tags that are defined in the header. How would I do that dynamically ? I want to share the specific content of the article ? Is opengraph the right way ?
I assume that your use case is something like the main page in a blog,
where you wish to display several articles in the same page,
and have a like button for each one.
However, the way Facebook crawls your page, it looks at the open graph meta tags for this main page only.
You wish for each of the share buttons to be specific to each post instead.
Have a read of the instructions on this page
In your situation, her is what you will need to do:
Set the data-href attribute of the individual page that the share button is for
For the individual pages, set the open graph meta tags appropriately
This way, when facebook queries your page open graph meta tags, it will not do so on the main page, but instead on the pages you have specified.
Another approach, that will give you more fine grained control, would be to use Facebook's Javascript SDK.
The one that you are looking for, in this case, would be the Share Dialog.
Essentially, here you create your own buttons by hand, and trigger the Facebook Share API using Javascript manually too.

What the functionality is called which is used while logging out of Google account?

When we want to log-out from the google/gmail account, we click on the profile picture displayed at the right most of the Google bar. The scenario with the pop-up is shown in below figure.
What does this functionality called in jQuery, HTML? I think it's not a modal pop-up as it's not appearing on the existing content of a page and background content is non-clickable. Also it can't be called as tool-tip as it's not showing up on mouse hover, we need to click on profile picture to see the log out button. So what does it called?
I'm asking this thing curiously because I need to implement same functionality in my website. That is when user clicks on specific text the pop-up/tool-tip(for now I'm using these words for your understanding only, may be I'm using wrong words). As I don't know the exact word for this functionality I'm not able to find out such jQuery plugin on internet which would behave the same way.
One more thing is that I want to use a form in this pop-up/tool-tip which would be submitted to PHP using AJAX.
Popover!
Example API from a popular CSS/JS toolkit:
http://getbootstrap.com/javascript/#popovers

Changing URL on AngularJS without transitioning state for a particular link, but keeping the URL in the link

I have a link which has two actions. When I click on it, it opens a modal box via "ng-click", but it also transitions state via its "ng-href".
The modal box opening is intended. The state transition is not. However I need the URL in that state transition to persist.
When I try to use $locationChangeStart to prevent the state change, it also prevents the URL from changing. This is not preferable. I've also researched a bit, and found potential solutions in "reloadOnSearch". However it doesn't possible to point to a particular link. Not all of the links on the page do this, the other links are all normal links. Furthermore I don't know how to use reloadOnSearch with ui-router.
The feature I'm trying to implement is similar to Pinterest's overlay of items. When you click on the item, they open up a modal box and change the URL, but the underlying page doesn't change. This allows the end user to copy the URL and share it with their friends, and when they access it, it will actually go directly the item page and not the overlay.
I'm currently using ui-router if that makes anything easier.
Hopefully somebody has a solution?
You can try angular ui bootstrap modal for better integration with angularJS.
Take a look at an example in http://angular-ui.github.io/bootstrap/
Or you may open a modal via data-target="#abc" instead of href="#abc"

Attempting to create pageload tooltips based on jQuery validationEngine's look and feel

My website uses the jQuery.validationEngine plugin to validate user forms. I really like the look and feel of the tooltips that pop up (ie. they fade in slowly and disappear when the user clicks on them). Here is an example of the validationEngine in use.
I would like to use the same tooltips to show hints or notifications when the user visits certain pages (for example, "you have a new message, click here to view"). So, they're not actually based on validation, but rather the page itself loading. I'm having trouble figuring out how to call the actual tooltips that the jQuery plugin uses, without having to validate anything.
How can I call the tooltip itself, without validating?
Thanks!
Try the plugin package} {des pack containing 2 plugins for notifications.
1. desNotifiers
2. desToolStip.
3. desWindows.
http://des.delestesoft.com:8080/?go=5

Categories