How to make a popup that only pops up once per user? - javascript

I'm a beginner in web development, and I'm trying to program a website for my class. So I watched a video on making a popup, but the popup comes up every time the user reloads the page. I need help, please.
Here's my HTML code:
<!DOCTYPE html>
<html>
<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>KI22 Website</title>
<!-- FONTAWESOME CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--GOOGLE FONTS (MONTSERRAT)-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="popup">
<button id="close">×</button>
<h2>Achtung! Wichtige Regeln</h2>
<p>1.An keine andere Person außerhalb der Klasse teilen!</p>
<p>2.KEINE SCREENSHOTS!</p>
<p>3.Nur schulrelevante Dateien hochladen!</p>
</div>
<!--==================== END OF POPUP ====================-->
<nav>
<div class="container nav__container">
<a href="index.html">
<img class="logo" src="images/logo.png" alt="logo">
</a>
<ul class="nav__menu">
<li>Hauptmenü</li>
<li>Fächer</li>
<li>Mitteilungen</li>
<li>Kontakt</li>
</ul>
<button id="open-menu-btn"><i class="fa-solid fa-bars"></i></button>
<button id="close-menu-btn"><i class="fa-solid fa-xmark"></i></button>
</div>
</nav>
<!--==================== END OF NAVBAR ====================-->
<header>
<div class="container header__container">
<div class="header__left">
<h1>Willkommen zur KI Website</h1>
<p><h4>Diese Website wurde für schulische zwecke von G. Daoud programmiert. Du wirst in der Lage sein, deine Aufzeichnungen von der Unterrichtsstunde auf dieser Website hochzuladen, und die Aufzeichnungen deiner Klassenkameraden zu downloaden.</h4></p>
Loslegen
</div>
<div class="header__right">
<div class="header__right-image">
<img src="./images/student.png">
</div>
</div>
</div>
</header>
<!--==================== END OF HEADER ====================-->
<section class="discord">
<div class="container discord__container">
<div class="discord__left">
<h1><i class="fa-brands fa-discord"></i>Discord</h1>
<p>Hier kannst du Member des Discord-Servers KI22 werden. Wir freuen uns über jeden Member.</p>
<p>In dem Server hast du die Möglichkeit, uns zu kontaktieren wenn du Probleme mit der Website hast, oder auch wenn es allgemein Probleme im Server gibt.</p>
Member werden
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Here is my JS code:
window.addEventListener("load", function() {
setTimeout(
function open(event) {
document.querySelector(".popup").style.display = "block";
},
1000
)
});
document.querySelector("#close").addEventListener("click", function() {
document.querySelector(".popup").style.display = "none";
});
I tried to find an answer on google, but those solutions didn't work. I also watched youtube videos, but still nothing.


You can use localStorage to tell the browser that the page has already been loaded. You'll check if not loaded yet, then open/close your pop up
window.addEventListener("load", function() {
setTimeout(
function open(event) {
if(!localStorage.getItem('loaded')){
document.querySelector(".popup").style.display = "block";
localStorage.setItem('loaded', 'true');
}
},
1000
)
});
document.querySelector("#close").addEventListener("click", function() {
document.querySelector(".popup").style.display = "none";
});
when ever you want to open the popup again, call localStorage and reload the page.
localStorage.setItem('loaded',null);

Related

Waypoint JQuery or even basic jquery code doen´t work

