I'm looking for a way to open a fancybox gallery just by double clicking for a grid of sortable images. The reason for this desirable behaviour is that I want to focus on one of the images with a single click so that it can be re-sorted with keyboard commands (and not just drag and drop).
I tried unsuccessfully to solve this problem with the onclick and ondbclick parameters within the <a> tag. On jsfiddle I give an example: For the first image (the bluish one) a single click focuses on the element, but a double click does not open the gallery. For the second image a single click opens the gallery, but I can't focus on the element without opening the gallery. (Image 3 and 4 are for reference only):
<ul id="sortable" class="sortable ui-sortable">
<li id="obj_01" class="ui-state-default" onclick="this.focus()">
<a tabindex="-1" data-fancybox="gallery" onclick="return false" ondblclick="location=this.href" href="http://fancyapps.com/fancybox/demo/2_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/2_s.jpg" />
</a>
</li>
<li id="obj_02" class="ui-state-default" onclick="this.focus()">
<a tabindex="-1" data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" />
</a>
</li>
<li id="obj_03" class="ui-state-default" onclick="this.focus()">3</li>
<li id="obj_04" class="ui-state-default" onclick="this.focus()">4</li>
</ul>
I was also not able to get the accepted solution presented at fancybox open gallery with doubleclick to work.
Since I am new to JS/jquery and not very proficient in HTML is there an 'easy' way to make this work?
You have to detect double-click by yourself and then just start fancybox using API
Related
I am using the code below to open a new tab upon clicking a bootstrap button in a razor .cshtml page currently. I have a button in the new tab opened which returns to the main menu, but I would like to know how to close this tab, to effectively return to where the user was previously.
<ul class="nav nav-sidebar">
<!-- Menu Item -->
<li class="menuItem">
<a asp-controller="New Tab Section Menu" asp-action="Index" target="_blank" class="menuItemLabel">
<i class="fas fa-book-reader fa-lg" style="padding-right: 5px"></i>
New Section Menu
</a>
</li>
You can't close browser tabs this simple.
I assume that you have a return button. What you can use target="_self" instead of target="_blank" so no tab will open and you can navigate back.
You could use window.close() in Javascript before, but this is mostly unavailable EXCEPT when you open a new tab with target="_blank" or by script.
In your case it might be worth a try.
Use a button with:
Return to base!
Browsers are very picky about this for security and useability reasons.
https://stackoverflow.com/a/66688958/6803592
I have a basic call-back popup dialog in jQuery Mobile:
<a id='callback' href='#call_back' data-rel='popup' data-position-to='window' aria-owns='pre-rendered' aria-haspopup='true' aria-expanded='false' data-history='false'><div>CALLBACK<br><span>Provide us your phone number<br>and we will call you back!</span></div></a>
<!-- a lot of other stuff comes here... -->
<!-- back to popup dialog -->
<div id='call_back-screen' class='ui-popup-screen ui-screen-hidden'></div>
<div id='call_back-popup' class='ui-popup-container flip ui-popup-hidden ui-body-inherit ui-overlay-shadow ui-corner-all'>
<div id='call_back' data-fn='call_back' class='fn_data ui-content ui-popup ui-body-a ui-overlay-shadow ui-corner-all' data-role='popup' data-enhanced='true' data-theme='a' data-transition='flip'>
<div data-role='header' role='banner' class='ui-header ui-bar-inherit'>
<div>Welcome!</div>
<a href='#' data-history='false' data-rel='back' class='ui-btn-right ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-shadow ui-corner-all' data-role='button' role='button'>Close</a>
</div>
<div role='main' class='ui-content'>
<div class='row nob msg'>
<div class='ui-field-contain'>If you provide us your phone number and your email address, we are going to call you back in 2 days and help.</div>
</div>
<!-- input fields come here -->
</div>
</div>
</div>
My problem is when I'm on the very first page, I open the call-back popup and then I try to close it by the close button (not clicking outside the dialog 'cause that works well) the entire page closes and the browser goes back to its start page. Obviously the data-rel='back' is triggered and it tells the browser to go back 1 page and because there's no previous page it means it will go back to the start page.
But this is not the expected behavior according jQuery Mobile API documentation:
https://demos.jquerymobile.com/1.1.2/docs/pages/page-links.html
...and I also have a data-history='false' attribute which doesn't seem to take any effect.
I tried to rewrite the code with data-direction='reverse' instead of data-rel='back' adding an onclick event to the Close button:
<a href='#' data-history='false' data-direction='reverse' class='ui-btn-right ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-shadow ui-corner-all' data-role='button' role='button' onclick='history.go(0);'>Close</a>
It made the page reload instead of closing entirely, which is a little better when I'm on the first page but when I go to the second page it is also reloaded when I do the same thing with the popup dialog, which is not so good as the first version of the code works fine on the second page.
Can you plase tell me what I should change to make the popup dialog work properly on the first page of the website?
Solved by onclick="$("#call_back").popup("close");" in the href, so:
<a href='#' data-history='false' data-direction='reverse' class='ui-btn-right ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-shadow ui-corner-all' data-role='button' role='button' onclick='$("#call_back").popup("close");'>Close</a>
works.
I am trying to develop a dropdown data toggle, that can be used to open a dropdown-menu but simultaneously allows the user to click a link.
Currently, the link can only be opened via right-click "open in new tab". However, a left-click on the link always opens the dropdown, even though the browser recognizes the target of my link properly (I can see the target url in the bottom left of my browser).
I Already tried split-buttons, but their layout is not flexible enough.
Basically, I need one button (dropdown-toggle) with two lines.
The first line is an anchor with a link name and an url.
The second line is the actual label of the button.
(Background: When the user selects a new item from the dropdown, the displayed link and button label are updated by angular.)
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link">
{{link name}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
<ul class="dropdown-menu">
<li ng-repeat="item in items"> item </li>
</ul>
Expected result:
* If the user clicks on the link, I would like to load the linked page.
* If the user clicks somewhere else on the button (no matter whether its first or second line), I would like to open the dropdown menu.
However, a left-click on the link always opens the dropdown,
The <a> tag needs a click handler that stops propagation of the click:
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link" ng-click="$event.stopPropagation()">
{{linkName}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
This will prevent the click from bubbling to the <div> element that opens the dropdown.
For more information, see
MDN Web API Reference - Event.stopPropagation()
Hi guys I have bought this template, and I am trying to get a link into a sidebar (under links to tabs)
<ul class="nav2 nav">
<li class="selected">Seniors - Studies </li>
<br><div align="center"><img src="images/seniorbrochure.jpg" width="200" class="foo"><br>Download PDF<br><br><div class="heading">We Support</div></div></ul>
This is a bit of the code, as you see I have a link download PDF to pdf.pdf (just as testing) but whenever I click on it it actually loads a blank tab and doesn't try to go to pdf.pdf at all, I can't put the link outside of the ul tab or else the whole layout gets messed up, is there any way around this?
Is the filepath correct? "your website/folder/pdf.pdf" . Or maybe you could try putting a button in the sidebar to download it - <input type="button" value="Download PDF" onClick="window.location.href='/folder/pdf.pdf'">.
I have a list of menus as below, every menu link is an anchor. I am experiencing a very strange behaviour from anchor tag i.e., when I click on any menu it opens the requested page correctly. But on second click system duplicates the directory hierarchy and looks for the requested page where hierarchy does not exist. For example there is a page on path "Pages/Contact/test.aspx", 1st click opens the page. When user clicks 2nd time browser tries to open a page at path "Pages/Contact/Pages/Contact/test.aspx" resulting in exception "The resource cannot be found" error is thrown.
<div id="menu">
<ul class="menu">
<li><span>About Us</span>
<div>
<ul>
<li><a href="Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
The problem is because you are using relative paths to your pages.
It works the first time because (I assume) you are in the root directory. So clicking the link takes you to 'Pages/Contact/Phone.aspx'. When in phone.aspx, if you click the link again, it looks for this page: Pages/Contact/Pages/Contact/Phone.aspx.
You need to add a / to the beginning of your URL to make it relative to the root of the site:
<ul>
<li><a href="/Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="/Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
Or alternatively, because you're using ASP.Net, you can use the ResolveUrl() function to ensure all your links are relative to the root of the solution:
<ul>
<li><span>Phone</span></li>
<li><span>Email</span></li>
</ul>
I believe href="" is your problem here.
Try href="#" or href="javascript:;"