Here are fix for Bootstrap 4 row that brake the layout on Safari/IOS browser
.row:before, .row:after{
width: 0;
}
jQuery Calx 2
This jQuery plugin can do any calculation based on the field.
Equal Height Div
HTML
<flex-container>
<flex-item>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
</flex-item>
<flex-item>
<div>Forward</div>
</flex-item>
</flex-container>
CSS
body {
height: 300px;
color: white;
}
flex-container {
display: flex; /* primary flex container */
flex-direction: row; /* horizontal alignment of flex items (default value; can be omitted) */
align-items: stretch; /* will apply equal heights to flex items (default value; can be omitted) */
height: 100%;
}
flex-item {
display: flex; /* nested flex container */
flex-direction: column; /* vertical alignment of flex items */
justify-content: center; /* center flex items vertically */
align-items: center; /* center flex items horizontally */
}
flex-item:first-child {
background-color: #a333c8;
flex: 3; /* consume 3x available space than sibling;
more details: http://stackoverflow.com/q/34644807/3597276 */
}
flex-item:last-child {
background-color: #db2828;
flex: 2;
}
Full width in limited width parents
We might need a full width elements inside a container. here’s the css
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
WP Mobile Detect and PHP Snippet
We wouldn’t load mobile and desktop content twice.
WP Mobile Detect and Insert PHP plugins to achieve this.
if(wpmd_is_phone()):
echo(do_shortcode(''));
else:
echo(do_shortcode(''));
endif;
Query by Custom Taxonomy
<?php $the_query = new WP_Query( array(
'post_type' => 'available_colors',
'tax_query' => array(
array (
'taxonomy' => 'color_category',
'field' => 'slug',
'terms' => 'bag-colour',
)
),
) );
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<?php the_title();?><br />
<?php endwhile;
/* Restore original Post Data
* NB: Because we are using new WP_Query we aren't stomping on the
* original $wp_query and it does not need to be reset.
*/
wp_reset_postdata();
?>
Simple Slide up jQuery
A simple sliding up (usefull for footer menu on mobile, etc)
HTML
<h4 class="mobileOnly flip notactive">HELP</h4> <nav class="footer-navigation-wrapper panel" role="navigation"></nav>
jQuery
$(".flip").click(function(){
$(".panel").slideToggle("fast");
$('.notactive').removeClass('notactive').addClass('active');
e.preventDefault();
});
Slick Slider – the last carousel you’ll ever need!!
Found a slick jquery for carousel slider – that we think it’s better then owl carousel that we ussually use.
https://github.com/kenwheeler/slick
function createSlick(){
jQuery(".slick").not('.slick-initialized').slick({
autoplay: true,
arrows: true,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
}
,{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 1100,
settings: 'unslick'
}
]
});
}
createSlick();
$(window).on( 'resize', createSlick);
Simple accordion with toggle indicator
<!-- Start of Template -->
<div class="hideContentWrap">
<h4 class="hideContentHeader">Some Hidden Content</h4>
<div class="hideContent">
<img src=
"http://www.wecreatemedia.com/wp-content/uploads/2014/07/34.jpg"></div>
</div>
<!-- End of Template -->
<div class="hideContentWrap">
<h4 class="hideContentHeader">More Hidden Content</h4>
<div class="hideContent">
<img src=
"http://www.wecreatemedia.com/wp-content/uploads/2014/07/44.jpg"></div>
</div>
<div class="hideContentWrap">
<h4 class="hideContentHeader">Props</h4>
<div class="hideContent">
<img src=
"http://www.wecreatemedia.com/wp-content/uploads/2014/07/54.jpg">
<p>Developement by Brian Bustos at <a href="http://www.umkc.edu/"
target="_blank">UMKC</a><br>
Background by <a href="https://subtlepatterns.com/" target=
"_blank">Subtle Patterns</a><br>
Photography by <a href="http://wecreatemedia.com" target=
"_blank">WeCreate Media</a><br></p>
</div>
</div>
$(document).ready(function() {
$('.hideContentHeader').prepend('<span class="indicator">+</span> ');
$('.hideContentHeader').click(function() {
$(this).parent().find('.hideContent').slideToggle("slow");
});
$('.hideContentHeader').click(function() {
$(this).toggleClass("active");
});
$('.hideContentHeader').click(function() {
$(this).find('.indicator').toggleClass("rotate");
});
});
/* /////////////////////////////////////////////////////////////////////
// Not Important CSS
/////////////////////////////////////////////////////////////////////*/
body {
background: url(https://subtlepatterns.com/patterns/black_lozenge.png) #000;
padding-top: 100px;
}
h1 {
color: #fff;
text-align: center;
}
p {
color: #fff;
text-align: center;
margin-bottom: 10px;
}
img {
width: 100%;
height: auto;
}
a {
color: #fff;
}
/* /////////////////////////////////////////////////////////////////////
// Important CSS
/////////////////////////////////////////////////////////////////////*/
.hideContentWrap {
width: 600px;
margin: 0 auto 10px;
}
.hideContentHeader {
display: block;
width: 90%;
color: #fff;
padding: 1%;
margin: 0 auto;
background: #FC4349;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.hideContentHeader.active {
color: #000;
background: #6DBCDB;
}
h4.hideContentHeader:hover {
cursor: pointer;
}
.hideContent {
display: none;
width: 92%;
height: auto;
margin: 0 auto;
}
.indicator {
display: inline-block;
padding: 5px;
text-align: center;
font-size: 20px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.indicator.rotate {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
}
Source: https://codepen.io/robotballoon/pen/FADHc
List Custom Taxonomy
Display your custom taxonomy
<select>
<option>Find Factory:</option>
<?php
$terms = get_the_terms($post->ID, 'store');
$count = count($terms);
if ( $count > 0 ){
foreach ( $terms as $term ) {
echo "<option>" . $term->name . "</option>";
}
}
?>
</select>
Outside loop:
<?php
$terms = get_terms('media_cat','hide_empty=0&orderby=id');
foreach ( $terms as $term ) {
if( ++$count > 60 ) break; // number of tags here.
echo '<li class="'.$term->slug.'"><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
}
?>