I want to set style when I click on div. I done this, It's work. But I want when its clicked and when I click to set the default style.
$('#tray-button').click(function() {
$('.buttons-content').css('bottom', '160px');
});
<div class="buttons-content">
<div id="tray-button" class="button">
<div class="white"></div>
<div class="black"></div>
<i class="fas fa-grip-horizontal"></i>
</div>
<div class="button">
<div class="white"></div>
<div class="black"></div>
<i class="fas fa-share-alt"></i>
</div>
<div class="button play-pause play">
<div class="white"></div>
<div class="black"></div>
<i class="far fa-1-1x fa-play-circle"></i>
</div>
<div class="button rotate">
<div class="white"></div>
<div class="black"></div>
<i class="fas fa-expand-alt"></i>
</div>
</div>
buttons-content - default bottom: 40;
When click on #tray-button -> bottom: 160px;
When click again on #tray-button -> bottom: 40px; (default)
Define a specific CSS rule e.g.
.buttons-content.toggled {
bottom: 160px;
}
with a .toggled class and on click toggle that class
$('#tray-button').click(function() {
$('.buttons-content').toggleClass('toggled');
});
When the class is removed the style of the element will be automatically reset to the previous state. Furthermore your script is more mantainable because the style is not hardcoded within.
this script just remembers the last state and does whatever you want.
$( document ).ready(function() {
var stack = 0
$("#tray-button").click(function()
{
if (stack === 0){
}
$('.buttons-content').css('bottom', '160px');
stack = 1;
}else{
$('.buttons-content').css('bottom', '40px');
stack = 0;
}
});
Related
I have the code below for a blazor component which displays a textbox that can be edited with the click
of a button.
#if (_editing)
{
<div class="floatingbox position-relative">
<input type="text" value="#AddText" #oninput="#(e => { AddText = e.Value.ToString(); })"
#onblur="#(e => { InputBlured(e); })" #onkeyup="#(e => KeyPressed(e))" maxlength="75" />
<button type="button" class="button_search_term">
<div #onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
</button>
</div>
}
else
{
<div class="floatingbox position-relative" #ondblclick="ToggleMode">
<span>#AddText</span>
</div>
}
I want to display this span right under the input box for error messages
<span hidden="#IsShow" class="error-color">Error message</span>
I wrote this css and used display block but what happens is everytime there is an error
the span above is enabled and rearranges the input box controls underneath one another. There can be many of these controls
on a page.
.error-color{
color:red;
//display:block;
padding-left:35px;
}
How can I style this such that the span stays directly under the inputbox?
You can achieve this with position:absolute
See this example:
.control{
position: relative;
}
.error{
position: absolute;
left: 0;
bottom: -10px;
font-size: 10px;
line-height: 1;
}
<div class="control">
<input type="text">
<span class="error">ERROR</span>
</div>
Keep in mind that you have to put position:relative to the parent Element.
Your final HTML shoudl look something like this:
<div class="floatingbox position-relative">
<input type="text" value="#AddText" #oninput="#(e => { AddText = e.Value.ToString(); })" #onblur="#(e => { InputBlured(e); })" #onkeyup="#(e => KeyPressed(e))" maxlength="75" />
<button type="button" class="button_search_term">
<div #onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
</button>
<!-- insert your error span here -->
<span hidden="#IsShow" class="error-color">Error message</span>
</div>
I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
export default {
name: 'Navbar',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.
The above code works , but this is a more vue-ish way to do the navbar-burger menu.
<template>
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<button #click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: '',
activator: false
}
},
methods: {
makeBurger () {
this.activator = !this.activator
return this.activator
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
Hope this helps someone. The show/hide functionality is taken care by Bulma.
This works, but
will not close the menu
will cause router-links not to work
For 1.) I recommend adding #click to navbar-item as well:
<a #click="makeBurger" class="navbar-item">
<router-link to="/login">
{{link1}}
</router-link>
</a>
I am creating a virtual store where the main page shows the products, this is where the quantity of information in the detail of the product varies, the blocks begin to deform. How could you do to keep the size constant and in any case the text is truncated?
I'm working with MVC 5 and Bootstrap.
<!-- Bloque 1 -->
#foreach (var item in Model)
{
<div class="col-sm-3 col-lg-3 col-md-3">
<div class="thumbnail">
<!-- TRAE UNA IMAGEN DE CUALQUIER MANERA-->
<img src="#Url.Action("RenderImage", new { id = item.ProductoID})" alt="" width="150" height="320" />
<div class="panel panel-yellow">
<div class="panel-heading">
<h4 class="pull-right">$#item.PrecioUnitario</h4>
<h4>
<a href="#Url.Action("Detalle", new { id = item.ProductoID })" class="my-class">
#item.Nombre
</a>
</h4>
</div>
</div>
<div class="ratings">
#*<p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>*#
<p>#item.DetallesCorto</p>
</div>
<div class="ratings">
<p class="pull-right">15 Me gusta</p>
<p>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</p>
<p>
<button type="button" class="AddLink btn btn-block btn-success btn-xs" href="#" data-id="#item.ProductoID" data-toggle="modal" data-target="#myModal">
<i class="fa fa-fw fa-shopping-cart"></i> Agregar
</button>
</p>
</div>
<div class="ratings">
#if (Request.IsAuthenticated && User.IsInRole("Root") || User.IsInRole("Admin"))
{
<p>
<button type="button" class="anchorDetail btn btn-block btn-info btn-xs"
href="javascript:void(0);" data-id="#item.ProductoID">
<i class="fa fa-pencil"></i> Edicion rápida
</button>
</p>
<p>
<button type="button" class="popupDelete btn btn-block btn-danger btn-xs"
href="javascript:void(0);" data-id="#item.ProductoID">
<i class="fa fa-trash"></i> Eliminar
</button>
</p>
}
</div>
</div>
</div>
} <!-- Cierro Forech -->
</div>
That's how it looks now:
Solution 1 (CSS)
Set a fixed height on the red paragraph and the title and hide the overflow.
.thumbnail .ratings:nth-of-type(1) p {height: 100px; overflow: hidden;}
.thumbnail h4:nth-child(2) {height: 30px; overflow: hidden;}
Solution 2 (jQuery)
Create a javascript function setting the height equal to the tallest red paragraph and the tallest title.
var maxh = 0;
$('.thumbnail .ratings:nth-of-type(1) p').each(function() {
var h = $(this).height();
if(h > maxh) maxh = h;
});
$('.thumbnail .ratings:nth-of-type(1) p').css('height', maxh);
var maxh = 0;
$('.thumbnail h4:nth-child(2)').each(function() {
var h = $(this).height();
if(h > maxh) maxh = h;
});
$('.thumbnail h4:nth-child(2)').css('height', maxh);
You might be tempted to set a fixed height to the thumbnail div. But that will require you to set the rating stars and the green button to position: absolute; bottom: [amount]px; to align them properly. I am quite sure that is not compatible with the bootstrap floats and the responsive behaviour of these items.
You can loop through each .thumbnail item and find the max height, then apply a min-height to each element matching that max height:
$(document).ready(function() {
var maxHeight = 0;
$('.thumbnail').each(function() {
var height = $(this).height();
if(height > maxHeight) {
maxHeight = height;
}
});
$('.thumbnail').css('min-height', maxHeight);
});
You may need to utilize a delay such as setTimeout to ensure everything has been loaded prior to calculating the heights.
You should use rows or set equal height to all boxes with javascript/jquery. Bootstrap uses 12 cols per row so you could modify your code to separate by 4 items per row. Also you only need the smallest device col width if larger ones are same. In your case use col-sm-3 only.
<div class="row">
<div class="col-sm-3" ></div>
<div class="col-sm-3" ></div>
<div class="col-sm-3" ></div>
<div class="col-sm-3" ></div>
</div>
Give the boxes a set height for example:
.box {
height: 150px;
}
I'm currently trying to apply a background-color to the p elements within the 1st div by checking a checkbox that's located within the 2nd div. I'm calling a directive when the input box is clicked, "text-theme-switch", to manipulate the p elements in the first div
<!--HTML-->
<div id="#div1" class="text-main-window">
<div class="text-view-div">
<div ng-repeat="item in text.obj">
<h3 id="{{item.id}}-title">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 id="{{art.id}}-art">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt " >
<h5 id="{{subArt.id}}-subart" >{{subArt.subArtNum}}</h5>
<div ng-repeat="para in subArt.paragraph" >
<p class="theme-para {{para.ruleTheme}} text-item">{{para.text}}</p>
</div>
<a ui-sref="rulebook.rules.detail({detail:rules.ruleNumber})"
class="rule-style"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="theme-filter-text-theme">
<h4>Text Themes</h4>
<div class="onoffswitch pull-right">
<input text-theme-switch
ng-model="text.themeView"
val="text.themeView"
ng-change="text.test()"
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
ng-click="showLegend = !showLegend">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="styles-hr"></div>
<div ng-show="showLegend" class="theme-filter-item" ng-repeat="item in text.themes">
<span class="theme-check-tag"
ng-class="{
checkgreen: item.theme === 'enforcement', checkpink: item.theme === 'customer due diligence',
checkorange: item.theme === 'record keeping',
checkblue: item.theme === 'reporting'
}" >
{{item.theme}}
</span>
</div>
</div>
This is the directive that is manipulating the DOM elements in the first div.
//DIRECTIVE
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('textThemeSwitch', function(){
return{
restrict: 'A',
transclude: true,
scope: {textTheme: "="},
link: function(scope, element, attrs){
element.on('click', function(){
$('.text-main-window h3').toggleClass('grey-on');
$('.text-main-window h4').toggleClass('grey-on');
$('.text-main-window h5').toggleClass('grey-on');
$('.rule-style').toggleClass('grey-on');
$('.text-main-window p:not(.rk-class, .enforcement-class, .cdd-class, .reporting-class)').toggleClass('grey-on')
$('.rk-class').toggleClass('rk-class-active');
$('.cdd-class').toggleClass('cdd-class-active');
$('.enforcement-class').toggleClass('enforcement-class-active');
$('.reporting-class').toggleClass('reporting-class-active');
})
}
};
});
})();
And here's the CSS
/*CSS*/
.cdd-class-active{
background-color: $themePink;
#include borderRadius;
}
.reporting-class-active{
background-color: $themeBlue;
#include borderRadius;
}
.rk-class-active{
background-color: $themeOrange;
#include borderRadius;
}
.enforcement-class-active{
background-color: $themeGreen;
#include borderRadius;
}
.highlight-on{
background-color: $veryPaleYellow
}
.grey-on{
opacity: .5;
background-color: white;
}
While the above code is working, I feel like I'm using a whole lot of bad practices here. From what I've read, DOM manipulation should be done from directives. I've also read that in Angular scope should be used rather than selectors, but I can't figure out how a directive should be used with a click event to manipulate the DOM of other elements rather than the one clicked. Should this type of work be delegated to the controller and should the directive be called from somewhere else, or can anyone recommend a cleaner way to do this, using scope rather the selectors?
So I figured out where I was going wrong here. I was putting the directive on the checkbox input and trying to work off the click event. Because of this, I had to search through and find all the elements that needed to be manipulated. What I should have been doing was putting the directives on the elements that needed to be manipulated as seen below.
<div id="#div1" class="text-main-window">
<div class="text-view-div">
<div ng-repeat="item in text.obj">
<h3 class="grey" text-theme-grey="text.themeView" id="{{item.id}}-title">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 class="grey" text-theme-grey="text.themeView" id="{{art.id}}-art">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt " >
<h5 class="grey" text-theme-grey="text.themeView" id="{{subArt.id}}-subart">
{{subArt.subArtNum}}
</h5>
<div ng-repeat="para in subArt.paragraph" >
<p text-theme-color='text.themeView' class="theme-para {{para.ruleTheme}} text-item">{{para.text}}</p>
</div>
<a ui-sref="rulebook.rules.detail({detail:rules.ruleNumber})"
class="rule-style grey"
text-theme-grey="text.themeView"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
<div class="theme-filter-text-theme">
<h4>Text Themes</h4>
<div class="onoffswitch pull-right">
<input ng-model="text.themeView"
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
ng-click="showLegend = !showLegend">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="styles-hr"></div>
<div ng-show="showLegend" class="theme-filter-item" ng-repeat="item in text.themes">
<span class="theme-check-tag"
ng-class="{
checkgreen: item.theme === 'enforcement', checkpink: item.theme === 'customer due diligence',
checkorange: item.theme === 'record keeping',
checkblue: item.theme === 'reporting'
}" >
{{item.theme}}
</span>
</div>
</div>
Now the directives watch the value of the model on the switch for for changes and the classes are added or removed for each element accordingly.
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('textThemeGrey', function(){
return{
restrict: 'A',
link: function(scope, element, attrs){
scope.$watch(attrs.textThemeGrey, function(newVal){
if(newVal){
element.addClass('on')
}else{
element.removeClass('on')
}
})
}
}
})
})();
A much cleaner solution, I think. Hope this helps someone.
I am working with HTML5, I am using an numeric control (input type="number"). By default I need the spinner (up & down arrows) to be visible in the control, right now on hover it is visible.
Can I achieve it by CSS? Or is there any other way?
You can achieve this using the pseudo classes -webkit-inner-spin-button and -webkit-outer-spin-button. Be aware that this trick will work only in Webkit based browsers, such as Chrome.
Example:
/* Always */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
Since you want to display when hover event is triggered, the previous example would be:
/* On hover */
input[type=number]:hover::-webkit-inner-spin-button,
input[type=number]:hover::-webkit-outer-spin-button {
opacity: 1;
}
Check this snippet to see an working example.
If you want to expand your functionality to other browsers, you will need to create an widget. The fastest way is using the jQuery UI Spinner widget.
Input type number does not show increase/decrease buttons on iPhone
Its built into jQuery UI - http://jqueryui.com/spinner/
Or see an example here: http://codepen.io/gmkhussain/pen/mgoZjK
Hopefully this solution helps you or someone else out there with this problem.
console.log("Thank You Jesus!");
$(document).ready(function() {
/* alert("ready");//Thank You Saviour */
var minusButton = $(".spinnerMinus"); //to aquire all minus buttons
var plusButton = $(".spinnerPlus"); //to aquire all plus buttons
//Handle click
minusButton.click(function() {
trigger_Spinner($(this), "-", {
max: 10,
min: 0
}); //Triggers the Spinner Actuator
}); /*end Handle Minus Button click*/
plusButton.click(function() {
trigger_Spinner($(this), "+", {
max: 10,
min: 0
}); //Triggers the Spinner Actuator
}); /*end Handle Plus Button Click*/
});
//This function will take the clicked button and actuate the spinner based on the provided function/operator
// - this allows you to adjust the limits of specific spinners based on classnames
function trigger_Spinner(clickedButton, plus_minus, limits) {
var valueElement = clickedButton.closest('.customSpinner').find('.spinnerVal'); //gets the closest value element to this button
var controllerbuttons = {
minus: clickedButton.closest('.customSpinner').find('.spinnerMinus'),
plus: clickedButton.closest('.customSpinner').find('.spinnerPlus')
}; //to get the button pair associated only with this set of input controls//THank You Jesus!
//Activate Spinner
updateSpinner(limits, plus_minus, valueElement, controllerbuttons); //to update the Spinner
}
/*
max - maxValue
min - minValue
operator - +/-
elem - the element that will be used to update the count
*/ //Thank You Jesus!
function updateSpinner(limits, operator, elem, buttons) {
var currentVal = parseInt(elem.val()); //get the current val
//Operate on value -----------------
if (operator == "+") {
currentVal += 1; //Increment by one
//Thank You Jesus ----------------
if (currentVal <= limits.max) {
elem.val(currentVal);
}
} else if (operator == "-") {
currentVal -= 1; //Decrement by one
//Thank You Jesus ----------------
if (currentVal >= limits.min) {
elem.val(currentVal);
}
}
//Independent Controllers - Handle Buttons disable toggle ------------------------
buttons.plus.prop('disabled', (currentVal >= limits.max)); //enable/disable button
buttons.minus.prop('disabled', (currentVal <= limits.min)); //enable/disable button
}
.spinnerVal {
text-align: center;
}
.customSpinner {
display: flex;
margin-bottom: 10px;
}
/*Apply individual Styles to one*/
.spinner-roundVal {
margin: auto 2px;
border-radius: 20px !important;
width: auto !important;
}
.spinner-roundbutton {
border-radius: 100px !important;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- God is good. -->
<div class="container">
<h4 style="text-align:center;margin-bottom:50px;margin-top:5%;margin-bottom:5%;">
Simple Bootstrap Spinners
</h4>
<div class="row" style="
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
">
<div class="col-lg-4">
<!--Input Form1-->
<div class="input-group customSpinner <!--Thank You Jesus!-->">
<div class="input-group-prepend">
<button class="btn btn-primary spinnerbutton spinnerMinus spinner-roundbutton">
<span class = "fa fa-minus"></span>
</button>
</div>
<input type="text" readonly value="0" class="form-control spinnerVal spinner-roundVal" />
<div class="input-group-append">
<button class="btn btn-primary spinnerbutton spinnerPlus spinner-roundbutton">
<span class = "fa fa-plus"></span>
</button>
</div>
</div>
</div>
<div class="col-lg-4">
<!--Input Form2-->
<div class="input-group customSpinner <!--Thank You Jesus!-->">
<div class="input-group-prepend">
<button class="btn btn-danger spinnerbutton spinnerMinus">
<span class = "fa fa-minus"></span>
</button>
</div>
<input type="text" readonly value="0" class="form-control spinnerVal" />
<div class="input-group-append">
<button class="btn btn-danger spinnerbutton spinnerPlus">
<span class = "fa fa-plus"></span>
</button>
</div>
</div>
</div>
<div class="col-lg-4">
<!--Input Form3-->
<div class="input-group customSpinner <!--Thank You Jesus!-->">
<div class="input-group-prepend">
<button class="btn btn-warning spinnerbutton spinnerMinus">
<span class = "fa fa-minus"></span>
</button>
</div>
<input type="text" readonly value="0" class="form-control spinnerVal" />
<div class="input-group-append">
<button class="btn btn-warning spinnerbutton spinnerPlus">
<span class = "fa fa-plus"></span>
</button>
</div>
</div>
</div>
<div class="col-lg-4">
<!--Input Form4-->
<div class="input-group customSpinner <!--Thank You Jesus!-->">
<div class="input-group-prepend">
<button class="btn btn-success spinnerbutton spinnerMinus">
<span class = "fa fa-minus"></span>
</button>
</div>
<input type="text" readonly value="0" class="form-control spinnerVal" />
<div class="input-group-append">
<button class="btn btn-success spinnerbutton spinnerPlus">
<span class = "fa fa-plus"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- God is good. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"></script>
</html>
More easy and beautiful if you has vue.js v-money-spinner :)
DEMO