Display social icons rather than an arrow with photoswipe - javascript

I'd like the social icons (Facebook like button, etc) to be displayed directly on the screen rather than accessible by clicking on the "arrow" sign. Is this possible? How? (I believe that most users won't realize that they have to click on the arrow to share the picture - to me this is confusing)
Many thanks,

You can create custom UI by editing default one, it's specially added as a separate file, so you can fork it.
https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/photoswipe-ui-default.js#L437 (take a look at how zoom or close buttons are added, you can add another buttons the same way)

Related

Anchor Jumping across the section within page

I am trying to implement "Anchor Jumping" functionality using JavaScript and Angular 2 in my application, Means user can jump across the section within a page.
As per the client requirement, User can jump(Navigate) the section using of pressing Ctrl+Shift+Left/Right Arrow key.
Here, I add one snap to clear out the question as below.
As an example, Suppose first time focus on Menu and user press the Ctrl+Shift+Right Arrow at that time focus should be go to next element item(i.e. Breadcrumb section or any section).
I am very confuse about, How to manage the dynamic loading content? (How can I count this dynamic content in my section?)
Please suggest any idea to achieve this functionality.
What you need is a focus manager. I wouldn't bother writing one from scratch, Angular Focus Manager is one example of how to solve this problem. It also incorporates Mousetrap.js, which adds shortcut directives.
Your dynamic content can always be wrapped in something (even a div) that has its focus managed.
I hope this helps!

Change Tab Link on Click (and Already Active Anchor)

Trying to piece together js knowledge as I go here. But I have a website that will be relying on a tabbed (just 2) concept to flip between the companies two services.
So when navigating to the page, they user will be directed to Company1 and I would like to have a tab of Company 2 on the right. It will be the same domain, just domain.com#company2.
When they navigate to Company 2 directly (via domain.com#company2) I would like the tab on the right to link to Company 1.
So basically, it looks like js is the only way to do this. Something that could read the active id and style the tab accordingly.
The main function would be based on click. So if you click the tab, it switches to the non-active companies tab.
The tab itself will remain the same, all I need to change is the href.
Thanks in advance guys!
I think you could use CSS float :
$("#tab1_id").click(function(){
$(".2tabs_class").css("float","left)
})
$("#tab2_id").click(function(){
$(".2tabs_class").css("float","right)
})
Make sure 2 tabs are inside a div

Prevent Dojo DropdownMenu from closing

I use a Dojo Enhanced Grid to display various data. With a DropDownMenu I give the user the ability to show additional colums.
But this is a little bit uncomfortable. Because the user has to click for every new colum onto the menu.
Is there a possibility to prevent the DropDownMenu from closing? Or should I use another widget for this?
I'd suggest you look into Dojo dgrid, and the ColumnHider extension. It effectively recreates what you're doing, and is available out-of-the-box, including the feature you're after.
An alternate solution is to use a dijit/TooltipDialog, whose default behavior is to stay open when one of its contents is clicked.
yourGrid.openDropDown(); will open the menu back again, and you would not really notice that it was displayed back again after a close.

Selective overlay and expose with tooltips

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.

How to expand on mouse click

http://findaccountingsoftware.com/directory/gba-systems/fams-fixed-assets-management-system/
this site contain a tab container. On Applications tab clicking on + sign it goes to expand, I want to know this process name. How to do it?. There is a strange thing occur clicking on + sign expand automatically scroll move and focus on text. What this process name is. How to do that?
This effect is called an 'accordion' menu. jQuery UI has a great one which you can use and also has some great documentation explaining how to use it :)
http://jqueryui.com/demos/accordion/
Beautiful full customization accordion in Bootstrap.
Please refer the following documentation.
https://getbootstrap.com/docs/5.0/components/accordion/

Categories