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>
Related
I'm using Nuxt.js and Bulma. I'm making navigation using Bulma tabs(https://bulma.io/documentation/components/tabs/).
I wanna insert Bulma dropdown(https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable). But it doesn't work in middle of Tabs.
I know who wanna use Bulma dropdown needs to use javascript, so I use it. But it doesn't work.
How can i fix it?
To get a dropdown working inside Bulma's tabs, you need to adjust the overflow CSS in the tabs div. I'm not sure why I had to set overflow-x and overflow-y to get this working properly, but I did.
When the dropdown is active:
overflow-x : visible;
overflow-y : visible;
When the dropdown is not active, reset to their defaults:
overflow-y : hidden;
overflow-x : auto;
Yes you can with a little amount of fiddling
There are mainly 2 problems :-
Problem 1
As bulma tabs container is flexbox, and the list of tabs are child of this flexbox, the dropdown will not be visible as it overflows out of flexbox container.
If you add overflow-y:visible to tabs container div, scrolling will happen which is not the behaviour we need
Solution
To fix this, the contents to be shown on tab selection should also come inside the tabs container as second child, so that dropdown button/link in list of
tabs has the space to show the dropdown when clicked/hovered.
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#content-child {
flex-grow: 1;
width: 100%
}
#list-child {
flex-grow: 0; //should be set to 0 as it will take up vertical space (it is set to 1 in bulma)
width: 100%;
}
Problem 2
When dropdown is used within bulma tabs, the anchor tags in dropdown gets styled by those specified for anchor tags in tabs.This is one of the main issue.
The dropdown shown thus will be styled very differently.
Solution
Bulma dropdown also allows us to insert div inside.
We can make use of this to overcome problem 1.
Just add this css for divs inside dropdown so as to make it behave like links.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
Complete solution can be seen below and you can change as required for your use case.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
#content-child {
flex-grow: 1;
width: 100%
}
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#list-child {
flex-grow: 0;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bulma#0.8.1/css/bulma.min.css" rel="stylesheet" />
<div class="tabs is-boxed" id="tab-container">
<ul id="list-child">
<li><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
<li class="dropdown is-active">
<div class="dropdown-trigger">
<a class="has-text-right custom-padding" aria-haspopup="true" aria-controls="dropdown-menu">
Drop Down
</a>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">Dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<div class=" dropdown-item is-active">Active dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<hr class="dropdown-divider" />
<div class=" dropdown-item">With a divider</div>
</div>
</div>
</li>
</ul>
<div id="content-child">
content
</div>
</div>
i want to animate div box from left to righ and right to left.
suppose i have a 2 box with bootstrap classes`example :
<div class="container">
<div class="row">
<div class="col-md-6 id="leftToRight"></div>
<div class="col-md-6 id="RightToLeft"></div>
</div>
</div>
now i want to animate #leftToRight id from left to right and #RightToLeft from righ to left.
when scroll web page.
I see many website in which this type of animation is applied.
I am very curious to know how it is happen.
You can use the wheel event to answer your question:
$(function() {
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) //On scroll down
{
$('#RightToLeft').animate({
left: "-=10px"
},5);
$('#LeftToRight').animate({
left: "+=10px"
},5);
}
else //This is added for reverse animation on scroll up
{
$('#RightToLeft').animate({
left: "+=10px"
},5);
$('#LeftToRight').animate({
left: "-=10px"
},5);
}
return false; // this line is only added so the whole page won't scroll in the demo
});
});
#RightToLeft{
position: relative;
margin: auto;
background: red;
width: 100px;
height: 100px;
}
#LeftToRight{
position: relative;
margin: auto;
background: blue;
width: 100px;
height: 100px;
}
.row{
margin: auto;
width:90%;
overflow: hidden;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6" id="LeftToRight">Left to Right</div>
<div class="col-md-6" id="RightToLeft">Right to Left</div>
</div>
</div>
I have a fiddle that changes the contrast and brightness of an image.
When I try and add it as a .vue component onto my site the slider no longer effects the image. I know the issue is around my filter function. I just can't understand why my :style attribute isn't applying the change to me element.
What am I doing wrong/not getting?
fiddle that works - https://jsfiddle.net/BBMAN/fxtrtqpj/14/
code for my .vue component that does not work.
<template>
<div class="brightness-slider container">
<h1>{{ msg }}</h1>
<h2>Built using Vue.js</h2>
<div class="row">
<div class="col-md-10">
<img ref="img" class="img img-responsive" :style="filters" />
</div>
<div class="col-md-2">
<strong>Contrast ({{contrast}})</strong>
<input class="slider vertical" type="range" orient="vertical" v-model="contrast" max="1" min="0" step="0.01" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>
<strong>Brightness ({{brightness}})</strong>
</h4>
<input class="slider horizontal" type="range" v-model="brightness" max="3" min="0" step="0.01" />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImageBrightnessSlider',
data() {
return {
//sending data to view.
msg: 'Audience Republic Brightness Modifier',
brightness: 1,
contrast: 1
}
},computed: {
filters() {
const toDash = (str) => str.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase()
debugger;
return { filter: Object.entries(this._data).filter(item => typeof(item[1]) !== 'object').map(item => `${toDash(item[0])}(${item[1]})`).join(' ') }
}
},
mounted() {
this.$refs.img.src = require('../assets/pleasure-garden-1200-by-768.jpg')
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
input[type=range][orient=vertical]{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 100%;
padding: 0 5px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 3px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
"fiddle that works" = incorrect
you are trying to shove HTML CSS JavaScript into Javascript!!!
interpreter Javascript does not understand HTML CSS!
you code must be something like this
index.html
<div id="App">
<!-- HTML code -->
</div>
<script>
// js code
</script>
<style scoped>
/* css code */
</style>
you have many mistakes, please see official documentation
also, you can see my vue examples
UPDATED:
SFC example
I have a bootstrap tooltip which I have custom styled. There seems to be an issue with it. Whenever we hover over it, it opens and then immediately closes.
HTML -
<div class="container" style="padding-top:300px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
Here's an inline link to jsFiddle
UPDATED
I made a few changes. Try this: https://jsfiddle.net/2h7jbt9n/6/
HTML
<div class="container" style="padding-top:30px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
JS
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
container: '.info-circle'
});
});
The issue was with padding for the info-circle. I wrapped it in a container. It doesn't flicker now.
Hope it helps.
You are no longer using the tooltip-arrow as the visual arrow you are using the :before and :after after as the visual arrow. The problem is that you have made the arrow bigger and made your own triangles. When you make your css arrow you are using borders. You have set your top border colors to white and blue to make it seem like the arrow has a border as well. In doing this you have forgotten that your arrow still has a bottom transparent border and this transparent border is covering up the element that you are hovering over to deploy the tooltip. So set your :before and :after psuedo elements for your .tooltip-arrow to have a bottom border of none. Like so:
.tooltip.top .tooltip-arrow:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -17px;
top: -5px;
border-width: 12px;
border-top-color: #003f6e;
border-bottom:none;
}
.tooltip.top .tooltip-arrow:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -15px;
top: -5px;
border-width: 10px 10px 0;
border-top-color: #fff;
border-bottom:none;
z-index: 1;
}
I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>