Skip to content

Instantly share code, notes, and snippets.

@Farmatique
Farmatique / gist:152f683938a03dd6d4927313a3aa58fd
Created March 3, 2017 17:04
Cut the multiline text that overflows block
<div class="box">
<div class="box__in">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</div>
.box {
overflow: hidden;
height: 200px;
width: 300px;
<div class="wrapper">
<div class="outer-bottom-arrow"></div>
<div class="inner-top-arrow">
<div class="left-block"></div>
<div class="right-block"></div>
</div>
</div>
.wrapper{
position: relative;
@Farmatique
Farmatique / gist:2e88bd69ab6af0ea94e03ec353636cf1
Created March 10, 2017 17:07
2 colors inside input field text+asterisk
<form>
<div class="input-wrapper">
<input type="text" id="name" name="name" required="required" />
<label for="name">Name</label>
<br/>
</div>
<input type="submit" />
</form>
@Farmatique
Farmatique / gist:e9fdf7496878dec9cb0f67eb3f966455
Created March 15, 2017 15:39
jQuery mobile only window width
if($(window).width() >= 1024){
// do your stuff
}
var ua = navigator.userAgent;
if(ua.match(/(iPod|iPhone|iPad)/) !== null && ua.match(/AppleWebKit/) !== null && ua.search('CriOS') < 0){
console.log('this is mobile safari');
}
@Farmatique
Farmatique / gist:8078b41361add4f6203d81f75f5310c8
Last active March 17, 2017 13:45
add custom element inside menu-element in wordpress
add_filter('wp_nav_menu_items','add_language_select_to_footer_menu', 'icl_post_languages', 10, 2);
function add_language_select_to_footer_menu( $items, $args) {
if( $args->theme_location == 'footer-menu' ){ // choose name of the menu to apply
$menuID = 'footer';
$primaryNav = wp_get_nav_menu_items($menuID);
echo '<ul id="menu-footer" class="nav navbar-nav">';
@Farmatique
Farmatique / gist:c65363235e12ad9f66ad8281983951e4
Created March 17, 2017 16:26
add custom element inside menu-element in wordpress - 2nd variant
add_filter( 'walker_nav_menu_start_el', 'wpse_45647_add_custom_content', 'icl_post_languages', 10, 2 );
function wpse_45647_add_custom_content( $item_output, $item ){
if ('Choose Country' == $item->title) {// choose li-element here
$custom = icl_post_languages();//something custom to add
return str_replace( '<a ', $custom . '<a ', $item_output );
@Farmatique
Farmatique / gist:8756dea8b70f0e9a794b3fb5ae14dd04
Created March 20, 2017 16:56
Hide block when click outside of it
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
@Farmatique
Farmatique / gist:5d1492350e2e1742e6df1d4a920b954f
Created March 28, 2017 15:07
all items flex-start, last item flex-end
.container {
display: flex;
flex-direction: column;
outline: 1px solid green;
min-height: 400px;
width: 100px;
justify-content: flex-start;
}
p {
height: 50px;
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {