I have inherited a site with some broken JS. I have tried debugging, but I cant seem to figure it out. When the page loads, the first image is showing. But when any other button is clicked the image disappears and no new image shows. Sorry for the mess. I didn't write it. No need to worry about CSS in this example.
$(document).ready(function () {
$('.product-images-list').hide();
const inputSelector = 'input[type="radio"][name="product"]:checked';
if($(inputSelector).length){
const activeId = $(inputSelector).parent('div').attr('id');
$('#'+activeId+'-image').show();
}
else{
$('#first-product input').attr('checked',true);
$('#first-product-image').show();
}
}
);
function changeMultiProduct(id){
$('.product-images-list').hide();
$('#'+id+'-image').show();
}
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price
</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" onclick="changeMultiProduct('first-product-image')" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4" variantvalue="" onclick="changeMultiProduct('first-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" onclick="changeMultiProduct('second-product-image')" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" variantvalue="" onclick="changeMultiProduct('second-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" onclick="changeMultiProduct('third-product-image')" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" variantvalue="" onclick="changeMultiProduct('third-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
There is a lot you could do with this, but this should get you there.
You had a few redundant onclick handlers on your input fields that I removed. I also remove the method changeMultiProduct that it called because again it was redundant.
I set the input fields with javascript but that could also be done on the backend. If you solely want to trigger the change from the input fields, setting checked to true is also redundant. It could be useful if you want to trigger the radio button from the surrounding div so I wouldn't throw out the idea entirely.
Good luck. You might want to peruse some jQuery tutorials just to save your sanity. https://learn.jquery.com/
$(document).ready(function() {
$('.product-images-list').hide();
$('#first-product-3').prop("checked", true);
$('#first-product-image').show();
const radioSelector = 'input[type="radio"][name="product"]';
$(radioSelector).change(function(e) {
$('.product-images-list').hide();
if ($(this).is(':checked')) {
const activeId = $(this).parent('div').attr('id');
$('#' + activeId + '-image').show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4"class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
Looks like there was an issue with how the element was being looked up in changeMultiProduct. You were adding '-image' to the id but the id already contained that. Removing it from the method like below makes the images start appearing again.
Logging is your friend :)
$(document).ready(function () {
$('.product-images-list').hide();
const inputSelector = 'input[type="radio"][name="product"]:checked';
if($(inputSelector).length){
const activeId = $(inputSelector).parent('div').attr('id');
$('#'+activeId+'-image').show();
}
else{
$('#first-product input').attr('checked',true);
$('#first-product-image').show();
}
}
);
function changeMultiProduct(id){
console.log("Clicked: "+id);
$('.product-images-list').hide();
$('#'+id).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price
</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" onclick="changeMultiProduct('first-product-image')" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4" variantvalue="" onclick="changeMultiProduct('first-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" onclick="changeMultiProduct('second-product-image')" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" variantvalue="" onclick="changeMultiProduct('second-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" onclick="changeMultiProduct('third-product-image')" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" variantvalue="" onclick="changeMultiProduct('third-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
Related
I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?
The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.
There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.
I have a page in which i want to display the button just side to an image ,therefore it looks like image button and so an as a loop where the implies to download but i am not good at css and I tried as below but it does not fix to my requirement.Can any one please adjust my code.Thanks in advance.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div>
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</div>
</div>
maybe this?
img.the-image-class + .the-button-class {
display: block;
margin-top: -20px; /* to move button 20px above from original position */
}
Look at output i think html was not formatted well.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="row">
<div class="pressImg col-xs-6 col-sm-6 col-md-6">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 ">
<button class="btn btn-sm btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</section>
May be like this,
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div class="clearfix">
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
</div>
</div>
</div>
</section>
I have a bootstrap columns as below (4 columns per row and many rows likewise), I need to filter the columns based on the label (General,Movie,Drama,etc...), something like this http://codepen.io/bmodena/pen/Fybdu . I need a javascript to do this. I can change the HTML code also as if required. I am kind of very beginner to JS.
Please help
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div><br>
<div class="panel-body">
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<br><p><b>Item1</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<br><p><b>item2</b>
<br><span class="label label-success">Movie</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<br><p><b>items3</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<br><p><b>items4</b>
<br><span class="label label-success">Drama</span>
</p>
</div>
</div><br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<br><p><b>items5</b>
<br><span class="label label-success">NEWS</span>
</p>
</div>
</div>
</div>
</div>
It should be simple using jQuery. Use selector to hide and show.
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div>
<br>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-info" data-set="all">All</button>
<button class="btn btn-info" data-set="general">General</button>
<button class="btn btn-info" data-set="movie">Movie</button>
<button class="btn btn-info" data-set="news">News</button>
<button class="btn btn-info" data-set="drama">Drama</button>
</div>
</div>
<hr/>
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<a href="/items1">
<br>
<p><b>Item1</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<a href="/items2">
<br>
<p><b>item2</b></a>
<br><span class="label label-success">Movie</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<a href="/items3">
<br>
<p><b>items3</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<a href="/items4">
<br>
<p><b>items4</b></a>
<br><span class="label label-success">Drama</span>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<a href="/items">
<br>
<p><b>items5</b></a>
<br><span class="label label-success">NEWS</span>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
$("[data-set]").click(function(e) {
if (this.dataset.set == "all") {
$("[data-group]").show();
return false;
}
var $currentLists = $("[data-group=" + this.dataset.set + "]");
$("[data-group]").not($currentLists).hide();
$currentLists.show();
});
});
</script>
jsfiddle link
I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php