I just started programming and this is my first time using JQuery.
I'm working on an HTML/CSS project and I would like to add some effects using Waypoint jquery. The problem is it's not working. Even the basic test (change the background color for the element 'sec1-text') is not working.
Could you please help me to figure out what is the problem?
Bellow, you gonna find the HTML and JS files.
HTML----------------------------------------------------------
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inicial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Thais Fachini</title>
<link href="./css/normalize.css" rel="stylesheet">
<link href="./css/reset.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./css/grid.css" rel="stylesheet">
<link href="./css/responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Cagliostro&display=swap" rel="stylesheet">
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body class="app">
<!---------------SECTION 1 --------------------------->
<div class="sec1">
<div class="header">
<div class="logo-img"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img"></div>
<!--Sticky Navigation--><div class="logo-img-sticky"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img-sticky"></div>
<div class="logo-name"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<!--Sticky Navigation--><div class="logo-name-sticky"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<div class="links">
<nav>
Sobre
Como funciona
Assinar
Cliente
</nav>
</div>
</div>
<div class="sec1-text">
<div class="text">
<p class="sec1-text-title">ALIMENTAÇÃO FUNCIONAL</p>
<p class="sec1-textindent1">para o <span class="strong">equilíbrio</span> do corpo</p>
<p class="sec1-textindent2">e o <span class="strong">prazer</span> de comer bem.</p>
</div>
<div class="buttons">
<nav>
Assinar
Cliente
</nav>
</div>
</div>
</div>
<!--------------- ABOUT --------------------------->
<div class="about js--about">
<div class="about-title">
<h2><span class="about-title1">Orientação Nutricional Online</span>
<span class="about-title2">Atendimento Online</span></h2>
</div>
<div class="about-photo-text">
<img src="img/photo_thais.png" alt="Photo Thais Fachini" class="about-photo">
<p>Olá!</p>
<p>Sou Thaís Fachini, nutricionista formada pela Universidade São Camilo, SP e extensões em <span class="strong">Nutrição Funcional</span> e <span class="strong">Nutrição Holística</span>.</p>
<p>Minha filosofia de atendimento lhe ensina a olhar e escutar mais seu corpo e perceber o que funciona para você.</p>
<p>Existem vários fatores em nossa vida que interferem na saúde, nos relacionamentos pessoais, trabalho, espiritualidade e aceitação pessoal. Conduzirei seu processo, indicando ferramentas para sentir-se mais feliz e mais saudável.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.12.0/d3.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
JS File ----------------------------------------------------------------
/*eslint-env jquery*/
(document).ready(function ( ) {
$('sec1-text').click(function(){
$(this).css('background-color', '#ff0000');
});
/* For the sticky navigation */
$('.js--about').waypoint(function(direction) {
if (direction == "down") {
$('header').addClass('sticky');
} else {
$('header').removeClass('sticky');
}
}, {
offset: '60px;'
});
});

You need to reference/load jQuery module, you are only loading your waypoints jQuery module/resource currently:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Show Is Not A Function At HTMLButtonElement Error

I am following this codepen which works perfectly. I took the code from it and put it in my local HTML file and added the JS. However when I run it locally it doesn't work. The console prints out the following message:
Uncaught TypeError: dialogLogin.show is not a function at HTMLButtonElement.<anonymous>
My HTML & JS code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.show();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.show();
});
</script>
</body>
Why does this not work locally?
UPDATE
As per my comment, version 0.28 of the MDC Javascript works with this code. The dialog boxes appear. So the question now is, in the latest version of the MDC Javascript how is this supposed to work?

After talking to the guys on the MDC Discord channel, it appears that .show() was replaced with .open().

In the codepan you have used the version 0.28.
Here is the example with the latest version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.open();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.open();
});
</script>
</body>

Saving data from a page in the local storage

This is my first time asking or doing this type of question
So I created this page http://lamp.cse.fau.edu/~mcuervo5/p4/
and it does your basic to do app list thing for adding and deleting stuff.
Apparently the only thing missing is to save the data on the current page. I heard that there a code that can save the current page to a local storage that has everything already in it, so when I re-open the link, instead of having nothing in the "complete and incomplete" list, it should look like this
thanks, it the only part I have left to do & I dont know if it implemented in HTMl or Jquery. I do not know how to do it.
and if you want to see the code here instead of "inspect" from the page with the link above, here it is. for html and Jquery
$(document).ready(function() {
// $('#list').innerhtml = localStorage.getItem("List");
//$('#incomplete-tasks').html("<P>I just replaced your stuff.</P>");
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
$('#incomplete-tasks').append('<li><span class="text" contenteditable="false">' + textbox_Value + "</span>" +
'<input/ style="display: none" class="new-value">' +
"<button type='button' class='delete'>Delete</button>" +
"<button type='button' class='edit'>Edit</button></li>");
});
$('#incomplete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#incomplete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#complete-tasks').append(li);
});
$('#complete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#complete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#incomplete-tasks').append(li);
});
// var save()
//{
// localStorage.setItem("List", $("#list").innerhtml());
// }
});
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>The Reminder list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="css/heroic-features.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">To Do List</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1> The Reminder Friend App </h1>
<p>this is my to do list app. type in the list you want to add & store in the list
</p>
<form>
<!-- textbox -->
<input type="text" id="textbox">
<!--add button -->
<input type="button" id="Sumbit_Button" value="Add">
</form>
</header>
<hr>
<div id='lists'>
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Incomplete</h3>
<ul id="incomplete-tasks">
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Complete</h3>
<ul id="complete-tasks">
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Mauricio Cuervo 2017</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
<script src="p4.js"></script>
</html>

Hello you can do something like this:
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
var list = [];
list.push(textbox_Value);
localStorage.setItem("listdata", list);
// do not manage using `append` whole html. Manage through list and display as you want
});
on page load call:
var stored = localStorage.getItem("listdata");
Now here you can manage array of items and iterate on complete & incomplete list.
So whenever any action of edit, delete, add occurs you have to just manage the localstorage instance on each call. and based on that just iterate list whereever you want.

How to create a simple iOS type Table View using HTML / Twitter Bootstrap / Jquery Mobile etc

I know Objective-C, but I am very new to HTML/jQuery/JS.
I want to create a Table view using these.
Can anyone assist me by showing me how to do this? Although I was able to create a static Table view using below code.
I am now stuck unsure of how to fill it with an Array.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap : Grids using Bootstrap </title>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.demog {
background:#444;
color:#ffffff;
padding:10px;
height:80px;
margin-left: 0 ;
margin-bottom:1px;
text-align:left;
}
</style>
<body>
<div data-role="page" id="table">
<div data-role="header" data-add-back-btn="True" data-back-btn-text="Return">
<h1>Table</h1>
<a href="dashboard.html" class="ui-btn-left" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
<div class="bootstrap-demo">
<div class="row ">
<div class="col-md-1"><p class="demog">value 1 <br><br>Thdepiof fu utoiurotiurotpu oiturou</p></div>
<div class="col-md-1"><p class="demog">Value 2</p></div>
<div class="col-md-1"><p class="demog">Value 3</p></div>
<div class="col-md-1"><p class="demog">Value 4</p></div>
<div class="col-md-1"><p class="demog">Value 5</p></div>
<div class="col-md-1"><p class="demog">Value 6</p></div>
<div class="col-md-1"><p class="demog">Value 7</p></div>
<div class="col-md-1"><p class="demog">Value 8</p></div>
<div class="col-md-1"><p class="demog">Value 9</p></div>
<div class="col-md-1"><p class="demog">Value 10</p></div>
<div class="col-md-1"><p class="demog">Value 11</p></div>
<div class="col-md-1"><p class="demog">Value 12</p></div>
</div>
</div>
</div>
</div>
</body>
</html>

For JQuery, a dynamic tableview implementation is pretty straightforward. You can replace your 'row' div with something like this:
<ul data-role="listview" id="itemslist" data-autodividers="true">
</ul>
where the last attribute is optional if you don't want sub-headers.
Then you can populate the list with javascript like this, where 'data' is a JSON array of 'item' objects:
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><h3>' + item.title + '</h3></li>');
});
$(listId).listview().listview('refresh');
}
The list can be populated on any of the page events (e.g. pageinit, pageshow, pagebeforeshow), as in the below example. Note that some page events are deprecated in JQuery Mobile 1.5, in favor of pagecontainer events.
$(document).on('pageinit', '#main', function(){
updateList(allitems, '#itemslist', '#itemdetail');
$('#itemslist').on('click', 'a', function(e) {
// store selected item into global variable for use on detail page
curItem = this.id;
});
});
Here's a complete working example, with data:
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html lang=en>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- JQuery dependencies -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
var allitems = [
{"title":"first item",
"description":""
},
{"title":"second item",
"description":""
},
{"title":"third item",
"description":""
},
{"title":"fourth item",
"description":""
}
];
$(document).on('pageinit', '#home', function(){
updateList(allitems, '#itemslist', '#itemdetail');
$('#itemslist').on('click', 'a', function(e) {
// store selected item into global variable for use on detail page
curItem = this.id;
});
});
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><h3>' + item.title + '</h3></li>');
});
$(listId).listview().listview('refresh');
}
</script>
<title>List demo</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>List demo</h1>
</div>
<div data-role="main" class="ui-content">
<div>
<ul data-role="listview" id="itemslist">
</ul>
</div>
</div>
</div>
</body>
</html>

jQuery UI Accordion: opening a panel from top menu and closing an open panel

First of all, I am French, so please forgive my possible English mistakes... ;-)
Second, I'm not too bad at (x)HTML and CSS, but I'm an absolute beginner in jQuery.
I'm trying to set up a jQuery UI Accordion that would allow:
- opening a panel when clicking its header (done)
- closing this open panel when re-clicking its header (not done)
- opening a specific panel according to a hashtag in the URL (done)
- changing the hashtag in the URL when another panel is opened (done)
- removing the hashtag in the URL when closing an open panel (dont, quite dirty but done)
- opening a panel when clicking a link in the page's top menu (not done, in spite of looooong hours trying to make it work)
As you can see, I've managed to address some of my needs, but I just can't figure out how to solve the last two - which, for reminder, are:
- closing this open panel when re-clicking its header: according to the documentation, the collapsible: true option should have made it OK... but it didn't - or maybe I implemented it the wrong way?
- opening a panel when clicking a submenu link in the page's top menu: does anybody know if/how that would be possible?
Any help on that would be really appreciated. Here's my code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" http-equiv="Content-Language" content="fr-FR" />
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
<title>Votre projet</title>
</head>
<body class="page">
<div id="content">
<div id="menu">
<ul>
<li>Accueil</li>
<li class="current">Votre projet
<div>
<ul>
<li>Extension</li>
<li>Renovation</li>
</ul>
</div>
</li>
<li>Mes services</li>
<li>Partenaires</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="main">
<div id="projet">
<a name="extension" id="extension"></a>
<!-- ACCORDION HEADER -->
<a class="accordion title" href="#extension" title="Afficher / masquer les details pour Extension">Extension</a>
<!-- ACCORDION CONTENT -->
<div>
<p>Pour construire un batiment neuf ou integrer une extension a une construction existante, il est essentiel de s'entourer de professionnels competents.</p>
<p>Dans le domaine de l'electricite, les imperatifs sont multiples : respect des normes, confort, longevite des equipements…</p>
</div>
<a name="renovation" id="renovation"></a>
<!-- ACCORDION HEADER -->
<a class="accordion" href="#renovation" title="Afficher / masquer les details pour Renovation">Renovation</a>
<!-- ACCORDION CONTENT -->
<div>
<p>Dans le cadre d'un projet de renovation, un soin particulier doit etre apporte à l'electricite. Une belle installation electrique est une installation qui ne se voit pas : l'exercice requiert un savoir-faire tout particulier, au travers de solutions adaptees au bati. En renovation, le chauffage electrique est par exemple le seul moyen d'obtenir une installation performante sans avoir a effectuer de gros travaux.</p>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<!-- JQuery -->
<!-- jQuery Google CDN hosted with local fallback -->
<!-- Weird doc.write slashes explained here http://www.codehouse.com/javascript/articles/external/ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write('<script src="', 'js/jquery.js', '" type="text/JavaScript"><\/script>');
}
</script>
<!-- Accordion -->
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(
function(){
$(".accordion").click(function(event){
if (!$(this).hasClass('selected')){
$(this).addClass("selected");
window.location.hash=this.hash;
}
else if ($(this).hasClass('selected')){
$(this).removeClass('selected');
window.location=window.location.href.split('#')[0];
}
});
$('#projet').accordion({
autoHeight: false,
navigation: true,
collapsible: true,
active: false,
header: '.accordion'
});
});
</script>
<!-- Menu -->
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>
And a live page in case you might need it: http://davidgmmartin.free.fr/accordion/test.html
Please help me with this, it's driving me nuts!
Thanks for your help,
David

One more question, why are you setting the hash in the window.location?
you could easily force the "click" for the accordion item in the navigation.
$("something").click() <-- will force the item to be clicked, all events will be handled as known.
I tried this out
$(".ui-accordion .ui-accordion-header:nth(1)").click()
and it works
the "nth(1)" is just testing, since you have just to, you can pass in 0, or 1, or you make a custom method like
function openTab(name) {
$(".ui-accordion .ui-accordion-header[href=#" + name + "]").click()
}
us it like openTab("extension");
Btw. this: window.location=window.location.href.split('#')[0]; is making a full page refresh!

Categories