what's the equivalence of "visible-xs" in bootstrap 4 [duplicate] - javascript

This question already has answers here:
Missing visible-** and hidden-** in Bootstrap
(13 answers)
Closed 5 years ago.
I was using bootstrap 4 and watching a bootstrap 3 course and when i apply what I've watched i see noting happens so after a lot of search i realized that in bootstrap 4 there is nothing called visible-xs, visible-sm, visible-md and visible-lg as well as hidden-* so. I tried read a lot but i can't understand it really well because i'm new to css and bootstrap. what i want is the equivalence of each visible-* and hidden-* in bootstrap 4 (showing elements only on one platform)
my try:
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="visible-xs">Extra Small Devices</div>
<div class="visible-sm">Small Devices</div>
<div class="visible-md">Medium Devices</div>
<div class="visible-lg">Large Devices</div>
</div>
</div>
</div>

According to BS4 alpha documentations,
They have been replaced by .hidden-xs-up .hidden-xs-down .hidden-sm-up
.hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up
.hidden-lg-down.
You could read everything about migration in BS4 Documentation directly.

Related

Trying to understand the following HTML code [duplicate]

This question already has an answer here:
what are data-* HTML attributes?
(1 answer)
Closed 4 months ago.
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap home">
<nav class="header row">
</nav>
<!-- Off Canvas Menu -->
<aside class="right-off-canvas-menu">
<!-- close the off-canvas menu -->
<!-- whatever you want goes here -->
<div class="close">
In the first line, I can understand after div the class. Then, data-offcanvas. What is this? I noticed this while viewing the "view source page" of a web page.
Please help me to understand above html code.
data-offcanvas is a non standard or custom attribute which in this case appears to have no value.
You can read more in this here:
https://www.w3schools.com/tags/att_data-.asp

Bootstrap dynamic col resize [duplicate]

This question already has answers here:
What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
(10 answers)
How to change number of columns in a row for different display sizes
(4 answers)
How to set different columns for different devices in Bootstrap 3
(2 answers)
Closed 5 years ago.
So what I'm trying to achieve is that. When the page first loads, I want this to be displayed:
col-md-6 | col-md-3 | col-md-3
But when the window is resized (or when viewed on smaller screen devices), I want to have
col-md-4 | col-md-4 | col-md-4
Is there a way to do this using Bootstrap without CSS hackery?
I think you need something like this.
<div class="row">
<div class="col-md-6 col-sm-4"></div>
<div class="col-md-3 col-sm-4"></div>
<div class="col-md-3 col-sm-4"></div>
</div>
What this does is, for medium to large screens, the size would be in the ratio 6/12, 3/12 and 3/12.
and for smaller screens, the divs would take 4/12, 4/12, 4/12 of the available width.

Prevent Vue.js to display brackets on slow clients [duplicate]

This question already has answers here:
How do I hide the VueJS syntax while the page is loading?
(12 answers)
Closed 6 years ago.
I just made my first Vue.js app and it is awesome. The only problem that I have had is related to binding values on slow connections.
For example, in my template I have this code:
<div v-for="event in events">
<div class="start_time">
{{ event.start_time_formatted }}
</div>
<div class="icon_placeholder">
<img v-bind:src="event.icon" alt="Sport Image" />
</div>
<div class="event_title">
<a v-bind:href="event.url">
{{ event.title }}
</a>
</div>
<div class="button_placeholder">
<a v-bind:href="event.url" class="btn btn-filled">
Watch
</a>
</div>
</div>
But the problem is that I get this result until all my site's assets are loaded:
For example, in AngularJS example, you can bind values by using directives and prevent the brackets from being displayed.
How can I achieve this effect in Vue.js?
v-text should allow you to render more angular-ish, and and v-cloak can help you hide template content until compilation is finished for situations where you need mustache tags.

How to use Greasemonkey to remove a href block [duplicate]

This question already has answers here:
Greasemonkey, delete <a> element
(2 answers)
Closed 7 years ago.
I'm trying to remove the following line of code from http://trakt.tv/calendars/my/shows/ using Greasemonkey:
<a href="/vip">
<div class="huckster-vip-square">
<div class="inner">
<div class="text">
<h1>Support Trakt & become a VIP!</h1>
<h2>Hide advertising, unlock extended features and help Trakt grow.</h2>
<div class="btn btn-primary">Learn More</div>
</div>
</div>
</div>
</a>
How can I do that?
You may try it with jQuery.
Please refer to this question for using jQuery in Greasemonkey.
The JavaScript code would be like:
$("a[href='/vip']").remove();

Angular ng-switch with conditions [duplicate]

This question already has answers here:
AngularJS: ng-switch-when with an OR
(5 answers)
Closed 8 years ago.
I have ng-switch="field.type" for an element containing ng-switch-when but I'd like to have the switch on when it's more than just one field.type.
I would assume something like ng-switch-when="type1 || type2" would work, but it doesn't.
What's the correct way to do this?
You can do solve it by copying the same ng-switch-when element (ie. element with the same content/innerHTML) for every value.
Like this:
<div ng-controller="mainCtrl">
<div ng-switch="expression">
<div ng-switch-when="matchvalue1">Item 1</div>
<div ng-switch-when="matchvalue2">Item 1</div>
<div ng-switch-when="matchvalue3">Item 3</div>
<div ng-switch-default>default</div>
</div>
</div>
http://jsfiddle.net/JoeSham/HB7LU/9201/

Categories