I have a jQuery Mobile popup window which opens when the app opens. On the initial load, I positioned the popup inside a div, which is centered at the bottom of the screen.
I would like this popup to reamin positioned near the bottom of the screen for any iPad orientation. But when I turn the screen to portrait and then back to landscape, the popup moves to the center of the screen.
I have tried a few ways of resetting the position with jQuery, and I added some media query css, but nothing seems to work so far. My code is below, thanks for any help.
html:
<div id="popupContainer">
<div data-role="popup" id="disclaimer" data-position-to="#popupContainer" data-transition="fade" data-history="false">
<p><span id="infoText">some texthere.</span></p>
</div>
</div>
css:
#popupContainer{
width: 450px;
display: block;
position: relative;
margin-left:auto; margin-right:auto;
top:80%;
z-index: 10;
}
#disclaimer{
max-width: 450px;
}
js:
$( window ).on( "orientationchange", function( e ) {
if (window.orientation === 0 || window.orientation === 180)
{
$("#disclaimer").popup( "reposition", { positionTo: "#popupContainer"});
$("#popupContainer").css("top", "60%");
}
if (window.orientation === 90 || window.orientation === -90)
{
$("#disclaimer").popup( "reposition", {positionTo: "#popupContainer"});
$("#popupContainer").css("top", "80%");
}
});
Related
I'm trying to make an image gallery that's navigated by dragging horizontally. The issue I'm currently facing is that there are no boundaries on the left and right for when the elements should stop dragging. I've tried using the 'container' element, but when I do, it stops dragging altogether.
I've tried using 'parent' or the actual div as the container and neither has worked properly. I saw on another message board that using flexbox in this situation makes things more complicated, so I switched to using display: inline-block on images.
This is my current draft: https://jsfiddle.net/samseurynck/ka1e9soj/21/
HTML
<div class="item_block_left">
<div class="item_block_left_gallery_container">
<div class="item_block_left_gallery">
<img class="item_block_left_gallery_item" src="https://placeimg.com/640/480/animals">
<img class="item_block_left_gallery_item" src="https://placeimg.com/200/200/animals">
<img class="item_block_left_gallery_item" src="https://placeimg.com/640/400/animals">
</div>
</div>
</div>
SCSS
.item_block_left{
height:200px;
width: 50%;
border: 1px solid pink;
overflow: hidden;
.item_block_left_gallery_container{
position: relative;
height:100%;
width: auto;
.item_block_left_gallery{
height:100%;
display: flex;
cursor: grab;
.item_block_left_gallery_item{
position: relative;
height:100%;
width:auto;
display: inline-block;
}
}
}
}
JQUERY
$(".item_block_left_gallery").draggable({
scroll: false,
axis: "x",
});
The intended result is only being able to scroll/drag horizontally as far as the images go, with no white space on the left or right sides.
Working Example: https://jsfiddle.net/Twisty/4ak6q0zu/44/
JavaScript
$(function() {
var bounds = {
left: $(".item_block_left_gallery").position().left
};
bounds.right = bounds.left - $(".item_block_left_gallery").width() - $(".item_block_left").width() + 10;
$(".item_block_left_gallery").draggable({
scroll: false,
axis: "x",
drag: function(e, ui) {
var l = ui.position.left;
if (l > bounds.left) {
console.log("Hit Left Boundry");
ui.position.left = bounds.left;
}
if (l <= bounds.right) {
console.log("Hit Right Boundry");
ui.position.left = bounds.right;
}
}
});
});
Using drag callback, you can check and set the position of the draggable item. Basing things off the left edge of the drag item, we can check and restrict the movement based on some specific boundaries. It appears that there was a 10px padding or margin on the right hand side, might just be white space, so I just adjusted to correct for this.
See more: http://api.jqueryui.com/draggable/#event-drag
Hope that helps.
I want to use an element on the page as the title of the following content, but when the user is scrolling into the content this title-element should be fixed at the header. Similar to the ABC-captions in the iOS music-app.
See here: https://jsfiddle.net/1e7ync4w/
HTML
<div>
<div class="top">
Test
</div>
<div class="content">
<div class="scroller">
</div>
Test
</div>
</div>
CSS
.top {
background-color: yellow;
height: 300px;
}
.content {
position: relative;
height: 600px;
background-color: green;
}
.scroller {
position: absolute;
width: 100%;
height: 10px;
top: 0;
left: 0;
background-color: blue;
}
.scroller.fixed {
position: fixed;
}
JS
$(document).ready(function() {
$(window).on('scroll touchmove', function() {
$('.scroller').removeClass('fixed');
var scrollTop = $(window).scrollTop();
var scrollerOffsetTop = $('.scroller').offset().top;
if(scrollerOffsetTop <= scrollTop) {
$('.scroller').addClass('fixed');
}
});
});
The problem is that the iOS safari seems to have a bug with changing elements to fixed (via JavaScript) while scrolling. As soon as the user scrolls into the content, the title-element becomes invisible but shows after releasing the finger from the display (scroll-end).
I only tested this on the iOS 9.3.2 safari but I think this issue is older.
I found a solution for this problem. It's a little bit hacky but the only workaround I found for this iOS-bug.
The GPU of the browser needs to be "activated" for updating the according element. This can be achieved by setting a transform: translate-style via JS as soon as the positioning jumped to fixed.
The code of the example would look like this:
$(document).ready(function () {
$(window).on('scroll touchmove', function () {
$('.scroller').removeClass('fixed');
var scrollTop = $(window).scrollTop();
var scrollerOffsetTop = $('.scroller').offset().top;
if (scrollerOffsetTop <= scrollTop) {
$('.scroller').addClass('fixed').css({
'transform': 'translate3d(0px,0px,0px)',
'-moz-transform': 'translate3d(0px,0px,0px)',
'-ms-transform': 'translate3d(0px,0px,0px)',
'-o-transform': 'translate3d(0px,0px,0px)',
'-webkit-transform': 'translate3d(0px,0px,0px)'
});
}
});
});
so I'm using the Twitter Bootstrap plugin for Grails and I'm having trouble centering modals. When I remove the class="modal" part from the div that contains the modal, my centering function works properly, but when I put it back (which is necessary for it to have the functionality of a modal it gets stuck halfway off the page). Any help would be very nice :D
Here's my code:
<a style="position: relative; top: 2px;" data-toggle="modal" href="#myModal${instanceType.id}"
id="${instanceType.id}"> ${message} </a>
<div class="modal" style="background: black; overflow: hidden; top: 0px; left: 0px; display: none; border: 2px solid white; float: center; position: absolute"
id="myModal${instanceType.id}">
<div style="border:none" class="modal-header">
<a style="color:white;" class="close" data-dismiss="modal">X</a>
</div>
<iframe id="iFrame" style="border: none;"width=800px height=675px src="${action}/${instanceType.id}">
</iframe>
<div class="modal-body" style="background: black;"></div>
<div style="border:none; background: black;" class="modal-footer">
<a "="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$(myModal${instanceType.id}).css({
'width' : $(window).width()*.75,
'height' : $(window).height()*.75
})
$(myModal${instanceType.id}).center()
$('#modal-footer').append('${saveName}')
function submitFunction(){
$("iFrame").contents().find("#submit").click()
}
function changePre(){
$("iFrame").contents().find(".buttonNew").submit()
alert('hi')
}
</script>
If you're using the default modal styling centers the modal by absolute positioning. So when you customize a modal windows, and you change the size of it, you shall adjust relevant elements also. Like the modal-body and modal header and the .modal class.
And to answer your question, and if I got your question right, that is you were trying to position your modal VERTICALLY.
Open bootstrap.css , then find and edit .modal.fade.in
The default value is 50%. Try to play with it until you achieve your desired position. Increase it to move the modal to the bottom, decrease it and it will do the opposite.
Default modal size modal window positions Horizontal centre of the screen, once the modal customizes(width changes), need to position it with script.
sample script:
$('#myModal').modal({
backdrop: true,
keyboard: true
}).css({
width: '800',// custom width
'margin-left': function () {
return -($(this).width() / 2);
}
});
I am trying to make an alert bar slide in over my header bar in jQuery mobile. So far I have got the slide in down, but I am having trouble with the CSS. I originally tried make the outer most div with position: absolute; top 0px: which makes it slide over the header from the top, but then inside Safari on the iPhone, the close button is cut off and you have to scroll to the right. How do I fix that?
Here is the HTML code for the alert bar:
<div class="ui-bar ui-bar-b error" style="position: absolute; top: 0px;">
<h3>
Form Validation Errors
</h3>
<div style="display:inline-block; width:8%; margin-top:0px; float: right;">
Dismiss
</div>
<ul class="validation_errors_list"></ul>
</div>
I ended up finally use this CSS. The alert bar slides directly over the header.
//you only really need this just to get it to slide over the header nicely and make sure you use top:0 if you always want it to be at the top. The plugin I made shows in/out the error message at position you are scrolled to in the document
.alert{
position: absolute;
z-index: 9998;
width: 100%;
height: 30px;
display: none;
color: #ffffff;
text-shadow: none;
font-family: Helvetica,Arial,sans-serif;
}
//This CSS is only used if you have an X button to close the alert. See the plugin below.
.alert-button-container{
display:inline-block;
margin-top:-10px;
margin-right: 15px;
float: right;
}
Here is my HTML Code (note the ui-bar class is a jQuery mobile class that you need to add so you don't have to mess around some of the width and sizing stuff).
<div class="ui-bar alert">
<div class="alert-message"></div>
</div>
Here is a custom plugin I made from jQuery to do this alert bar.
Features + Use Cases
Features: Fades In/Out gracefully, can inject custom HTML error messages, can render a list of messages, slides over header, has a close X button for error messages, works on all browsers that I have tested so far (IE, iOS, Firefox), error messages appear at the position you are scrolled to in the document. No more have to scroll up to see the error :)
Form Validation Errors. You can pass in an array of error messages and it will parse it into a list.
var messages = new Array();
messages[0] = 'My Message';
//prevent from showing accidentally
if(messages.length > 0)
{
$(".alert").alertBar('error', "<h2>Form Validation Errors</h2>", {
'errorMessages': messages
});
}
Success or action messages:
$(".alert").alertBar('success', 'Removed From Your Itinerary');
////////////plugin code
(
function($) {
$.fn.alertBar = function(alertType, alertMessage, userOptions) { //Add the function
var options = $.extend({}, $.fn.alertBar.defaultOptions, userOptions);
var $this = $(this);
$this.addClass(options.cssClass)
.empty()
.html(alertMessage)
.css('top', $(document).scrollTop());
if(alertType == 'success')
{
$this
.fadeIn()
.addClass('alert-success')
.delay(options.animationDelay)
.fadeOut();
}
if(alertType == 'error')
{
var button = $('<div>')
.addClass('alert-button-container')
.append(
$('<a>').attr({
'href': '#',
'data-role': 'button',
'data-icon': 'delete',
'data-iconpos': 'notext',
'class': 'dismiss-error'
})
.append('Dismiss')
);
//build error container
$this
.addClass('alert-error')
.append(button);
//add optional items to error container
if(options.errorMessages)
{
var $messageList = $('<ul>').addClass('error-message-list');
for ( var i=0, len=options.errorMessages.length; i<len; ++i ){
$messageList.append(
$('<li>')
.append(options.errorMessages[i])
);
}
$this.append($messageList);
}
//show alert bar
$this
.trigger('create')
.fadeIn();
$(".dismiss-error").live('click', function(){
$this.fadeOut();
});
}
if(alertType == 'informational')
{
$this
.addClass('alert-informational')
.fadeIn()
.delay(options.animationDelay)
.fadeOut();
}
return $this;
};
$.fn.alertBar.defaultOptions = {
cssClass : 'alert',
alertBarType: '',
animationDelay: 1500
};
})(jQuery);
additional CSS classes if you use this. It just changes the color of the bar.
.alert-success{
background-color: #8cc63f;
}
.alert-error{
background-color: #ed1c24;
height: auto;
}
.alert-informational{
background-color: #0071bc;
}
Example picture:
I'd like to pop up a dialog that is not full screen, i.e., it "floats" above the page which opened it. Here is what I am trying:
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1">Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'
style='width:200px; height:100px; top:100px; left:100px;'>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Button1.onclick = function() {
//$.mobile.changePage($('#Dialog'))
$.mobile.changePage('#Dialog',{role:'dialog'})
}
Button2.onclick = function() {
$(".ui-dialog").dialog("close");
}
Even though I set the bounds on Dialog's div, it is still full screen.
Here's what I came up with (after some great hints from Jasper):
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1" >Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'>
<div data-role='header'id='Dialog_header'><h1>Dialog</h1></div>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Dialog_header.onclick= function(e){
$("#Dialog").fadeOut(500);
}
Button1.onclick = function(e) {
var $dialog=$("#Dialog");
if (!$dialog.hasClass('ui-dialog'))
{$dialog.page()};
$dialog.fadeIn(500);
}
Button2.onclick = function() {
$("#Dialog").fadeOut(500);
}
Button2 is a bonus: it shows how to close the dialog from code.
You can fiddle with it here:
http://jsfiddle.net/ghenne/Y5XVm/1/
You can force a width on the dialog like this:
.ui-mobile .ui-dialog {
background : none !important;
width : 75% !important;
}
Notice I also removed the background so the dialog can appear on top of the other page. The only problem that remains is that when you navigate to the dialog, the other page is hidden so the dialog appears on top of a white background.
Here is a demo: http://jsfiddle.net/jasper/TTMLN/
This is a starting point for you, I think the best way to create your own popup is to manually show/hide the dialog so jQuery Mobile doesn't hide the old page.
Update
You can certainly use a dialog as a popup with a small amount of custom coding:
$(document).delegate('#dialog-link', 'click', function () {
var $dialog = $('#dialog');
if (!$dialog.hasClass('ui-dialog')) {
$dialog.page();
}
$dialog.fadeIn(500);
return false;
});
Where dialog-link is the ID of the link that opens the dialog as a popup.
Here is a slight update to the CSS to center the modal horizontally:
.ui-mobile .ui-dialog {
background : none !important;
width : 75% !important;
left : 50% !important;
margin-left : -37.5% !important;
}
And here is a demo: http://jsfiddle.net/jasper/TTMLN/1/
here is a plugin that u can use..this plugin is also customizable with ur own html.
simpleDialogue plugin for jquery mobile