<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link is-active" href="/">link</a>
<a class="mdl-navigation__link is-active" href="/">link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link is-active" href="/">link</a>
<a class="mdl-navigation__link is-active" href="/">link</a>
</nav>
</div>
<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
According to http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/ it should work as long as I call componentHandler.upgradeDom() after I dynamically load the html. Just to make sure I'm calling the upgradeDom correct I added the button to see if the ripple effect is added. And the button is updated but the hamburger icon is not appearing.
If I inline the html the hamburger icon appears.
Since you are dynamically load the html, you should run the following inside your init function after the DOM is load. Notice that the setInterval function to ensure DOM has enough time to load before executing the componentHandler method
jQuery
$(document).ready(function() {
setInterval(function() {
componentHandler.upgradeAllRegisteredElements();
}, 1000);
});
DOM API
document.addEventListener('DOMContentLoaded', function() {
setInterval(function() {
componentHandler.upgradeAllRegisteredElements();
}, 1000);
});
Related
I am displaying multiple webview contents using Electron Js.
part of index.html
<div class="contentArea">
<div id="mySidebar" class="leftMenu">
<ul id="myTab" class="nav nav-tabs">
<li class="nav-item">
Tab1
</li>
<li class="nav-item">
Tab2
</li>
<li class="nav-item">
Tab3
</li>
</ul>
</div>
<div class="contentPages tab-content">
<div class="tab-pane show active" id="webview1">
<webview src="link1" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<div class="tab-pane" id="webview2">
<webview src="link2" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<div class="tab-pane" id="webview3">
<webview src="link3" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<script>
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var activeTab = $(e.target).text(); // Get the name of active tab
var previousTab = $(e.relatedTarget).text(); // Get the name of previous tab
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
</div>
</div>
I used bootstrap and jquery for design.
Navigation between webviews works very nicely with jquery.
I'm trying to do. Creating forward, backward and refresh buttons for each webview.
It's like an internet browser.
I didn't manage to use the codes properly in ElectronJS.
Can anyone who knows about this please help?
It's Work.
$(document).on( 'click', '#back-button-id', function(){
if(webview-id.canGoToOffset(-1)){
webview-id.goBack();
} });
$(document).on( 'click', '#next-button-id', function(){
if(webview-id.canGoToOffset(+1)){
webview-id.goForward();
} });
I have a button Sign Up that loads in content from another file in the form of a Modal. When I click the button for the first time, the script works normally with no errors/warnings. However after the first time, if I dismiss the modal by clicking off of the element, clicking the Sign Up button again STILL WORKS, however it now throws a console error, stating $(...).modal(...).find(...).load(...) is not a function. In another one of my posts trying to solve this issue, I discovered the .load() method wouldn't work because I had the wrong version of jquery sourced in the file. But since then I have fixed that issue and the Modal now works, so I don't understand where this error is coming from.
Secondly, when the modal appears, it darkens the rest of the page (normal behaviour of the modal), if I try to dismiss the modal using the close button in the header, the modal disappears however the rest of my page is left darkened?/left out of focus? and the page becomes un-interactable...
Thirdly, I posted this as a seperate question due to the difference in nature: Bootstrap Modal messes up Carousel CSS
How do I fix these issues?
HTML file
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Land Power</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only"></span></a>
</li>
<!-- <li class="nav-item ">
<a class="nav-link" href="contact.html">Contact Us<span class="sr-only"></span></a>
</li> -->
</ul>
</div>
<div class="d-flex justify-content-end">
<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html" data-toggle="modal" data-target="#theModal">Sign Up</button>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Modal content load script
<script>
$('.signup').on('click', function(e){
e.preventDefault();
$('.modal').modal('show').find('.modal-body').load($(this).attr('linkFile'));
});
</script>
I think the issue here is likely that you are including bootstrap from two sources. Check your code to make sure you are including bootstrap from only one source. I had a similar issue not too long ago, solved when I realized bootstrap was being automatically included from another CDN.
Here is a jsfiddle containing your code inside a bootstrap template. It works as you have described it to.
https://jsfiddle.net/fatchild/b04r7Ljo/3/
It is a good idea to take your code out of context into a tool like JSfiddle in order to isolate the bug. As you can see there is nothing wrong with the code you have supplied.
So I have a button in one of my bootstrap tab-content and I have about 5 nav-tabs. What I want to do is when you click on the button to go to the final tab and launch a new window at the same time.
Here is what I've tried.
<a href="#done"
onClick="window.open('https://amazon.com', '_blank')"
class="btn btn-success"> Marketplace</a>
It launches the new window but the tab doesn't move to the final tab. Any thoughts?
Use a click handler that handles the bootstrap tab change and opens a window. You can put the URL you want for each tab in a data attribute of the element and read that in dynamically.
Since the SO sandbox won't allow a popup, here's a codepen https://codepen.io/anon/pen/dRYOmE
$('#myTabs a').on('click', function (e) {
e.preventDefault()
$(this).tab('show');
window.open($(this).attr('data-url'), '_blank');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">home</div>
<div role="tabpanel" class="tab-pane" id="profile">profile</div>
<div role="tabpanel" class="tab-pane" id="messages">messages</div>
</div>
</div>
I am trying to create a tab using bootstrap. Everything is set except while page loads, the active tab's style is not changed. If we click the individual tab the style is changed correctly. Only in the page load, it is not working.
I have created a plunker and given below the link.
plunker = link
My requirement is when page loads the first tab (that is active tab) will be shown in a different style.
Thanks in advance for your help.
let me know if any query, as you have mentioned that this is usful for you :
http://jsfiddle.net/simonbingham/bFWUM/
(function () {
var app = angular.module('myApp', []);
app.controller('TabController', function () {
this.tab = 1;
this.setTab = function (tabId) {
this.tab = tabId;
};
this.isSet = function (tabId) {
return this.tab === tabId;
};
});
})();
<div class="container">
<section ng-app="myApp" ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Tab 1</a></li>
<li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li>
<li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li>
</ul>
<div ng-show="tab.isSet(1)">
<h4>Tab 1</h4>
</div>
<div ng-show="tab.isSet(2)">
<h4>Tab 2</h4>
</div>
<div ng-show="tab.isSet(3)">
<h4>Tab 3</h4>
</div>
</section>
</div>
I am newbie in jquery mobile. I got some code from the internet for follow/unfollow button and it works. But the problem is when I click the button, the button changes text but it becomes smaller than another button next to it. This is how it looks:
$(document).on('click', '.followButton', function(e) {
e.preventDefault();
$button = $(this);
if ($button.hasClass('following')) {
//$.ajax(); Do Unfollow
alert("unfollow event");
$button.removeClass('following');
$button.removeClass('unfollow');
$button.text('Follow');
} else {
// $.ajax(); Do Follow
alert("follow event");
$button.addClass('following');
$button.text('Following');
}
});
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<a data-role="button" type="button" class="btn followButton" data-role="button" data-theme="b">Follow</a>
</div>
<div class="ui-block-b">
<a data-role="button" type="button" class="btn" data-role="button" data-theme="a">Details</a>
</div>
</div>
</div>
</div>
How can I make the button remain the same size after it is clicked? Thank you.