Language picker with flag icon with Bootstrap - javascript

I would put a language picker in this section:
<section id="logo-section" class="text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="logo text-center">
<h1>Batpeppa</h1>
<span>Web Designer Trio</span>
</div>
</div>
</div>
</div>
</section>
I would insert two flag icons under "Web Designer Trio" subtitle.
I would use the class="icon-flag" from Bootstrap 3.
I think I have to use something like this:
<span class="icon-flag">

Well, the native Bootstrap 3.x icons are named glyphicon-<name>. So in your case:
<i class="glyphicon glyphicon-flag"></i>
<i class="glyphicon glyphicon-flag"></i>
Demo. Your code does not work because you are referring to the "old" Twitter Bootstrap 2.x icons, named icon-<name>. If you want to use those, you must download and include the .png and .css from here. Then you should be fine.

Related

How to custom dropdown with js inside loop?

I'm making a forum web site(html+Vue3+php+sql), and there have a post system.
Mostly, when we need to custom dropdown object, it always needs to initial the fake dropdown object with js. (or have the other way that IDK)
for example, I'm using the css framework「Tocas-UI」,and I got the some html objects below:
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
And <div class="ts floating dropdown icon button">...</div> can be used js ts('.ts.dropdown:not(.basic)').dropdown(); to make it be a "dropdown" object.
Although it can only be used once to initial every object which have class .ts.dropdown, but I'm using the js framework Vue3, and when I using v-for to render every post (have one fake dropdown object in every post), it's not working on the object which are be created after I call the function .dropdown().
So I was tried to put ts('.ts.dropdown:not(.basic)').dropdown(); into loop, it stupid and also not working.
Here is the code in the v-for loop:
<template v-for="post in posts">
<div class="item">
<div class="ts mini circular image">
<img src="default.png">
</div>
<div class="content">
<div class="header">{{ post.poster.nickname || post.poster.username }}</div>
<div class="middoted meta">
<a>#{{ post.poster.username }}</a>
<div>{{ Init.timeToStatus(post.datetime) }}</div>
</div>
</div>
<div class="actions">
<div class="ts separated secondary icon buttons">
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
</div>
</div>
</div>
</template>
So the question is... How can I make those fake dropdown object be initial with ts('.ts.dropdown:not(.basic)').dropdown(); even have new post be added after page loaded.

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

How to use MDC's tab bar?

I want to use this Tab system:
https://material-components.github.io/material-components-web-catalog/#/component/tabs
I read the HTML source code of the above link and implemented a tab bar.
However, how do I switch displayed contents using this tab bar? Do I need to write JavaScript?
Yes, it is a JavaScript library.... so you will need to import the JavaScript.
Firstly you need to install the library, installation instructions can be found here.
Next you can proceed to using the tab bar, following these instructions.
Here's a quick working demo to show it's possible, (but I wouldn't recommend using this code)
<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<!-- Render tab barcomponent -->
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<!-- Required MDC Web JavaScript library -->
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>

angular-ui-bootstrap upgrade 1.3.3 to 2.0.0 missing uibAccordionGroup controller

Today I upgraded angular-ui-bootstrap package from 1.3 to 2.0 and the it throws me the error below.
Error: [$compile:ctreq] Controller 'uibAccordionGroup', required by
directive 'uibAccordionHeading', can't be found!
http://errors.angularjs.org/1.5.7/$compile/ctreq?p0=uibAccordionGroup&p1=uibAccordionHeading
This the affected part of the code:
<div>
<uib-accordion>
<uib-accordion-group is-open="true">
<uib-accordion-heading>
{{vm.moduleMenu.name}}<i class="pull-right glyphicon"></i>
</uib-accordion-heading>
<div>... other content...</div>
</uib-accordion-group>
</uib-accordion>
</div>
What I did so far to solve this issue:
I checked whether the correct files are included -> fine
I checked the new source code whether the name of the directive has changed - it did not, it should work
I searched for uibAccordionGroup controller, I haven't found it...
I moved back the heading into uib-accordion-group tag - the error disappeared, but there is no style applied, just the heading text is displayed
I deleted the uib-accordion-heading, the result is the same as above, the content of the accordion is displayed but there is no style applied
Have anybody met this issue previously?
Libraries:
angular 1.5.7
angular-ui 2.0.0
Thanks,
You're getting this error because the syntax of angular ui bootstrap has changed slightly from version 1.3 to version 2.0.
Here's an excerpt from the accordion example on the website:
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</div>
<div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</div>
<div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</div>
<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
Hello
</div>
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
<div uib-accordion-group class="panel-danger" heading="Delete account">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</div>
<div uib-accordion-group class="panel-default" is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</div>
Notice that accordion-group is now an attribute, and not an element.
This should solve your problem.
In v2.0.0, uib-accordion-group is now an attribute not an element. You can see that in the repo here. Changing it to <div uib-accordion-group></div> should help resolve the error.
Since 2.0.0 the use of uibAccordion & uibAccordionGroup directive got restricted to A(attribute) only. See code here. They should get used as uib-accordion, uib-accordion-group as attribute directive & so on.
I'd say whenever you wanted to upgrade any of the library to its latest version, refer to their change logs on their github repo. By which you will no need to ask what going wrong with your current updated.

AngularJS - Swipe effect

I have used the pager of AngularJS with Server Side coding. Basically what happens is when user clicks on NEXT the group of 5 records is displayed.
Now as the application is used in Tablets, i need swipe effect for this.
<section class="recent" style="margin: 20px 0;">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 text-center" data-ng-init="recentUsers(1)">
<button type="button" class="rc-buttons" data-ng-repeat="user in recentusers">
{{user.firstname}}
</button>
<pager style="margin-top: -28px;" total-items="recenttotalItems" page="recentcurrentPage" items-per-page="recentitemsperpage" max-size="maxsize" on-select-page="recentUsers(page)" class="pagination-sm"
previous-text="<<" next-text=">>"></pager>
</div>
</div>
</div>
</section>
How to implement swipe effect in AngularJS?
For handling swipes, you can use the ngTouch module's ngSwipeLeft and ngSwipeRight.
Since it is a separate module, you need to include the script separately:
<script src=".../angular-touch.min.js"></script>
You, also, need to include the module as a dependency to you main module:
angular.module('yourApp', ['ngTouch']);
Then you can use it to like this:
<div ng-swipe-right="doSomething()" ng-swipe-left="doSomethingElse()">
...
</div>

Categories