I am creating android app using phone-gap / cordova 2.9.0 with jquery mobile 1.4.
I am using slide transition for navigation but when i navigate, page body moves properly as desired but header and footer doesn't slides. They changes after slide animation completed without any effect.
How to resolve this? Please help!!!
this is my first page
Location Preferences
<script src="yorkJs/jquery.blockUI.js"></script>
<link rel="stylesheet" href="yorkCss/jquery.mobile-1.4.0.css" />
<link rel="stylesheet" href="css/yorkchiller.css" />
<script type="text/javascript" src="js/core/iscroll.js"></script>
<script type="text/javascript" src="js/core/iscroll.stickyheaders.js"></script>
<script src="yorkJs/yorkFilters.js"></script>
<script src="yorkJs/yorkSelectionParameters.js"></script>
<script src="yorkJs/YorkChillerMain.js"></script>
<script src="yorkJs/yorkModelSpecification.js"></script>
<link rel="stylesheet" href="css/yorkchiller2.css" />
<script type="text/javascript">
$.mobile.defaultPageTransition = 'slide';
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'unused';
$.mobile.touchOverflowEnabled=true;
});
</script>
<script type="text/javascript" src="phonegap/cordova.js"></script>
<script type="text/javascript" src="js/biz/EmailComposer.js"></script>
</head>
<body >
<div data-role="page" id="selectionParameters" style="height:100%;">
<div data-role="header" data-position="fixed" data-tap-toggle="false" id="header">
<div style="vertical-align: middle;padding-top:3px; padding-bottom:4px;" align="center">
<img src="images/York_Logo.png" align="middle" height="30px" width="110px" />
</div>
</div>
<div role="main" class="ui-content" >
<div style="height:auto; background-color:white">
<div data-role="tabs" >
<div data-role="navbar" class="custom-navbar" id="chillertypeNavbar">
<ul>
<li class="ui-block-a-custom" id="liAll" value="0">All</li>
<li class="ui-block-b-custom" id="liAir" value="1"><a href="#fragment-2" id="custom-li-2" class="custom-ui-a2 ui-btn-nopadding" >Air Cooled</a></li>
<li class="ui-block-c-custom" id="liWater" value="2"><a href="#fragment-3" id="custom-li-3" class="custom-ui-a3 ui-btn-nopadding" >Water Cooled</a></li>
</ul>
</div>
</div>
<div id="divpreferences" >
<ul data-role="listview" data-inset="true" id="listPreferences">
<li class="ui-corner-all1" style="height:80px !important;" id="capacitylink">
<a href="yorkCapacitySelection.html" data-transition="slide" data-prefetch class="custom-list-a1" style="vertical-align: middle;border-top-width: 0 !important;">
<img src="yorkImages/Capacity.png" class="imgLocationIcon" width="45px" height="auto" style="padding-left:0px; padding-top:4px;">
<span class="ui-li-count ui-li-count-cutom" style="color:#3388CC; font-weight:700; border: none;" id="selPercentage"></span>
<p style="font-size:18px;font-weight:normal;vertical-align: middle;padding-top: 20px;margin-left:-0.7em !important;">Capacity / Tolerance</p>
<p style="font-size:12px;font-weight:lighter;vertical-align:middle; width:200px; margin-left:-1em !important; " id="selCapacity">Select chiller capacity and tolerance</p>
</a>
<div style="width:80%; height:1px; border-bottom: 1px solid #DDDDDD;float:right; "> </div>
<div class="newrow"> </div>
</li>
<li class="ui-corner-all1" id="voltagelink">
<a href="yorkVoltageSelection.html" data-transition="slide" data-prefetch class="custom-list-a2" style="border-top-width: 0 !important;border-bottom-width: 0 !important">
<img src="yorkImages/Line_Frequency.png" class="imgLocationIcon" width="45px" height="auto" style="padding-left:0px; padding-top:4px;">
<p style="font-size:18px;font-weight:normal;vertical-align:middle;padding-top: 20px; margin-left:-0.7em !important;">Line Frequency / Voltage</p>
<p style="font-size:12px;font-weight:lighter;vertical-align:middle; width:250px; margin-left:-1em !important;" id="selVoltage">Select chiller line frequency and voltage</p>
</a>
<div style="width:80%;height:1px; border-bottom: 1px solid #DDDDDD;float:right; "> </div>
<div class="newrow"> </div>
</li>
<li class="ui-corner-all1" data-icon="false">
<a href="" style="border-top-width: 0 !important;border-bottom-width: 0 !important; border:0; background-color:white">
<p style="word-break: normal; white-space: normal; font-size:12px;font-weight:lighter;vertical-align:middle; padding-left:10px; margin-left:-1em !important;"> NOTE: Chillers shown are available only in the United States and Canada </p>
</a>
<div style="width:100%;height:1px; border-bottom: 0px solid #DDDDDD;float:right;"> </div>
<div class="newrow"> </div>
</li>
</ul>
</div>
</div>
<div id="bottomBtn" style="bottom:36px; z-index:1; float: left; position: fixed; padding-left:5px;padding-right: 5px;width: 100%; background-color:white;"> <!-- bottom:36px -->
<!--<input value="Search Fillter" type="button" onclick="yorkChillerList.html" style="width: 100%"> -->
Search Chillers
</div>
</div>
<div data-role="popup" data-history="false" data-dismissible="false" id="about" data-theme="a" class="ui-corner-all" data-overlay-theme="b" style="background-color:#E8E8E8; border-top-right-radius:7px !important; border-top-left-radius:7px !important; border:7px #000000" >
<form>
<div style="font-size:14px;padding:15px;text-align:center; border-radius:7px; width:100%;font-weight:normal; background-color:#E8E8E8;">
Chillers shown are available only in the United States and Canada
</div>
<div style="background-color:#E8E8E8; color:#007BFF !important; border-top:1px solid #c2c2c2; padding:10px; text-align:center; border-bottom-right-radius:7px !important; border-bottom-left-radius:7px !important;">
OK
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" id="footer" data-theme="a" data-tap-toggle="false" style="z-index:1; background-color:white;">
<div data-role="navbar">
<ul>
<li><a href="" id="Homebtn" data-direction="reverse" class="ui-btn-activeown" style="padding-top:2px !important; background-image: linear-gradient(#DBD9DA, #FCFAFB) !important; height:35px !important;">
<img src="images/Home.png" height="25px" width="25px" alt="home">
<label style=" margin-top:-3px; vertical-align:middle; line-height:3px; font-size:10px !important; color:grey; font-weight:bold !important;">HOME</label>
</a></li>
<li><a href="yorkInfoPage.html" class="ui-btn-activeown" data-transition="slide" style="border-left-color: #AEACAD !important; padding-top:2px !important; background-image: linear-gradient(#DBD9DA, #FCFAFB) !important; height:35px !important; ">
<img src="images/info.png" height="23px" width="24px" alt="info">
<label style=" margin-top:-1px; vertical-align:middle; line-height:3px; font-size:10px !important; color:grey; font-weight:bold !important;">INFORMATION</label>
</a></li>
</ul>
</div>
</div>
</div>
<!-- <div class="ui-loader-background"> </div> -->
<div id="domMessage" style="display:none; " data-textonly="true" class='ui-loader ui-corner-all ui-body-b ui-loader-verbose'><h1>Chiller Models are loading</h1></div>
</body>
</html>
Related
On my phone, my select buttons end up being very small. I'm trying to get them to take up, combined, 100% of the horizontal space, so that each one will take up 33% of the horizontal space.
On my computer, they take up 100% of horizontal space, like I want.
How do I fix this for my mobile?
html:
<div data-role="page" id="Gauntlet">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-mini="true">
<h3>Gauntlet Traits:</h3>
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
<select id="myList1" data-mini="true"></select>
<select id="myList2" data-mini="true"></select>
<select id="myList3" data-mini="true"></select>
</fieldset>
</div>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<div id="table_div"></div>
</div>
<div data-role="footer">
<h2></h2>
</div>
</div>
css:
.custom-fieldset .ui-controlgroup-controls {
width: 100% !important;
}
.custom-fieldset .ui-controlgroup-controls .ui-select {
width: 33.33% !important;
}
As written in view-port meta tag documentation,
Meta tags included directly in an Apps Script HTML file are ignored. Only the following meta tags are allowed.
So, add the meta tag server side:
return HtmlService
.createHtmlOutputFromFile('index')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
Use jQuery Mobile Grids as described here: http://demos.jquerymobile.com/1.4.5/grids-buttons/
$(document).on("collapsiblecreate", function(e) {
/* Add a nice smooth animation to the collapsible */
$(this)
.on("collapsiblebeforeexpand", function(event) {
$(this).find(".ui-collapsible-content").each(function() {
$(this).stop().slideDown("fast");
});
return true;
})
.on("collapsiblebeforecollapse", function(event) {
$(this).find(".ui-collapsible-content").each(function() {
$(this).stop().slideUp("fast");
});
return true;
})
.find(".ui-collapsible-content").css({
"display": "block"
});
});
/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
/* Remove JQM blue halo */
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Speed-up some android & iOS devices */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<meta name="description" content="My App">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0001, maximum-scale=1.0001, width=device-width, minimal-ui shrink-to-fit=no">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).on("mobileinit", function() {
/* SEO - Remove h1 tag from loader */
$.mobile.loader.prototype.defaultHtml = "<div class='ui-loader'><span class='ui-icon-loading'></span><h6></h6></div>";
/* Add onbefore events to the JQM collapsible */
$.widget("mobile.collapsible", $.mobile.collapsible, {
_handleExpandCollapse: function(isCollapse) {
if(this._trigger("before" + (isCollapse ? "collapse" : "expand"))) {
this._superApply(arguments);
}
}
});
});
</script>
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div id="Gauntlet" data-role="page">
<div data-role="header" class="ui-flipswitch-active ui-overlay-shadow">
<h2>Home</h2>
</div>
<div data-role="content" role="main">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-mini="true">
<h3>Gauntlet Traits:</h3>
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a">
<select name="myList1" id="myList1" data-native-menu="false" data-mini="true">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-b">
<select name="myList2" id="myList2" data-native-menu="false" data-mini="true">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-c">
<select name="myList3" id="myList3" data-native-menu="false" data-mini="true">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a">
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
</div>
</div>
<div id="table_div"></div>
</div>
</div>
</body>
</html>
Well, it's not exactly an answer to the problem at hand, but it does fix the issue... I can use a navbar to hold my select menus, a la this solution.
When clicking back button after a pop up appears, it redirects to the back page but cannot click anything. I think this is because, the background fade in effect when pop appears, is still active on redirecting to the back page, hence the page is inactive. This is the code for backbutton,
document.addEventListener("backbutton", onBackKeyDown, true);
function onBackKeyDown()
{
var locate=document.location.href.match(/[^\/]+$/)[0];
if(locate=="Home")
{
resp = confirm("Do you want to exit the app?");
if (resp === true)
{
navigator.app.exitApp();
}
}
else
{
menuopenchk();
location.href="#Home";
}
}
This is the add item pop up,
<!-- =================ADD Item Popup================ -->
<div id="additem" class="modal fade homelogin" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title homelogintitle" translate="ADD-ITEM">ADD ITEMS</h4>
</div>
<form id="add-item" novalidate="novalidate">
<!-- -->
<div class="modal-body" align="center">
<div style="margin:10px;" class="additemdiv">
<div class="additemdiv2" style="width:40%;">
<label for="Itemtype" class="labl-add" translate="ITEM-TYPE">Item Type: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<select name="Itemtype" ng-model="Itemtype" id="itemtype"
ng-change="itemnamefetch(Itemtype);" class="form-control homelogin-input1 additemselect"
style="width:100%;height:30px; padding:0px;">
<option value="" selected translate="SELECT">-Select-</option>
<option data-ng-repeat="a in item1 track by $index" value="{{a.ItemID}}">{{a.ItemName}}</option>
</select>
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="Itemname" class="labl-add" translate="SUB-ITEM">Sub Item: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<select name="Itemname" ng-model="Itemname" id="Itemname"
ng-change="unitfetch(Itemname);" class="form-control homelogin-input1 additemselect"
style="width: 100%; height: 30px; padding: 0px;">
<option value="" selected translate="SELECT">-Select-</option>
<option data-ng-repeat="b in itemname1 track by $index" value="{{b.SubItemID}}">{{b.SubItemName}}</option>
</select>
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="unit" class="labl-add" translate="UNIT">Unit: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<input type="text" ng-model="unit" id="unit" name="unit"
class="form-control homelogin-input1 additemtext" placeholder="{{'UNIT' | translate}}" style="width: 100%; height: 30px;">
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="price" class="labl-add" translate="PRICE">Price:</label>
</div>
<div class="additemdiv2" style="width:60%;">
<input type="text" ng-model="price" id="price" name="price"
class="form-control homelogin-input1 additemtext" placeholder="{{'PRICE' | translate}}"
disabled style="width: 100%; height: 30px; padding: 0px;"> <!-- value="{{price}}" -->
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="quantity" class="labl-add" translate="QUANTITY">Quantity: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<input type="number" ng-model="quantity" name="quantity" id="quantity"
ng-keyup="totalfunc(price,quantity);" class="form-control homelogin-input1 additemtext" placeholder="{{'QUANTITY' | translate}}"
disabled style="width: 100%; height: 30px; padding: 0px;"> <!-- value="{{price}}" -->
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="total" class="labl-add" translate="ITEM-TOTAL">Total: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<input type="number" ng-model="total" name="total" id="total"
class="form-control homelogin-input1 additemtext" placeholder="{{'ITEM-TOTAL' | translate}}"
disabled style="width: 100%; height: 30px; padding: 0px;"><!-- {{price*quantity}} -->
</div>
<div style="clear:both;"></div>
</div>
<table style="width:100%;" class="dyanamictable">
<tbody>
<input type="hidden" value="{{price1}}" ng-model="price1" id="priceid"><!-- item ID -->
<input type="hidden" value="{{price2}}" ng-model="price2" id="priceid1"><!-- ItemName -->
<input type="hidden" value="{{price3}}" ng-model="price3" id="priceid2"><!-- Subitem Name -->
<input type="hidden" value="{{action}}" ng-model="action" id="action"><!-- Action -->
<input type="hidden" value="{{operation}}" ng-model="operation" id="operation"><!-- Operation -->
<input type="hidden" value="{{modify}}" ng-model="modify" id="modify"><!-- modify -->
</tbody>
</table>
</div>
<div class="modal-footer">
<!-- <div class="row">
<div class="col-md-3 col-sm-3 col-xs-3 col-md-offset-8 col-sm-offset-8 col-xs-offset-8"> -->
<div align="center">
<input type="submit" name="submit" value="{{'ADD-ITEM-BUT' | translate}}" class="btn btn-success" /> <!-- ng-click="addoitem(Itemtype,Itemname,price2,price3,unit,price,quantity,total,price1);" -->
</div>
<!-- </div> -->
<!-- <div class="col-md-3 col-sm-3 col-xs-3 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<button type="button" class="btn btn-default btn-success" data-dismiss="modal">Cancel</button>
</div> -->
<!-- </div> -->
</div>
</form>
</div>
</div>
</div>
<!-- =================////ADD Item Popup================ -->
ADDItem pop is on the bookevent page, and on clickin back button it redirects to home page but cannot click anything. Please help me solve this issue...
Add $('.modal-backdrop').remove(); inside else block. It should work.
If you are not using jquery use
document.getElementsByClassName("modal-backdrop").remove ();
I have an ionic 1 application and I am getting a weird error on log in only on android. Only the first time when the user opens the application and logs in, It is logging perfectly. When he logs out and tries to log in again I am getting this error "Auth/Network-Request Failed" and cannot login unless he closes the application and reopens. I do not get whats the issue and why the first time it is working. This is my code.
<ion-content style="background-image:url(img/LoginBack.jpg); background-size:100% 100%;" ng-controller="LoginController">
<hr style="height:100px; visibility:hidden">
<div align="center">
<img src="img/loggo.png" style="width:43%;height:13vh">
</div>
<hr style="height:20px; visibility:hidden">
<div align="center">
<div style="width:100%;padding:5px 10px 5px 10px" align="center">
<h5 class="button" style="color:white;min-height:12px;line-height:12px;background-color:#3b5998;width:100%;color:white;border-radius: 20px"
ng-click="FacebookLogin()">
<div class="row" style="padding:0px">
<div class="col col-10" style="padding:3px 0 0 0">
<i class = "ion-social-facebook larger" style="margin-right:50px"> </i>
</div>
<div class="col col-80" align="center" style="padding:0;line-height:35px">
Sign in with Facebook
</div>
<div class="col col-20">
</div>
</div>
</div>
</div>
<div class="padding" style="width:100%;" align="center" ng-show="!toggle">
<button style="min-height:35px;line-height:35px;width:100%;border-radius: 20px" class="button button-balanced small_button"
ng-click="Switch()">
Already have an account? Log in
</button>
</div>
<div style="width:100%; padding:10px 10px 0 10px" ng-show="toggle">
<div align="center" style="padding-top:10px;padding-bottom:10px">
<input ng-model="registerusername" align="center" style="padding:20px;background-color:rgba(0, 0, 0, 0.4);padding-left:20px;color:#2ab041;border-radius:5px"
placeholder="Email" type="text" required>
<br>
<input align="center" ng-model="registerpassword" style="padding:20px;background-color:rgba(0, 0, 0, 0.4);padding-left:20px;color:#2ab041;border-radius:5px"
placeholder="Password" type="password" required>
</div>
<div class="col " style="background-color: transparent">
<h6 style="margin:5px 0 10px 0;padding:0px;min-height:6vh;line-height:6vh;width:100%;border-radius: 20px" class="button button-balanced small_button"
ng-click="LogIn(user)">
Sign in
</h6>
</div>
<div class="col col-10" style="background-color: transparent">
</div>
</div>
<div align="center">
<h4 style="margin-top:-2px;padding-top:0px;font-weight:bold;color:white; font-size:15px">
or
</h4>
<div class="padding" style="width:100%;" align="center">
<button style="min-height:35px;line-height:35px;width:100%;border-radius:20px;background-color:white;color:#2ab041" class="button button-balanced small_button"
ng-click="GoToRegister()">
Register with Email
</button>
</div>
<div align="center">
<h6 style="color:white" ng-click="GoToForgetPass()">
Forgot your password?
</h6>
</div>
</div>
</ion-view>
//JS FILE
firebase.auth().signInWithEmailAndPassword($scope.registerusername, $scope.registerpassword)
.then(function (user){
//GO HOMEPAGE
})
.catch(function (error) {
alert(errorCode);
});
did you use this method on signout?
firebase.auth().signOut().then(function() {
// Sign-out successful.
}, function(error) {
// An error happened.
});
I have some problems on my responsive layout im trying to create.
The Home page look like shit on phones and on big ass screens.
The music section looks really good on my 13 inch Macbook, but on my iPhone the Apple Music and Spotify buttons, is being pushed down, so it doesn't look good anymore.
I wan't to add youtube videos on my music section too. The youtube videos has to be inside the the grey square i have made. I have tried to put it in the div class="container" and div class="jumbotron"
but it does not work.
i know this is a bit of a mouthful, but i would really appreciate it.
I have takken a little inspiration by this website
http://www.spotify-thedrop.com/#/
You can take a look at my website here.
http://homeofedm.com/
Here is the coding for my problems.
This is for the Home section
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/david guetta.jpg" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item">
<img src="images/zedd.jpg" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item">
<img src="images/steve aoki.jpg" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="container-fluid">
<div class="row">
<a href="avicii.html">
<div class="col-sm-4"> <img id="avicii" src="images/avicii2.jpg" alt="" /></div>
</a>
<a href="default.asp">
<div class="col-sm-4"> <img id="martin" src="images/martin garrix.jpg" alt="" /></div>
</a>
<a href="default.asp">
<div class="col-sm-4"> <img id="david" src="images/david guetta2.jpg" alt="" /></div>
</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<a href="default.asp">
<div class="col-sm-4"> <img id="zedd" src="images/zedd2.jpg" alt="" /></div>
</a>
<a href="default.asp">
<div class="col-sm-8"> <img id="dim" src="images/dimitri vegas and like mike.png" alt="" /></div>
</a>
</div>
</div>
css.
> #avicii { height: 458px; width: 458px; }
>
> #martin { height: 458px; width: 458px; }
>
> #david { height: 458px; width: 458px; }
>
> #zedd { height: 458px; width: 458px; }
>
> .navbar.navbar-inverse { margin-bottom: 0; }
>
> #dim { height: 458px; width: auto; }
Music section
<div class="container">
<div class="jumbotron">
<h3>Home (feat. Alex Joseph) - Single<h3>
<img src="images/Home (feat. Alex Joseph) - Single.jpeg" alt="" />
<a id="music" href="https://geo.itunes.apple.com/us/album/home-feat.-alex-joseph-single/id1081864517?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/12HmJ4Q5ksOGgaqKgZLvdE">
<img id="spotify" src="images/spotify.png" alt="" />
</div>
</a>
<div class="container">
<div class="jumbotron">
<h3>Aural Psynapse (ATTLAS Remix) - Single<h3>
<img src="images/Aural Psynapse (ATTLAS Remix) - Single.jpeg" alt="" />
<a id="music1" href="https://geo.itunes.apple.com/us/album/aural-psynapse-attlas-remix/id1065961780?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/1JTMC6LvxZ66NLi25nqitw">
<img id="spotify1" src="images/spotify.png" alt="" />
</div>
</a>
</div>
<div class="container">
<div class="jumbotron">
<h3>Parnassia - Single<h3>
<img src="images/Parnassia - Single.jpeg" alt="" />
<a id="music2" href="https://geo.itunes.apple.com/us/album/parnassia-single/id1076534339?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/0BkLLh1dgbUUof2COoAOWC">
<img id="spotify2" src="images/spotify.png" alt="" />
</div>
</a>
</div>
<div class="container">
<div class="jumbotron">
<h3>Lifted - Single<h3>
<img src="images/Lifted - Single.jpeg" alt="" />
<a id="music3" href="https://geo.itunes.apple.com/us/album/lifted-single/id1071404761?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/2YHsab2zqZ70oQ1H54KmrD">
<img id="spotify3" src="images/spotify.png" alt="" />
</div>
</a>
</div>
<div class="container">
<div class="jumbotron">
<h3>Love Is Blind (feat. Glenna) [Remixes] - Single<h3>
<img src="images/Love Is Blind (feat. Glenna) [Remixes] - Single .jpeg" alt="" />
<a id="music4" href="https://geo.itunes.apple.com/us/album/love-is-blind-feat.-glenna/id1081220187?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/album/59hXL8XHJIiyGcOEQrDxCO">
<img id="spotify4" src="images/spotify.png" alt="" />
</div>
</a>
</div>
<div class="container">
<div class="jumbotron">
<h3>Get Down (Extended Mix) - Single<h3>
<img src="images/Get Down (Extended Mix) - Single .jpeg" alt="" />
<a id="music5" href="https://geo.itunes.apple.com/us/album/get-down-extended-mix-single/id1065898774?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/0FZOz3LYpe6d0dKk5g0Ngu">
<img id="spotify5" src="images/spotify.png" alt="" />
</div>
</a>
</div>
<div class="container">
<div class="jumbotron">
<h3>Whatever (feat. KOLAJ) [Remixes] - Single<h3>
<img src="images/Whatever (feat. KOLAJ) [Remixes] - Single .jpeg" alt="" />
<a id="music6" href="https://geo.itunes.apple.com/us/album/whatever-feat.-kolaj-remixes/id1082087582?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/album/6wQKF3wXM7LNHREX2GKfsk">
<img id="spotify6" src="images/spotify.png" alt="" />
</div>
</a>
</div>
css.
#music {
position: absolute;
top: 280px;
}
#spotify {
position: absolute;
height: 35px;
width: 110px;
top: 320px;
}
#music1 {
position: absolute;
top: 655px;
}
#spotify1 {
position: absolute;
height: 35px;
width: 110px;
top: 695px;
}
#music2 {
position: absolute;
top: 1025px;
}
#spotify2 {
position: absolute;
height: 35px;
width: 110px;
top: 1065px;
}
#music3 {
position: absolute;
top: 1400px;
}
#spotify3 {
position: absolute;
height: 35px;
width: 110px;
top: 1440px;
}
#music4 {
position: absolute;
top: 1770px;
}
#spotify4 {
position: absolute;
height: 35px;
width: 110px;
top: 1810px;
}
#music5 {
position: absolute;
top: 2140px;
}
#spotify5 {
position: absolute;
height: 35px;
width: 110px;
top: 2180px;
}
#music6 {
position: absolute;
top: 2515px;
}
#spotify6 {
position: absolute;
height: 35px;
width: 110px;
top: 2555px;
}
Read about grid system
Large devices Desktops (.col-lg-) which means equal or greater than 1200px.
Medium devices Desktops (.col-md-) which means less than 1200px but equal or greater than 992px.
Small devices Tablets (.col-sm-) which means less than 992px but equal or greater than 768px.
Extra small devices Phones (.col-xs-) which means less than 768px.
You can make different layout in different devices by changing there value.
Also you can use
.hidden-sm class to hidden perticular element
.visible-sm- to make visible particularly
For more info read bootstrap documentation
I want to make a mobile application on android and I use adobe dreamwever cs6, php and mysql(bundle on XAMPP). I have a problem on my login process.
Can you tell me where is the errors of my code? because my login form only stuck on loader when i press the login button. Please help me.
This is my index.html code on dreamweaver...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Form</title>
<link href="jquery-mobile/jquery.mobile.theme-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#btnLogin").click(function() {
username=$("#username").val();
password=$("#password").val();
$.ajax({
type:'POST',
url:"login.php",
data:"username="+username+"&password="+password,
success: function(data){
if(data=='true'){
window.location ( "hhome.html");
} else {
$("#add_err").html("<img src='images/icons-png/alert-black.png' />Wrong Username or Password!!");
}
},beforeSend: function()
{
$("#add_err").html("<img src='images/ajax-loader.gif' />")
}
});
return false;
});
});
</script>
</head>
<body>
<div id="page" data-role="page" >
<div data-role="header" data-theme="b" >
<h1></h1>
</div>
<div align="center" data-role="content" data-theme="a" >
<img src="sma-baktiidhata.jpg" width="214" height="178"><br>
<p>Go to the login page</p><br><br>
Login
</div>
<div data-role="footer" data-theme="b" >
<h4></h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Login User</h1>
</div>
<div data-role="content">
<form action="login.php" method="post" id="add_err">
<div data-role="fieldcontain">
<input type="text" name="username" id="username" value="" placeholder="Username" />
<input name="password" type="password" id="password" placeholder="Password" value="" maxlength="10" />
</div>
<input name="Submit" type="submit" id="btnLogin" value="Login" />
</form>
</div>
<div data-role="footer" data-theme="b">
<h5>© 2014 </h5>
</div>
</div>
</body>
</html>