How do I change or add any code in order to tap and hold to show the pop up, currently once I press the button the pop up window will appear, I want to change it to tap and hold.
<div id="ScenePop1">
1
<div class="popup1">
<h2>Scene 1</h2>
<button id="store1">Store</button>
<button id="del1">Delete</button>
<a class="close1" href="#close"></a>
</div>
</div>
my code here: http://jsfiddle.net/oajt5p28/
This link come to elegant solution with the combination of jquery, jmobile and simpledialog2: http://www.raymondcamden.com/2012/05/23/Context-Menu-Example-with-jQuery-Mobile.
Or use could use html5 dialog element, and catch taphold event following this way:
How to detect a long touch pressure with javascript for android and iphone?
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
Am using vb.net in my asp.net project also bootstrap 4. I have two dropdown list inside a modal, when the user select an item from the first dropdown list, the second list will be sorted.
The problem is, when the user select from the first list the page will postback which casing the modal to disappear. I tried to use <asp:UpdatePanel></asp:UpdatePanel> tag, but it didn't work.
I would appreciate any help or suggestions! Here's my code:
<div class="modal fade" id="AddNew" data-backdrop="static" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New</h4>
</div>
<div class="modal-body">
<div class="row pb-3">
<div class="col-lg-6">
<asp:DropDownList ID="DropDownList1" class="browser-default custom-select form-control-sm" runat="server" AutoPostBack="true"></asp:DropDownList>
</div>
<div class="col-lg-6">
<asp:DropDownList ID="DropDownList2" class="browser-default custom-select form-control-sm" runat="server"></asp:DropDownList>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<asp:TextBox ID="TextBoxName" class="form-control" runat="server" placeholder="User Name..."></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<asp:DropDownList ID="DropDownListGroup" class="browser-default custom-select form-control-sm" runat="server"></asp:DropDownList>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="ButtonAdd" class="btn btn-primary btn-sm" runat="server" Text="Add" />
</div>
</div>
</div>
</div>
There is not much you can do here. A post back will blow out a jQuery.UI dialog, a ajaxtoolkit popup, and of course a bootstrap dialog.
This means and suggests that while you can pop a dialog and let a user choose or click on something? That action can be though as ALSO the means to close that dialog if the user choice is to cause a post-back (saves you having to write code to close the dialog!!!).
If you need something like a cascade combo box?
Then I would NOT use a popup, but simply use a update panel, and display the several objects.
If you really want the cascade combo box or whatever in the popup? Then you have to use JavaScript and ajax calls to the web page - no post backs allowed. You CAN do this, but it quite a bit of extra work. So, I would suggest that you avoid the popup for such kinds of work, since you not only lose the GREAT nice easy to use button code stubs and code behind (the reason why asp.net and web forms are oh so easy to use!!!).
So, you have to get say a little bit creative. You can put all the options say inside of a "div" section, and hide or show that section with code behind.
And then show/hide the area on the form with say this:
myDiv.Style("Display") = "normal"
So hide/show a area on the form. Thus in that panel, we can have two combo boxes (choose state/province and then cascade to the city choice). When the user selects a city, (and auto postback) then we shove that selecting into the text box, and hide the div. All works with just a few lines of code, and no jQuery or bootstrap dialogs.
So the general rule?
Pop a dialog - user can enter data, check box a few things, enter comments and then they hit ok button or whatever. But that button will do a post-back and will close the dialog. So that is the design pattern.
If you break from above? Then you can build dialog forms, but you have to wire up any actions of that dialog as ajax calls. A post back causes the WHOLE browser page to travel up to server. Code behind runs, changes anything on that page and then the whole page travels back down to client and THEN is re-displayed. I should ALSO add that the web server page is now gone, does NOT exist server side and all variables in code etc. are also gone.
The code behind NEVER interacts with the user. it ONLY interacts with the web page in that round trip and ONLY during the short time that the page is up on the server, and code behind runs. So a post back will blow out any JavaScript running on that page, since the whole page travels up to server, code behind runs, and WHOLE page THEN travels back down to client, the browser loads the page AND THEN STARTS RUNNING the JavaScript. Since a post back sends the page to the server and THEN will send the WHOLE page back, then you can't have a post-back run and keep your JavaScript popus etc. running, and worse the browser re-loads the whole page, and the JavaScript code STARTS over running again!!!
So if you really want to do this? Then you have to make ajax calls.
So the rule and design pattern? A post-back is to close the dialog and you only can have or allow one post-back as the "final" action of that dialog. Break this rule, and you then having to hand code up a LOT of JavaScript and ajax calls.
So the answer is you can't do a post back. You can do this with jQuery.ui dialogs and insert a iframe into the dialog. So you put the asp.net web page and buttons inside of a iframe - but then again, that popup in MOST cases will want to interact with the current page and a iframe does not let you do this for all practical use cases anyway.
I have thus found by changing my design patterns and assumptions, then you simply have to cook up slightly different approaches to your UI designs, and thus once done, then you can do this.
So, for example, you might pop one list to select from, and then when the user selects a value (post back) you then say perhaps popup another list for the user to select. So you can pop a list for display, and the user selection of course can be a post-back (and often it will be). Then code behind can trigger another dialog and you get that input.
I am using the javascript library vex to output dialogs like this
When I used this with a screen reader (narrator), that text is not read so I tried to change the javascript inside vex that manipulates the DOM.
The resulting DOM became like this
<div class="vex vex-theme-default" role="dialog">
<div class="vex-content">
<form class="vex-dialog-form">
<div class="vex-dialog-message" tab-index="0"
aria-label="Login failed">Login failed!</div>
<div class="vex-dialog-input"></div>
<div class="vex-dialog-buttons">
<button type="submit"
class="vex-dialog-button-primary btn vex-dialog-button vex-first">Ok</button>
</div>
</form>
</div>
</div>
but the message "Login failed" is not read even with this markup.
Why not?
(I have also called .focus() on the div with the class vex-dialog-message).
The screen reader will instead continue to read the text after the button that was pressed when trying to login (that is running an ajax request that tries to login so the document is never reloaded).
This is what role="alert" is for.
It will interrupt a screen reader (as it is the equivalent of aria-live="assertive") with any immediately important information.
As this is a dialog you may instead want to look at role="alertdialog" to replace your role="dialog".
Additionally when you focus the alert don't make the "Login Failed!" text tabindex="0".
Instead use tabindex="-1" so that you can still focus it programatically but it does not end up in the focus order of the page.
The pattern you currently use will be tricky (not impossible) to get right as your "OK" (submit) button is within a form, so this will send screen readers into "forms mode", which behaves differently from normal reading mode.
As such if you are able to create a custom component there is a great writeup from deque on how best to implement an alertdialog
An example of the markup used there is as follows, notice the use of aria-describedby and aria-labelledby to maximise the chances of the alert being read correctly:
<div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
<h1 id="alertHeading">Warning! Street Address Mismatch!</h1>
<div id="alertText">
<p>The street address you entered does not match the Postal Code Data.</p>
<p>Is this the correct format: 12345 Main St. Blvd.?</p>
</div>
<button id="yes">Yes, Format Is Correct</button>
<button>No, Edit Street Address</button>
</div>
I need to create a dropdown with "change password" section in it, the dropdown is supposed to appear on click, let the user change the password and close when the button is clicked again.
This is how it looks like at the moment:
The popup closes as soon as the user clicks on it, so the user cannot update the password.
I know it might be a dumb question, but I'm new to programming and just learning..
This is what I got so far:
$('.ui.dropdown')
.dropdown({
on: 'click'
})
<div className="ui dropdown link item" tabIndex="0" href="/Account/Profile">Hi {this.props.username}
<div className="menu">
<div className="item">
<ChangePassword/>
</div>
</div>
</div>
Thank you so much in advance!
I'll just point out why this is happening for you, there's a few updates you could make to your code but I'll let you figure that out as you go :)
Firstly, onClick() will trigger whenever a mouse click occurs on the element you've set it on, as well as all the children of that element:
e.g (this is just semi-psuedo)
<div onClick={} >
<button />
<button />
</div>
In this case, onClick will trigger when you click the parent div which, on the page, will be wrapping both buttons.
If you've set the method to trigger when the ui-dropdown component is clicked, this will occur whether the drop down is open or not.
The usual way to do this would have two separate components:
Button (The thing you click on to open the dropdown)
The Dropdown
If you put the onClick function on the Button element, but have it activate the Dropdown element, your problem will be solved :)
I am trying to be as clear as possible without just downright fixing it for you, let me know if you need any more clarity!
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>