Here is code that creates a button that calls a popup:
popup button
This is the code that creates the popup with jQuery Mobile:
<div data-role="popup" id="positionWindow" class="ui-content popup" data-theme="b" data-overlay-theme="a">
Close
<p> Replace the text here depending on which button is pressed </p>
</div>
How do I create multiple buttons that all call the same code used to create the popup and then replace the text inside of the popup depending on the button pressed?
It seems to me fine to use just one popup and dynamically set the content. Instead of use the href in markup, You should open your popup from code:
$(document).on("vclick", "a[data-popup]", function(e) {
var cases = [
"You pressed Button 1",
"You pressed Button 2"
],
id = $(this).data("popup");
$("#msg-block").text(cases[id - 1]);
$("#myPopup").popup("option", "transition", "flow").popup("open");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h2>Header</h2></div>
<div role="main" class="ui-content">
<a class="ui-btn" data-popup="1" href="#">Popup Button 1</a>
<a class="ui-btn" data-popup="2" href="#">Popup Button 2</a>
</div>
<div data-role="popup" id="myPopup" class="ui-content popup" data-theme="b" data-overlay-theme="a">
Close
<p id="msg-block"> Replace the text here depending on which button is pressed </p>
</div>
</div>
</body>
</html>
Explanation: to bind the button to the text message, i am using in my example a custom data-attribute but - if you prefer - you could use just the id of the buttons. Up to you.
Related
I have the following overlay external panel:
<div data-role="panel" id="panel" data-position="left" data-display="overlay" data-theme="a">
<h1 style="background-image: url('img/image.jpeg');width:240px;height:60px;border-radius: 8px;">Options</h1>
<ul data-role="listview">
<li data-role="list-divider" style="font-style: italic;">File</li>
<li>Load file</li>
</ul>
</div>
This panel is activated from a href button in the header of every page and it can also be activated on a right swipe. To close the panel, the user can either click externally from the panel or swipe left. The problem is that when I click on the href button to open the panel and then swipe left to close it, the button remains in a activated highlightend state. It only gets back to its not-clicked state, when I tap on the page.
Here is the definition of the header, where the button for the panel resides:
<div data-role="header" data-position="fixed">
Menu
<h1>Home Page</h1>
Info
</div>
I have tried multiple things including artificially clicking/tapping on a current page, playing with the button attributes, but no luck so far. I would appreciate any help.
You can get the current focused button and remove the focused style ui-focus, like this:
$(element).removeClass($.mobile.focusClass);
or You can simply blur the active document element, whichever it is.
DEMO:
$(document).ready(function() {
$("#panel")
.panel({
theme: "a",
display: "overlay",
position: "right",
positionFixed: false,
dismissible: true
})
.enhanceWithin()
.on("panelbeforeopen", function(e, ui) {
$(document.activeElement).blur();
});
$(document).on("swipeleft", function(e) {
$("#panel").panel("open");
});
$(document).on("swiperight", function(e) {
$("#panel").panel("close");
});
});
.ui-page-active,
.ui-popup-screen,
.ui-popup-container,
.ui-panel-dismiss,
.ui-panel-display-overlay {
touch-action: manipulation;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header" data-position="fixed">
Menu
<h1>Home Page</h1>
Info
</div>
<div data-role="content">
</div>
</div>
<div data-role="panel" id="panel" data-position="left" data-display="overlay" data-theme="a">
<h1 style="background-color: grey; width:240px; height:60px ;border-radius: 8px;">Options</h1>
<ul data-role="listview">
<li data-role="list-divider" style="font-style: italic;">File</li>
<li>Load file</li>
</ul>
</div>
</body>
</html>
(As a bonus, i added the CSS fix for the Chrome warning: Unable to preventDefault inside passive event listener due to target being treated as passive)
When you click a navigation item at the top of the screen, a blank div pops up with a huge "x" image that when clicked, the x image is suppose to close the blank div and everything else. For "jobs, contact, press, and legal" it doesn't work when clicked but for "support" it works perfectly. I put the code side by side to see errors, copy the support code and paste for others... basically everything imaginable for 1-2hours. I found a glitch that when you open the "support" first then close it out and open another one, the x image works but I don't know why. Here is my html and the rest of the code will be uploaded to codeine
demo:
http://codepen.io/anon/pen/dvzgrY
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help will be greatly appreciated :D
The problem is that all your popup containers (job-popup, contact-popup, etc) are positioned absolutely at the same location with the same z-index. Since the support-popup is last in your html, it's hiding all the popup containers underneath it. You are never actually clicking on the other x-icons (only on the top support one), and therefore, the click handlers are not getting triggered.
For a quick fix, you could update the z-index, in your nav click handlers. For example:
$("#job").click(function() {
$("#job-popup").fadeIn(300);
$("#job-popup").css({'z-index': 15});
$("#job-content").fadeIn(300);
$("#jobWords").fadeIn(300);
$(".x-icon1").fadeIn(300);
$("#name").fadeOut(300);
$("#container").css("-webkit-filter", "blur(10px)");
}
and then move it back down here
$(".x-icon1").click(function() {
$("#job-popup").fadeOut();
$("#job-popup").css({'z-index': 10});
$("#job-content").fadeOut();
$("#jobWords").fadeOut();
$(".x-icon1").fadeOut();
$("#name").fadeIn();
$("#container").css("-webkit-filter", "blur(0px)");
}
and then replicate this for all your click handlers.
But you should also consider refactoring your html/css, since the structure is incorrect (body within head, for example), and a lot of the css is probably unnecessary.
it seems that every thing is fine but when i click on the button my dropdown menu doesn't appear , and i think the reason is that the javascript not working !! the styling file in my css folder and it's working fine
here is my code ..
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/skin.css"/>
<title>Change Directory Content</title>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</head>
<body>
<%#include file="header.jsp" %>
<div id="wrapper">
<div id ="page">
<div id="content">
<div class="box">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<!--End Div -->
<div class="dropdownL">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<br class="clearfix"/>
</div>
<%#include file="footer.jsp" %>
</body>
</html>
any help ?
If you want to do with jquery
enter link description here
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
$(id).siblings(".dropdown-content").toggle('slow');
}
</script>
Replace button by
Dropdown
I'm trying to get data from some external JSON (http://ip-api.com/json). I then want to use the keys to dynamically populate a listview. I want each list item to be a link, and when you click the link, the jQuery Mobile page will contain the key's matching value. I have two jQuery Mobile pages, one home, and one other.
I'm trying to achieve this by changing the id of the the second "data-role=page" div to the current key data, and also appending key data to h2, and appending the value data to p. It's creating a correct list of the keys, but when I click on the first item, the h2 contains ALL of the keys, and the p contains ALL of the values. How can I amend this so that each key/value pair ends up as the h2 and p of whichever jQuery Mobile page is currently being created by clicking the corresponding key list item?
I've been trying to use the code from How to populate a jQuery Mobile ListView with JSON data? but I can't quite get it working as it isn't using external JSON.
<!DOCTYPE html>
<html>
<head>
<title>Geo-Location Data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/themes/geoLocation.css" />
<link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="assets/js/geoLocation.js"></script>
</head>
<body>
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Geo-Location Data</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true">
<h2>Click here for Geo-Location Data</h2>
<ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="user" data-autodividers="true">
</ul>
</div>
</div>
</div>
<div data-role="page" id="dataPage">
<div data-role="header">
<h2 id="dataHeading"></h2>
</div>
<div data-role="content">
<p></p>
</div>
</div>
</body>
</html>
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li>' + ''+ key + '' + '</li>');
$("ul#list").listview("refresh");
$("div#dataPage").attr("id", key);
$("h2#dataHeading").append(key);
$("p").append(val);
});
});
})
You are using an $.each loop so it keeps appending $("h2#dataHeading").append(key); & $("p").append(val); to the 2nd page as it loops through the json data so its not actually creating separate pages. All it does is change the id of the dataPage page once and it wont be able to find $("div#dataPage") thereafter so i'm surprised all the links in the items work except for the first one.
A more efficient way is use the data-* attribute to store the key and val directly on the list items, grab them upon click, append to the 2nd page and open the 2nd page dynamically. This alleviates the need for separate pages while keeping the DOM small
e.g
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li data-key="'+key+'" data-val="'+val+'"><a>'+ key + '</a></li>');
$("ul#list").listview("refresh");
});
});
//The list item click function
$("#list> li").on("click", function() {
var key= $(this).attr("data-key");
var val= $(this).attr("data-val");
$("#dataHeading").empty().append(key);
$("p").empty().append(val);
$(":mobile-pagecontainer").pagecontainer("change", "#dataPage", { transition: "slide" });
});
});
I suggest replacing $(document).ready with something like pagecreate as JQM works best with inbuilt page Events
When using $(":mobile-pagecontainer") you could also send data to a page but you will need another function like pagebeforeshow to append the data to the page before it displays it -- If you decide to do it this way, read the Notes for what versions is supported. JQM deprecates some events in versions in favor of new replacement events
A solution. What worked was entirely dispensing with the second JQM page, and creating it by appending the data to the body in the JavaScript. Here's the updated code.
<!DOCTYPE html>
<html>
<head>
<title>Geo-Location Data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/themes/geoLocation.css" />
<link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="assets/js/geoLocation.js"></script>
</head>
<body>
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Geo-Location Data</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true">
<h2>Click here for Geo-Location Data</h2>
<ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="arrow-r" data-autodividers="true">
</ul>
</div>
</div>
</div>
</body>
</html>
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li>' + ''+ key + '' + '</li>');
$("body").append('<div data-role="page" id="'+ key +'"><div data-role="header" id=""><h2 id="dataHeading"></h2 ></div><div data-role="content"><p>'+ val +'</p></div></div>');
$("ul#list").listview("refresh");
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace