jQuery Forum

nav (tab) bar problem in jqm
[2Replies]
- 08-May-2013 03:28 PM
- Forum: jQuery Mobile
did anybody notice this ? my tab bar in the down comes to middle of screen if keyboard appears for a textbox or the drop down appears to select a item in the list . is this a known bug ? how to get around this ? pls see the screen shot

  <div data-role=page id=mypage>

<form>

<div data-role=header style="text-transform: none;">

<a href="#loginpage" data-role="button" data-icon="arrow-l">Logout</a>

<h1>Ask</h1>

</div>

<div data-role=content id=mypagecontent>



<fieldset>

<label style="text-transform: none;">Section :</label><select name='section'>

<option value='83'>Uncategorized</option><option value='78'>cat1</option><option value='79'>cat2</option><option value='80'>cat3</option><option value='81'>cat4</option><option value='82'>cat5</option><option value='84'>cat6</option>

</select>

</fieldset>

  </form>

</fieldset>

</div>



<div data-role='footer' data-id="rsfooter" data-position='fixed' style="text-transform: none;">

<div data-role='navbar' data-iconpos="top" style="white-space: normal;">

<ul>

<li>

<a href=#mypage data-icon="grid" class="ui-btn-active ui-state-persist" >New Question</a>

</li>

<li>

<a href=#mypage1 data-icon="gear">My Questions</a>

</li>

<li>

<a href=#mypage2 data-icon="gear">Latest Questions</a>

</li>

<li>

<a href=#mypage3 data-icon="gear">Latest Answers</a>

</li>

</ul>

</div>

</div>

</div>
Attachments
- Download
  Delete
  1.png
  Size: 137.87 KB Downloads: 45

form based website or mvc ?
[1Reply]
- 15-Apr-2013 01:55 AM
- Forum: Getting Started
I have a confusion.

I found html jquery and ajax with json for server communication very fascinating.

But is it the way to go for building a web app ?

I am inclined towards this because I also want to do a mobile app out of it.

If this is the right approach, what are the challenges ?

Should I put all my web pages in separate divs and load / populate on the basis of requirement ? will it be slow ?

thanks for putting some light and thought process.

regards
jgs

pc and mobile web app
[3Replies]
- 26-Feb-2013 09:47 AM
- Forum: jQuery Mobile
hi all,

I am asked to do a webapp which can run on both PC and mobile.

I am inclined towards phonegap, but it will not work for PC.

will sencha be my answer ?

regds

fade out image on hover and show some hrefs on top of it
[1Reply]
- 22-Feb-2013 06:46 AM
- Forum: Using jQuery
i am in dire need of showing 5 hrefs on top of an image on hover of it. the image would be in faded colored background, and on mouseout hrefs will disappear and image will be 100% visible

the closest i could do is

<style>#option { display: none; }</style>
<div id="container" class="cont">
<a href="#" id="username" class="nomeutente" title=""> Stefano Imparato </a>
</div>
<div id="options" >
<a href="#" id="user" title="">usr</a> </br>
<a href="#" title="">impostazioni</a> </br>
<a href="#" title="">esci</a>
</div>
<script type="text/javascript">$("#container").mouseover(function(){
$("#container").append($("#options"));
$("#options").css({
'display' : 'block'
});
$(this).find('#user').text(usr);
});

$("#container").mouseout(function(){
$("#options").css('display','none');
});
</script>

thanks in advance
also i need this enacted on a class. not in id

regards

listview inside listview
[4Replies]
- 14-Feb-2013 01:08 PM
- Forum: jQuery Mobile
I want listview dynamically populated with li items which contains a collapsible with another dynamically formed ul li.... how can i achieve this ?

function formatList(qarr) {

var str = "";

for(var i=0; i < qarr.length; i++) {

/* form the list item */

str += '<li data-role="list-divider">' + qarr[i].title + ', ' + qarr[i].date + ' <span class="ui-li-count">'+ qarr[i].c_answers + '</span></li><li ><p style="white-space: normal;">' + qarr[i].question + '</p><br><div data-role="collapsible" data-content-theme="c" data-collapsed="false" data-mini="true"><h1>Answer(s)</h1><ul id="answerlist" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="d" style="text-transform: none;"><li>item 1</li><li>item 2</li></ul></div></a></li>';

}

return str;

}

currently i am trying this code, but the ul li inside it comes as radio button, also collapsible is not applied.

please helpp

animated addition to listview
[0Replies]
- 12-Feb-2013 12:42 PM
- Forum: jQuery Mobile
i got ios like swipe delete
http://andymatthews.net/read/2011/02/18/Adding-iPhone-style-swipe-to-delete-button-to-a-listview-component-in-jQuery-Mobile

which is very good.

is there any similar item add with animation developed in jqm ?

iphone 5 and dialog problem
[1Reply]
- 07-Feb-2013 09:17 AM
- Forum: jQuery Mobile
hi all,

I have 2 separate problems related to my phonegap app.

1. I created phonegap project from cordova 2.1

when i test in iphone 5 (bigger height device) i see blank spaces on top and bottom. how to fix this ? if it is resizing for ipads why it is not resizing for iphone 5 ? I inspected the nib file, there is no way to resize the view controller ! and autoresizing masks are also not editable !

2. I have a dialog as first page [I chose dialog because i dont have much content]. it appears on top by default. to make it appear in center, i gave a topmargin 30% thoguh that appears centered, it adds a scrolling to the body, how to stop it from scrolling and make the dialog appear in the center ?

regards

3 vertical divs
[4Replies]
- 11-Jan-2013 01:24 PM
- Forum: Using jQuery UI
what i am trying to do is

