I have 3 columns of data, each with 2 rows inside. I would like to make to transform 3x2 table into 1x6 table, when the width of the screen is less than some value. Any idea how to achieve this?
My column has the following structure:
<div class="one-third animate_afl">
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-link" >
<div class="w-iconbox-icon">
<i class="fa fa-"></i>
<img src="wp-content/uploads/2015/04/9-over.png" alt="">
</div>
<h4 class="w-iconbox-title">Title</h4>
</div>
<div class="w-iconbox-text">
<p>Paragraph text.</p>
</div>
</div>
<div class="g-hr type_invisible">
<span class="g-hr-h">
<i class="fa fa-star"></i>
</span>
</div>
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-link">
<div class="w-iconbox-icon">
<i class="fa fa-"></i>
<img src="wp-content/uploads/2015/04/modul1-over.png" alt="">
</div>
<h4 class="w-iconbox-title">Title 2</h4>
</div>
<div class="w-iconbox-text">
<p>Paragraph text 2.</p>
</div>
</div>
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-text"></div>
</div>
</div>
This would surely involve CSS media queries, which allow you to do this very thing. You can even set multiple break-widths where your css can change for each width you want, as many as you want.
Related
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
I'm trying to do something like this: https://nomadlist.com/
Rows of 3 elements (cards?) Going from top to bottom. Same size, perfectly aligned.
I'm using Handlebars and Bulma CSS, and the card components and doing this:
<div class="columns">
{{#each serverElements}}
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{this.title}}
</p>
<a class="card-header-icon">
<span class="icon">
<i class="fa fa-angle-down"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
{{this.body}}
<a>#bulmaio</a>. <a>#css</a> <a>#responsive</a>
<br>
<small>this.createdAt</small>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
</div>
{{/each}}
</div>
And it partially works. Each of the elements gets its own card. But this prints them all on the same row. And with different sizes.
If i understand you right, You sould use the is-multiline modifier with the right column, if you want 3 in a row, then use `column is-4'.
I am new in angularjs and currently i'm facing this issue.
Problem
when i clicked on any of the node, all the nodes will be expanded or collapsed.
For example : (Before clicking on the node)
After clicking on the node
Code
<div class="item">Data Visualization</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> AGV Mileage Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Board Temperature Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Laser Sensor Output Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Battery Current Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
And if possible, how can i declare the "data visualization" as parent node and
others as child node then perform expand and collapse.
Please enlighten me on this, thanks in advance.
Each item needs to have its own separate collapsed state. For example:
Item 1
<i ng-model="collapsedMileage" ng-click="collapsedMileage = !collapsedMileage">
<strong>AGV Mileage Vs Timestamp</strong>
</i>
<div ng-show="collapsedMileage">
<!-- the rest of your template -->
</div>
Item 2
<i ng-model="collapsedLaser" ng-click="collapsedLaser = !collapsedLaser">
<strong>Laser Sensor Output Vs Timestamp</strong>
</i>
<div ng-show="collapsedLaser ">
<!-- the rest of your template -->
</div>
Item 3
<i ng-model="collapsedBattery" ng-click="collapsedBattery = !collapsedBattery">
<strong>Battery Current Vs Timestamp</strong>
</i>
<div ng-show="collapsedBattery">
<!-- the rest of your template -->
</div>
I am new in webdriver automation field. I am trying to click on the first product in Product listing page but I am unable to locate any product element in order to click on it. Kindly help. Already tried google and stack overflow for answers but couldn't find one to solve my issue.
My code:
<div class="small-6 medium-4 large-3 columns category-product cat-grid grid-view clear-both" data-name="Zivame Bandage Moderate Pushup Strapless Bra-Black" data-rating="" data-ptype="Bras" data-brand="Zivame" data-sku="B65707-Black" data-product-id="174254"
style="height: 545px;">
<div class="image-wrapper" data-price="995" data-name="Zivame Bandage Moderate Pushup Strapless Bra-Black" title="Zivame `enter code here`Bandage Moderate Pushup Strapless Bra-Black">`enter code here`
<div class="front pos-relative">
<a target="_blank" href="/zivame-bandage-moderate-pushup-strapless-bra-black.html?trksrc=category&trkid=Bras">
<img class="act-place lazy" data-small="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_small.jpg" data-original="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_medium.jpg" src="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_medium.jpg"
alt="Zivame Bandage Moderate Pushup Strapless Bra-Black" style="display: inline-block;">
</a>
<div class="product-name">
</div>
<div class="more-on icon-chevron-down pointer show-for-small-down"></div>
<div class="mobile-controls show-for-small-down">
<div class="row product-details">
<div class="row">
<div class="row">
<div class="large-12 medium-12 small-12 columns more-actions show-for-medium-up">
<div class="check-size left text-center pointer" title="check sizes">
<i class="sel-product-color left pd-l10 pointer icon-palette" title="More colors in this"></i>
<span class="fs-10 left color-count">1</span>
<i class="show-similar left pd-l10 pointer icon-layers" title="More like this"></i>
<div class="add-to-cart-btn mr-r10">
<span class="shortlist-item icon-heart left pointer" title="Add to Wishlist"></span>
<span class="add-to-cart z-uppercase left pointer" title="Add to Cart">Add to Cart</span>
</div>
<div class="fav-count fs-10 ff-rr">216 people favorited this</div>
</div>
First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks