Im trying to implement the "multi" example on this page... http://rubaxa.github.io/Sortable/ . I feel like I've "recreated" the structure and the appropriate options as set forth on https://github.com/RubaXa/Sortable , but I am struggling to get this to function as i want.
the simplified version of what i'm trying to do is here... https://jsfiddle.net/uqcqufo8/
HTML...
<div id="multi">
<div><div data-force="5" class="layer title title_xl">Multi</div></div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group A</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group c</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group b</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
</div>
javascript...
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
Basically, the large grey squares should be sortable (as they are), but the colored squares should also be sortable - they should be sortable within their individual boxes, and they should be draggable from one grey box to another. I'm failing to see what i'm missing. Thanks.
I edited your javascript to the below and it works for me. I followed the examples on the Sortable page so it's likely the preferred method:
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
Sortable.create(el, {
group: 'blocks',
animation: 150
});
});
Related
I am trying to write one vertical menu like in this website . On hover the vertical menu should shift marginally to the right side and should display the sub menu.
I have been failed to accomplish this.
Please help me :(
<html>
<head>
<title></title>
<style>
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>
Here's the solution, I used JQuery:
HTML:
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS:
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
JQuery:
$(document).ready(function(){
$(".one").mouseenter(function(){
$(".apear").show(500);
});
$(".apear").mouseleave(function(){
$(".apear").hide(500);
});
});
Here is a fiddle
I have a lot of overflow:hidden; items, how can I show overflow:hidden; items when I click next and previous like in my example below? I would also like to have moving forward and backward effect. I have tried some plugin but it doesn't work when I click next and prev. Any idea of how to do that easily ?
.container{
width:580px;
height:70px;
background:#ccc;
overflow-y:hidden;
}
.item{
display:inline-block;
z-index:5;
background:#fff;
margin:5px;
padding-top:10px;
width:100px;
height:50px;
text-align:center;
}
.prev , .next{
cursor:pointer;
width:50px;
}
.prev:hover , .next:hover{
background:#000;
color:#fff;
}
<div class="prev">Prev</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div class="next">Next</div>
I have 3 <div>s as follows. In that one of the <div> has panel bar so its height may be increased based on the content of each panel bar. Now I want to increase the height of other two divs based on the height of the <div> which has panel bar. How can I achieve this?
<div class="leftdiv">
</div>
<div class="maindiv">
//Panel bar is inside this div.
</div>
<div class="rightdiv">
</div>
"leftdiv" and "rightdiv" height should be increase base on "maindiv" height???
You could also do it using css and positioning the divs absolutely or relatively, with margins for the central item.
Fiddle:
http://jsfiddle.net/o403Ljoq/
Code:
<div class="parentDiv">
<div class="leftDiv" >text</div>
<div class="mainDiv">text<div>Something with height</div>
<div style="height:200px;">something else with height</div></div>
<div class="rightDiv" >text</div>
.parentDiv
{
position:relative;
background-color:gray;
}
.leftDiv
{
background-color:blue;
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:100px;
}
.mainDiv
{
background-color:yellow;
margin-left:100px;
margin-right:100px;
}
.rightDiv
{
background-color:green;
position:absolute;
right:0px;
top:0px;
bottom:0px;
width:100px;
}
Demo
html
<div class="container">
<div class="leftdiv">a</div>
<div class="maindiv">//Panel bar is inside<br/> this div.<br/>//Panel bar is inside<br/> this div.</div>
<div class="rightdiv">c</div>
</div>
css
.leftdiv {
background:red;
display:table-cell;
}
.maindiv {
background:green;
display:table-cell;
}
.rightdiv {
background:blue;
display:table-cell;
}
.container{
display:table;
width:100%;
}
try this example using bootstrap (row col-wrap class) Try the example in full screen mode
#media (min-width: 768px) {
/* top row */
.col .well{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.col-base{
margin-top: -15px;
}
}
#media (max-width: 767px) {
.row.base{
display:none;
}
}
.col-wrap{
overflow: hidden;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row col-wrap">
<div class="col-sm-4 col">
<div class="well">
<p>A </p>
<p>B </p>
<p>C </p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>D </p>
<p>E </p>
</div>
</div>
</div>
<div class="row base col-wrap">
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
</div>
</div>
You may use JavaScript for achieving the result:
var commonHeight = $(".maindiv").height();
$(".leftdiv").height(commonHeight);
$(".rightdiv").height(commonHeight);
The full example and demo is here:
http://jsfiddle.net/pLmp1zpr/
Use flexbox to do this.
Wrap your divs in a container.
HTML:
<div class="container">
<div class="leftdiv"></div>
<div class="maindiv"></div>
<div class="rightdiv"></div>
</div>
CSS:
.container{
display:flex;
align-items:stretch;
flex-flow:row wrap;
}
.leftdiv,.rightdiv,.maindiv{
flex:1 0;
}
Here is the DEMO.
I'm making a navigation and I don't want to use CSS3 to make gradient background instead of that i use images. But buttons has corners so my button is made from 3 images to make its size proportional to text. I am trying to change background on hover and I need to change all 3 backgrounds: left, right and mid. I tried jquery but it doesn't seem to work..
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$('.topnavbtn').mouseenter(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft_on.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg_on.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight_on.png) no-repeat');
}).mouseout(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight.png) no-repeat');
});
});
</script>
HTML:
<ul style="list-style-type: none; margin:0; padding:0;padding:10px;">
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
And CSS:
.topnavbtn {
height:34px;
float:left;
display:inline-block;
margin:7px;
font-weight:bold;
text-transform:uppercase;
color:#FFF;
line-height: 34px;
}
.topnavbtn .left {
height:34px;
width:9px;
background:url(images/nav/images/navLeft.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .right {
height:34px;
width:9px;
background:url(images/nav/images/navRight.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .mid {
background:url(images/nav/images/navBg.png) repeat-x;
height:34px;
width:auto;
float:left;
display:inline-block;
}
This is a syntax error :
$(this).$('.left').css(...
try
$('.left', this).css(...
Just replace
$(this).$('.left')
with
$(this).children('.left')
and so on for rest of classes .
I have an image, bg, embedded in a div using CSS just above the footer. The idea is when the mouse moves left or right, the image moves along with it. The Javascript above /body is what causes this to work. It works well, but the nav links are now unclickable and the content divs are opaque where you can see the bg image through them. When I remove the #bg div, everything works fine. Any ideas how to fix it? HTML and CSS are below. I got this from tutorial here: panning.
<!DOCTYPE HTML>
<html>
<head>
<title>portfolio</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/web.css">
<script src="js/modernizr.custom.js"></script>
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="site">
<header>
<nav>
<ul>
<li>HOME</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>PORTFOLIO</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>CODE</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<div id="left_col1">
<a href="../photo_collection_blom/index.html" target="blank"><img src="img/10.png" alt="image" width="280"
height="170" class="fade"></a>
<p>lorem ipsum</p>
</div>
<div id="mid_col1">
<a href="../non_profit/index.html" target="blank"><img src="img/vpf.png" alt="image" width="280" height="170"
class="fade"></a>
<p>lorem ipsum</p>
</div>
<div id="right_col1">
<a href="../cd/index.html" target="blank"><img src="img/cd.png" alt="image" width="280" height="170"
class="fade"></a>
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="left_col2">
<img src="img/zen.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div id="mid_col2">
<a href="../practicum/index.html" target="blank"><img src="img/practicum.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div id="right_col2">
<a href="../dropdown_nav/index.html" target="blank"><img src="img/navs.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="left_col3">
<a href="http://centralpaintstore.com" target="blank"><img src="img/cps.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div id="mid_col3">
<img src="img/88.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div id="right_col3">
<img src="img/99.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="bg"></div>
<footer>
<p>lorem ipsum</p>
</footer>
</div>
<!-- close site -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script>
$(document).ready(function () {
$('#bg').mousemove(function (e) {
var mousePos = (e.pageX / $(window).width()) * 100;
$('#bg').css('backgroundPosition', mousePos + '% 0');
});
});
</script>
</body>
</html>
CSS:
* {
text-decoration:none;
font-family:Helvetica, sans-serif;
z-index:100;
}
html {
background:url(../img/background.gif);
height:100%;
}
body {
height:100%;
z-index:100;
}
#site {
width:1200px;
min-height:100%;
margin:auto;
position:relative;
z-index:100;
}
header {
background:url(../img/background_design.jpg);
height:63px;
padding-top:25px;
z-index:100;
}
nav {
width:500px;
padding:10px;
margin:auto;
font-family:helvetica, arial, sans-serif;
font-size:1.2em;
color:#dcd8cf;
z-index:100;
}
nav ul {
word-spacing:20px;
}
li {
display:inline;
margin:auto;
}
a:link {
color:#dcd8cf;
}
/* unvisited link */
a:visited {
color:#e25d33;
}
/* visited link */
a:hover {
color:#e25d33;
}
/* mouse over link */
a:active {
color:#e25d33;
}
/* selected link */
p {
font-family:Arial, Helvetica, sans-serif;
color:#000;
line-height:1.2em;
margin:10px 5px 20px 5px;
}
#site p a:link {
color:#ed1b24;
}
#site p a:visited {
color:#ed1b24;
}
#site p a:hover {
text-decoration:underline;
}
#site p a:active {
color:#ed1b24;
}
h3 {
font-family:helvetica, arial, sans-serif;
font-size:1.5em;
color:#000;
margin:20px;
}
#bg {
background:url(../img/boston_skyline4.png) no-repeat 0 0 scroll;
height:auto;
left:0;
min-height:100%;
min-width:1024px;
overflow:hidden;
position:fixed;
top:0;
width:100%;
z-index:1;
}
#left_col1, #left_col2, #left_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
margin-left:120px;
margin-right:20px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
.clearfix {
height:20px;
clear:both;
}
#mid_col1, #mid_col2, #mid_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
margin-right:20px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
#right_col1, #right_col2, #right_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
#left_col1, #mid_col1, #right_col1 {
margin-top:20px;
}
#left_col3, #mid_col3, #right_col3 {
margin-bottom:20px;
}
footer {
background:url(../img/footer.gif);
margin:auto;
position:absolute;
bottom:0;
width:1200px;
height:55px;
}
footer p {
font-family:helvetica, arial, sans-serif;
color:#e0dfdf;
font-size:.9em;
margin:auto;
padding-top:1.5em;
padding-left:1.5em;
}
The <div id="bg"> tag is sitting on top of everything else in the <div id="body" wrapper. Z-index won't work on your floated columns, so you'll have to wrap your columns in another div or move the <div id="bg"> tag outside of the <div id="body" tag.
Here's a fiddle of the first solution: http://jsfiddle.net/hjeAT/3/
And the second: http://jsfiddle.net/hjeAT/4/
i think the z-index of <div id="bg"> changed when run. you should check the z-index when the nav links are unclickable. may be you can change the z-index in your javascript. i have another advise that you'd better remove the z-index in the css of the * selector as follows
* {
text-decoration:none;
font-family:Helvetica, sans-serif;
z-index:100;
}
Here is one solution:
Just delete <div id="bg"></div> and
CSS:
body {
height:100%;
background:url(../img/boston_skyline4.jpg) no-repeat 0 0 scroll;
}
script:
You can change the mousemove event target.
<script>
$(document).ready(function () {
$('body').mousemove(function (e) {
var mousePos = (e.pageX / $(window).width()) * 100;
$('body').css('backgroundPosition', mousePos + '% 0');
});
});
</script>