Need some help here please. I basically need a Navbar which hide the brand and removes the gap beside it when it's over its breakpoint - and to show the brand with the gap when it's under breakpoint. Any idea's please? - thanks in advance. :)
HTML is this within the Navbar toggle - only shows Brand title on small devices or collapsed:
<a class="navbar-brand visible-xs" href="#">Site Navigation</a>
CSS is this:
#media screen and ( min-width: 700px ) {
.navbar .container-fluid, .navbar-collapse {
padding-left:0;
}
.navbar-collapse.in {
padding-left:30px;
}
}
HTML is this within the Navbar toggle - only shows Brand title on small devices or collapsed:
<a class="navbar-brand visible-xs" href="#">Site Navigation</a>
CSS is this:
#media screen and ( min-width: 700px ) {
.navbar .container-fluid, .navbar-collapse {
padding-left:0;
}
.navbar-collapse.in {
padding-left:30px;
}
}
That should sort it. :)
Related
I'm trying to achieve a slide transition between two tabs. One tab is supposed to come from the left pushing the other one to the right and the opposite for the other one.
The leave transition goes well but the tab just pop in straight away without starting where it is supposed to...
I have made a CodePen to reproduce what I've tried : Slide transition test on CodePen
Here is the HTML, it is just a div containting 2 buttons that change the visibility of two div that represents my tabs content.
<div id="transition-test" class="demo">
<div class="tabs">
<button v-for="tab in tabs" class="tab" :key="tab.id" #click="selectedTab = tab.id"> {{tab.text}}</button>
<transition name="slide-right">
<div v-show="1 === selectedTab" class="tab1" key="tab1"></div>
</transition>
<transition name="slide-left">
<div v-show="2 === selectedTab" class="tab2" key="tab2"></div>
</transition>
</div>
</div>
In order to do the transition I do have the following css :
.slide-left,
.slide-right{
position: absolute;
}
.slide-right-enter-to,
.slide-right-leave {
opacity: 1;
transform: translateX(0);
}
.slide-right-enter,
.slide-right-leave-to {
opacity: 0;
transform: translateX(100%);
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 500ms ease-in-out;
}
.slide-left-enter-to,
.slide-left-leave {
opacity: 1;
transform: translateX(0);
}
.slide-left-enter,
.slide-left-leave-to {
opacity: 0;
transform: translateX(-100%);
}
Does anyone have an idea about what I'm missing here ?
I found the issue. I don't know why in the Vue transition documentation the css class added at enter is v-enter but the class applied in reality is v-enter-from...
this css class :
.slide-left-enter
becomes :
.slide-left-enter-from
Instead of coding it by yourself, you can use npm version of the transition. It will also help you with its API, Guides and Examples, so that you don't have to worry about those.
I have a simple VueJS application where I have multiple routes. For a pair of routes, I want to have a scroll down and scroll up animation while routes change.
For example, I have a search/dropdown page, where after the search result from the dropdown is selected, I want to take him to the details page but with a scroll down animation. So that the user feels he is still on the same page.
I have tried using the VuePageTransition library. That is indeed a great library but does not have this specific animation that I need.
Update:
I tried the following code. It gives a scroll-like animation but the leaving page is shown going down but the coming page is not shown during the animation.
In the template in App.vue
<template>
<div id="app">
<transition name="slide" mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
In the style tag,
.slide-enter {
}
.slide-enter-active {
animation: slide-in-coming 2s ease-out forwards;
}
.slide-leave {
}
.slide-leave-active {
animation: slide-in 2s ease-out forwards;
}
#keyframes slide-in {
from {
transform: translateY(0);
}
to {
transform: translateY(800px);
}
}
#keyframes slide-in-coming {
from {
transform: translateY(-800px);
}
to {
transform: translateY(0);
}
}
For a button, by default Bootstrap 4 allow you to set default button "size" between : xs, sm, md, lg, xl.
So, in my code, small screen first, i use sm size for screen <576px :
<button type="button" class="btn btn-success btn-sm"></button>
But for xl screen ≥1200px, need i to change size attribute or something else with Bootstrap to adjust button size ?
I don't really understand Bootstrap responsive behavior for button and 'size' attribute between small and large screen.
Thanks.
I don't think there's anything built out of the box for responsive buttons in bootstrap, you'd probably be better off extending the existing bootstrap button sizes in sass/media queries ie
.responsive-button {
#media (min-width: 576px) { #extend .btn-sm }
#media (min-width: 768px) { #extend .btn-md }
}
I haven't tested this so may need to research a bit further but hopefully this gets you on track :)
According to the Vue.js documentation, i had finally computed my CSS class dynamically according to window.onresizeevent call in mounted () function.
Example :
Here is my Bootstrap button :
<b-button :size="nsize" variant="outline-success" class="my-2 my-sm-0">
<font-awesome-icon icon="search"/>
</b-button>
Here is my function in App.vue file:
<script>
export default {
name: 'topnavbar',
data () {
return {
nsize: "sm",
mediaWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
}
},
mounted () {
if (window.addEventListener) {
window.addEventListener("resize", this.updateSize, false);
} else if (window.attachEvent) {
window.attachEvent("onresize", this.updateSize);
}
},
methods : {
updateSize: function (){
let sizeEl = "md";
let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(width <= 576){
sizeEl = "sm";
}
this.nsize = sizeEl;
}
}
}
</script>
Sources:
Get the browser viewport dimensions with JavaScript
https://fr.vuejs.org/v2/guide/class-and-style.html
I made a simple vertical content slider based on tabs and found optical issue when animating . If you click on different tab, current content slides up and in the same time new one slides down. All contents have same height. The problem is that the height is changing a little bit during the animation (focus on bottom border). I don't really know how to fix it. Is there any way to prevent it?
Here is the complete code:
http://jsfiddle.net/YGY26/8/
JS:
var active = 1;
function item(id) {
if (id !== active) {
$("#description" + active).slideUp("slow");
if (active !== id) {
$("#description" + id).slideDown("slow");
active = id;
}
}
}
HTML:
<div class='slider_box' onclick='item(1);'>
<h3>Content1</h3>
<div id='description1' class='slider_content' style='display: block'>
some content to show
</div>
</div>
<div class='slider_box' onclick='item(2);'>
<h3>Content2</h3>
<div id='description2' class='slider_content'>
some content to show
</div>
</div>
<div class='slider_box' onclick='item(3);'>
<h3>Content3</h3>
<div id='description3' class='slider_content'>
some content to show
</div>
</div>
Basic CSS:
.slider_box {
position: relative;
width: 330px;
}
.slider_box h3 {
color: white;
background: black;
}
.slider_content {
height: 330px;
display: none;
}
I am designing a web page for state machine and I am using jsplumb state machine. I want to draw this state machine on multiple tabs. Tabs are created dynamically using 'New' button
<div id="tabs">
<ul>
<li>
Untitled-1
<span class="ui-icon ui-icon-close"></span>
</li>
</ul>
<div id="Untitled-1" class="content">
<div id="Untitled-1-content" class="fsm">
</div>
</div>
</div>
In the div area of class 'fsm', state machine is drawn dynamically by dragging state machine(SM) blocks and dropping it in 'fsm' div. If there are multiple tabs, after dropping SM block in fsm div, it is draggable in fsm div only on 1st tab and not in another tabs. For example, if there are 2 tabs, I can re-position SM blocks only in 1st tab, on 2nd tab when I start dragging SM block, it disappears from fsm div and its left-top coordinates become negative.
This is the code for fsm div -
$("div.fsm").droppable({
accept: ".cTemp, .rTemp",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
var draggable = $(ui.draggable[0]);
if (draggable.attr("class").indexOf("rTemp") > -1) {
$("<div class='rBase' id='rect" + rectI + "'></div>").text("rect" + rectI).appendTo(this);
$("#rect" + rectI).append("<div class='ep'></div>").appendTo(this);
$("#rect" + rectI).addClass("draggable");
jsPlumb.draggable($(".rBase"),{containment: ".fsm", zIndex: 30});
} else if (draggable.attr("class").indexOf("cTemp") > -1) {
$("<div class='cBase' id='circle" + circleI + "'></div>").text("circle" + circleI).appendTo(this);
$("#circle" + circleI).append("<div class='ep'></div>").appendTo(this);
$("#circle" + circleI).addClass("draggable");
jsPlumb.draggable($(".cBase"),{containment: ".fsm", zIndex: 30});
}
jsPlumbDemo.init();
}
});
This might be because fsm div is created dynamically or there are more than 1 fsm divs. What would be the best option to handle this multitab situation ?
I tried to remove fsm div from all tabs except the active tab then it works. I can drag SM blocks from tab content even if there are more than 1 tabs since there is only 1 fsm div. But then I have to add fsm div back again to the tab when I switch to that tab.
Then which is the best way to save the tab's content before switching to any other tab and load it back when that tab is opened ?
To give my background, this is my first time to work on jquery/jsplumb so detailed explanation is very much appreciated.
Here is a couple of comments
You can use the Jquery command hasClass() instead of attr("class")indexOf
To handle tabs I guess you are using the Jquery command tabs() ? in that case you don't need to save anything.
As far as your dropping issue is concerned you should use the appendTo: property in the draggable() parameters specifying which div they are supposed to be dropped to. You can change the target tab by reacting to the jquery tab select event this way
$("#tabs").tabs({
select: function(event, ui) {
// Your code
}
});
You can play with this fiddle I made for you
http://jsfiddle.net/webaba/sy9PJ/
$(document).ready(function () {
// Calls custom select tab function, scroll down for implementation
selectTab(1);
// Block models are made draggable
function selectTab(tabIndex) {
var tabName = '#tab'+tabIndex;
$(".model").draggable({
appendTo: tabName,
helper: 'clone'
});
}
// Tabs div is formatted as tabs by jquery
$("#tabs").tabs({
select: function (event, ui) {
selectTab(ui.index + 1);
}
});
//Sets canvas as droppable
$(".tab").droppable({
accept: ".model",
drop: function (event, ui) {
var newBlock = ui.helper.clone();
$(newBlock).removeClass("model").addClass("block");
$(this).append($(newBlock));
$(newBlock).draggable({containment:$(this)});
return true;
}
});
});
and the html
<body>
<div id="container">
<div id="library">
<div class="model type1" type="1">Block1</div>
<div class="model type2" type="2">Block2</div>
</div>
<div id="tabs">
<ul>
<li>Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div id="tab1" class="tab">Tab1</div>
<div id="tab2" class="tab">Tab2</div>
<div id="tab3" class="tab">Tab3</div>
</div>
</div>
</body>
and the CSS
#container {
width:100%;
height:300px;
}
#tabs {
height:300px;
width:70%;
float:right;
border:1px solid black;
}
.tab{
height:100%;
border:1px dotted blue;
}
#library {
border:1px solid black;
width:20%;
height:300px;
float:left;
}
.type1 {
width:50px;
height:50px;
border:1px solid green;
}
.type2 {
width:50px;
height:20px;
border:1px solid red;
}