3 vertical divs with categories, grid of images (pagination i will do next step) and messages

i try following way, but grid and accordion are screwed up. request wisemen to advise, i am kinda stuck here

____________________________________________________

<html>

<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#mainContainer {
text-align: center;
width='100%'
}
#categories {
float: left;
border: 10px;
background-color:red;
width: 25%;
height:500px;
}
#album {
display: inline;
border: 1px;
background-color:green;
width: 50%;
height:200px;
}
#messages {
float: right;
border: 1px;
background-color:blue;
width: 25%;
height:100%;
}
</style>
<style>
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#selectable li {
margin: 3px;
padding: 1px;
float: left;
width: 100px;
height: 80px;
font-size: 4em;
text-align: center;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"
/>
</head>

<body>
<div id='mainContainer'>
<div id='categories'>categories
<div id="accordion">
<h3>Category 1</h3>

<div>
<p>
<ul>
<li>sc1</li>
<li>sc2</li>
<li>sc3</li>
</ul>
</p>
</div>
<h3>Category 2</h3>

<div>
<p>
<ul>
<li>sc1</li>
<li>sc2</li>
<li>sc3</li>
</ul>
</p>
</div>
<h3>Category 3</h3>

<div>
<p>
<ul>
<li>sc1</li>
<li>sc2</li>
<li>sc3</li>
</ul>
</p>
</div>
<h3>Category 4</h3>

<div>
<p>
<ul>
<li>sc1</li>
<li>sc2</li>
<li>sc3</li>
</ul>
</p>
</div>
</div>
</div>
<div id='album'>
<div>
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ol>
</div>
</div>
<div id='messages'>messages
<marquee behavior="scroll" direction="up" height="250" scrollamount="2"
scrolldelay="10" ">
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
</marquee>
</div>
</div>
</body>
</html>
____________________________________________________

Initial landing page based on condition
[1Reply]
- 10-Jan-2013 08:56 AM
- Forum: jQuery Mobile
I have a main.html with 2 pages (data-role = page)

Now I see the splash screen then page 1 and page 2

my functionality required that I go to page 1 or page 2 depending on some condition.

Currently, it shows page 1 and if condition is true goes to page 2

but i dont want that way, i want page 2 visible after the splash if the condition is true,

please gimme some ideas how can I achive this

thanks in advance :)

regards
j

css or javascript calculation
[4Replies]
- 21-Dec-2012 12:58 AM
- Forum: jQuery Mobile
Hi all,

in our app, we were first used css media queries for different devices. we had numerous problems, when we fixed for a particular device, it upset the other 2 devices...

then we decided to calculate dynamically the control sizes, this somehow fixes the problem,

but what is the JQM recommended usage ? media query or javascript ?

regards

formbox resizing
[0Replies]
- 26-Nov-2012 06:13 AM
- Forum: Developing jQuery UI
i am using formbox example to do my website.

in the login menu when login successful, i just wanna reduce the size to contain the bluebutton only, where as i am able to hide all the content above bluebutton but the li height does no reduce to contain logout btn.

any ideas pls

http://addyosmani.com/blog/formbox/

this is the example i use

my code

$('#bluebutton').click(function () {
console.log('login clicked');
$('#loginform').fadeOut();
$('#tab1').resize();
// $('#tab1').height($(this).height());
});

i cant use .height because it needs me to calculate height as per the controls, is there a better way to adjust to height as per the content available ?

all pages in one html ?
[9Replies]
- 19-Nov-2012 08:26 AM
- Forum: jQuery Mobile
Hi All,

I am trying to do a phonegap app.
what is best practices for jqm ?

keep all pages (data-role=page) in 1 html file and javascripts in one js file and traverse pages with $.mobile.changePage or keep all pages in separate html files and do a window.location.href ?

in android window.location.href actualy opens a new activity which looks ugly.

also window.location.href stops all transitions for me (though transition is not a must for me in this application !)

I would appreciate the pundits telling me the best practices.

thanks in advance and regards

tabbar moves up in iphone when textbox gets focus
[1Reply]
- 22-Oct-2012 10:21 AM
- Forum: jQuery Mobile
I have this JQM page in phonegap app, it works just fine. but behaves abnormal sporadically

when i go to page 2 and come back to page 1 text box on focus moves the div up and tab bar goes above textbox, ant i stop tab bar moving up ?

here's my code

<div data-role=page id=page1>
  <div data-role=header data-position='fixed'>
  <h1>Page 1</h1>
  </div>

  <div data-role=content id=page1content>
  <p align="center"><img id="applogo" name="applogo" src="icon.PNG" ></p>
  <div data-role="fieldcontain">
  <p><input id="userid" name="userid" title="userid" type="text" placeholder="User ID" class="text-input" autocomplete="off"autocorrect="off"></p>
  <p><input id="password" name="password" title="password" type="password" placeholder="Password" class="text-input"></p>
  <p align="center"><input id="buttonLogin" name="buttonLogin" value="Login" type="button" class="button-click"onclick="loginClicked()"></p>
  </div>
</div>
  <div data-role='footer' data-id="appfooter" data-position='fixed'>
  <div data-role='navbar' data-iconpos="top">
  <ul>
  <li>
  <a href='page1.html' data-icon="page1" class="ui-btn-active ui-state-persist">page1</a>
  </li>
  <li>

  <a href='page2.html' data-icon="page2" data-transition="slide">page2</a>
  </li>
  <li>
  <a href='page3.html' data-icon="page3" data-transition="slide">page3</a>
  </li>
  </ul>
  </div>
  </div>
  </div>

Response title

Attachments

jQuery Forum

Activity Trend