I'm programming a Website and I worked through some bootstrap tutorials and I've seen the List group which is very cool.
At the end they show how to implement this "active" feature. I tried to, but I couldn't make it work.
Maybe you guys now how to do it...
I have also something in JavaScript but it doesn't work.
<!doctype html>
<html lang="en"
th:replace="~{mopslayout :: html(name='Klausurzulassung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<th:block th:fragment="headcontent">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<link href="../static/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
th:href="#{node_modules/bootstrap/dist/css/bootstrap.min.css}">
</th:block>
<title>Base Template</title>
</head>
<body>
<header>
<nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
<div class="list-group" id="myList" role="tablist">
<span sec:authorize="hasRole('orga')">
<a class="list-group-item list-group-item-action active" data-toggle="list"
href="#zulassungsliste" role="tab" th:href="#{/zulassung2/orga/upload-csv}">Zulassungsliste
hochladen</a>
</span>
<span sec:authorize="hasRole('orga')">
<a class="list-group-item list-group-item-action" data-toggle="list" href="quittungenValidieren"
role="tab" th:href="#{/zulassung2/orga/upload-receipt}">Quittungen validieren</a>
</span>
<span sec:authorize="hasRole('studentin')">
<a class="list-group-item list-group-item-action" data-toggle="list" href="studiseite"
role="tab" th:href="#{/zulassung2/studi}">Studiseite</a>
</span>
</div>
</nav>
</header>
<script>
$(function () {
console.log('ready');
$('.list-group span').click(function (e) {
e.preventDefault()
$that = $(this);
$that.parent().find('li').removeClass('active');
$that.addClass('active');
});
})
</script>
<main th:fragment="bodycontent">
<div th:replace="${content} ?: ~{}"></div>
</main>
</body>
</html>
Related
Is it possible after click on an IMG to go to a specific tab in bootstrap 5?
Unfortunately a href in an IMG code doesn't work in this case.
I wanna go to About Me tab after clicking on a first imgI wanna go to Projects tab after clicking on a second imgI wanna go to Contact tab after clicking on a third img
Please find my code below and on jsfiddle - https://jsfiddle.net/84zyvu0t/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item menuItems">
About Me
</li>
<li class="nav-item menuItems">
Projects
</li>
<li class="nav-item menuItems">
Contact
</li>
</ul>
</div>
<div class="tab-content">
<!-- TAB NUMBER 1 - About Me -->
<div class="tab-pane fade show active" id="aboutMe">
<p>Hi, my name is Robert</p>
</div>
<!-- TAB NUMBER 2 - Projects -->
<div class="tab-pane fade" id="projects">
<p>This is a projects tab</p>
</div>
<!-- TAB NUMBER 3 - Contact -->
<div class="tab-pane fade" id="contact">
<p>Reach out to me</p>
</div>
</div>
<img src="https://picsum.photos/id/27/200/300" alt="">
<img src="https://picsum.photos/id/28/200/300" alt="">
<img src="https://picsum.photos/id/29/200/300" alt="">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
</script>
</body>
</html>
I found a solution from this link (Jacob Goh's solution)
How to change active bootstrap tab with javascript
you may also use .tab('show') for more flexibility
https://codepen.io/jacobgoh101/pen/ALELNr
go to menu
3 javascript:
function menu3(){ $('[href="#menu3"]').tab('show'); } Bootstrap
documentation: https://getbootstrap.com/javascript/#tabs
**BUT** I had to turn my imgs to buttons (so to speak) so I'm not even sure if that'll work in the future and if there are any consequences using them this way...
SOLUTION
function aboutMeTab() {
$('[href="#aboutMe"]').tab('show');
}
function projectsTab() {
$('[href="#projects"]').tab('show');
}
function contactTab() {
$('[href="#contact"]').tab('show');
}
button {
background-color: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item menuItems">
About Me
</li>
<li class="nav-item menuItems">
Projects
</li>
<li class="nav-item menuItems">
Contact
</li>
</ul>
</div>
<div class="tab-content">
<!-- TAB NUMBER 1 - About Me -->
<div class="tab-pane fade show active" id="aboutMe">
<p>Hi, my name is Robert</p>
</div>
<!-- TAB NUMBER 2 - Projects -->
<div class="tab-pane fade" id="projects">
<p>This is a projects tab</p>
</div>
<!-- TAB NUMBER 3 - Contact -->
<div class="tab-pane fade" id="contact">
<p>Reach out to me</p>
</div>
</div>
<a href="#aboutMe">
<button class="btn btn-primary przycisk" onclick="aboutMeTab()">
<img src="https://picsum.photos/id/27/200/300" alt="">
</button>
</a>
<a href="#projects">
<button class="btn btn-primary przycisk" onclick="projectsTab()">
<img src="https://picsum.photos/id/28/200/300" alt="">
</button>
</a>
<a href="#contact">
<button class="btn btn-primary przycisk" onclick="contactTab()">
<img src="https://picsum.photos/id/29/200/300" alt="">
</button>
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
</script>
</body>
</html>
innerHTML is working on console and it's changing the text in anchor tag but the in display on browser, it is not changing. I gave tag for login an id of "changeIt" and then retrieved the ID by using getElementByID(); function and at last changed the text of that. I did the same in case of tag without any use of Materialize and it was working. Does DOM does not work with materialize CSS framework?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skynet | Live courses from Universites</title>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function init() {
var name = document.getElementById("changeIt");
console.log("blah");
name.innerHTML = "Alex";
console.log(name);
}
window.onload = init;
</script>
<!-- NAVIGATION BAR -->
<div>
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<i class="material-icons left">account_balance</i>Skynet
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Become a Creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login"><i class="material-icons right">person</i>Login</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Become a creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login" id="changeIt"><i class="material-icons">person</i>Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--LOGIN POP-UP CONTENT-->
<div id="login" class="modal">
<div class="modal-content modal-close">
<h4 class="header center-align">Skynet</h4>
<p class="flow-text center-align">Sign in to Skynet with</p>
<div class="center-btn">
<i class="ion-social-google left"></i>Google
</div>
</div>
</div>
</body>
</html>
After running this the value in console is changing -
blah
<a class="modal-trigger" href="#login" id="changeIt">Alex</a>
By using this -
$(document).ready(function() {
$('#change').text("Alex");
});
Good Day,
Question I have already try to apply all the fixes for Ipad to get the menu working, Like onclick="" and cursor: pointer;, I already check that the Jquery is working by putting: $(document).ready(function(){alert("We accessed the Javascript"); }); It works in every device, but in Ipad does not work at all, does not recognise the click and does not change the style class either.
I use as blueprint this example, then I customise it, so it has not been change that much.
SlideMenu
Here is the big code, sorry :S:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
class="no-js">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge; IE=11; IE=10; IE=9; IE=8; IE=7, chrome=1"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>BBVA</title>
<!-- BOOTSTRAP STYLES-->
<link href="${request.contextPath}/assets/css/bootstrap.css" rel="stylesheet" media="all" />
<!-- BBVA fonts -->
<link href="${request.contextPath}/assets/css/style2.css" rel="stylesheet" media="all" />
<!--SCRIPTS-->
<!---Apple Safari iPad and iPhone Meta Tags-->
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=992, initial-scale=1, user-scalable=no"/><!--width is pixels, range 200 to 10000-->
<meta name="format-detection" content="telephone=no"/> <!--disables automatic detection of possible phone numbers-->
<meta name="apple-mobile-web-app-capable" content="yes"/><!--specifies full-screen mode-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/><!--specify full-screen mode first-->
</f:facet>
<!-- Custom BBVA Theme create by: Alejandro Daza -->
<link href="${request.contextPath}/assets/css/style.css" rel="stylesheet" media="all" />
<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/assets/js/modernizr.custom.js"></script>
<script src="${request.contextPath}/assets/js/style1.js"></script>
<script src="http://192.168.0.3:1337/vorlon.js"></script>
<script src="${request.contextPath}/assets/js/classie.js"></script>
</h:head>
<h:body>
<script>
$(document).ready(function(){
//Check if the current URL contains '#'
if(document.URL.indexOf("#")==-1){
// Set the URL to whatever it was plus "#".
url = document.URL+"#";
location = "#";
//Reload the page
location.reload(true);
}
});
</script>
<div class="container pagina">
<div class="col-md-1 col-lg-1 menu2">
<div class="col-md-4 information nopaddingleft nopaddingright">
<ul class="information_menu">
<li class="active" data-id="1"><i class="icon-home_icon"></i></li>
<li data-id="2"><a id="showmenu1" onclick="" ><i class="icon-menu_icon"></i></a></li>
<div class="spacing"></div>
<li data-id="3"><i class="icon-settings_icon"></i></li>
<li data-id="4"><i class="icon-help_icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i></li>
</ul>
</div>
<!-- Sidebar -->
<div class="menunivel1 menunivelleft1" id="menunivel1">
<ul class="information_menunivel1">
<li class="active" data-id="1"><a href="#">
<img src="../assets/img/perfil.png" style=" width: 35%; position: absolute; left: 13px;top: 13px;" />
<ul class="menuPerfil">
<li>
Luci Santodomingo
</li>
<li>
Gerente
</li>
<li>
Oficina Calle 123
</li>
<li>
Bogotá
</li>
</ul>
</a></li>
<li><a id="showmenu2" href="#" onclick="" ><p>Gestion comercial <span class="icon-forward_icon flechas"></span></p></a></li>
<li><p>Cartera de clientes <span class="icon-forward_icon flechas"></span></p></li>
<li><p>Oportunidades comerciales <span class="icon-forward_icon flechas"></span> </p></li>
<li><p>Portal de desarrollo comercial <span class="icon-forward_icon flechas"></span> </p></li>
<li><p>Portal MIS <span class="icon-forward_icon flechas"></span></p></li>
<li><p>Alerta de fuga</p></li>
</ul>
<!-- Sidebar -->
<div class="menunivel2 menunivelleft2" id="menunivel2">
<ul class="information_menunivel2">
<li class="active">
<a href="#">
<ul class="menuPerfil">
</ul>
</a>
</li>
<li ><a id="showmenu3" href="#" onclick=""><p>Citas para hoy <span class="icon-forward_icon flechas"></span></p></a></li>
<li><p>Agenda <span class="icon-forward_icon flechas"></span> </p></li>
<li data-id="4"><p>Reclamos <span class="icon-forward_icon flechas"></span> </p></li>
</ul>
<!-- Sidebar -->
<div class="menunivel3 menunivelleft3" id="menunivel3">
<ul class="information_menunivel3">
<li class="active" data-id="1">
<a href="#">
<ul class="menuPerfil">
</ul>
</a>
</li>
<li><p>Propia</p></li>
<li><p>Mis Ejecutivos </p></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="col-md-11 col-lg-11 contenedorderecha clearfix">
<div class="row contenedorModulos clearfix">
<h:form id="principalForm">
<ui:insert name="content"/>
</h:form>
</div>
</div>
</div>
<script>
//<![CDATA[
var menunivel1 = document.getElementById('menunivel1'),
menunivel2 = document.getElementById('menunivel2'),
menunivel3 = document.getElementById('menunivel3');
$("#showmenu1").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
});
$("#showmenu2").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel2, 'menu2open');
});
$("#showmenu3").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel3, 'menu3open');
});
//]]>
</script>
</h:body>
</f:view>
</html>
As you can see I am using xhtml, I dont know if that is related with the issue, or if is any primefaces query that is interfering with the on file jquery.
I have been with this issue for more than 2 weeks, I have the webpage on a local server, for security reason I will provide you with the link by chat or email If you want to take a complete look at it.
sorry, my english is not that great.
Some jquery functions in the web will not work the same way in IPAD or any other device.
Try this
$('selector').on('click touchstart', function() {
});
$("#showmenu1").on('click touchstart', function(){
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
});
Im trying to build responsive website. To do that, Im using Bootstrap 3. I have downloaded Bootstrap 3 and imported to my website root directory:
I don't know why, but on small screen it doesn't show my icon:
My code:
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/jquery-2.1.1.js"></script>
<script src="../bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script src="../js/script.js"></script>
<title>
title
</title>
</head>
<body>
<header class="top" role="header">
<div class="container">
<a href="../aplikacija/app.html" class="navbar-brand pull-left">
Application
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li>APP</li>
<li>UX</li>
</ul>
</nav>
</div>
</header>
<div id="app" class="content">
</div>
</body>
</html>
Your glyphicon span should have the following class: glyphicon glyphicon-align-justify as opposed to just glyphicon-align-justify
I would suggest not using align justify in the span as a class - just display the glyphicon and then justify it in an outside div.
<div class="text-justify">
<span class="glyphicon glyphicon-align-justify"></span>
</div>
here is some more info - http://getbootstrap.com/components/#glyphicons-how-to-use
I am performing action on dropdown menu item selection.
JS fiddle
but does not make any action when I test on localhost, even does not show menu item. Though I have included all files.
code:
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="sticky-footer-navbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(".dropdown-menu li a").click(function(){
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
</script>
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</body>
</html>
What's wrong with this code?
UPDATE1
<script>
$( document ).ready(function() {
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
</script>
No change
the result looks like this:
UPDATED CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrapa.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<script>
$( document ).ready(function() {
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
</script>
</body>
</html>
Here's your code:
<!doctype html>
<html lang="en">
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$(".dropdown-menu li a").click(function(){
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
</script>
</body>
</html>
Hope this helps.
Try to include the jQuery lib before your jQuery UI refer.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
try this:
$(".dropdown-menu li a").on('click', function(){
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
You need to define the click function when the document is ready. In your edit, you just try to move the code from the click function the $(document).ready() function. In that context $(this) does not refer to the select element. Try this:
$(document).ready(function() {
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$('label').css('color',selText);
});
});