I'm creating a simple UI for mobile app using jQuery mobile. This is my code (jsfiddle) .
HTML:
<div class="container">
<!-- start -->
<div data-role="page">
<div data-role="header" data-theme="c">
<h1>Infographic</h1>
</div>
<!-- end data role header -->
<div data-role="content" role="main" style="overflow-x: hidden;">
<div class="infografik-image">
<img src="http://placehold.it/440x699" />
</div>
<!-- end infografik-image -->
</div>
<!-- end content -->
<!-- start footer -->
<ul data-role="listview" data-theme="c" style="display:none;" id="pop">
<li><a href="faq.html" rel="external">FAQ</a>
</li>
<li><a href="aduan.html" rel="external">Report</a>
</li>
<li><a href="infographic.html" rel="external">Infographic</a>
</li>
</ul>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar">
<ul>
<li><a href="index.html" rel="external" class="ui-btn-active">Home</a>
</li>
<li><a href="news.html" rel="external">News</a>
</li>
<li><a href="contact.html" rel="external">Contact</a>
</li>
<li><a href="javascript:toggle();" rel="external" id="displayText">More</a>
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
<!-- end page -->
</div>
<!-- end container -->
CSS:
body {
margin: 0;
padding: 0;
}
ul#pop {
display:none;
}
.infografik-image {
width: 95%;
margin: 0 auto;
}
.infografik-image img {
width: 100%;
height: auto!important;
vertical-align: bottom;
}
JS:
function toggle() {
var ele = document.getElementById("pop");
var text = document.getElementById("displayText");
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "More";
} else {
ele.style.display = "block";
ele.style.width = "50%";
ele.style.float = "right";
ele.style.marginRight = "3%";
ele.style.paddingTop = "25px";
ele.style.paddingBottom = "25px";
text.innerHTML = "Close";
}
}
I created a small popup. When user tap on the 'More' tab, my popup will be shown. I create this using javascript (i'm JS & jQuery noob).
What I actually want this popup do is, display it on top of the page content. In this case, I want it to be shown on the top of the infographic image.
If you have another suggestion/resources/tutorial that easy to follow, please share it to me. I want to learn it.
If you want to use the jQuery Mobile Popup widget:
$(document).on("click", "#btnToggle", function(){
$(this).find(".ui-btn-text").text("Close");
var bottomPos = $(document).height() - $.mobile.getScreenHeight() + 62 - $(document).scrollTop();
$("body").css("overflow", "hidden");
$("#popupMenu")
.popup( "open", {})
.on( "popupafterclose", function( event, ui ) {
$("#btnToggle .ui-btn-text").text("More");
$("body").css("overflow", "auto");
})
.parents(".ui-popup-container")
.css({
"right": "4px",
"left" : "auto",
"bottom": bottomPos + "px",
"top": "auto"
});
});
The code first changes the button text to Close by finding the appropriate SPAN inside the button with the class ui-btn-text.
- It then calculates where the popup should go, taking into account the scroll position of the body.
- Next, turn off scrolling on the body while the popup is active - the rest resets the text and scroll on popup close and positions the popup just above the button.
Here is the updated FIDDLE
Change your java script code like below.
function toggle() {
var ele = document.getElementById("pop");
var text = document.getElementById("displayText");
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "More";
} else {
ele.style.display = "block";
text.innerHTML = "Close";
$("#pop").css({top: 50,left:280, position:'absolute'});
}
}
Refer this FIDDLE DEMO
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.