I am trying to use this sliding panel, done using jquery mobile. It works perfectly.
I would like to put a small button, like a tick, on the border of the sliding panel. This button should slide also, with the panel. Pressing this button would open the panel and it should be always visible. I don't know how to do it and I don't know if it is even possible.
<div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">
<img src="small_image_as_button" /><!-- click here to open the panel -->
<nav id="indice">
<!-- content here -->
</nav>
</div>
Working example: http://jsfiddle.net/Gajotres/qgDst/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
</div>
<div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">
<img src="small_image_as_button" /><!-- click here to open the panel -->
<nav id="indice">
<!-- content here -->
</nav>
<div data-role="button" id="tick-button">>></a>
</div>
</div>
</body>
</html>
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click tap', '#tick-button', function(){
$("#left-panel").panel( "open");
});
});
CSS :
.ui-panel-closed {
visibility: visible !important;
width: 100px !important;
left: 160px !important;
overflow: visible !important;
}
.ui-content {
padding: 0 15px 15px 15px !important;
}
#tick-button {
position: absolute;
top: 100px;
right: -27px;
width: 25px;
height: 100px;
margin: 0 0 !important;
border-radius: 0 1em 1em 0;
}
#tick-button .ui-btn-inner {
padding: 0 0 !important;
height: 100% !important;
font:10px 'Courier New', 'Verdana',serif;
line-height: 100px;
color: #555;
text-shadow: 1px 1px #fff;
}
Related
I want to use mmenu plugin on asp.net mvc at home \ index page. For this, I included the plugin in my adminLTE v.3 (bootstrap v4) themed project. But when the plugin works, it takes over the body and the menu starts working right inside the body. But where it should work is home \ index. What kind of setting should I make for this? I want help from those who use this plugin.
***UPDATED Paint drawn exactly what I want
my original AdminLTE template;
mispositioned mmenu;
original mmenu
The styles that mmenu creates inside the body of asp.net mvc
Home\Index.cshtml
#{
ViewBag.Title = "Index";
}
<link type="text/css" rel="stylesheet" href="~/mmenu/demo/css/demo.css" />
<link type="text/css" rel="stylesheet" href="~/mmenu/dist/mmenu.css" />
<div id="page">
<div class="header">
<span></span>
Demo
</div>
<div class="content">
<p>
<strong>This is a demo.</strong><br />
Click the menu icon to open the menu.
</p>
</div>
<nav id="menu">
<ul>
<li>Home</li>
<li>
<span>About us</span>
<ul>
<li>History</li>
<li>
<span>The team</span>
<ul>
<li>
Management
</li>
<li>
Sales
</li>
<li>
Development
</li>
</ul>
</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
<li class="Divider">Other demos</li>
<li>Advanced demo</li>
<li>One page demo</li>
</ul>
</nav>
</div>
#section Scripts
{<script type="text/javascript">
$(document).ready(function () {
const menu = new Mmenu(
document.querySelector('#menu')
);
});
</script>
}
<script src="~/mmenu/dist/mmenu.polyfills.js"></script>
<script src="~/mmenu/dist/mmenu.js"></script>
_Layout.cshtml
<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">
<title>#ViewBag.Title - Merinos Tablet</title>
<!-- Font Awesome Icons -->
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
#Html.Partial("_Header")
#Html.Partial("_Sidebar")
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">#ViewBag.Title</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">
#Html.ActionLink(#ViewContext.RouteData.Values["controller"].ToString(),
#ViewContext.RouteData.Values["action"].ToString(), #ViewContext.RouteData.Values["controller"])
</li>
#*#if (#ViewContext.RouteData.Values["controller"].ToString() != "Dashboard" ||
#ViewContext.RouteData.Values["action"].ToString() != "Dashboard")
{
}*#
<li class="breadcrumb-item active">#ViewBag.Title</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
#RenderBody()
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
#Html.Partial("_Footer")
#Html.Partial("_Aside")
</div>
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/adminlte/js")
#RenderSection("scripts", required: false)
</body>
</html>
mmenu.demo.css
.header,
.content,
.footer {
text-align: center;
}
.header,
.footer {
background: #4bb5ef;
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 44px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 44px;
padding: 0 50px;
}
.header.fixed {
position: fixed;
top: 0;
left: 0;
}
.footer.fixed {
position: fixed;
bottom: 0;
left: 0;
}
.header a {
display: block;
width: 28px;
height: 18px;
padding: 11px;
margin: 2px;
position: absolute;
top: 0;
left: 0;
}
.header a:before,
.header a:after {
content: '';
display: block;
background: #fff;
height: 2px;
}
.header a span {
background: #fff;
display: block;
height: 2px;
margin: 6px 0;
}
.content {
padding: 150px 50px 50px 50px;
}
I am using a custom script from the https://cornel.bopp-art.com/lightcase/ website. I have implemented correctly in my website, the problem is that i am trying to have a button under an image. Right now there is an "alt" with a text. How to insert a button on there? I have tried many things but non of them are working. Here is an image that shows how it looks, what i am trying to do is set up a button where it says "cool down"
<div class="col-md-4 col-sm-6 fashion photography " >
<a href="img/tshirt.jpg" data-rel="lightcase"class="portfolio_item" >
<img src="img/men.jpeg" alt="this t-shirt is awesome" class="img-responsive">
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>Men Tennis Style </span> <em>Fashion</em>
</div>
</div>
</div>
</a>
</div>
You can use this for positioning the button over the image.
<!DOCTYPE html>
<html>
<head>
<title>prasad</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.photography {
position: relative;
width: 100%;
max-width: 400px;
}
.photography img {
width: 100%;
height: auto;
}
.photography .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #884992;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.photography .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<div class="col-md-4 col-sm-6 fashion photography container">
<a href="https://img.romwe.com/images/romwe.com/201701/1483596883558198680_thumbnail_800x.webp" data-rel="lightcase"class="portfolio_item" >
<img src="https://img.romwe.com/images/romwe.com/201701/1483596883558198680_thumbnail_800x.webp" alt="this t-shirt is awesome" class="img-responsive">
<button class="btn">Cool down</button>
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"><span>Men Tennis Style </span> <em>Fashion</em></div>
</div>
</div>
</a>
</div>
</body>
</html>
Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>
You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
I created two divs which can drag and re-size. I used bootstrap to style these two divs. The code is fine and I can drag and re-size two divs finely. But these two divs are overlapping. What is the thing that I do incorrectly? Here is my code.
$('.draggable-handler').mousedown(function(e){
drag = $(this).closest('.draggable')
drag.addClass('dragging')
drag.css('left', e.clientX-$(this).width()/2)
drag.css('top', e.clientY-$(this).height()/2 - 10)
$(this).on('mousemove', function(e){
drag.css('left', e.clientX-$(this).width()/2)
drag.css('top', e.clientY-$(this).height()/2 - 10)
window.getSelection().removeAllRanges()
})
})
$('.draggable-handler').mouseleave(stopDragging)
$('.draggable-handler').mouseup(stopDragging)
function stopDragging(){
drag = $(this).closest('.draggable')
drag.removeClass('dragging')
$(this).off('mousemove')
}
#media (min-width: 600px) and ( min-height: 600px) {
.panel{
background-size: cover;
max-width: 1000px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
max-height: 1000px;
cursor: move;
resize: both;
background-color: #E6E6FA;
}
.panel-body{
background-color: #E6E6FA;
background-size: cover;
}
}
.resizable{
overflow: hidden;
resize:both;
background-size: cover;
}
.draggable{
position: absolute;
z-index: 100;
}
.draggable-handler{
cursor: pointer;
}
.dragging{
cursor: move;
z-index: 200 !important;
}
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<title>Replayable widget</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="div1_panel" class="panel panel-primary resizable draggable" >
<div class="panel-heading draggable-handler">
<h3 class="panel-title"><b>Div1</b></h3>
</div>
<div class="panel-body">
<b>Hi, I'm div1</b>
</div>
</div>
<div id="div2_panel" class="panel panel-primary resizable draggable" >
<div class="panel-heading draggable-handler">
<h3 class="panel-title"><b>Div2</b></h3>
</div>
<div class="panel-body">
<B>Hi, I'm div2</B>
</div>
</div>
</body>
</html>
Thank you...
You set both divs position:absolute in the class .draggable. That's why both divs are at the left-top corner (left: 0px, top: 0px). A solution would be to add the style position: absolute; not before the dragging starts, i.e. at the mousedown event.
e.g.:
https://jsfiddle.net/m3rg34qm/
All I have done in the fiddle is
removed position: absolute from the .draggable class
added drag.css('position', 'absolute'); inside of the onmousedown handler
assigned a static width to the container .panel
I am trying to set up a grid view for a widget I'm building with angular matirial.
Basically I want a side bar with fixed width on the left, and on the right the content with three sections in a column: a header with fixed height (60px), a content which should fill the widget, and a footer with fixed height (60px);
Here is a plunker I have setup.
Plunker
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layot="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layot="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
JS:
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
Right now my content view does not appear at all (width of 0). I think I am missing something with angular material, but what?
Also I added draggable and resizable options from jquery-ui but I dont think that is the problem.
Thanks for the help.
Edit 1:
Just a typo, the plunker is fixed and working, hope it would help someone.
You made a typo.
In the div which has class my-main change layot="column to layout="column". The same mistake is made in the div which has class my-sidebar.
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layout="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layout="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>