I've got 2 panels (right and left).
Panel-right has 2 tabs, and one of it, is for displaying notifications.
How can I attach infinite scroll to this? because is not working as it does in any other page. The event handler for "infinite"
$$('.infinite-scroll').on('infinite', function () {
never gets fire as it does in the index page (which is behind the panel)
This is the html
<!-- Views -->
<div class="views">
<div class="panel-overlay"></div>
<!-- =========== PANEL IZQUIERDO ============ !-->
<div class="panel panel-left panel-cover">
</div>
<div class="panel panel-right panel-cover">
<div class="toolbar tabbar">
<div class="toolbar-inner">
Perfil
Notificaciones
</div>
</div>
<div class="tabs">
<div id="tab-perfil" class="tab active">
<div class="content-block">
</div>
</div>
<div id="tab-notificaciones" class="tab page-content infinite-scroll ">
<div class="list-block">
<ul></ul>
</div>
</div>
</div>
</div><!-- panel panel-right panel-cover !-->
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<div class="pages navbar-fixed toolbar-fixed">
<!-- =========== page-index ============ !-->
<div class="page page-index" data-page="index">
Related
I wanna create horizontal sub menu when I click dropdown menu with SEMANTIC CSS. I just want like picture below. Thank you in advance!
Actually this is not a dropdown menu , you're looking for Popup , you can create your horizontal sub menu by creating first your menu button , then linking it to your Popup Content , like the following :
[Demo]
HTML
<div class="ui text menu">
<div class="item">
<img src="https://semantic-ui.com/images/new-school.jpg">
</div>
<!-- Your menu button -->
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<!-- /Your menu button -->
</div>
<!-- Your Popup Content -->
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
<!-- /Your Popup Content -->
JS(jQuery)
$('a.browse.item')
.popup({
popup : $('.ui.flowing.basic.admission.popup'),//Popup Content selector
on : 'click', //Event trigger
position : 'bottom left',
lastResort:true,
})
;
In popup settings you can choose your event trigger like on:'click' , it can be either like: focus,hover... , for more settings see Popup Settings.
[DOCS]
I make a grid on ionic framework but its not work same as a bootstrap grid like as a responsive. So I want to same grid as a bootstrap.
<div class="row">
<div class="col col-33" ng-click="goProfile()">
<div class="box"></div>
</div>
</div>
<div class="col col-33" ng-click="gotoExtProfile()">
<div class="box"></div>
<div class="box-title">Extended Profile</div>
</div>
<div class="col col-33" ng-click="gotoMspAgreements()">
<div class="box"></div>
</div>
</div>
</div>
Here you can see how Ionic grid works
By default every col added inside a row will automatically receive an
equal amount of the available area.......
..... each of the five columns in this example will each evenly take up 20% of the available width (thank you flexbox).
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
http://ionicframework.com/docs/components/#grid-even
I have a basic Bootstrap3 layout that looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Section 1</h2>
</div>
<div class="col-md-4">
<h2>Section 2</h2>
</div>
<div class="col-md-4 pull-right">
<h2>Section 3</h2>
</div>
<div class="col-md-4">
<h2>Section 4</h2>
</div>
<div class="col-md-4">
<h2>Section 5</h2>
</div>
</div>
</div>
Section 3 has a basic Contact Us form, which works fine in full screen mode... But once reduced to a smaller size the user can not enter data.
When "pull-right" is removed the form funtions correctly in all size modes but then my vertical alignments with Section 4 and Section 5 are pushed down and out of line...
I need the form to work in all screen size modes and for the verticle alignment to be consistent - any help is appreciated - thanks!
From your question it is really difficult to understand what you are trying to achieve (I mean the layout) but as I see you use .pull-right class with .col-md-X and as far as I know it is a wrong approach because all .col-md-X classes have 'float: left; width: x%;' styles. Applying 'float: right' brakes your grid.
Instead you should have a look at these classes .col-md-push-X and .col-md-pull-X More info you can find in the official docs http://getbootstrap.com/css/#grid-column-ordering
UPD try this http://plnkr.co/edit/ujbqGvGwCnht9CGmKQ1r?p=preview resize plunker result window to see the result
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h2>Section 1</h2>
</div>
<div class="col-sm-6 col-md-4 col-md-push-4">
<h2>Section 3</h2>
</div>
<div class="col-sm-6 col-md-4 col-md-pull-4">
<h2>Section 2</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<h2>Section 4</h2>
</div>
<div class="col-sm-12 col-md-4">
<h2>Section 5</h2>
</div>
</div>
</div>
<%#include file="/libs/foundation/global.jsp"
%>
<div class="container_16">
<div class="grid_8">
<cq:include path="logo" resourceType="/apps/traningCQ5/components/logo" />
</div>
<div class="grid_8">
<div class="search_area">
<div> userinfo </div>
<div> toptoolbar </div>
<div> search </div>
<div
class="clear"></div> </div>
</div>
</div>
The above code includes logo component. This is added in header.jsp however, if I add this component anywhere else it works but not in header.
Could any please help me in this ?
We are developing a Tab Component in CQ5/AEM. The component contains 3 Tabs and each tab has one CQ5 text component to edit content.
But only the first tab's Text Component is editable as it is shown by default. The other text components which are in hidden tabs content area are not accessible to edit.
Sample code:
<div>
<div>
<div id="tabcnt1">
<div id="tab1" class="tablink">Tab 1</div>
</div>
<div id="tabcnt2">
<div id="tab2" class="tablink">Tab 2</div>
</div>
<div id="tabcnt3">
<div id="tab3" class="tablink">Tab 3</div>
</div>
</div>
<div class="plantabcontent">
<div id="plancontenttab1" class="plancontent">
<cq:include path="plandescription1" resourceType="libs/foundation/components/text" />
</div>
<div id="plancontenttab2" class="plancontent" style="display:none;">
<cq:include path="plandescription2" resourceType="libs/foundation/components/text" />
</div>
<div id="plancontenttab3" class="plancontent" style="display:none;">
<cq:include path="plandescription3" resourceType="libs/foundation/components/text" />
</div>
</div>
Script:
$(document).ready(function(){
$('.tablink').click(function(){
$(".tablink").removeClass('selecttab').addClass('plantxt');
var tabid = $(this).attr("id");
$("#"+tabid).addClass('selecttab').removeClass('plantxt');
$(".plancontent").hide();
$("#plancontent"+tabid).show();
});
});
The 'plandescription1' is visible by default and it is working fine. But the hidden text components are not working while enabling them by changing tabs.
Kindly show me some light. Thanks in advance.
It's important to load the tab components (text component) when loading the page. In case the components are disabled by default the components are not initialized by AEM. So disable the 'hidden' tabs on document.ready instead of using the style="display:none".
In the example I have added the $("div.plancontent:not(:first)").hide(); to disable all tabs except the first.
Example:
<div>
<div>
<div id="tab1" class="tablink">Tab 1</div>
<div id="plancontenttab1" class="plancontent">
<cq:include path="plandescription1" resourceType="/libs/foundation/components/text" />
</div>
</div>
<div>
<div id="tab2" class="tablink">Tab 2</div>
<div id="plancontenttab2" class="plancontent">
<cq:include path="plandescription2" resourceType="/libs/foundation/components/text" />
</div>
</div>
<div >
<div id="tab3" class="tablink">Tab 3</div>
<div id="plancontenttab3" class="plancontent">
<cq:include path="plandescription3" resourceType="/libs/foundation/components/text" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Disable all tabs except first
$("div.plancontent:not(:first)").hide();
//Set clickevent
$('.tablink').click(function(){
$(".tablink").removeClass('selecttab').addClass('plantxt');
var tabid = $(this).attr("id");
$("#"+tabid).addClass('selecttab').removeClass('plantxt');
$(".plancontent").hide();
$("#plancontent"+tabid).show();
});
});
</script>