Search jQuery

jQuery Forum

Screen name:
phantomiaser

phantomiaser's Profile

33 Posts

76 Responses

1 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Problems with scrollview and footer navbar / tab bar
[0Replies]
- 16-Sep-2011 09:46 AM
- Forum: jQuery Mobile
Hello all!

I already creted an issue in the GitHub issue tracking system (see https://github.com/jquery/jquery-mobile/issues/2457). I am using the latest version of jQuery mobile (beta 3) and of the experimental scrollview.

The problems are, that the nav bar / tab bar often disappears and it seems it is a problem which occurs after changing once the tab bar. Also the full page moves vertically up and down (1-2 pixels) in iPad 1 and 2.

Here is my source code: http://www.file-upload.net/download-3737927/JQM.zip.html
Perhaps someone has an idea?

Best Regards.

Disable scrolling of the web app
[1Reply]
- 13-Sep-2011 11:35 AM
- Forum: jQuery Mobile
Hello!

I use the experimental scrollview of jQuery mobile. Eveything is fine, I have a header and a footer which are fixed and a content which I can scroll.

My problem is that if I tap on the header or footer and drag my finger vertically the whole web app is moving and I see behind a gray background. To make it feel more native, I think it would be better if it does not scroll the whole web app.

How can I disable this (but the content should be scrollable)? Anyone a solution?

Best Regards.

Header navbar with an image instead of text with full height
[4Replies]
- 13-Sep-2011 09:12 AM
- Forum: jQuery Mobile
Hello!

I have a simple jQuery mobile page with a header. Normally I can put in a h1 tag and then I can write the text into it. But now I want to have an image instead of text.

I tried it, my result you can see here:
http://jsfiddle.net/cLmDC/
The problem is, that the h1 tag only have a height of 17px. But I want that the image should fill in the full height of the header navbar.

How can I do this?

Best regards.

Selector does not match with combination of id and class

[2Replies]

13-Feb-2011 07:34 AM
Forum: Using jQuery

Hello!

I have a problems with selectors. I have the following HTML code:

<div id="myDatepicker1" class="hasDatepicker" style="display: inline-block;">
    <div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <table class="ui-datepicker-calendar">
            <tbody>
                <tr>
                    <td class="ui-body-c" onclick="DP_jQuery_1297589131703.datepicker._selectDay('#myDatepicker',1,2011, this);return false;">
                        <a class="ui-state-default ui-btn ui-btn-up-c" href="#" data-theme="c">1</a>
                    </td>
                    ...

And I have these lines of jQuery code, which works fine:

$(".ui-datepicker-calendar a").live("click", function() {
    $("#myDatepicker1").hide();
});

But now I have two datepickers on one site, and I have to decide which datepicker should be hidden, so I did this (the datepickers have the ids myDatepicker1 and myDatepicker2):

$("#myDatepicker1 .ui-datepicker-calendar a").live("click", function() {
    alert("hide myDatepicker1");
 $("#myDatepicker1").hide();
});

But the alert message does never appear and I did not get JavaScript errors. It seems that the selector does not match and so the alert message and the .hide() does not take effect.

So, what's wrong here?

Best Regards.

IE9 - Alpha3 & jQuery 1.5. not working
[4Replies]
- 04-Feb-2011 10:13 AM
- Forum: Developing jQuery Mobile
Hello all!

I try to debug what's going wrong with jQuery Mobile Alpha 3 and jQuery 1.5. using with the latest IE9.
My web application was working with jQuery 1.4.4. and Alpha2. Now I replace it with Alpha3 and 1.5. and everything is okay, only in IE9, there I first get an error.

This is already a known bug: http://bugs.jquery.com/ticket/8052
So I take these lines of code:
1. ```
// Soul_Master custom bug fix for ticket #8052
if (jQuery.browser.msie && jQuery.browser.version >= 9) {
 jQuery.support.noCloneEvent = true;
}
```
and then I do not an error anymore. But, with IE9, my web application page will be blank. Using IE9 debugging, I can not find any bugs. The page is white, but the source code (HTML) is there if I'll display it.

What's wrong here? How can I debug it? removing data-role="page" I get the HTML content, but in a broken layout...

Best Regards.

Calling an anonymous function

[1Reply]

03-Feb-2011 12:46 PM
Forum: Using jQuery

Hello!

I have a problem with understanding jQuery.
In my case I have this JS file with following content (see below).
This is an anonymous function, isn't it? The problem is this line:

$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );

I want to change it, so that I can delete the .after() and the datepicker should performed on $(this).
So I did this:

$(this).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true });

But with this line of code, the layout is broken, because the styles which are addded in this anonymous function are not applied.
So, what's wrong here? Does anyone know?

