I am trying to load two instances of jQuery UI selectable, but there seems to be an issue with the second one. How can I solve this?
Here is my code: http://jsfiddle.net/3pKQf/1/
HTML
Div 1
<div id="div1">
<ul id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div><br><br>
Div 2
<div id="div2">
<ul id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div>
CSS
#selectable .ui-selecting {
background: #C41C7B;
}
#selectable .ui-selected {
background: #C41C7B;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#selectable li {
margin: 0px;
padding: 3px;
float: left;
width: 16px;
height: 16px;
font-size: 10px;
font-family: Arial;
text-align: center;
}
JavaScript
$(function() {
$("#selectable").bind('mousedown', function (e) {
e.metaKey = true;
}).selectable();
});
They need different id's. Both are #selectable.
Here's a working update using a class .selectable. http://jsfiddle.net/3pKQf/4/
Related
I've got a few jQuery UI sortable lists and would like to move the items from one list to another. Except one blocked list: this should be able to receive items from other lists but the items inside this list shouldn't even react to attempts to be moved. Is this possible? How? I tried to use .sortable("cancel") in the start event but this seems not to work...
Please see here, the second list should be the "blocked" one: http://jsfiddle.net/r1rffht7/
$(function() {
$( ".sortable_list" ).sortable({
connectWith: ".connectedSortable",
}).disableSelection();
});
You can update your JQuery-UI sortable function by using the cancel selector like so (or see this Updated Fiddle:
Note: make sure to include your sortable_list class in the blocked_list div.
$(function() {
$(".sortable_list").sortable({
connectWith: ".connectedSortable",
cancel: ".blockedList"
}).disableSelection();
});
.blockedList {
border: 1px solid #f00 !important;
}
.sortable_list,
.blockedList {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
.sortable_list li,
.sortable_list .li,
.blockedList li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<h3>Conected lists : You can move items between any list</h3>
<ul id="sortable1" class="sortable_list connectedSortable">
<li class="ui-state-default">List 1 - Item 1</li>
<li class="ui-state-default">List 1 - Item 2</li>
<li class="ui-state-default">List 1 - Item 3</li>
<li class="ui-state-default">List 1 - Item 4</li>
<li class="ui-state-default">List 1 - Item 5</li>
</ul>
<ul id="sortable2" class="sortable_list blockedList connectedSortable">
<li class="ui-state-highlight">List 2 - Item 1</li>
<li class="ui-state-highlight">List 2 - Item 2</li>
<li class="ui-state-highlight">List 2 - Item 3</li>
<li class="ui-state-highlight">List 2 - Item 4</li>
<li class="ui-state-highlight">List 2 - Item 5</li>
</ul>
<ul id="sortable3" class="sortable_list connectedSortable">
<li class="ui-state-default">List 3 - Item 1</li>
<li class="ui-state-default">List 3 - Item 2</li>
<li class="ui-state-default">List 3 - Item 3</li>
<li class="ui-state-default">List 3 - Item 4</li>
<li class="ui-state-default">List 3 - Item 5</li>
</ul>
<ul id="sortable4" class="sortable_list connectedSortable">
<li class="ui-state-highlight">List 4 - Item 1</li>
<li class="ui-state-highlight">List 4 - Item 2</li>
<li class="ui-state-highlight">List 4 - Item 3</li>
<li class="ui-state-highlight">List 4 - Item 4</li>
<li class="ui-state-highlight">List 4 - Item 5</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
I've been trying to get my site which has a sidemenu to override the normal functionality for the top menu when mobile view is operated.
i.e. i want the menuitems to be full width.
<div class="col-md3 pull-left">
<div class="bs-sidebar hidden-print affix-top" id="sidemenu">
<ul class="nav bs-sidenav">
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""><span>Admin</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse ">
<li class="">
<a href="lnk" title="">
Manage Members
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Admin/Member/addnew" title="">
Add A New Member
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""><span>Committee</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse ">
<li>
<a href="/Public" title="">
Home
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Public/Contact" title="">
Contact Us
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
</div>
</div>
I've tried and failed with a few approaches so ive created a "vanilla" template of how my menu looks before i try and "fix" it. I basically want the sidemenu to become that fullwidth top menu when the viewport becomes too small to accommodate both sidemenu and main content side by side.
I've hacked an example from a default bootstrap template below.
jsbin example
Default template
Default template's in mobile with vertically stacked menu
Example showing the sidemenu i want to replace the vertically stacked menu in previous image.
You need two navbars (one at the top and one at the side) and then use JQuery to move the side navbar to the top of the page.
So if you have two navbars like so:
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="container ">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
<a class="navbar-brand " href="/ ">Application name</a>
</div>
<div id="topmenu" class="navbar-collapse collapse ">
<ul class="nav navbar-nav ">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li>
Register
</li>
<li>
Log in
</li>
</ul>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-stacked" id="menu-bar">
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseOne">
Admin
</a>
<ul id="collapseOne" class="panel-collapse collapse">
<li>Manage Members</li>
<li>Add a new Member</li>
</ul>
</li>
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseTwo">
Committee
</a>
<ul id="collapseTwo" class="panel-collapse collapse">
<li>Home</li>
<li>Contact Us</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="container bodycontent">
<div class="jumbotron">
<h1>Testing Responsive sidemenu</h1>
<p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<article>
<h1>Content</h1>
<p>Content here</p>
</article>
</div>
</div>
</div>
</div>
</div>
The JQuery is as follows:
var $window = $(window),
$html = $('#menu-bar');
$window.resize(function resize(){
if ($window.width() < 768) {
// When the side bar is moved to the top, this stops it being fixed in place
$("#navbar").removeClass('navbar-fixed-top');
return $html.removeClass('nav-stacked');
}
$("#navbar").addClass('navbar-fixed-top');
$html.addClass('nav-stacked');
}).trigger('resize');
And CSS:
/* CSS used here will be applied after bootstrap.css */
#media (max-width: 767px) {
.content {
padding: 15px;
margin-top: 10px;
}
}
#media (min-width: 768px) {
#menu-bar .panel {
margin-bottom: 0;
background-color: rgba(0,0,0,0);
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu-bar li a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
#navbar {
float: left;
width: 200px;
height: 100%;
}
.content {
margin-left: 200px;
min-height: 100%;
margin-top: 60px;
}
.container {
margin-left: 10px;
padding-right: 150px;
}
}
.navbar-brand > h3 {
margin-top: 0;
margin-bottom: 0;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
#navbar {
margin-top: 50px
}
If you want the left hand side bar to have certain CSS, you should specify the CSS like so:
#media (min-width: 768px) {
#menu-bar {
/* Put your CSS here. It will not apply to the menu-bar when it moves to the top */
}
}
Bootply here
I want to show my data like this https://dl.dropboxusercontent.com/u/12173475/sample.png ,
a bit like controlgroup, but controlgroup not seem to merge two labels,
how can I do?
This is my code (temporarily), but I hope there is a line between those(like controlgroup).
<ul data-role="listview" data-inset="true">
<li>
<div>name</div>
<div class="ui-li-aside">name1</div>
</li>
</ul>
You can do it by modifying CSS.
HTML
<ul class='my_list' data-role="listview" data-inset="true">
<li>
<div>name</div>
<div class="ui-li-aside">name1</div>
</li>
</ul>
CSS
.my_list li{
padding:0px !important;
}
.my_list li div{
padding:10px;
}
.my_list li div:nth-child(2){
width:10%;
border-right:1px solid #ccc;
}
.my_list li .ui-li-aside{
margin:0px;
}
here is Demo Fiddle
I'm trying to create a Listview that contains a mix of buttons and links. Is there any additions/adjustments I can make to the markup to have buttons appear the same as links? At this stage, I'm trying to do as much as I can in markup and not custom CSS (or JS!)
The markup I'm using is:
<ul data-role="listview" data-inset="true">
<li>Edit</li>
<li>
<form action="#">
<button type="submit">Publish</button>
</form>
</li>
<li>
<form action="#">
<button type="submit">Delete</button>
</form>
</li>
</ul>
What I'd like is this:
(source: reb4.me)
I only seem able to get this:
(source: reb4.me)
Here is a way to do it.
jQM 1.4
To get the arrow icons on the right, add the classes ui-btn ui-btn-icon-right ui-icon-carat-r to the buttons:
<ul data-role="listview" data-inset="true">
<li>Edit
</li>
<li>
<form action="#">
<button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
</form>
</li>
<li>
<form action="#">
<button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
</form>
</li>
</ul>
Then to remove the extra padding, borders, shadows etc. add this CSS:
.ui-li-static {
padding: 0 !important;
}
.ui-li-static form button {
margin: 0;
box-shadow: none !important;
border: 0;
text-align: left;
}
Here is a DEMO
jQM 1.3
If you are stuck with jQM 1.3 it is a little more complicated:
<ul data-role="listview" data-inset="true">
<li>Edit
</li>
<li>
<form action="#">
<button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
</form>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon"> </span>
</li>
<li>
<form action="#">
<button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
</form>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon"> </span>
</li>
</ul>
.ui-li-static {
padding: 0 !important;
}
.fakeLinkIcon {
position: absolute;
right: 10px;
top: 50%;
margin-top: -9px;
}
.ui-li-static form div.ui-submit{
padding-right: 2.5em;
}
.ui-li-static form div.ui-submit {
margin: 0;
box-shadow: none !important;
border: 0;
text-align: left;
border-radius: 0;
}
.ui-li-static form div.ui-submit .ui-btn-inner{
padding-left: 15px;
}
.ui-last-child form div.ui-submit {
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
}
.ui-first-child form div.ui-submit {
border-top-right-radius: 16px;
border-top-left-radius: 16px;
}
DEMO
I have made a 3D cube, and when you click on some element on the cube, a div (larger than the cube) is displayed on top of the cube. In this div are some links – the problem is, that the parts of the links that are exactly above the cube, doesn’t work. The parts of the links that are not above the cube (they are further to the right or left) work perfectly fine as links. I am using z-index to position the layers, and I simply can’t figure out what is wrong. If anyone has a suggestion, I would very much appreciate it.
I added my code below - it is very extensive, so I tried to leave out the elements that shouldn't be related to the issue. I don't think that the script should be the issue either, but I added the code related to the elements just in case.
Thanks
HTML:
<ul id="cube">
<li class='face' id="facecubeone"></li>
<li class='face' id="facecubetwo"></li>
<li class='face' id="facecubethree"></li>
<li class='face' id="facecubefour">
<ul class="cube2 low oneleft" id="cubefour1">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high twoleft" id="cubefour2">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high threeleft activefour active" id="cubefour3">
<li><img id="mig" src="img/cvbillede.jpg" width="100%" height="100%" alt="ABOUT ME"></img></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high fourleft activefour active" id="cubefour4">
<li></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high fiveleft" id="cubefour5">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 low sixleft" id="cubefour6">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 low sevenleft" id="cubefour7">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high eightleft" id="cubefour8">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high nineleft activefour active" id="cubefour9">
<li></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
</li>
<li class='face'></li>
<li class='face'></li>
</ul>
<div id="myprojects">
<div class="projects" id="projectme">
<img class="exit" src="img/exit.png" alt="exit"></img>
<div class="projecttext">
<p class="titles">About me</p>
<p class="descriptions" id="">
TEXT
</p>
<div class="links" id="">LINK TO RESUME - only part of it works<br>LINK TO LINKEDIN PROFILE</div>
</div>
<img class="projectimages" id="" src="img/cvbillede.jpg" width="310px" height="310px" alt="pictureofme"></img>
</div>
</div>
CSS:
#cube {
position: fixed;
clear: both;
z-index: 900;
padding: 0;
width: 350px; height: 350px;
list-style: none;
/* centering */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transform: rotate3d(-10, 30, -4, 47.5deg);
-webkit-transform-style: preserve-3d;
-webkit-animation: ani 8s infinite linear; }
.cube2 {
position: relative;
/*z-index: 901;*/
float: left;
margin: 0px;
padding: 0;
width: 116.63px; height: 116.63px;
list-style: none;}
.face, #face {
box-sizing: border-box;
position: absolute;
top: 50%; left: 50%;
margin: -175px;
width: 350px; height: 350px;
background: black; }
.square {
box-sizing: border-box;
position: absolute;
margin-top: 0px;
margin-left: 0px;
padding: 0em;
width: 116.63px; height: 116.63px;
padding-top: 2.5px;
background-color: black;}
#myprojects {
clear: both;
position: absolute;
z-index: 9990;
width: 700px;
height: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none;}
.projects {
position: relative;
z-index: 9991;
width: 680px;
height: 380px;
padding: 10px;
display: none;
border: 2px solid black;
background: rgb(68,68,68); /* Old browsers */}
.exit {
width: 20px;
height: 20px;
float: right;}
.projecttext {
clear: both;
position: relative;
z-index: 9992;
margin-top: 0px;
float: left;
height: 350px;
width: 370px;}
.titles {
margin-top: 0px;}
.descriptions {
margin-right: 10px;
height: 220px;
text-align: justify;}
.links a{
position: relative;
line-height: 26px;
z-index: 9999;}
.links a:hover {
}
.projectimages {
margin-top: 43px;
float: right;
width: 310px;}
SCRIPT:
$(function(){
var visible = false;
$('.exit').click(function(){
$('#myprojects').fadeOut(1500);
$('.projects').fadeOut(1500);
$('.square').attr('href', '#');
$(".activenone").addClass('active');
$(".active").removeClass('activenone');
visible = false;
});
$('#cubefour3').click(function(){
if (visible == false) {
$('#myprojects').fadeIn(1500);
$('#projectme').fadeIn(1500);
$('.square').removeAttr("href");
$(".active").addClass('activenone');
$(".activenone").removeClass('active');
visible = true;
}
});
});
So I finally got it working :)
I had applyed a transformation to each of the 6 sides in the cube in other to make it appear like 3d, like e.g. so:
.face:nth-child(6) {
-webkit-transform: rotateX(-90deg) translateZ(175px);
-moz-transform: rotateY(-90deg) translateZ(175px);
-ms-transform: rotateY(-90deg) translateZ(175px);
-o-transform: rotateY(-90deg) translateZ(175px);
transform: rotateY(-90deg) translateZ(175px);
}
The translateZ somehow overruled the div I had placed on top of it, so the links didn't work. (I have no explanation of this though). I then applyed a transformation on the new div, like so:
.projects {
-webkit-transform: translateZ(275px);
-moz-transform: translateZ(275px);
-ms-transform: translateZ(275px);
-o-transform:translateZ(275px);
transform: translateZ(275px);
}
Amazingly it seems to be working now :)