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>
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';
I have some difficulties with getting these Json objects to show .
<section class="hero" style="background-image: url(./images/hero.png)">
<div class="wrapper">
<div class="row row-big">
<div class="col-1"></div>
<div class="col-10">
<h1 class="title">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</h1>
</div>
<div class="col-1"></div>
</div>
<div class="row row-small">
<div class="col-12">
<h1 class="title">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<!--Icon missing instead of img--><button type="button" class="btn" style="background-image: url ('./images/button_arrow_white.png')">Sign up now</button>
</div>
</div>
</div>
This is my Json
var json = '{"row":{"col":{"title":"Lorem ipsum dolor sit amet,consectetur adipiscing elit"}}}'
$(document).ready(function(){
//Json
var obj = JSON.parse(json);
mainDivData(obj);
function mainDivData(obj){
/* for (i in obj.popNav.popLinks){
var j = parseInt(i)+1;
$('.pop-links:nth-child('+ j +').txt').text(obj.popNav.popLinks[i].txt);
} */
/* for (i in obj.row.colTwelve) {
$('.news-title').text(obj.row.colTwelve[i].title);
} */
//THIS ONE
for (i in obj.row.col){
$('.col-10.title').text(obj.row.col[i].title);
}
}
I tried many times with different loops but it is always the same.
I can't seem to find my mistake. When I delete the text from the HTML , i get nothing. Any advice?
Modify that for to:
//THIS ONE
for (title in obj.row.col){
$('.col-10.title').text(obj.row.col[title]);
}
You can achieve what you want by nesting for loops.
var json = '{"row":{"col":{"title":"Lorem ipsum dolor sit amet,consectetur adipiscing elit"}}}'
$(document).ready(function() {
var obj = JSON.parse(json);
mainDivData(obj);
function mainDivData(obj) {
for (var row in obj){
for(var col in obj[row]) {
var title = obj[row][col].title;
$('.col-10 .title').text(title);
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="hero" style="background-image: url(./images/hero.png)">
<div class="wrapper">
<div class="row row-big">
<div class="col-1"></div>
<div class="col-10">
<h1 class="title">test
</h1>
</div>
<div class="col-1"></div>
</div>
<div class="row row-small">
<div class="col-12">
<h1 class="title">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<!--Icon missing instead of img--><button type="button" class="btn" style="background-image: url ('./images/button_arrow_white.png')">Sign up now</button>
</div>
</div>
</div>
Ok the first problem was ('.col-10 .title') ... I didn't have the space between two classes. The second problem was that i was going to far into the loop.
for (i in obj.row.col){
$('.col-10 .title').text(obj.row.col[i]);
}
This solved the problem.
I try to produce the same effect of the browser zoom to a div in my page,
This div contains several thumbnails with a float left on each thumbnail,
My zoom works very well on chrome and opera exactly as I want, but on firefox and IE : if zoom out it makes white space and if zoom in it creates scrolls.
Can anyone help me please.
$('#zoom-in').click(function() {
updateZoom(0.1);
});
$('#zoom-out').click(function() {
updateZoom(-0.1);
});
zoomLevel = 1;
var updateZoom = function(zoom) {
zoomLevel += zoom;
$('.zoom').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')','-ms-transform': 'scale(' + zoomLevel + ')', 'transform-origin': 'top left' });
}
.panel{
float:left;
margin-right:20px;
width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-primary" id="zoom-in">zoom in</button>
<button type="button" class="btn btn-primary" id="zoom-out">zoom out</button>
</div>
</div>
<hr>
<div class="row zoom" style="margin-top:20px;">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</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>
I have a <div> with three span4s inside it, with a hero-unit inside each span4. Inside each hero unit is some text and a picture.
Here is a demo: http://jsfiddle.net/GGMWX/256/
And the code, in case that link breaks in the future:
<div class="row-fluid">
<span class="span4">
<div class="hero-unit" id="col1">
<h1 class="heading">One</h1>
<p>Lorem ipsum</p>
<img src="http://dummyimage.com/100x400/000/fff" class="image" />
</div>
</span>
<span class="span4">
<div class="hero-unit" id="col2">
<h1 class="heading">Two</h1>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<img src="http://dummyimage.com/100x200/000/fff" class="image" />
</div>
</span>
<span class="span4">
<div class="hero-unit" id="col3">
<h1 class="heading">Three</h1>
<p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
<img src="http://dummyimage.com/100x200/000/fff" class="image" />
</div>
</span>
</div>
I can't for the life of me figure out how to make all hero-units the same height. I have tried the following but none of them work for various reasons (some of them only work for text with no picture, one of them just works for plain text with no tags inside the outer div tag). Or perhaps I'm missing something -- I'm new to this.
http://tomdeater.com/jquery/equalize_columns/
http://jsfiddle.net/4HxVT/
http://www.filamentgroup.com/examples/equalHeights/ and http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
Any ideas?
You have to iterate the items once the document has loaded, get the tallest one, and then set them all to that height like so:
highest = null
hi = 0;
$(".hero-unit").each(function(){
var h = $(this).height();
if(h > hi){
hi = h;
highest = $(this);
}
});
if(highest !== null){
$('.hero-unit').css('height', highest[0].scrollHeight + "px");
}
http://jsfiddle.net/GGMWX/261/