I have the following code to display 4 Buttons:
#buttons {
text-align: center;
padding-top: 4%;
}
#buttons img {
display: inline-block;
list-style: none;
padding: 10px;
}
#buttons p {
color: #fff;
font-family: ;
font-weight: 600;
font-size:19px;
}
#buttons li {
display: inline-block;
}
<div class="row" id="buttons">
<div class="large-3 small-12 columns">
<span id="bullets"></span>
<img src="images/icons/question_icon.png"><p>Was ist Schnittchen</p>
</div>
<div class="large-3 small-12 columns">
<span id="bullets">•</span>
<img src="images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p>
</div>
<div class="large-3 small-12 columns">
<span id="bullets">•</span>
<img src="images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p>
</div>
<div class="large-3 small-12 columns">
<span id="bullets">•</span>
<img src="images/icons/kiss_icon.png"><p>Was erwartet Sie</p>
</div>
</div>
The finally result is on: http://www.be-virtual.org/schnittchen
Now i want bullet points between this divs like:
Its very important that the result is responsive and that the bullet points are not visible on a mobile phone.
Have anyone a idea to realize that?
You could use flex and mediaquerie.
example
#buttons {
display:flex;
text-align:center;
flex-wrap:wrap;
}
#buttons:before,
#buttons:after {/* you may use also justify-content ... */
content:'';
flex:1;/* will use as much space as possible pushing content into middle */
}
.dots {/* style these as you wish, made simple for demo */
border-top:dotted 6px #AD1616;
width:1.5em;
height:3em;/* to set at middle's height of icon*/
margin:auto 2em;/* vertical centering and keep some room around */
}
#media ( max-width : 950px ) {/* set here your breaking point demo is at 950px */
.dots {
display:none;/* hide dots */
}
#buttons {
display:block;/* back to regular display to pile icone/links */
}
}
<div id="button_bg" class="hide-for-small">
<div class="row" id="buttons">
<div class="large-3 small-12 columns">
<img src="http://www.be-virtual.org/schnittchen/images/icons/question_icon.png"><p>Was ist Schnittchen</p>
</div>
<div class="dots"></div>
<div class="large-3 small-12 columns">
<img src="http://www.be-virtual.org/schnittchen/images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p>
</div>
<div class="dots"></div>
<div class="large-3 small-12 columns">
<img src="http://www.be-virtual.org/schnittchen/images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p>
</div>
<div class="dots"></div>
<div class="large-3 small-12 columns">
<img src="http://www.be-virtual.org/schnittchen/images/icons/kiss_icon.png"><p>Was erwartet Sie</p>
</div>
</div>
</div>
Run snippet in full page mode and resize window to see behavior
Add "•••" to each button, except the first one, like this:
<div class="large-3 small-12 columns">
<span id="bullets1"></span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>
<div class="large-3 small-12 columns">
<span id="bullets2">•••</span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>
<div class="large-3 small-12 columns">
<span id="bullets3">•••</span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>
Depending on how your responsive layout JavaScript is set up, you will need to conditionally set the span element's display to "inline" or "none" based on if the site is being loaded in a mobile browser or not:
if(ismobile){
document.getElementById("buttons1").style.display = "none";
document.getElementById("buttons2").style.display = "none";
document.getElementById("buttons3").style.display = "none";
}
else{
document.getElementById("buttons1").style.display = "inline";
document.getElementById("buttons2").style.display = "inline";
document.getElementById("buttons3").style.display = "inline";
}
Related
<div class="modal-title-area">
<div class="modal-name">
#{ ViewBag.Title = "Kişisel Bilgiler"; } #EmployeeCardRes.PersonalInfo
</div>
<div class="modal-root-page tag-label">
<i class="close icon"></i>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="two-fields">
<div class="field ">
<div class="label">
#EmployeeCardRes.FirstName #EmployeeCardRes.LastName
<div class="text">#Model.FirstName #Model.LastName</div>
</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
</div>
</div>
Labels inside div need to correspond to posts. but the label is going down the text above how can I fix it.
I want to do like that
You will want to split out your div elements for label and text for each row, so where you have
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
You should replace it with something more like this:
<div class="field">
<div class="label">
#EmployeeCardRes.PositionCode
</div>
<div class="text">
#ViewBag.Position
</div>
</div>
You can then use CSS to modify the way the DOM positions and displays them, something like the following will give you bold text and a little separation:
.label,
.text {
display: inline-block;
font-weight: bold;
margin: 5px;
min-width: 200px;
}
I have made custom tabs with a function in JQuery. This is my custom tabs:
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</div>
</div>
<div class="item1">
Show content from item 1
</div>
<div class="item2">
Show content from item 2
</div>
<div class="item3">
Show content from item 3
</div>
This is the custom styling I made with the tabs:
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
And this is my function to activate the tabs (working)
$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
elem.addClass('master-advanced-left-tab-active');
switch (elem.data('id')) {
case 'item1':
//show div for item1
break;
case 'item2':
//show div for item2
break;
default:
}
When I switch from tab I want to show the content from the class. I have tried with the toggle() function from JQuery. Also I have checked this stackoverflow post:
Bootstrap tab activation with JQuery
This is what I want but it didn't work for my solution because I don't use the nav tabs of bootstrap.
How can I show the content from each nav tab?
To show content you can simply call show() on it. You can also make your logic more DRY and extensible by converting the clickable div elements to a and using the href attribute to target the content to be displayed. This saves you having to write endless if conditions or switch cases, as it will work for an infinite number of tabs. It also means that, if required, you can open tabs when the page loads via the fragment of the URL. Try this:
let $tabs = $('.tab-content');
let $triggers = $('.master-advanced-left-tab').on('click', function(e) {
e.preventDefault();
$triggers.removeClass('master-advanced-left-tab-active');
var $elem = $(this).addClass('master-advanced-left-tab-active');
$tabs.hide();
$tabs.filter($elem.attr('href')).show();
});
$triggers.first().trigger('click');
.master-advanced-left-tab {
display: block;
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab>p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.tab-content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<a href="#item1" class="col-4 master-advanced-left-tab">
<p>Item 1</p>
</a>
<a href="#item2" class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</a>
<a href="#item3" class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</a>
</div>
<div class="tab-content" id="item1">
Show content from item 1
</div>
<div class="tab-content" id="item2">
Show content from item 2
</div>
<div class="tab-content" id="item3">
Show content from item 3
</div>
hide and show the method can be used for this purpose, Hope this helps
$('.master-advanced-left-tab').click(function(e){
$(this).addClass('master-advanced-left-tab-active').siblings().removeClass('master-advanced-left-tab-active')
var class1 = $(this).attr('data-id')
$('.'+class1+'').removeClass('hide').siblings().addClass('hide')
})
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.hide
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item2">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item3">
<p>Item 3</p>
</div>
</div>
<div class="wrap">
<div class="item1 ">
Show content from item 1
</div>
<div class="item2 hide">
Show content from item 2
</div>
<div class="item3 hide">
Show content from item 3
</div>
</div>
You can see my code:
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item2">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item3">
<p>Item 3</p>
</div>
</div>
<div class="content-item item1 active">
Show content from item 1
</div>
<div class="content-item item2">
Show content from item 2
</div>
<div class="content-item item3">
Show content from item 3
</div>
Css: add more some line:
.content-item {
display: none
}
.content-item.active {
display: block
}
Then JS:
$('.master-advanced-left-tab').click(function (){
let elem = $(this);
$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
$('.content-item').removeClass('active');
elem.addClass('master-advanced-left-tab-active');
switch (elem.data('id')) {
case 'item1':
$('.item1').addClass('active')
break;
case 'item2':
$('.item2').addClass('active')
break;
default:
$('.item3').addClass('active')
}
})
This is a demo: https://codepen.io/phuongnm153/pen/vYBXBGM
Instead of swith you can use something more responsive like this:
function changeTab(element) {
// remove 'active' class from item and tab to prevent multiple
// tab selection
$('.master-advanced-left-tab').removeClass('active');
$('.tab').removeClass('active');
// add class 'active' to clicked item and proper tab
// tab class is taken from 'data-tab' property from item in html
$(element).addClass('active');
$('.tab.' + $(element).data('tab')).addClass('active');
}
// change tab to first at init to prevent none tab selected
// You can replace this by adding class 'active' to
// 'master-advanced-left-tab' and 'tab' item in html
changeTab( $('.master-advanced-left-tab:first-child') );
// not much to explain
$('.master-advanced-left-tab').on('click', function(){
changeTab(this);
})
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
/* changed from .master-advanced-left-tab-active to shorten code */
.master-advanced-left-tab.active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.tab {
height: 0;
overflow:hidden;
}
.tab.active {
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<!-- property 'data-tab' for js function to select proper tab -->
<div data-tab="item1" class="col-4 master-advanced-left-tab">
<p>Item 1</p>
</div>
<div data-tab="item2" class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</div>
<div data-tab="item3" class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</div>
</div>
<div class="tab item1">
Show content from item 1
</div>
<div class="tab item2">
Show content from item 2
</div>
<div class="tab item3">
Show content from item 3
</div>
I am working in AngularJS to Print invoice Page. Here i'm facing some issue. Getting a Blank space in top of print Screen
enter image description here
Here My Code
HTML
<div id="invoice" class="compact">
<div class="invoice-container">
<div class="card md-whiteframe-8dp printclass">
<div class="header">
<div class="invoice-date">10 October 2017</div>
<div layout="row" layout-align="space-between stretch">
<div class="client">
<div class="invoice-number mb-8" layout="row" layout-align="start center">
<span class="title">PERFORMA INVOICE</span>
<span class="number">PI50/2017</span>
</div>
<div class="invoice-number mb-8" layout="row" layout-align="start center">
<span class="hsn">HSN CODE:-</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mybutton">
<button class="print" ng-click="vm.takePrint()">Take Print</button>
</div>
CSS
#media print {
body * { visibility: hidden; }
.printclass * { visibility: visible; }
JS
vm.takePrint = takePrint;
function takePrint(){
window.print();
}
What i need to do to remover the blank spaces in top the of the print page.enter image description here
CSS Should be
#media print {
body * { display: none; }
.printclass * { display: unset; }
}
below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?
Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>
Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));
In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>
Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>
Trying to add .active class on .inner-thumb-container whenever its corresponding .detail-box is set to display: block. I have two blocks using similar code so that layout is modified on mobile and desktop views.
Here's what I have so far. Works fine until window is resized...
jQuery:
// show different div based on image map hover
jQuery("#career-img-wrap a[data-toggle]").click(function(e) {
e.preventDefault();
var selector = $(this).data("toggle");
jQuery(".inner-thumb-container").removeClass('active');
jQuery(this).find(".inner-thumb-container").addClass('active');
jQuery(".detail-box").hide();
jQuery(".detail-box" + "#" + selector).show().addClass('animated fadeIn');
});
HTML (written in ExpressionEngine):
<div class="mobile-hide">
<div class="row">
<div class="col-md-6 text-center thumb-container">
{careers_benefits}
{careers_benefits:switch="<div class='row'>|"}
<div class="col-md-6" id="career-img-wrap">
<a href="#" data-toggle="career_content_{careers_benefits:field_row_count}">
<div class="inner-thumb-container {if careers_benefits:field_row_count == 1}active{/if}">
<img src="{careers_benefits:icon}" alt="{careers_benefits:title} icon">
<p>{careers_benefits:title}</p>
</div>
</a>
</div>
{if careers_benefits:field_row_count != careers_benefits:field_total_rows}{careers_benefits:switch="|</div>"}{/if}
{if careers_benefits:field_row_count == careers_benefits:field_total_rows}</div>{/if}
{/careers_benefits}
</div>
{careers_benefits}
<div class="col-md-6 career-thumb-content detail-box" id="career_content_{careers_benefits:field_row_count}">
<div class="career-thumb-content-inner">
<h3>{careers_benefits:title}</h3>
{careers_benefits:content}
</div>
</div>
{/careers_benefits}
</div>
</div>
<div class="mobile-show">
<div class="row">
<div class="col-md-12 text-center thumb-container">
{careers_benefits}
<div id="career-img-wrap">
<a href="#" data-toggle="career_content_{careers_benefits:field_row_count}">
<div class="inner-thumb-container">
<img src="{careers_benefits:icon}" alt="{careers_benefits:title} icon">
<p>{careers_benefits:title}</p>
</div>
</a>
</div>
<div class="career-thumb-content detail-box" id="career_content_{careers_benefits:field_row_count}">
<div class="career-thumb-content-inner">
<h3>{careers_benefits:title}</h3>
{careers_benefits:content}
</div>
</div>
{/careers_benefits}
</div>
</div>
</div>
CSS:
.mobile-hide {
display: block;
}
.mobile-show {
display: none;
}
#media (max-width: 992px){
.mobile-hide {
display: none;
}
.mobile-show {
display: block;
}