How to Centre Align Popup in Javascript PhoneGap App

How to Centre Align Popup in Javascript PhoneGap App - javascript

When I call a Popup from another Popup the second Popup doesn't show in the middle of the page. For example in the Code below if you Click on "Bookmark" the next popup opens in the top left region of the page which looks a bit odd.
<button onclick="$('#BookmarksPopup').popup('open');">Popup</button>
<div data-role="popup" id="BookmarksPopup">
<ol data-theme="d" data-role=listview data-inset=false >
<li><a data-icon="home" data-rel="popup" href="#BMPopup">Bookmark</a></li>
<li><a data-icon="home" onclick="closePopup();">Close</a></li>
</ol>
</div><!-- /popup BookmarkPopup-->
<div data-role="popup" id="BMPopup">
<ol data-theme="d" data-role=listview data-inset=false >
<li><a data-icon="home" onclick="SaveBookmarkPage();">Bookmark this Page</a></li>
<li><a data-icon="home" onclick="SaveBookmark(0);">Bookmark this Audio</a></li>
<li><a data-icon="home" onclick="SaveBookmark(1);">Bookmark Audio Position</a></li>
<li><a data-icon="home" onclick="DisplayBookmarks();">Manage Bookmarks</a></li>
<li><a data-icon="home" onclick="closePopup();">Close</a></li>
</ol>
</div><!-- /popup BookmarkPopup-->
Can someone please tell me how to ensure that my Popups, especially the second one, opens in the centre of the page?
Here is the JSFiddle:

You need to add property data-position-to="window", Read on the link JQM POPUP
Find the working DEMO
<button id='pid'>Popup</button>
<div data-role="popup" id="BookmarksPopup" data-position-to="window">
<ol data-theme="d" data-role=listview data-inset=false>
<li><a data-icon="home" data-rel="popup" href="#BMPopup">Bookmark</a>
</li>
<li><a data-icon="home" onclick="closePopup();">Close</a>
</li>
</ol>
</div>
<div data-role="popup" id="BMPopup" data-position-to="window" >
<ol data-theme="d" data-role=listview data-inset=false>
<li><a data-icon="home" onclick="SaveBookmarkPage();">Bookmark this Page</a>
</li>
<li><a data-icon="home" onclick="SaveBookmark(0);">Bookmark this Audio</a>
</li>
<li><a data-icon="home" onclick="SaveBookmark(1);">Bookmark Audio Position</a>
</li>
<li><a data-icon="home" onclick="DisplayBookmarks();">Manage Bookmarks</a>
</li>
<li><a data-icon="home" onclick="closePopup();">Close</a>
</li>
</ol>
</div>
$('#pid').click(function () {
$('#BookmarksPopup').popup('open');
});

Related

Simple JavaScript Dropdown

I am trying to create a simple drop down menu from a menu button (not actually a button). I know I have done this before and have referenced the project the I previously completed and have everything exactly the same and it still will not work. Any help would be appreciated! I have a the most current jQuery UI referenced in my HTML head.
HTML
<header>
<div id='logo_container'>
<img src='img/rinTin_logo_white.png' id='header_logo' alt='RinTin Logo' />
</div>
<div id='menu_button_container'>
<a href='#' id='menu_button_link'><img src='img/menu_button.png' id='menu_button' alt='' /></a>
</div>
<div class='clear'></div>
<div id='mobile_nav_container'>
<nav id='mobile_nav'>
<ul id="primary_mobile">
<li><a href='#'>Schedule</a></li>
<li><a href='#'>Users</a></li>
<li><a href='#'>Shifts</a></li>
<li><a href='#'>System</a></li>
<li><a href='#'>Forums</a></li>
</ul>
<ul id="secondary_mobile">
<li><a href='#'>My Account</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Log Out</a></li>
</ul>
</nav>
</div>
</header>
CSS
#mobile_nav_container{
display:none;
}'
JS
$(document).ready(function() {
$('#mobile_nav_container').removeClass('hidden');
});
$().ready(function(){
$('#menu_button_link').click(function(){
$('#mobile_nav_container').show('slow');
});
});

Materialize side-nav links doesn't work

I'm making an web with materializecss but links I add on the side nav doesn't work what can I do with it,
When I click the link the side-nav close
code:
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<div class="background">
<img src="<?php echo $srcurl; ?>/cover.png">
</div>
<img class="circle" src="<?php echo $srcurl; ?>/logo.png">
<span class="black-text name">DIGINEWS</span>
</div>
</li>
<li><center>MENU</center></li>
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<script> $(".button-collapse").sideNav(); </script>
</div>
</nav>
</div>

Wrap your JS code for sideNav within documentReady event, and set parameter closeOnClick as true.
Bring your side menu (ul element with class"side-nav") at the same level of div with class navbar-fixed . This is to avoid known issues with overlay. See this stackoverflow question and accepted answer
$( document ).ready(function(){
$('.button-collapse').sideNav({
closeOnClick: true
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="#">Home</a></li>
<li><a class="waves-effect" href="#">About us</a></li>
</ul>
</div>
</nav>
</div>
<ul class="side-nav" id="mobile-demo">
<li><center>MENU</center></li>
<li><a class="waves-effect" href="#!">Home</a></li>
<li><a class="waves-effect" href="#!">About us</a></li>
</ul>

simply code below....
you need to add CDN of materialize sc,js and jquery js
Here is your fix nav bar
<div class="navbar-fixed">
<nav class="nav-wrapper">
<div class="container">
Picnic.lk
<a href="" class="sidenav-trigger" data-target="mobile-menu">
<i class="material-icons">menu</i>
</a>
<ul class="hide-on-med-and-down right">
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</div>
</nav>
</div>
your mobile nav bar (side nav)
<ul class="sidenav grey lighten-2" id="mobile-menu">
<li><a class="sidenav-close" href="#photos">Photos</a></li>
<li><a class="sidenav-close" href="#services">Services</a></li>
<li><a class="sidenav-close" href="#contact">Contacts</a></li>
</ul>
Add below js code
<script>
$(document).ready(function(){
//side navigation
$('.sidenav').sidenav({
//your additional code goes here
});
});

Sidenav not showing when i minimise the browser

I am trying to do the Sidenav, when i have a full screen, the menu displays but when i minimize the browser the menu button shows but when i click it, it doesn't display anything. I don't know why. I am using Materialize css. http://jsfiddle.net/xdrL9e83/8/. When i run it in Jsfiddle it shows the Toggle icon being outside Navbar. I don't know why
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
The Javascript
<script>
$(".button-collapse").sideNav();
</script>

Your DIV is closed in the wrong place. It needs to close after the content of your Nav.
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="mdi-navigation-menu"></i>
<ul class="right hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</div>
</nav>
http://jsfiddle.net/aaronfranco/xdrL9e83/14/

Put the menu toggle icon (mdi-navigation-menu) at the top..
<nav>
<i class="mdi-navigation-menu"></i>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</nav>
Demo: http://codeply.com/go/mMvlUnsNRT

Save user chosen background image using cookies in javascript across webpages

Okay so I'm trying to save this function using cookies, and I can't seem to get the cookies to interact with the function.
var backImage = new Array();
backImage[0] = "dotPattern.png";
backImage[1] = "stripesPattern.png";
backImage[2] = "boxPattern.png";
backImage[3] = "";
function changeBGImage(whichImage){
document.body.background = backImage[whichImage];
}
Can you let me know what I'm doing wrong or what else I have to do. I've got the image files and the html all in the same folder. Let me know if you need anything else and I can put it up here too.
Thank you very much for any help you're able to offer
Here is the page the cookies are meant to be used on:
<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<script src="customise.js"></script>
<title>Vitalita - My Profile</title>
<div id="Logo">
<img id="logo" src="LogoSmall.png" height=125px border="0" alt="Image not found"></img>
</div>
<body>
<header>
<nav id="top">
<ul id="menu">
<li><a class="nav" id="about" href="#">about</a>
<ul class="submenu">
<li><a class="aboutMenu" href="aboutus.html">about us</a></li>
<li><a class="aboutMenu" href="contactus.html">contact us</a></li>
</ul>
</li>
<li><a class="nav" id="health" href="#">health</a>
<ul class="submenu">
<li><a class="healthMenu" href="#">information</a></li>
<li><a class="healthMenu" href="#">exercise</a></li>
<li><a class="healthMenu" href="recipes.html">recipes</a></li>
</ul>
</li>
<li><a class="nav" id="media" href="#">media</a>
<ul class="submenu">
<li><a class="mediaMenu" href="articles.html">articles</a></li>
<li><a class="mediaMenu" href="#">videos</a></li>
</ul>
</li>
<li><a class="nav" id="tools" href="#">tools</a>
<ul class="submenu">
<li><a class="toolMenu" href="BMI.html">BMI calculator</a></li>
<li><a class="toolMenu" href="#">measurements</a></li>
<li><a class="toolMenu" href="#">exercise generator</a></li>
</ul>
</li>
<li><a class="nav" id="social" href="#">social</a>
<ul class="submenu">
<li><a class="socialMenu" href="social.html">social media</a></li>
<li><a class="socialMenu" href="#">games</a></li>
</ul>
</li>
<li><a class="nav" id="account" href="registration.html">account</a>
<img src="icon.png" height=19px id="icon"></img>
<ul class="submenu">
<li><a class="accountMenu" href="#">my profile</a></li>
<li><a class="accountMenu" href="#">my progress</a></li>
<li><a class="accountMenu" href="#">my favourites</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<img id=insta src="insta.png" height=50px></img>
<img id=fb src="fb.png" height=50px></img>
<img id=twit src="twit.png" height=50px></img>
<section id="feature">
Dot Pattern
Stripes Pattern
Box Pattern
Default
</section>
<hr id="first">
<footer>
<div class="Foot">
<div id="footHome">
<bold>Home</bold>
<ul class="sitemap">
<li><a class="links" href="home.html">Home Page</a>
</ul>
</div>
<div id="footAbout">
<bold>About</bold>
<ul class="sitemap">
<li><a class="links" href="aboutus.html">About Us</a>
<ul class="sitemap">
<li><a class="links" href="">Style Guide</a>
<li><a class="links" href="">Evaluation Plan</a>
</ul>
<li><a class="links" href="contactus.html">Contact Us</a>
<li><a class="links" href="feedbackform.html">Feedback</a>
<li><a class="links" href="helpdesk.html">FAQ</a>
<li><a class="links" href="privacy.html">Privacy Policy</a>
</ul>
</div>
<div id="footHealth">
<bold>Health</bold>
<ul class="sitemap">
<li><a class="links" href="#">Information</a>
<li><a class="links" href="#">Exercise</a>
<li><a class="links" href="recipes.html">Recipes</a>
</ul>
</div>
<div id="footMedia">
<bold>Media</bold>
<ul class="sitemap">
<li><a class="links" href="#">Articles</a>
<li><a class="links" href="#">Videos</a>
<li><a class="links" href="#">Games</a>
</ul>
</div>
<div id="footTools">
<bold>Tools</bold>
<ul class="sitemap">
<li><a class="links" href="BMI.html">BMI calculator</a>
<li><a class="links" href="#">Measurements</a>
<li><a class="links" href="#">Exercise generator</a>
</ul>
</div>
<div id="footSocial">
<bold>Social</bold>
<ul class="sitemap">
<li><a class="links" href="social.html">Social Media</a>
<li><a class="links" href="#">Games</a>
</ul>
</div>
<div id="footAccount">
<bold>Account</bold>
<ul class="sitemap">
<li><a class="links" href="#">My Profile</a>
<li><a class="links" href="#">My Progress</a>
<li><a class="links" href="#">My Favourites</a>
</ul>
</div>
</div>
<hr id="second">
</footer>
<div id="copy">
Copyright © Vitalita 2014. All Rights Reserved.
<div>
</body>
</html>

To use cookies you need to save and load them explicitly. You can find how to do this in javascript in this question.

horizontal menu submenu

I have a horizontal list menu and another horizontal list sub menu for each menu item.
Now when the page loads for the first time, first top menu with its sub menu and other top menus should show up and stay on if I mouse away or until i hover over other top menu item. As i hover over the other menus, their corresponding sub menus should show up.
Can someone show me how to do it using javascript or jquery or css only?
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li>
<li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<DIV class="tabcontainer">
<div id="sc1" class="tabcontent">
<ul>
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</div>
<div id="sc2" class="tabcontent">
<ul>
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</div>
<div id="sc3" class="tabcontent">
<ul>
<li><a id="link3-1" href="http://test.com">Link 3a</a></li>
<li><a id="link3-2" href="http://test.com">Link 3b</a></li>
</ul>
</div>
</DIV>

here's an example to point you in the right direction.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
ul, li
{
display: block;
}
.sublinks
{
display: none;
}
</style>
</head>
<body>
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1">
<a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a>
<ul class="sublinks">
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</li>
<li class="basictab1" id="li2">
<a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a>
<ul class="sublinks">
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<script>
$('.basictab1').hover(function()
{
$(this).find('ul').toggle();
});
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

How to Centre Align Popup in Javascript PhoneGap App - javascript

Related

Simple JavaScript Dropdown

Materialize side-nav links doesn't work

Sidenav not showing when i minimise the browser

Save user chosen background image using cookies in javascript across webpages

horizontal menu submenu

Categories

Resources