Using Sortable.js I'm trying to make only Collapsible elements change their order so if I move element #1 in the place of element #2 they don't affect the green line between them. I've tried filter option but it just blocks my green line element to be draggable but I can put any element in place of it which I want to block. Is it possible to make with library like that?
Since I mentioned using swap, here's a demo that may work (I know it's late but for the record)
Sortable.create(list, {
draggable: ".list-group-item",
filter: ".divider",
swap: true,
swapClass: "highlight",
animation: 150,
});
body {
padding: 1em;
text-align: center;
}
.highlight {
background-color: #f9c7c8 !important;
}
.divider {
height: 20px;
background: green;
width: 3px;
margin-left: 50%
}
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div id="list" class="list-group">
<div class="list-group-item">Item 1</div>
<div class="divider"></div>
<div class="list-group-item">Item 2</div>
<div class="divider"></div>
<div class="list-group-item">Item 3</div>
</div>
I'm using bootstrap 4 input-group and appending or pretending my inputs with add-ons as labels.
For the inputs its looking good. Now I need a multi-line add-on or label for text area.
I'm looking for best possible solution in Bootstrap or CSS.
Here is the code I'm trying.
<style>
.h-unset {
height: unset !important;
}
.multiline-label {
display: inline-block;
word-wrap: break-word;
word-break: break-word;
width: 100%;
}
</style>
<div class="input-group input-group-sm mb-3 row mx-0">
<div class="input-group-prepend col-md-3 px-0">
<label for="naastVastgoedbeleg-ging"
class="input-group-text w-100 rounded-0 multiline-label h-unset"
id="label-naastVastgoedbeleg-ging">
<strong>Werkzaamheden naast vastgoedbeleg-ging (bijv. loondienst of onderneming)</strong>
</label>
</div>
<textarea id="naastVastgoedbeleg-ging"
class="form-control rounded-0 col-md-9 h-unset"
aria-label="naastVastgoedbeleg-ging"
aria-describedby="label-naastVastgoedbeleg-ging">
</textarea>
</div>
Thankx for helping Happy Coding!
It worked by using this css
.multiline-label strong {
white-space: pre-wrap;
}
I'm a newbie to Bootstrap and I'm having a problem getting two sibling columns to render to the same height under a parent DIV. Basically, I'm trying to create a "blackboard" next to the video which I'd like to render 100% with the video player but with a black background when the page loads.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Responsive Custom Video Player</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.jumbotron {
padding: 0;
margin-bottom: 0;
}
.blackboard {
background-color: #000;
color: #fff;
min-height: 100%;
margin: 0 auto;
text-align: left;
}
</style>
<div class="row jumbotron">
<div class="player col-sm-6">
<video width="100%" poster="videos/poster.jpg" id="videoPlayer">
<source src="videos/BigBuckBunny_512kb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="blackboard col-sm-6">
BLACKBOARD
</div>
</div>
</body>
</html>
The "blackboard" DIV is only rendering the height of the text inside the DIV. The jumbotron's default background-color of #eee fills the rest of the DIV.
This works but it seems a bit hacky. Add ID selectors to those two DIVs and:
// Force blackboard to the same height as the player.
$(window).resize(function() {
$("#blackboard").height($("#player").height());
})
$(window).resize(); // On page load
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var currentImage = $('#slider div');
var nextImage = $('#slider').find('div').next;
var animation = .animate({'marginLeft' : "-=900px"}):
$(document).ready(function(){
$(currentImage).click(function(){
$(currentImage).animate();
});
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slider">
<div id="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
</body>
</html>
and CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#slideshow {
width: 100%;
float: left;
}
#slider {
margin: 10px auto;
height: 360px;
width: 900px;
border: 1px solid #999;
overflow: hidden;
}
#slider #image {
height: 360px;
width: 900px;
float: left;
position: relative;
z-index: 2;
}
This is a HTML (with Jquery in it) and a CSS file.
What i am trying to do is that if you click on an #image, the #image wil animate 900px to the left.
But i have a problem because nothing happen if i click on #image.
Can someone help me?
P.S. I am from the Netherlands, so I apologise if I have bad English.
You have a lot wrong with your script ... try this out:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slideshow">
<div id="slider">
<div class="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var currentImage = $('#slider').find('div').first(),
nextImage = currentImage.next();
currentImage.click(function(){
$(this).animate({marginLeft:"-=900px"});
});
});
</script>
</body>
Couple points:
As was called out, make your images use a class instead of an id if you want to reuse the name. Multiple elements with the same id is invalid HTML.
You did not close <div id="slideshow"> ... I added the closing tag.
Move your script down to the bottom of the body ... this is best practice to improve the speed of page rendering (otherwise the page needs to parse the entire script before displaying any content).
Your use of .next() was incorrect ... it is a function, and all functions are called at bare minimum with open/close parenths.
You were already caching #slider div, so I leveraged that existing cachine when searching for nextImage (I applied the .first() function because it will get all of the divs if you don't filter it somehow.
Your storage of the animation was ... wrong, in about every way possible. You can store the animation in variable as a function, but only for reuse, and clearly you are not ready for that yet. I moved the animation down to where it should be, which is applied to the element in the click event itself.
When referencing the DOM names in the .animate() function, you only need to apply quotation marks if you use the CSS version ('margin-left' instead of marginLeft).
No guarantees that this will do what you think it should do because your CSS is ... too much to handle right now, but at least your HTML and JS will now be valid and you can focus on the problem at hand.
I have been fighting with getting the Dijit.form.DateTextBox working inside of a div. I have found that if I apply the "claro" class to the body tag that it will work just fine. Although, I don't want the claro class overwriting my other styles. Also, I don't have access to my body tag on all of my pages due to MVC.
Here is what I have:
<html>
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.layout.ContentPane");
</script>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
</head>
<body>
<table>
<tr>
<td>
<div dojoType="dijit.layout.ContentPane" class="claro">
<input type="text" name="date1" id="date1" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
</div>
</td>
<td>
<div dojoType="dijit.layout.ContentPane" class="claro">
<input type="text" name="date2" id="date2" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
</div>
</td>
</tr>
</table>
</body>
</html>
Just had him implement the Calendar feature that comes with jQueryUI. It is much more straight forward. I see Dojo as more of an Application Framework instead of just using certain widgets for web pages.
This happens because, by default all dojo pop-ups are appended to the BODY (weird).
I found a work around. Just copy the tundra/calendar.css to calendarFix.css and remove all .tundra or .claro references from it. For example, consider this fragment:
:
.tundra .dijitCalendarDecrease {
background-position: top left;
}
.tundra .dijitCalendarIncrease {
background-position: -30px top;
}
.tundra .dijitCalendarContainer {
font-size: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #ccc;
margin: 0;
}
:
to
:
.dijitCalendarDecrease {
background-position: top left;
}
.dijitCalendarIncrease {
background-position: -30px top;
}
.dijitCalendarContainer {
font-size: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #ccc;
margin: 0;
}
: