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>
Related
Hy, i'm trying to build an Electron app that uses Semantic UI. At the moment, i'm trying to implement a tabular menu as shown in the basic tab example, and this is the behavior i'm trying to implement: https://semantic-ui.com/modules/tab.html#basic-tabs.
My code seems to be all right but the menu isn't behaving as expected. In the image below you can see that the content of the div's just appears down the others, as a normal div html section.
Well, in my research i found that we have to put somethiing like
<script>
var $ = require('jquery');
$('.item').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
</script>
And i did, just don't know if the right way. After that the functionality of changing the pressed button is working, i.e. if i press the "second" button the ui render correctly, lik image below. And so on with the other possible tabs.
I've already did the following steps:
-> Import jQuery via NPM with npm install jquery --save and this gave me "jquery": "^3.5.1" on my package.json file.
My full code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.css">
</head>
<body>
<div class="ui visible left demo vertical inverted thin sidebar labeled icon menu">
<a class="item" href="index.html">
<i class="tint icon"></i>
Análise
</a>
<a class="item" href="resultados.html" style="color: aquamarine;">
<i class="chart bar icon" style="color: aquamarine;"></i>
Gráficos
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<div style="width: 80%; margin: 2%;">
<div class="ui top attached tabular menu">
<a class="item active" data-tab="hidrogenio">
Níveis de hidrogenio
</a>
<a class="item" data-tab="etano">
Photos
</a>
<a class="item" data-tab="etileno">
Etileno
</a>
</div>
<div class="ui bottom attached segment" data-tab="hidrogenio">
<p>First Tab</p>
</div>
<div class="ui bottom attached segment" data-tab="etano">
<p>Second Tab</p>
</div>
<div class="ui bottom attached segment" data-tab="etileno">
<p>Third Tab</p>
</div>
</div>
</div>
</div>
<script>require('./js/renderer')</script>
</body>
<script>
var $ = require('jquery');
$('.item').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
</script>
</html>
I don't know why the div with the data-tab aren't working as expected and remain "hidden" until we press the respective button...
I'd appreciate so much the help! Thanks.
after looking on your code and checking the documentation which I post below the basics:
<!-- The basic format for a tabular menu -->
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>
and the JS code:
// the require js code to make semantic read that html as a tabular menu
$('.menu .item')
.tab()
;
I don't see the required JS part on your code, just the actions your script will run when you click an item. You really need the JS code part I posted in order for that to work.
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.
is it possible to confirm order on Google Trusted Stores without page refresh?
Conversion code looks like this:
<!-- START Google Trusted Stores Order -->
<div id="gts-order" style="display:none;" translate="no">
<!-- start order and merchant information -->
<span id="gts-o-id">MERCHANT_ORDER_ID</span>
<span id="gts-o-domain">MERCHANT_ORDER_DOMAIN</span>
<span id="gts-o-email">CUSTOMER_EMAIL</span>
<span id="gts-o-country">CUSTOMER_COUNTRY</span>
<span id="gts-o-currency">CURRENCY</span>
<span id="gts-o-total">ORDER_TOTAL</span>
<span id="gts-o-discounts">ORDER_DISCOUNTS</span>
<span id="gts-o-shipping-total">ORDER_SHIPPING</span>
<span id="gts-o-tax-total">ORDER_TAX</span>
<span id="gts-o-est-ship-date">ORDER_EST_SHIP_DATE</span>
<span id="gts-o-est-delivery-date">ORDER_EST_DELIVERY_DATE</span>
<span id="gts-o-has-preorder">HAS_BACKORDER_PREORDER</span>
<span id="gts-o-has-digital">HAS_DIGITAL_GOODS</span>
<!-- end order and merchant information -->
<!-- start repeated item specific information -->
<!-- item example: this area repeated for each item in the order -->
<span class="gts-item">
<span class="gts-i-name">ITEM_NAME</span>
<span class="gts-i-price">ITEM_PRICE</span>
<span class="gts-i-quantity">ITEM_QUANTITY</span>
<span class="gts-i-prodsearch-id">ITEM_GOOGLE_SHOPPING_ID</span>
<span class="gts-i-prodsearch-store-id">ITEM_GOOGLE_SHOPPING_ACCOUNT_ID</span>
<span class="gts-i-prodsearch-country">ITEM_GOOGLE_SHOPPING_COUNTRY</span>
<span class="gts-i-prodsearch-language">ITEM_GOOGLE_SHOPPING_LANGUAGE</span>
</span>
<!-- end item 1 example -->
<!-- end repeated item specific information -->
</div>
<!-- END Google Trusted Stores Order -->
I have reactjs application. So if i put this code to DOM I need invoke api call to google. But I can't find any API for this.
Maybe triggering of window.onload but it could make very unexpected behaviour :(
Any ideas?
Thanks!
How about you create a popup instead, with iframe inside the popup? That iframe will contain the contents of Google Trusted Store codes.
A non iframe solution: If you dynamically reinject the google trusted stores html script tag, the script will search for the gts ids and invoke the pop up. For cleanliness, it is probably best to remove the current script tag before doing this. The script was not designed for SPAs.
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.
In my web application using jQuery and jQuery UI (1.10.2 and 1.10.4 respectively), I use the CSS in jQuery CSS in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css of the zip file from the jQuery site. I had a topNav bar like so before I got the jQuery-based autocomplete function to work:
MyProfile Link1 Link2 | search box | Logout
My search box is 300px and my fonts are 12px, and the width of the div container above is 700px and BEFORE I added jQuery autocomplete support, it was something like this:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>  
<a href...>Link1</a>>  
<a href...>Link2</a>>  
</div>
<input id="searchBox" name="searchBox" type="search" >
<div class="right">
<a href...>Logout</a>
</div>
</div>
It was all well aligned then (all of topNav in one line).
Now, after adding jQuery support like so:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>  
<a href...>Link1</a>>  
<a href...>Link2</a>>  
</div>
<!-- div-ing the input searchBox was the only change: -->
<div class="ui-widget">
<input id="searchBox" name="searchBox" type="search" >
</div>
<div class="right">
<a href...>Logout</a>
</div>
</div>
And now, the search box has decided it will appear in the next line, and the Logout also appears in the second line, like so:
MyProfile Link1 Link2
| search box | Logout
Any help on how to horizontally align after jQuery autocomplete support is appreciated.
I followed the approach in the accepted answer in this SO post. That seems to have solved my problem. The CSS properties of .ui-widget (the jQuery div element) can be additionally changed (for font size etc.) in your application, that is another way you can remove the issues from including that dependency.