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.
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'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
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()
I'm trying to parse a html code for specific content, but the problem I'm running into is that certain websites require you to click a "Show more" button.
When I grab the URL there's no way to tell it I want the full code with the "Show more" button clicked. Is there a way to grab the full source code of the page, because it keeps getting cut off after a point.
Example website: https://play.google.com/store/search?q=fm%20radio&c=apps&hl=en
The source code gets cut off at the "Radio hungary" app, which is the last app that loads automatically.
This even happens when I load everything and then try to view the pages source code.
It ends in:
style="display:none"> Show More </button> <div class="bottom-loading" style="display:none"></div> <div class="footer"> <div class="footer-links-container"> <span class="copyright"> ©2016 Google</span> <a class="footer-link id-no-nav" href="https://play.google.com/intl/en_us/about/play-terms.html" target="_blank"> Site Terms of Service</a> <a class="footer-link id-no-nav" href="http://www.google.com/intl/en_us/policies/privacy/" target="_blank"> Privacy Policy</a> <a class="footer-link id-no-nav" href="http://developer.android.com/index.html" target="_blank"> Developers</a> <a class="footer-link id-no-nav" href="https://play.google.com/artists" target="_blank"> Artists</a> <a class="footer-link id-no-nav" href="https://support.google.com/googleplay/?p=about_play" target="_blank"> About Google</a> </div> </div> </div></div><div class="loading" jscontroller="EgJAl" jsaction="rcuQ6b:rcuQ6b" id="page-load-indicator"></div><div id="instrument-manager-parent"></div><script src="https://wallet.google.com/inapp/lib/buy.js"></script><script
Even if I click the show more button.
The purpose of this is to grab all the URL's of the images, and I can't do this by hand because well.. we have thousands of images.
I believe if you just take advantage of the Javascript HTML DOM methods you can accomplish what you want to achieve.
This will help: http://www.w3schools.com/js/js_htmldom_methods.asp
By using this, you can target specific elements/ids/classes and pull or modify the information you want.
Jquery will also help you a lot with this.
You can solve it using Javascript dom,steps to do are
keep your content in a div element
set its default height as a fixed value
on clicking the show more link execute a javascript function to make the div element height to auto
in this way you can show content excerpt with javascript
If you go for server side, you can create a new page for showing the content.
EDIT
Fiddle of that problem: https://jsfiddle.net/9k449qs2/ - debug the fiddle and try to select the header with your picker. You will not be able to do so, it will select you the whole page every time you click.
I'm just working on a project which has a persistent header and footer. Just the content changes by clicking through the application. Now i wanted to add a backbutton into the header which i did with:
<header id="headerMain" data-position="fixed" data-role="header">
<a href="#" data-rel="back">
<div class="backButton">GO BACK</div>
</a>
</header>
The rest of my code directly after the header looks like this:
<div data-role="page" id="pageMain">
<div class="content gray">
adfjsöalfjasödf
</div>
</div><!-- pageMain end -->
<footer id="footerMain" data-position="fixed" data-role="footer">
Footer
</footer>
<div data-role="page" id="checkConnection">
<div class="content gray">
<button id="checkConnectionState" class="button" onclick="CTFNetworkState()">Check your Connection</button>
<a href="#checkBattery">
<button id="checkBatteryState" class="button">Check your Battery</button>
</a>
</div>
</div> <!-- checkConnection end -->
<div data-role="page" id="checkBattery">
<div class="content gray">
<p>Just plug your device and you'll get information about your battery state.</p>
</div>
</div> <!-- checkBattery end -->
So all works fine, the transitions and so on. But i can't get the backbutton work. He is not clickable. The headers on each page are not clickable in any form. If i debug that with gapDebug and i click onto the header, GapDebug marks the Pagecontainer and not the header.
So, how can i make the backbutton inside the header clickable on each page?
EDIT
So the header doesn't care what kind of button i place inside it. No matter what button i choose, or what attribute i add to my <a></a> it is not clickable.
So i tried to run GapDebug again, pressing the "Inspect" Button and than clicked on my backbutton, it selects me the code from the page which is wrong.
So i found the solution. The problem was, that not the documentation for persistent toolbars helped me, instead the documentation for external toolbars did it then.
Simply add
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
inside your <script></script> tag and all works fine. This happens Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.