I'm building a site which has a mobile branch .
I succeed to build the site as many browsers from PC's can take the same view and work fine .
now I'm moving to build the site as the mobile can browse the site from maybe mobile chrome or Firefox mobile. I did that but I'm facing a small problem .
many pages of the site has text boxes which you know if you click on it using the mobile
-for example galaxy note 2 - the soft keyboard will show it self on the screen ,two things happens during this process :
1- the screen will zoom itself until reach the specific text box that you have clicked on.
solution : I solve it by this command
,so now the screen will not zoom itself.
2- If I have a page which have an including file ,the main div will change his position until reach the above div -included file- and the hall page will be not ordered .
first I will she a brief example about what I mean :
note :my back end is php using Yii framework ,just for info ^_*
page.php:
<div id="div1" style="width:100%;position:relative;margin-bottom: 10px"><?php
if (Yii::app()->user->isGuest)
include 'flash.php'; ?></div>
<div id="div2" style="width:100%;position:relative;margin-bottom: 10px">
<form action="getup" method:"post">
<input type="text" name="text1" >
<input type="text" name="text2" >
// submit button
</form>
now after this brief code , i will show you exactly what is happening , when browse the page from mobile chrome browser the page will be ordered ,but if you click on any text box as text1 for example , what occurs is that DIV2 will move itself up above DIV1
-included file- because the soft keyboard will show it self on the second half on the screen.
after this example i will oppose my question :
my question is : is there any code -CSS or Java Script - will stop the rising process which is happening to the DIV2 after the soft keyboard show it self on the mobile screen?
Perhaps this behavior is related to css you're using? Try removing position:relative from your inline style, maybe it will help. Another thing is that input should be self closing tags and div2 closing tag is missing. You don't need to set width of the div tag to 100% as it is its default value.
Related
I have two scripts running at the same time. 1 is jqueryUI and the other is touchpunch. I have a signbox made in canvas where users can digitally sign. The problem occurs on the mobile. THe signature are draggable as they are on a contract. but on mobile phones draggable does not work. So I used touchpunch, it makes the draggable work on the mobile but at the same time clicking on the signature box turns off. CLicking on the sign box open a modal box where you can sign. If I put touchpunch at the bottom, draggable works and box opening stops. If I put jqueryUI at the bottom, the touch works but the draggable doesnt. What I'm trying to find a way to only put the jqueryUI only. and when the user clicks the box and the sign box opens, then touchpunch gets added at the end. So after signing touchpunch start working and the sign becomes draggable. What I have done so far is this:
alert("appending");
var x = document.createElement('script');
x.src = '{{ asset("js/touchpunch.js") }}';
document.getElementsByTagName("body")[0].appendChild(x);
alert("done appending");
}
When I inspect, I do see that after opening the box, the script does get added but the box still doesnt become draggable. The overall question is, how can I add one script onclick and make it work. Or if you have any other suggestion, please let me know.
I am creating an app for network design and I need to be able to load a blank div when the user clicks on the New button.
The JQuery UI has a functionality exactly how I want it to be but it uses text area and if I use this, I won't be able to click and drag into the div.
This is the link.
These are my codes found on liveweave: http://liveweave.com/neFP7y and the following is the screenshot:
I need the tab to open in the blank space. Any idea how I can do this please?
Thanks.
<div> your page
<iframe src="http://www.w3schools.com//" height="400px;"></iframe>
</div>
Suppose I have a div whose content is dependent on the button click on top of that. The content of three button clicks are stores in variables one, two and three.
<div id="onebutton"></div>
<div id="twobutton"></div>
<div id="threebutton"></div>
<div id="content"></div>
Using jQuery, when the onebutton div is clicked, I put the HTML content of variable one into the content div:
$('#content').html(one);
Now, what sometimes happens is that the content is present in the div, but it does not show. It sometimes shows when I hover the mouse over the div and gets shown in parts (i.e. the browser shows only some part of the div where my mouse is).
There is a tool called Active X-Ray Googles. When I activate it and take my mouse over the content div, it is also shown.
I do not know what is wrong. I have tested it in 20 versions of Chrome, but it does not work on one of them. The version it does not work on is the latest version of Mac OS X Mavericks on a MacBook Pro Retina.
I'm using jQuery mobile for a project and need to react to vclick events when a popup is opened.
My problem is that the vclick event is just fired inside the popup, not on the whole page.
You can find a minimal example here.
Thanks in advance for your help!
Your code works correctly, I dont know if this was your intention but you are using popup overlay panel. Unlike normal panel in jQuery Mobile 1.3 version, popup overlay panel has an hidden div witch stretches full width and full height of the screen.
What looks like a click on a mail page is just a click on a hidden overlay div.
You can even test this, use Firefox or Chrome and take a look at a popup HTML, you will find that DIV.
In your case this DIv is a problem:
<div id="panelPopup-screen" class="ui-popup-screen in" style="height: 611px;"></div>
You can always switch to jQuery Mobile 1.3 RC1, use its panel, just make it semi transparent.
EDIT :
Found a solution for you, here's a live working jsFiddle example: http://jsfiddle.net/SC8hH/
This will fix your problem:
#panelPopup-screen {
display: none;
}
I'm trying to use the XFBML version of the Facebook Like button. On a page with zero likes, the main problem is the order of events when the page loads:
HTML loads
Like button loads
Button expands height, pushing content below it down
Button sees it has no likes
Button reduces height, moving content below back up
This happens regardless of how the Javascript SDK is loaded (standard or asynchronous) and if "show faces" are enabled/disabled.
Is there a way to prevent this distracting automatic resizing from happening?
Here's a test page showing the behavior.
I have been frustrated by this many times over. I finally cooked up a hack in jQuery. It works in Chrome, FF and Safari. Sorry I am not near an IE computer.. but the concept should remain.
HTML
<div style="display:block;float:left;width:450px;min-height:35px;">
<div id="like" style="display:none;float:left;width:450px;height:35px;overflow:hidden;">
<fb:like href="" show_faces="true" width="450" font=""></fb:like>
</div>
</div>
jQuery
$('#like').delay(500).fadeIn(500,function(){ $(this).css({'height':"inherit",'overflow':"inherit"}); });
Explanation
First, create a div with a min-height of 35px, then create a child div with an id of like, display of none, height of 35px and overflow of hidden.
With jQuery, reference the like div and delay a fade in. Upon completion of that fade in, reset the css attributes (height and overflow) to inherit.
In theory this allows the like button do it's little freak out behind the scenes and then gracefully brining it into the page.
Hope this helps, and or Facebook just fixes this.
You could "double-store" the likes and Facebook user ids on your side (using FB.Event.subscribe('edge.create', function(response) { ... });) and then check if your logged-in Facebook user has friends who liked your page.
That may be overly complex, though.