I am using equalizer with a nested equalizer to make an article object with a nested <h2> object the same height in a grid layout.
So all <article> elements are the same height, and all <h2> elements within the articles are the same height.
http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
As long as the grid layout does not expand to a second line, everything works fine and equalizer does its thing.
But the second the grid layout expands to a second line equalizer sets height to
height="inherit"
And both <article> and <h2> (within the articles) elements lose their equal height.
I have also tried to put the h2 element inside a div element and have data-equalizer-watch="sub2" on this, but gives same result.
<div id="siteContent" class="row" data-equalizer="sub1">
<div data-equalizer="sub2">
<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
<a href="#">
<article>
<time datetime="2015-12-31" pubdate="pubdate"></time>
<h2 data-equalizer-watch="sub2">Super long headline if u believe. Let the force guide you</h2>
<div>
<p>News category<span> <span>2015-12-31</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
</div>
</article>
</a>
</div>
<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
<a href="#">
<article>
<time datetime="2015-12-31" pubdate="pubdate"></time>
<h2 data-equalizer-watch="sub2">headline</h2>
<div>
<p>News category<span> <span>2015-12-31</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
</div>
</article>
</a>
</div>
<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
<a href="#">
<article>
<time datetime="2015-12-31" pubdate="pubdate"></time>
<h2 data-equalizer-watch="sub2">headline</h2>
<div>
<p>News category<span> <span>2015-12-31</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
</a>
</div>
<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
<a href="#">
<article>
<time datetime="2015-12-31" pubdate="pubdate"></time>
<h2 data-equalizer-watch="sub2">headline</h2>
<div>
<p>News category<span> <span>2015-12-31</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
</a>
</div>
</div>
</div>
Hope someone can help
Related
Example single service 1st tag redirects to #xx and 2nd one redirects to #yy both on another subpage of my website.
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service lk1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service lk2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
</div>
const $offert = ["xx", "yy"];
const $clicken = $('.single-service');
$($clicken).click(function(){
window.location='oferta/index.html';
})});
These things are meant to work without script engine assistance
Please use the conventional HTML Anchors, such as <A ID="sectionID" and utilize fractal URL's on a link such as <A HREF="oferta/index.html#sectionID".. to make a Hyper-Jump.
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service lk1" data-anchor="xx">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service lk2" data-anchor="yy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
</div>
const $clicken = $('.single-service');
$($clicken).click(function(){
window.location='oferta/index.html#'+$(this).data('anchor');
})});
just add # and id of a div you want to go to ie.
window.location='oferta/index.html#id';
<!----- home banner ---->
<div class="home-slider">
<ngx-slick class="carousel" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<div class="banner">
<img class="img-responsive" src="{{ slide.img }}" alt="" width="100%">
</div>
</div>
</ngx-slick>
</div>
<!----==== 3 content ----==================--->
<div class="dis_content">
<div class="container">
<div class="col-md-4 text-center">
<i class="fa fa-google-wallet " aria-hidden="true"></i>
<h4>Discount System</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-codepen " aria-hidden="true"></i>
<h4>Free Delivery</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-circle-o-notch " aria-hidden="true"></i>
<h4>Support 24/7</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus.</p>
</div>
</div>
</div>
<!---====== 4 images =============------------>
<div class="ldy-page">
<div class="container-fluid">
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
</div>
</div>
<owl-carousel [options]="{items: 3, dots: false, navigation: false}" <!-- If images array is dynamically changing pass this array to [items] input -->
[items]="images"
<!-- classes to be attached along with owl-carousel class -->
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let sliding of slidings;let i = index">
<div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
</div>
</owl-carousel>
How to set the image and background image path in my page? I set the image on home.components.ts file. How to set the background image and image path in Angular 6?
[{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}] in ng:///AppModule/HomeComponent.html#73:38 (" class="item" *ngFor="let sliding of slidings;let i = index">
use it to wantet selector
[style.backgroundImage]="'url('+ imagSource +')'"
in css:
.item{
background-position: center;
background-repeat: no-repeat;
.
.
.
}
Below answer worked for angular 6.
In app.component.css
.image{
height:40em;
background-size:cover;
width:auto;
background-image:url('copied image address');
background-position:50% 50%;
}
Also in app.component.html simply add as below
<div class="image">
Your content
</div>
This way I was able to set background image in Angular 6.
This is how my child component looks like:
<template>
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
</template>
<script>
export default {
name: 'block'
}
</script>
From my parent component, I want to do something like this:
<div>
<block></block>
<block></block>
<block></block>
</div>
...but without the surrounding root .body div element being replicated each time.
I want something like this:
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
<div class="block">
Lorem ipsum dolor sit amet
</div>
<div class="block">
Lorem ipsum dolor sit amet
</div>
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
Instead of this:
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
From your question this is what I understand.
Make your single file vue component like this.
<template>
<div class="block">
Lorem ipsum dolor sit amet
</div>
</template>
<script>
export default {
name: 'block'
}
</script>
Your parent div:
<div class="body">
<block></block>
<block></block>
<block></block>
</div>
Try to use tag as your root tag. I used to do this and works well.
It is like:
<template>
<literal>
<div id="1"></div>
<div id="2"></div>
</literal>
</template>
I have a problem with Jonas von Andrian's jQuery Sortable plugin. When I try to move items, they first fly out of the .row and only after that I can move it normally.
What am I doing wrong?
$(".items-container").sortable({
containerSelector: ".items-container",
itemSelector: ".item",
containerPath: "> .row"
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>
View on JS Bin
I suggest using itemPath rather than containerPath, based on the "Sort Tables" example.
The documentation is a bit murky to me. It says that itemPath is "The exact css path between the item and its subcontainers." But it seems to me to be the CSS path between the container and its items, which is what containerPath is supposed to define.
I have also added the placeholder option in order to apply Bootstrap styles to the placeholder element.
$(".items-container").sortable({
containerSelector: ".items-container",
itemPath: "> .row",
itemSelector: ".item",
placeholder: '<div class="col-xs-4 panel placeholder"/>'
});
.row .dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>
I have this slider on my website, I would like to learn how to change the pictures and to edit the content on my own?, I had seeing some videos but everyone work in a different way, so I would like to work for this specific example. This one is part of my own template,
<div class="slider-container">
<div class="container">
<div class="row">
<div class="span12">
<div class="slider_block">
<script type="text/javascript" src="{{skin url=''}}js/camera.js"></script>
<script type="text/javascript">
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '57.179%',
minHeight: '134px',
loader : false,
pagination: false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
</script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="carpet-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide1">
<div class="sl_row1">Summer</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">35<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="handbags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide2">
<div class="sl_row1">Free</div>
<div class="sl_row2">Shipping</div>
<div class="sl_row3">on orders over</div>
<div class="sl_row4"><i>$</i>65<strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="laptop-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide3">
<div class="sl_row1">Clearance</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">75<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
</div>
</div>
<div class="banners_col">
<div class="tbanner banner1">
<a href="{{store direct_url="brands/piel-leather.html"}}">
<div class="b_holder">
<h2>Top Brands</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner1.jpg" alt="" />
</a>
</div>
<div class="tbanner banner2">
<a href="{{store direct_url="brands/vitalio-vera.html"}}">
<div class="b_holder">
<h2>New Arrivals</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner2.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>