```
(function($, undefined ) {
```


 //cache previous datepicker ui method
 var prevDp = $.fn.datepicker;

 //rewrite datepicker
 $.fn.datepicker = function( options ){

 var dp = this;

 //call cached datepicker plugin
 prevDp.call( this, options );

 //extend with some dom manipulation to update the markup for jQM
 //call immediately
 function updateDatepicker(){
 $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
 $( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
 $( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
 $( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
 $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
 $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
 $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false}); 
 $( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
 $( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
 $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
 var el = $(this);
 // remove extra button markup - necessary for date value to be interpreted correctly
 el.html( el.find( ".ui-btn-text" ).text() ); 
 });
 };

 //update now
 updateDatepicker();

 // and on click
 $( dp ).click( updateDatepicker );

 //return jqm obj 
 return this;
 };

 //bind to pagecreate to automatically enhance date inputs 
 $( ".ui-page" ).live( "pagecreate", function(){ 
 $( "input[type='date'], input[data-type='date']" ).each(function(){
 $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
 }); 
 });
})( jQuery );

Experimental Datepicker -> layout broken when datepicker is attached to the input field instead of a div
[2Replies]
- 03-Feb-2011 07:50 AM
- Forum: Developing jQuery Mobile
Hello!

I saw the experimental UI Datepicker and I integrated it with success.
The problem is, that I do not want to have it always be visible. It should be like the UI Datepicker, only when the text field has the focus, the Datepicker should be displayed.

So I searched in the code, and there are these lines (https://github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js):
1. ```
//bind to pagecreate to automatically enhance date inputs	
$( ".ui-page" ).live( "pagecreate", function(){		
	$( "input[type='date'], input[data-type='date']" ).each(function(){
		$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
	});
});
```
So I know, putting the datepicker not to the input field, it will always be displayed. So I removed the .after("<div />"). But removing this, the design is totally broken.

What can I do to have the nice jQuery Mobile Datepicker design, but also the visibility only if the user cklick into the date text field?

Thank you in advance & Best Regards.

Experimental UI-Datepicker - only visible if the focus on input type date field and lay over the content
[2Replies]
- 03-Feb-2011 06:14 AM
- Forum: jQuery Mobile
Hello all!

I use the experimental UI datepicker: http://jquerymobile.com/test/experiments/ui-datepicker/
It works, but I have one problem:
The datepicker is always visible. I want that it is only visible, if a user click into the input type="date" field and will be invisible if he left the field by clicking to another text field or on the screen (leave the focus of this date field).

They do this:
1. $( ".ui-page" ).live( "pagecreate", function(){
2. $("input[type='date'], input[data-type='date']").each(function(){
3. $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true}) );
4. });
5. });
6. })( jQuery );
So how can I modify this, so the datepicker will only be visible if the date-field has the focus? And it would be nice if the datepicker will be lay over the content... and not placed below, so the content below will be moved downwards.

Why isn't it possible to remove the .after() with the div? The styling is totally lost...

Best Regards.

jQuery Mobile logo
[2Replies]
- 22-Jan-2011 05:56 PM
- Forum: Developing jQuery Mobile
Hello all!

I already put this question in the jQuery User forum, but perhaps, this is the better one.

I am searching for a high res jQuery Mobile logo. I only found the one in the documentation, but this is not very good to put into presentation slides.

Where can I get a better one?

Best Regards.

jQuery Mobile Logo
[1Reply]
- 21-Jan-2011 08:57 AM
- Forum: jQuery Mobile
Hello!

I am searching for a jQuery Mobile logo image in a good quality.
I only found this one on the documentation page: http://jquerymobile.com/demos/1.0a2/docs/_assets/images/jquery-logo.png

But the quality is not good, because I want to integrate it in a PowerPoint presentation.
Where can I get a better one?

Best Regards.

Text input fields -> readonly -> same design
[1Reply]
- 15-Jan-2011 07:26 AM
- Forum: jQuery Mobile
Hello all!

I have a web application with a form and text input fields like this one:
1. <div data-role="fieldcontain">
  <label for="label-name">Name:</label>
  <input type="text" name="myname" id="label-name" readonly value="test name" />
  </div>
2. <div data-role="fieldcontain">
  <label for="label-description">Description:</label>
  <input type="text" name="mydescription" id="label-description" value="test description"/>
  </div>
The problem is, that one of them is readonly, but the user can not see that, because both text input fields has the same design. Isn't this yet implemented in jQuery Mobile Aplha 2?
And if not, what can I do that the user can not click into it (the border is blue-lighted) and the user will see that it is readonly? Does someone have an CSS style for this?

Best Regards.

Problem with header data-position="fixed" in combination with software keyboard
[4Replies]
- 14-Jan-2011 06:06 AM
- Forum: jQuery Mobile
Hello!

I develop a web application and I have a header with data-position="fixed", here the source:
1. <div data-role="page" data-theme="b">
    <div data-role="header" data-position="fixed">
    <h1>My Header</h1>
    </div>
    <div data-role="content">
2.     
    </div>
    <div data-role="footer">
    <h4>My Footer</h4>
    </div>
I put some form data with text input fields. The header is fixed in top. Opening the keyboard, it moves from below into the screen. Then the header appears on the new top of the page.
Closing the keyboard the keyboard moves away, but the header is fixed in the middle of the screen, there is no update, that the header shoud move to the top.

I created a full working example here http://jsbin.com/ujele4/ and here you can view the original source: http://jsbin.com/ujele4/edit

Here are the screenshots which shows the error after closing the software keyboard.
First on iPad the screenshot of the opened keyboard, everything fine:
http://img291.imageshack.us/img291/4025/img0001cs.png
And here the error after tapping on the software keyboard lower right:
http://img208.imageshack.us/img208/9461/img0002i.png

So, what's wrong here? It seems there must be an event triggered, so that the header will move to the new top of the view.

Best Regards.

Data-theme="d" -> problem with IE9
[1Reply]
- 13-Jan-2011 03:25 PM
- Forum: jQuery Mobile
Hello!

I develop a web application and I know that IE9 is not a supported webbrowser, but it is working fine in IE9 with one problem:

If I have a header or a footer with data-theme="d", it is not a grey color, it is blue/black.
I created a sample page here: http://jsbin.com/evire3/ - here you can see and edit the source: http://jsbin.com/evire3/edit/

All other themes a, b, c and e are working fine, but what's about theme d? I take a screenshot, that you can see the bad result, attached to this post.

I checked the css file, but I do not know what's wrong... Does anyone know?

Best Regards.
Attachments
- Download
  Delete
  theme-d-ie9.png
  Size: 2.61 KB Downloads: 1641

Use String as an array to make $.each for iteration
[1Reply]
- 11-Jan-2011 04:02 PM
- Forum: Using jQuery
Hello!

I get a XmlHttpRequest responseText from a AJAX JSON call. This is a string.
I created an example:
1. var testString = "{'desc':'text1','name':'text2'}";
  $.each(testString, function(key, value) {
  alert(key+': '+value);
  });
What I want to get are two alert messages with the content:
desc: text1
name: text2

Instead I get every char of the string each in one alert message.
How can I transform the String to an Array, or get in this case the two key-value pairs?

Thank you in advance & Best Regards.

Listview with search bar -> search filters list-divider
[1Reply]
- 11-Jan-2011 05:14 AM
- Forum: jQuery Mobile
Hello!

I have a listview in which I have one list-divider, because I take it as a kind of header.
The problem is, that I type into the search bar a letter / a word which is not in the list-divider heading, the list-divider is filtered.

Here is a full example: http://jsbin.com/ixuzi3/
Here you can see the code: http://jsbin.com/ixuzi3/edit

What need to be done, that the list-divider won't be filtered by the search?
Or how can I put a list element into the list, so thet is has the same style, and it won't be filtered?

Also, the list-divider element, if I use the mouse and hover over it, I get a hand symbol, which normally indicates, that this is a link, but it is not a hyperlink. How can this be avoided?

Best Regards.

Problems with changing a page: JavaScript not executed and wrong theming.
[2Replies]
- 10-Jan-2011 03:18 PM
- Forum: jQuery Mobile
Hello!

I have a big problem with my web application built with jQuery Mobile.
I created a little demo here: website.

My application is REST based, so the URLs are like:
/project/2/
So the project page is called, with projectid=2.

In the demo I have a link to another website. The problem is, that in the linked page the JavaScript is not executed, because it is not put into the DOM.
Also, the scructure is not right anymore, I get a
1. <div data-role="page" id="../folder2/5/" ...>
and the real id of the second page is placed into a new div, see Firebug / Safari development element view.
The data.theme should be b, but the second page is the standard theme.

So, I have two problems: I need to call a new website, but I want to execute the JavaScript and I want that the data-theme will be correct.

Thank you very much for your help in advance!

Best Regards Tim.

Listview - a clicked list element should be highlighted
[4Replies]
- 06-Jan-2011 08:58 AM
- Forum: jQuery Mobile
Hello!

I create an iPad web application with jQuery mobile and I have a listview on one page with other elements.
In my case I have a slpitted listview and clicking on the first link, the page remains. Clicking on the second link, a new page is loaded.

The problem is, if a user click on the first link, this list element is not highlighted permanently. How can I do this?
I created a full working demo: http://jsbin.com/ozido3/

For example clicking on "Audi", Audi should be highlighted for so long if another element in this list is clicked.

Can anyone help me?

Best Regards.

Changing the text of a button -> button resize
[5Replies]
- 06-Jan-2011 08:28 AM
- Forum: jQuery Mobile
Hello!

I have a button in the footer section and onclick I want to change the text of the button.
Unfortunately, changing the text of the button, the sze of the button shrinks.

I created a full working example here: http://jsbin.com/ajiji3/

Perhaps someone know what can be done to prevent this?

Best Regards.

Avoiding the orientation change of the page
[0Replies]
- 03-Jan-2011 09:03 AM
- Forum: jQuery Mobile
Hello!

I have a web application built with jQuery mobile Alpha2. Now I have one page which I want only to display in landscape mode. How can I do this with jQuery mobile or with jQuery or pure javaScript?

Does anyone know?

Best Regards.

Problems with drag and drop of elements on iPad - click event is called twice
[1Reply]
- 31-Dec-2010 08:08 AM
- Forum: jQuery Mobile
Hello!

I am using jQuery mobile for developing an iPad web application. Because with jQuery mobile it is not possible to drag and drop elements, I used this library, and everything is okay, I can drag elements:
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

Does anyone can help me? Thank you a lot in advance & Best Regards.
But the problem is, that this draggable element also have a clickable button and if I click it on desktop browser, a alert message occurs once, but on iPad twice. Here is the JavaScript code:
```
$(document).ready(function() {
    $(".note").draggable();
    $('.closebutton').click(function() {
        alert("test");
    });
});
```
I created a full working demo here:
http://jsbin.com/oliwo/2/
Can anyone tell me what's the problem? It seems that this library calls the click-event one more time...?!

Best Regards.

rel="external" -> no transition effect, without wrong URL
[2Replies]
- 21-Dec-2010 07:04 AM
- Forum: jQuery Mobile
Hello!

I have a single webpage which I call with
localhost:8080/myproject/projects/

Within this page there is a hyperlink to another webpage:
1. <a href="person/13" ...>Link to Person with ID 13</a>
Clicking this link, my URL is:
localhost:8080/myproject/projects#person/13
But because the URL is wrong, it should be
localhost:8080/myproject/person/13
my layout is broken.

Doing a rel="external" the URL is okay, but there is no transition effect.
So what can I do to get the right URL and have a transition effect?
The webpage should be separated to two different files.

Best Regards.

More than one draggable element simultaneously?
[1Reply]
- 17-Dec-2010 03:10 PM
- Forum: jQuery Mobile
Hello all!

I have a problem which does not cover jQuery mobile directly.
I am developing with jQuery mobile an application which should run on iPad.

I know, that iPad supports eleven finger (touch points) simultaneously. Is this also possible in iOS Safari?
I build this little Demo Page.
There are two images which are draggable with jQuery UI. But I can not drag both with iPad simultaneously.

So what's wrong here? Or are there limitations?

Best Regards.

Hyperlink to another page is wrong
[0Replies]
- 17-Dec-2010 05:25 AM
- Forum: jQuery Mobile
Hello!

I have a problem with my hyperlink. I have the initial first page:
http://localhost:8080/myproject/project

There I want to link to the next page (12 is the ID of the person I want to display in this example):
http://localhost:8080/myproject/person/12

So I did in the first page a
1. <li...><a href="#" ...>First link</a><a href="person/12" data-transition="slide" ...>Person12</a></li>
So as you can see I have a splitted list view. Clicking on "Project12", I get the page:
http://localhost:8080/myproject/project#person/12

So, how should the link be written, so I can get to the right URL and I can use a data-transition?

Does anyone has an idea?

Best Regards.

---

Update: Integrating a
1. rel="external"
I get to the right page, but there is no data-transition. It seems that the data-transition is disabled with rel="external". So, I'd like to have the transition but what can I do without rel="external", so that the right page is called?

Dialogs as an overlay.
[7Replies]
- 15-Dec-2010 03:52 PM
- Forum: jQuery Mobile
Hello!

I have a form that a user submit. After the data is updated in a backend database, I want that the user will get a visual feedback. I thought about a liitle dialog like this in the center of the page as an overlay:

Is this possible to make with jQuery mobile? I only found dialogs which cover the whole screen.

Best Regards.

Changing the text of a HTML button
[6Replies]
- 14-Dec-2010 11:28 AM
- Forum: Using jQuery
Hello!

I have a problem changing the text of a HTML button.
Code:
1. <div id="projectform">
2. <form action="#" method="post">
3. ...
4. <button type="submit">.</button>
5. <h6>.</h6>
6. </form>
7. </div>
Now I can change the text of the h6 tag with
1. $("#projectform form h6").html("new text for h6");
This works fine. But what I want is to change the text of the button
1. $("#projectform form button").html("new text for button");
And this does not work. What's wrong here? Why can I change the h6 text, but not the text of the button?

Best Regards.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend