I started using the jquery ui library to add some enhanced UI elements to the asp.net app. and have run into a minor bug/problem:
I have a jquery UI dialog that is called when a button is clicked..the text for the dialog is all in a and is normaly hidden from the user, and then the jquery UI does its magic and uses that text to display the dialog - all works perfectly.
Here is the code:
<input type="button" value="Cancel This Event" onclick="$('#myCancelEventDialog').dialog('open');" />
and here is the div:
<div id="myCancelEventDialog" title="Cancel an Event or Meeting">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Question is, everytime my form repaints, the "hidden" text actually flashes onto the page for a split second before it becomes hidden again. (i.e. the "are you sre you would like to cancel this event/meeting text actually is visible for a split second)
Is it possible to prevent this?
I set the style on the div to "display: none". The dialog changes this when it displays.
<div id="myCancelEventDialog"
title="Cancel an Event or Meeting"
style="display: none;">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Set the height on the control to zero. This way it renders to the screen at 0 height? This is somewhat of a guess by the way...
Which browser? Also, you can experiment with CSS visibility by setting display:none and undoing that just before you pop up the dialog.
Related
After I have implemented "hover one DIV - affecting another inner DIV" I noticed strange misbehavior on iPad/iPhones. Now it takes two taps to click on the link in the DIV with hover code:
HTML:
<div class="portfblock">
<div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank">
<div class="portfblock_imgdiv_txt_dsc_over">Baby & Family Photography</div>
</a>
</div>
<!-- #portfblock1_imgdiv -->
<div id="portfblock_desc"> photoRadosti.com
</div>
</div>
<!-- #portfblock -->
CSS:
.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
visibility: visible;
}
First tap only executes on-hover action (the sub-div with the class .portfblock_imgdiv_txt_dsc_over becomes visible as needed by hover), and only the second tap executes the href link jump.
My whole page to look at the misbehavior from iPad/iPhone is here.
And the snippets of HTML and CSS code with one of the section to check are here at JSFiddle:
http://jsfiddle.net/bubencode/5doLj02e/
It works fine on computer with the mouse, but it takes two taps on touchscreens to go to the links in websites thumbnails.
Might be anyone also faced the same effect? Is it possible to omit hover action while tapping on the div with hover from touchscreen devices, and to have the link href jump right after the first tap?
Would appreciate your help!
#bubencode
This is the way hover works on mobile devices. Since the concept of "hover" doesn't exist if you don't have a cursor the choice was to trigger hover on the first tap and click on the second. The reasoning was most likely to not break sites using hover for example when showing drop-down menus or similar.
If the hover is meaningless on touch-devices, consider detecting this and removing it, making your website responsive.
I have a jqm radio button that looks like this:
<div data-role="controlgroup" data-type="horizontal">
<h3>Type</h3>
<input type="radio" name="type" id="deposit_typeTotal" value="t" checked/>
<label for="deposit_typeTotal">Total</label>
<input type="radio" name="type" id="deposit_typeIndividual" value="i"/>
<label for="deposit_typeIndividual">Individual</label>
</div>
It's part of a phonegap application which I'm currently testing on an android galaxy s2, which is where I'm seeing the problem. I've never been able to get it to break in Google Chrome on the desktop.
I have an click event attached to this button which calls a function which does various things, but I've modified it to alter the title to the value of the button to aid my debugging.
var type = $("#deposit input[name=type]:checked").val(); // Gets the value of the checked button
app.count++;$(".depositOrPayment").html(app.count+"/"+type); // Sets the title of the page
So what I'm seeing is the number of times the function has been called / t or i depending on which button I click. However, sometimes (particularly if I click the buttons quickly) I get undefined as the button's value. Once this happens, it stays as undefined no matter how many clicks I do.
Anybody got any ideas?
Cheers
Graham
There is a difference between click and tap. A tap has about a 300ms delay (around that). Anyway, you can also bind to the tap & click event in JQM (virtual mouse events).
$('#element').on('tap', function() {
...
});
or
$('#element').on('click tap', function() {
...
});
Read this: http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
So there is FastClick https://github.com/ftlabs/fastclick
Check this out What is the difference between the click and tap events?
And this http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
EDIT: I made this a wiki in the hopes that someone can answer it better than me :)
I'm getting this appearance in my form buttons - notice the double text. I'm using a style sheet generated from jQuery Mobile Download Builder (navigation, location push and transitions selected only). It seems to be jQuery Mobile that is causing this. I've tried data-enhanced="false" on the page div but doesn't seem to do anything. I don't want any styling from jQuery, just the navigation for graceful degradation. For styling, I'm using Bootstrap.
See button - http://ma.rtyn.biz/bizness/homepage2/form_button.png
<button type="submit" class="btn btn-default">Add</button>
Can anyone tell me how I can stop this from happening? I'd prefer to use a button tag rather than a link as I want it to submit the form without JavaScript.
Is it possible to call a JQM Popup using a custom image as a button. Using the following, I can call an external site, but I can't seem to get it to call a JQM popup.
<img src="../MapPin1.png" />
Yes, but you need data-rel="popup" in your anchor tag for JQM popups, and the href is supposed to contain the ID of the popup element (not a hyperlink).
Here's an example:
<img src="../MapPin1.png" />
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
See: http://demos.jquerymobile.com/1.2.1/docs/pages/popup/
I use this in my Index.aspx:
<%= Html.StandardOverlayCreateButton() %>
<div class="apple_overlay" id="overlay">
<div class="contentWrap">
</div>
</div>
Which is translating into this:
<button type="button">Create</button>
<div class="apple_overlay" id="overlay">
<div class="contentWrap">
</div>
</div>
When you press the button the popup with the Create.aspx occurs. Look at this -> Loading external pages into overlay
For me it seems that the overlay performance is slow.
And there is some strange behaviour, because I can nearly everytime see the old values in the popup. If I click the edit button and then close the popup and click another edit button, I can see the old values for a short time.
Is there a better approach of doing a popup using ASP.NET MVC and jQuery?
Are there tutorials?
Everything is being done client-side so the performance is purely down to JavaScript and jQuery code and nothing to do with any server-side code such as ASP.NET MVC.
You're using quite a few sophisticated effects with that popup, I see <div /> resizing animations, transparency, drop-shadows, the works. JavaScript performance has come on leaps and bounds with recent browsers, but it's performance but still be slow for doing very extravagant visual effects. Have you tried tuning down the visual effects with whatever modal popup JavaScript library you're using.
"And there is some strange behaviour,
because I can nearly everytime see the
old values in the popup. If I click
the edit button and then close the
popup and click another edit button, I
can see the old values for a short
time."
I assume the pop-up is actually loading an iframe which points to the 'Employee/Create' page. My guess is that when the pop-up is closed and then re-opened again with a different page, the previous page will still be sitting in the pop-up's iframe, and the "load-new-page/url" event isn't fired until the pop-up re-appears, hence why you're seeing the old page very briefly.
I had a similar problem to this, you need to tune the modal pop-up behaviour slightly so that it first loads the new page then opens the pop-up, rather than the other way around which is what it's currently doing. My solution to this was a bit hacky in that the page inside the iframe has an $(document).ready({}); event that called some JavaScript function the the iframe's parent to load the pop-up. eg. put this in your page that sits inside the iframe:
<script type="text/javascript">
$(document).ready(function()
{
window.parent.openPopup();
});
</script>
Then you need to define the 'openPopup()' JavaScript method in the iframe's parent (ie. the main page the lists your records).
do you really need the animation?
maybe you don't need the effect: 'apple' attribute?
Effects are slow, especially on IE.
http://flowplayer.org/tools/overlay/index.html#api
Look here - different post but answer is related to your question about MVC & jQuery.