I have a button at the top of the page:(Button-A)
<div class="menu-btn-right loginandadd" >
<a href="#" id="A" class="some_class" title="something"</a>
</div>
Then I have another button half way through the page (Button-A is not visible anymore):(Button-B)
<a id="B"><img class="start1addproductbutton" src="#" alt="empty" width="1" height="1" />
</a>
Also, I have the following script:
<script>//
<![CDATA[ jQuery("#B").click(function(){
jQuery("#A").trigger('click');
return false; });
// ]]></script>
In this current setting, when the Button-B is clicked, Button-A is clicked automatically.However since the Button-B is located in the middle and Button-A is not visible, when the Button-B is clicked, users do not know that Button-A is clicked unless they manually scroll to the top.
I tried to add an anchor so that when the button-B is clicked, the page is scrolled to the top and users can see that Button-A is automatically clicked.
However in my test due to the javascript, the anchor tag is not working.
What can I do so that when Button-B is clicked, the page is scrolled to the top and Button-A is still automatically clicked?
Thanks
Try this code which scrolls to element A manually, instead of triggering the click event of that element.
<script>
jQuery("#B").click(function(){
jQuery('html, body').animate({
scrollTop: jQuery("#A").offset().top
}, 2000);
return false;
});
</script>
Related
I'm using jquery mobile 1.4.5. In some instances, I generate a pop-up when a user clicks a link and fill that popup with the results of an ajax call. The generated code taken from firebug after the ajax call returns looks like:
<div id="detailsPopup-popup" class="ui-popup-container ui-popup-active" tabindex="0" style="max-width: 1250px; top: 68.9967px; left: 146px;">
<div id="detailsPopup" class="ui-content ui-popup ui-body-a ui-overlay-shadow ui-corner-all" data-role="popup" style="width: 971.538px;"><a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" data-iconpos="notext" data-icon="delete" data-theme="a" data-role="button" data-rel="back" href="#">Close</a>
<div data-theme="a" data-role="header">
...content...
</div>
</div>
</div>
The popup is showing up fine. I'd say 90% of the time, when i click the close button, the popup closes. However, 10% of the time it just sits there. Usually it'll highlight the close button as blue, indicating it is active or something but the window itself stays open. If I click around in the popup box a few times and keep trying, it will eventually close, but it is extremely frustrating and user unfriendly.
I'm not sure why it doesn't work that small fraction of the time? I've included a screenshot of what the modal looks like. I don't know if the parent div (the blue outline) is somehow covering half of the button and so that is catching the clicks sometimes?
any thoughts as to what is going on here? I've only been able to try in android/chrome and not an iphone, so i don't know if it is browser specific.
Thanks!
edit: adding javascript code that parses ajax response and generates window. NOTE: i know i'm putting everything in the header div right now (for padding purposes), however I don't think that's causing the issue. I stripped out a lot of the contents of the window for brevity.
function showPopup(jsonResponse){
// parse json response
var obj = jQuery.parseJSON( jsonResponse );
// close button
var closeBtn = $('Close').button();
// start to construct window contents from response
var content = "<div data-role=\"header\" data-theme=\"a\">";
content += '<table border="0" style="width:100%"><tr>';
content += '<td style="vertical-align:top;">';
content += '<a data-ajax="false" href="show.php?id='+obj.id+'"><img src="'+obj.pic+'" style=\"max-height: 2em;\"></a><br><b>'+obj.title+'</b></div>';
content += '</td></tr></table>';
// close header div
content += '</div>';
// Popup body - set width is optional - append button and Ajax msg (was 1.5 width originally)
var popup = $("<div/>", {
"id": "detailsPopup",
"data-role": "popup",
"class": "ui-content"
}).css({
"width": $(window).width() / 1.3 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$(".ui-page-active").append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("#detailsPopup").on("popupafterclose", function () {
$(this).remove();
}).on("popupafteropen", function () {
$(this).popup("reposition", {
"positionTo": "window"
//x: 150,
//y: 200
});
}).popup({
"dismissible": false,
"history": false,
"theme": "a",
"overlayTheme": "b",
"class" : "ui-content"
}).popup("open");
} // end showPopup
ok, so i finally figured it out. was 100% my fault (as expected). i was overriding some default JQM css, and of course it caused the error. on another part of the page i had to try to fit 3 buttons on the same row, and had used the following to do it.
.ui-btn{
font-size:12px;
}
(originally: 1em)
That shrunk the buttons enough to fit that other requirement, but that also caused the close button to not show properly (as you can see below it was missing the outer border). Thus, I'm guessing it was just a weird offset/padding/etc error caused by the differing font-size that was the reason behind the clicks not registering or being handled properly.
(insert advice to never override jqm css)
thanks!
Is there anyway to make the button hit area larger in jquery mobile. i have two buttons in the header of the app and if i don't touch theme right in the middle they won't work.
thanks
One way to expand hit area around button is to add invisible wrapper around button with some padding. Then attach tap event to the wrapper and trigger tap event on button itself.
Here is example
html
<div id='button-wrap' style='padding: 20px;'>
<a id='button' href="#" data-role="button" >Button</a>
</div>
javascript
$('#button-wrap').on('tap', function(e){
$(this).find('a').trigger('tap');
});
$('#button').on('tap', function(e){
e.stopPropagation();
alert('tapped!');
});
I've been having some trouble recognising a swipe event on a popup using jquery mobile. I have successfully implemented swiping between pages but can't seem to get it working on a popup.
My popup contains an image and a close button. When I swipe it the page behind it gets swiped and the popup disappears. The callback function bound to the swipe event is never being called.
Here is my HTML code:
<a href="#vikingmanager1popup" data-rel="popup" data-position-to="window"><img src="images/vikingmanager1_thumb.jpg" />
<div data-role="popup" id="vikingmanager1popup" id="pic">
<img class="popphoto" src="images/vikingmanager1.jpg" />
</div>
Here is my js:
$(document).on('swipe',"#pic",function() {
console.log("Hello");
});
Ok seem to have solved it myself...
The ID should not have been placed on the div but on the image itself.
Ive built a webpage with 'tabs' using rails. When a user clicks a tab, a new page loads. I want to format it so the tabs are always in the same place on the page as a user clicks them. This happens as long as the user has not scrolled down on the page. If a user has scrolled down, clicking on the tab will refresh the page and it is no longer scrolled down - which make clicking the tabs look bad. Is there a way to keep the spot on the page where the user has scrolled down, without using Javascript? If it must be done with Javascript, any suggestions?
T
alt text http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png
Without Javascript, nope. If they were at an exact location, you would be good to go, using an anchor (example.html#anchor), but since you don't know the exact location, you're pretty much out of luck.
So sorry!
You can do it but you will need a small amount of Javascript and some CSS hiding.
Suppose these are your tabs:
<ul id="nav">
<li class="tab">Content 1</li>
<li class="tab">Content 2</li>
</ul>
And suppose this is your content:
<div id="content" class="content1">
<div id="content1">
<h1>Some content</h1>
<p>This is my content.</p>
</div>
<div id="content2">
<h1>More content</h1>
<p>This is my other content.</p>
</div>
</div>
What you would need to do then, and I am demonstrating using the Ext.Core library, is:
<script type="text/javascript">
Ext.onReady(function() {
Ext.select('.tab a').on('click', function(ev, el) {
ev.stopEvent();
var content_id = el.href.replace('#', '');
Ext.get('content').removeClass(['content1', 'content2', ...]).addClass(content_id);
});
});
</script>
You also need a little CSS like so:
#content.content2 #content1,
#content.content1 #content2 {
display:none;
}
This hides the other content we are not looking at. We set a class on the content container called contentN which is the href of the link for that tab. So if we have a tab with href="#content1" then we add a class to the content container called content1 and now that content is visible and other content is not.
The Ext.Core samples page has another way of doing it, and they have an example up showing it working. Their way is more involved than this.
I currently use jTemplates to create a rather large table on the client, each row has a button that will open a jQuery UI dialog. However, when I scroll down the page and click on one of those buttons, jQuery dialog will open, but the scroll position get lost and the page jumps back to the top (with the blocking and the actual dialog showing off the screen). Has anyone seen or know what might cause this problem?
Thanks.
Are you using an anchor tag to implement the "button" that pops the dialog? If so, you'll want the click handler that opens the dialog to return false so that the default action of the anchor tag isn't invoked. If you are using a button, you'd also need to make sure that it doesn't submit (by returning false from the handler) and completely refresh the page.
For example,
$('a.closeButton').click( function() {
$('#dialog').dialog('open');
return false;
});
<a class='closeButton'>Close</a>
If your buttons work with an html anchor tag with href="#" replace the href for example by href="javascript:;" or any other method that you use to disable the href. The reason why the scrolling happens is because of href="#" scrolls to the top of your page.
change your code like this
$('a.closeButton').click( function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
You can try :
scrollTo(0, jQuery("body"));