is there any way to create a text input just like search bar for Jquery Mobile. For example when we type text there should be a cross mark which allows users to clear the field.
Even if I to use search bar as input field there is a search icon showing up and it doesn't seem nice and appropritate for a textbox.
Can someone help me out. Thanks in advance
I think this is what you are looking for.The idea is to hide the icon in the search input.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.content .ui-icon-searchfield::after{
display:none !important;
}
.content .ui-input-search{
padding:0 10px !important;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" class="content">
<input type="search" name="search" id="searc-basic" value="" />
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/8sg6M/
Add data-clear-btn="true" to your input TextBox
Related
Kindly guide me how to make this heading hover in Bootstrap because I tried css but it isn't working. Thank you in advance.
NOTE. Not included bootstrap links as I am using the downloaded
compiled files.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Begining</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<!--TOP BAR THAT GONNA HOLD TITLE AND MENU-->
<div id="top-bar"class="container-fluid"
style="background-color: black;">
<div class="row">
<div id="title"class="col-6 p-5"style=" border: 1px solid white;">
<p id="logo"style="color:white ;font-family: Lato;margin-left: 30%;">
<span style="font-size:45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p>
</div>
<div id="menu"></div>
</div>
</div>
</body>
</html>
hovering on #logo>spanwhich means direct child inside #logo of type span and changing the color of its text
#logo>span:hover{
color:purple;
cursor:pointer
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Begining</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<!--TOP BAR THAT GONNA HOLD TITLE AND MENU-->
<div id="top-bar"class="container-fluid"
style="background-color: black;">
<div class="row">
<div id="title"class="col-6 p-5"style=" border: 1px solid white;">
<p id="logo"style="color:white ;font-family: Lato;margin-left: 30%;">
<span style="font-size:45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p>
</div>
<div id="menu"></div>
</div>
</div>
</body>
</html>
So if you want to change the color of the text in the two span elements when hovering over them, you will need to use CSS as this cannot be achieved with just Bootstrap. To do this you need to select the div with the id="title" and its children. Your CSS might looks like this:
#title:hover span {
color: "yellow";
}
or
span:hover {
color: "yellow";
}
Also I recommend rearranging the elements in your #title - they probably shouldn't all be wrapped in a p tag. Also look into Flexbox to learn more.
You can look for information about the hover effects in the documentation
https://mdbootstrap.com/docs/standard/content-styles/hover-effects/#docsTabsOverview
So my problem is that when i click on a radiobutton to add the class "completed", it does what is suposed to do, but when i want to remove it, i need to click two times, i don't know why. Any help would be appreciated. Thank you
html
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<link rel="stylesheet" type="text/css" href="TodoApp.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- ------ Meta Tags ------ -->
</head>
<body>
<div id="container">
<div id="topImage">
<h1 id="topImage-title">T O D O</h1>
<img onclick="test()" id="moon" src="images/icon-moon.svg">
<img src="images/bg-mobile-light.jpg" width="100%" height="100%">
</div>
<div class="newToDo">
<input onclick="addTask()" id="ready" type="radio" name="ready">
<input type="text" name="todoTask" id="todoTask" placeholder="Create a new todo...">
</div>
<div id="tasksBox">
<div class="newTasks">
<input onclick="completeTask()" type="radio" class="bttComplete" name="bttComplete">
<span>Complete Online Javascript Course</span>
<div onclick="deleteTask()" class="delete"></div>
</div>
</div>
</div>
<script src="jquery_library/jquery-3.5.1.min.js"></script>
<script src="TodoApp.js"></script>
</body>
</html>
css
.completed{
background-image: url(images/icon-check.svg);
background-position: center;
background-repeat: no-repeat;
}
javascript
function completeTask(){
$(".newTasks").click(function(){
if ($(this).children().hasClass('completed')){
$(this).children().removeClass('completed');
} else {
$(this).children().addClass('completed');
};
});
}
I want my last div to have an image for a background and fill up the remaining space on the page. I'm not seeing the image, so I'm not 100% sure it's even filling up the page. Does anyone see my error?
css
#uploader {
min-height: 100%;
height: auto;
height: 100%;
background-image: url('hiki.jpg');
}
html
<label for="icon"><b>Upload Your Own!</b></label>
<input type="file" accept="image/*" id="uploadSelector" name="icon">
<button type="submit" onclick="uploadPhoto()">Submit File</button>
</div>
full html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tracks App</title>
<!-- jquery js -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Custom js -->
<script type="text/javascript" src="./index.js"></script>
<!-- jquery mobile js -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Sytlesheets -->
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="page" id="body-1">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div data-role="header" id="mapNinfo">
<div id="googleMap">
<script
src="https://maps.googleapis.com/maps/api/js?key=Redactedcallback=myMap">
</script>
</div>
<div id="showInfo">
<img id="customerIMG">
<p id="customerINFO"></p>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--<ul id="list-1"></ul> -->
</div>
<div data-role="main" id="tableNstuff">
<div id="newCustomer">
Add Location
<div id="popUp" style="background-color: #ffff99; display: none">
<label for="cName">Enter Customer Name :</label><input type="text" id="cName" name="cName"><br>
<label for="cAddress">Enter Address :</label><input type="text" id="cAddress" name="cAddress"><br>
<label for="cCSZ">Enter City, State Zip :</label><input type="text" id="cCSZ" name="cCSZ"><br>
<label for="cAddress">Enter Lat:Lang :</label><input type="text" id="cLatLang" name="cLatLang"><br>
<button class="ui-shadow ui-btn ui-corner-all" onclick="submitCustomer()">Submit</button>
</div>
</div>
Add Current Location
<div id="uploader">
<label for="icon"><b>Upload Your Own!</b></label>
<input type="file" accept="image/*" id="uploadSelector" name="icon">
<button type="submit" onclick="uploadPhoto()">Submit File</button>
</div>
</div>
</div>
</body>
</html>
Thank you very much.
try putting the full path. Not 100% sure it'll work but it's a start.
#uploader{min-height: 100% ;height: auto; width: 100%(add this too); height: 100%; background-image: url('C:\example\hiki.jpg OR https://example.com/hiki.jpg')}
This probably won't completely fix it but it's a start. If it doesn't work you can implement some more JavaScript that will save the dimensions of the image as a variable and then plug it into the CSS.
There are 2 simple solution:
Use calc from CSS3 by adding height: calc(100vh - 100px);. 100px here is the height of the top content above the div.
Best solution is using flexbox. See simple demo https://jsfiddle.net/hhuy424/7a3qm49e/11/
html
<body>
<div>header</div>
<div class="content"></div>
</body>
css
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
background-color: #880000;
}
In a twitter bootstrap page, I have a 12 wide column inside a row. Above the 12 wide column is the navbar. In the column is an open layers map and I need that column to take up the entire vertical space that remains under the navbar. This does not work. the map div shows up with 0px height. The only work around I found online is to add a width of 100% on html, body and the map div. that makes the map div span the entire document not just the column it is in. Thanks for any helpful pointers.
bootstrap version : 3.0.3
ol version: 2.13.1
This does not help http://openlayers.org/dev/examples/bootstrap.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Nav</a>
</div>
</nav>
<div style="padding: 0 15px">
<div class="row" style="">
<div class="col col-md-12">
<div id="mapDiv"></div>
</div>
</div>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/js/OpenLayers/OpenLayers.debug.js"></script>
<script src="/js/jquery-1.10.2.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/view/home/presenter.js"></script>
<script>
(function () {
console || console.log(mapDiv);
var osm = new OpenLayers.Layer.OSM();
var map = new OpenLayers.Map({
div: "mapDiv",
layers:[osm]
});
map.zoomToMaxExtent();
})();
</script>
</body>
</html>
The example you refer to use Bootstrap version 2.2.1. your are using Bootstrap 3.0.3. There are many changes between version 2 and 3 of Twitter's Bootstrap, see also: Updating Bootstrap to version 3 - what do I have to do?
In your case start reading: http://getbootstrap.com/getting-started/#third-parties
The Openlayers' javascript add a class olMap to <div id="mapDiv"></div> use CSS to set it's height / width, like:
div.olMap
{
cursor: default;
height: 500px;
margin: 0 !important;
padding: 0 !important;
width: 100%;
z-index: 0;
}
NB your html for the row and column looks strange, try:
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="mapDiv"></div>
</div>
</div>
</div>
I'm trying to use jQuery Mobile for desktop. I am building a social networking service and I want to use a left and right panel for each groups and message usage.
What I want is the side panel to appear when I hover over it's respective header bar button, like the sidebar in Google+.
Here is my code:
jsFiddle
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!--jqm cdn-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<!--groups panel-->
<div data-role="panel" id="groups-panel" data-position="left" data-display="overlay">
LPS
</div>
<!--friends panel-->
<div data-role="panel" id="friends-panel" data-position="right" data-display="overlay">
LPS
</div>
<div data-role="header" data-theme="b">
Groups
<h1>My Title</h1>
Friends
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
How can I do that? Any help is appreciated.
add this code to your page
$('#groups-panel').mouseleave(function () {
$(this).panel("close");
});
$("#groups-button").hover(function () {
$('#groups-panel').panel("open");
});
$('#friends-panel').mouseleave(function () {
$(this).panel("close");
});
$("#friends-button").hover(function () {
$('#groups-panel').panel("open");
});
Fiddle