I am trying my hand at jQuery Mobile and I find it a bit confusing because it's a mark-up driven framework.
I created a test page in which I am just trying to align one button to the right, but I am not able to do that. I tried float: right but it's not working. Although margin-left is working by giving a particular percentage, the same is not working when I resize the page.
Here is my Fiddle code. Any help would be great.
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 style="font-size: 1.5em; text-align: left; margin-left: 70px;"
data-role="none">Test</h1>
</div>
<div id="contentLogin" align="center" name="contentConfirmation" data-role="content">
<p style="font-size: 0.85em; color: #000000">
<b>Welcome to my page</b>
</p>
<br>
<div class="ui-grid-b responsive">
<div style="margin: 0px; margin-top: 0px; margin: 0px;" class="ui-block-a">
<div data-role="fieldcontain">
<label for="url" class="alignleft">Username:*</label>
<input id="userId1" class="required" name="uid_r" placeholder="" type="text">
</div>
<div data-role="fieldcontain">
<label for="url" class="alignleft">Password:*</label>
<input id="Password1" class="required" name="pwd_r" value="" type="password">
</div>
<button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button>
</div>
<div class="ui-block-b">BLOCK A ADS</div>
<div class="ui-block-c" style="margin-top: 0px;">
BLOCK C
</div>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
</div>
</div>
Why not place your button inside a div and right align the div? everything inside the parent div including the button will be right aligned.
<div align="right"><button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button></div>
Check out the fiddle http://jsfiddle.net/mayooresan/96s59/2/
Use ui-btn-right. It's easier, less verbose and (I think) the jquery way to do things.
Login
The previous answer is correct, but you should use CSS styles instead (aling="" is deprecated)
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
You can run into problems if you want multiple buttons...
Try:
<div style="float:right">
<button data-inline="true">Login</button>
</div>
if you want to have multiple buttons (both left and right aligned).
If you use:
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
the div will start a new block below any existing buttons, so you can't have other icons on the left hand side.
Class ui-btn-icon-left|right lets you align the buttons left|right but I've found that using two buttons with ui-btn-icon-right will overlap them.
The template below worked for me for two left aligned buttons and two right in a footer:
Home
Intro
<div style="float:right">
Review
Exit
</div>
Related
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)
I have a div/box. I'm trying to create a vertical line within that div.
I tried using border-right, but for some reason the line doesn't extend all the way to fit my div.
Since the class of my div is section
.section {
border-right: 2px solid #c9cacb;
}
HTML
<hr style="height: 100pt; visibility: hidden;" />
<div class="container summary">
<div class="row">
<div class="col-xs-1 section">
<br>
<p>
Section
<br>
<span class="section-num">2.2</span>
<br>
Exercise
</p>
</div>
<div class="col-xs-3">
<br>
<div class="row cb-btns-row " style="background-color: white;">
<div class="col-xs-3 col-xs-3 col-md-3 col-lg-3">
<div id="dd" class="wrapper-dropdown-1" tabindex="1">
<span class="summary-texts">Group A </span>
<ul class="dropdown">
<li><a class="group" id="group-a">Group A </a>
</li>
<li><a class="group" id="group-b">Group B </a>
</li>
</ul>
</div>
</div>
</div>
<p style="text-align: left;" class="summary-texts">
<br>
Problem set: Same
<br>
Start: 4/10/2015 2:00 pm
</p>
</div>
<div class="col-xs-5">
<br>
<br>
<br>
<p style="text-align: left;" class="summary-texts">
Students: 9/25
<br>
Due: 4/10/2015 3:00 pm
</p>
</div>
<div class="col-xs-1 student-submit">
<br>
<span class="student-submit-num">9/9</span>
<br>
STUDENTS
<br>
SUBMITTED
</div>
<div class="col-xs-1 avg-score">
<br>
<span class="avg-score-num">71 <small>% </small></span>
<br>
AVG SCORE
</div>
<div class="col-xs-1 hide-details">
<br>
<img src="http://s13.postimg.org/5xe0gy3pv/Screen_Shot_2015_05_26_at_11_40_40_AM.png" width="40">
<br>
HIDE
<br>
DETAILS
</div>
</div>
</div>
Here is my JSFiddle
What is the most practical way to add a vertical line inside a div ?
I added this CSS:
.section-row{
overflow:hidden;
}
.section{
margin-bottom:-9999px;
padding-bottom:9999px;
}
And the new class to
<div class="row section-row">
<div class="col-xs-1 section">
See it work here
This is the generally accepted method for making bootstraps columns an equal height.
HTH,
-Ted
Since you marked it Jquery:
Here is some jquery code that should do the trick
$().ready( function () {
var rowheight = $(".row").height();
$('.section').height(rowheight);
});
Basically forces the div to have the same height as the row div (its container).
Note: It's not a very elegant solution, if the row's size changes this will fail. So you could bind that code to an event that resizes the row.
CSS:
I find using relative widths and heights is the most fool proof way:
.parent-class
{
height:100%; //MATCHES BODY, OR IT's CONTAINER
height:200px; //IT'S OWN FIXED HEIGHT
height:auto; //SIZES TO WHATEVER IS INSIDE
}
.child-class
{
height:100%; //MATCHES THE .parent-class HEIGHT
}
If you don't mind adding a few lines of jquery, here is the working demo:
DEMO http://jsfiddle.net/fkoc0k3v/9/
JQUERY
$(document).ready(function(){
$('.row').each(function(){
$(this).find('.section').css({'height':$(this).outerHeight()});
});
});
I am using jQuery Mobile, I need a popup option for open a form. The popup is working, but I need to make it larger.
<div id="addPopup" data-role="popup" data-overlay-theme="a" data-theme="d" data-transition="pop" >
<div data-role="header" data-theme="c" class="ui-corner-top">
<div class="ui-btn-left">
Save
</div>
<h1 class="ui-title" role="heading">Status</h1>
<div class="ui-btn-right">
Cancel
</div>
Item Code:
<div class="grid_10" style="text-align:left; width:30%; margin-top:0px;">
<input type="text" name="name" id="name" value="" placeholder="Item Code">
</div>
</div>
How do I do this?
Use CSS to adjust the sizing of your popup.
#yourpopup{
width: 200px;
}
I'm trying to align my product box to look like this:
What I have thus far:
jsFiddle
I'm just trying to obtain the results of the "boxed" area, but I cannot for the life of me figure out this alignment.
I've included external resources to my JS & CSS as well.
HTML is below:
<section id="product">
<div class="container White_BG">
<aside class="col-md-4">
<!--Category-->
<div class="sidewidt2">
<div class="productprice" id="StandardProductBox">
<div id="ItemNumber">
<span itemprop="identifier" content="sku:EB06">
<p># EB06</p>
</span>
</div>
<div itemprop="availability" id="StockStatus" content="in_stock">
<strong>Out of Stock,</strong>
Please call for availability
</div>
<p class="prod-det-price">Call for Pricing</p>
<label for="qtyproduct" id="qtylabel">Qty</label>
<input id="qtyproduct" type="text" value="1" name="dmilist_Qty_100000060715">
<ul class="productpagecart">
<li>
<span style="position:relative;">
<input type="submit" id="DisabledAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled">
<div class="DisabledCart" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor:not-allowed;"></div>
</span>
<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X">
<h4 class="modal-title" id="myModalLabel">Not Available Online</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ShipWeight" id="ShipWeight">
Weight: 29.80 lbs
</div>
</aside>
</div>
</section>
I'm not sure what you have the ability to adjust and what you don't, but you can do this a couple ways by changing the markup and the classes. I'll show you the finished product and you'll have to work to convert your markup to something like this.
If you want half the content to hug the left, and the other half to hug the right, you should keep each separate. You can float one section left and the other right (.pull-left and .pull-right in Bootstrap), but since you're already using Bootstrap, why not use their grid system for layout. That's what it's there for!
So set up your shopping cart item, and add a .row inside of it, and then split the content in half with two divs with .col-xs-6. Put the content inside each div. The content for the one on the right can align to the right by using .text-right.
Like this:
<div class="ItemBox ">
<div class="row">
<div class="col-xs-6">
<b>#EBRO1</b><br/>
Call for pricing.<br/><br/>
<label for="qtyInput" >Qty</label>
<input type="text" id="qtyInput" />
</div>
<div class="col-xs-6 text-right">
<b>Out of Stock,</b><br/>
Please call for availability <br/><br/>
<button class="btn btn-default">Add to Cart</button>
</div>
</div>
</div>
Demo in fiddle
Which will look like this:
I am new to jQuery. I am trying to create a search box functionality in my project. I have created a div which contains names of cities, and I want it to be displayed on the click event of a button. I am able to hide and show that div using slideToggle() method of jQuery on the click event of a button.
But when div is displayed, then other contents of my page gets distracted. I do not expect this behavior.
Here is my image before displaying that div:
and the following is an image of the page after div is displayed:
Now I want this div to be displayed as like popup, so that it won't distract other contents of the page.
Following is a code of my search box section in HTML:
<!--start SearchBox section-->
<section id="searchbox"style="background:white">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12">
<form style="">
<center>
<div id="SearchBoxBorder" style="background:white;border:2px solid #a1a1a1;border-radius:5px;margin-top:20px;width:800px;">
<table id="mytable" >
<td style="width:300px;background:white;">
<center> <div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
border-style:solid;border-width:5px;border-color:#a1a1a1;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;">
</div></center>
</td>
<td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center> </td>
<td style="width:400px;background:white;">
<center>
<div class="input-group">
<input type="text" class="form-control" placeholder="in locality"
style="border-width:5px;background:white; margin-top:0px; margin-left:10px; margin-right:20px;width:;font-size:18px;
border-style:solid;border-width:5px;border-color:#a1a1a1;font-family:Arial,Helvetica,sans-serif;height:42px;">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownBtn"
style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
border-color:#a1a1a1;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;">Select<span class="caret"></span></button>
<!--City dropdown -->
<div class="SearchCities">
<div id="outer" style="">
<div id="innerLeft" style="">
<h5 >North India:</h5>
<ul class="city" type="none";>
<li><a>Delhi</a></li>
<li><a>Agra</a></li>
<li><a>Shrinagar</a></li>
<li><a>Noida</a></li>
<li><a>Himachal</a></li>
<li><a>Patna</a></li>
</ul>
</div>
<div id="innerRight" style="">
<a class="close">×</a>
<h5>West India:</h5>
<ul class="city" type="none";>
<li><a>Mumbai</a></li>
<li><a>Pune</a></li>
<li><a>Nashik</a></li>
<li><a>Kolhapur</a></li>
<li><a>Osmanabad</a></li>
<li><a>Ahamdabad</a></li>
</ul>
</div>
</div><!--/outer-->
</div><!--/SearchCities-->
</div><!-- /btn-group -->
<button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i> Search</button>
</div><!-- /input-group -->
</center>
</td>
</table>
</center>
</form>
</div><!--/col-lg-12-->
</div><!--/row-->
</div><!--/end of container-->
</section>
<!--End of SearchBox section-->
and following is my jQuery code:
$(document).ready(function(){
$(".SearchCities").hide();
$("#dropdownBtn").click(function(){
$(".SearchCities").slideToggle();
});
});
For more idea what I want to do visit :askme.com and see a search box at the top and click on rest of India.
So please can you help me to achieve this?
Thank you in advance.
You basically have three ways:
By hand: make the popup div floating and position it absolutely, then set top to 100% (this will make it look like a popup menu. Make sure the parent element has relative positioning.
HTML:
<div class="input-group" style="position: relative;">
<div class="SearchCities">
...
</div>
</div>
CSS:
.SearchCities {
float: right;
position: absolute;
top: 100%;
}
JS: No change required
Use jQueryUI's dialog plugin: as pointed out in nrsharma's answer you can use a jQuery plugin to make it look like a popup dialog.
$('.SearchCities').dialog({ autoOpen: false }); // Initialize dialog plugin
$('.SearchCities').dialog("open"); // Open popup
API Reference: http://api.jqueryui.com/dialog/
Examples: http://jqueryui.com/dialog/
Plugin download: http://jqueryui.com/download/
Use Bootstrap's dropdown component: it seems from your code that you're using bootstrap. You can easily use bootstrap dropdowns or modals.
Bootstrap modals are popup dialogs just like jQueryUI's dialog plugin, but they look better and they're much more customizable. Have a look there for an example: http://getbootstrap.com/javascript/#modals
Bootstrap dropdowns are simple dropdown menus, but with a bit of hacking you can put anything inside them.
All you need is a bit of HTML (no JavaScript):
<div class="input-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" id="dropdownBtn" role="button">...</button>
<div class="dropdown-menu SearchCities" role="menu">
...
</div>
</div>
To make this work you also need to include Bootstrap js plugins (bootstrap.js/bootstrap.min.js).
Reference: http://getbootstrap.com/javascript/#dropdowns
Here you can do this easily
HTML
<div class="dialogbox"> This is Dialogue box</div>
<a id="click">click here</a>
CSS
.dialogbox{width:100px; height:100px; background:grey;display:none}
JQUERY
<script src="latest jquery library"></script>
<script>
$(document).ready(function(){
$("#click").click(function(){
$(".dialogbox").toggle();
});
});
</script>
You can do it easily with a jQuery UI dialog.
HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The
dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
JavaScript/jQuery:
$(function() {
$( "#dialog" ).dialog();
});
More information can be found here.