Scroll bar in IOS app development UI not working - javascript

IOS app development with phone-gap.
Myindex.html code(related) is as follows:-
<script type="application/javascript" src="iscroll.js"></script>
<script>
var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('edit');
}, 100);
}
window.addEventListener('load', loaded, false);
..
..
</script>
<style type="text/css">
#toolHome,#toolEdit,#toolSetting,#toolMessage{
position: fixed;
width: 100%;
height: 10%;
display:table;
z-index:20;
}
</style>
</head>
<body id="bd">
<div id="toolEdit" class="toolbar">
<h1 id="pageTitle">Edit</h1>
<a id="preButton" class="button" onclick="home()">Message List</a>
</div>
<div id="edit" title="Edit" ></div>
<div id="bottomButtons" style="position:fixed;top:90%;width:100%;display:table;height:11%;z-index:20;display:none;"><a class="redButton buttomButton" style="width:22%;position:relative;top:4px" align="left" onclick="deleteList()"><img src="iui/t/default/trash.png" > Delete</a></div>
</body>
So here, div 'toolEdit' contains header section. Div 'edit' contains the content part which needs to be vertically scrollable when content exceeds the available space.div 'bottomButtons' is the footer which contains delete button. z-index has been given for both header and footer, so the content slides below both header and footer.
The problem is, the bottom part of the content when it is tried to scroll up(residing below footer) does'nt scroll and if tried takes the footer with it, making it blank.
Tried using iscroll plugin(shown in the code) also, but it is not helping.
Any suggestions will be appreciated.
Thanks in advance.

Related

How to set the distance between content and footer using JavaScript?

The code below works very well(controls the distance and makes the footer it stick) however I need to edit the distance between footer and content as there is a very big gap! I am using the software visual studio 2014, java script in asp.net.
Masterpage.Master HTML % JavaScript code:
<body>
<form id="form2" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
<div id="footer"></div>
</div>
</form>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(window).bind("load", function () {
var footer = $("#footer");
var pos = footer.position();
var height = $(window).height();
height = height - pos.top;
height = height - footer.height();
if (height > 0) {
footer.css({
'margin-top': height + 'px'
});
}
});
</script>
</html>
CSS
#footer {
width: 100%;
height: 300px;
background-image: url(foot_bg.jpg);
background-size: 100% 100%;
}
I have tried to adjust it but getting no where fast! Any help would be appreciated.
The question is a bit confusing since you are stating that you want it to stick (at the bottom) but you want to reduce the gap between the footer and the content.
One of these ways is possible at a time considering that the footer has a fixed height.
If you want to reduce the gap between the footer and the content, then remove the footer from your main div and add a margin-top to the amount you wish inside your #footer.
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer"></div>
If you want a sticky footer which stays below the content, you can check out the tutorial on the link below:
https://css-tricks.com/snippets/css/sticky-footer/
This will scroll with the content if it extends.
A third option would be to user position:fixed and bottom:0px for your footer so it stays at the bottom of the page and the content scrolls behind it.
N.B: In all these cases, you will not need your JS code.

Configure PhotoSwipe to Not Use Entire Window?

I'm currently trying to build a mobile image gallery using PhotoSwipe.
I've been able to get it working but there's one small problem. When I
click on a photo thumbnail, the actual photo always takes up the entire
viewport. This is OK when you're viewing the gallery on a mobile device.
But if your viewport is a computer screen and the image isn't a
high-res one, the photo can be very blurry. I'd rather limit the photo
to a width of maybe 300 to 400 pixels when viewed on a computer. Is there
a way to do this in PhotoSwipe? I read the documentation but couldn't
quite figure it out. I've enclosed my code below.
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe - jQuery Mobile Version</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="lib/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<style type="text/css">
div.gallery-row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.gallery-item {
float: left;
width: 33.333333%;
}
div.gallery-item a {
display: block;
margin: 5px;
border: 1px solid #3c3c3c;
}
div.gallery-item img {
display: block;
width: 100%;
height: auto;
}
#Gallery1 .ui-content, #Gallery2 .ui-content {
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="lib/photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery-page').live('pageshow', function(e) {
// Re-initialize with photos for the current page
$('div.gallery a', e.target).photoSwipe();
return true;
});
});
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
<li>Second Gallery</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
<div data-role="page" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item"><img src="images/01-thumb.jpg" alt="Image 1" /></div>
<div class="gallery-item"><img src="images/02-thumb.jpg" alt="Image 2" /></div>
<div class="gallery-item"><img src="images/03-thumb.jpg" alt="Image 3" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/04-thumb.jpg" alt="Image 4" /></div>
<div class="gallery-item"><img src="images/05-thumb.jpg" alt="Image 5" /></div>
<div class="gallery-item"><img src="images/06-thumb.jpg" alt="Image 6" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/07-thumb.jpg" alt="Image 7" /></div>
<div class="gallery-item"><img src="images/08-thumb.jpg" alt="Image 8" /></div>
<div class="gallery-item"><img src="images/09-thumb.jpg" alt="Image 9" /></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
PhotoSwipe has a modal option:
var options = {
modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
which makes the PhotoSwipe container take only the size of its parent when set to false.
You can put Photoswipe markup (root element with class pswp) to any container with position: relative and edit photoswipe.css or add to your stylesheet something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photoswipe in container</title>
<style>
#myContainer {
position: relative;
/* other container styles */
}
.pswp {
position: absolute!important;
}
</style>
</head>
<body>
<div id="myContainer">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- standard markup omitted -->
</div>
</div>
</body>
</html>
I do not know of an automatic way to do this, what i did was to put the .pswp div inside of a container div with fixed width and height and then position that container div via JS + CSS in the center of the screen.
Use a basic setup as described on the photoswipe documentation with the pswp div already added and then:
HTML
<div id="pswp-container">
<div class="pswp">
...
</div>
</div>
CSS
#pswp-container {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
}
.pswp {
position: relative !important;
}
JS
// Centers the Photoswipe container in the center of the screen (call on init + resize)
function centerPhotoswipe() {
var ww = $(window).innerWidth();
var wh = $(window).innerHeight();
var $el = $("#pswp-container");
var w = $el.outerWidth();
var h = $el.outerHeight();
$el.css({
left: Math.round( (ww-w) / 2),
top: Math.round( (wh-h) / 2)
});
}
You can find a working example here at CodePen.
This should give you the desired effect and a good starting point for your own page, BUT keep in mind that it will be necessary to add your own background layer to trigger the 'close on click somewhere else' and other details that you have to fix during the opening / closing events of the popup ...
I tried all sorts of solutions to get this to work properly, including the inline gallery options (demo).
However I couldn't quite get it to work as I wanted as I needed the a specific gallery to display without showing the thumbnails first.
What I did in the end was get a basic PhotoSwipe page working which automatically loaded the images on page load to a full screen, for example using an MVC URL:
/Gallery/Index/1
then simply embed this link in a div using object:
<div id="mygallery1">
<object data="/Gallery/Index1">
Error: Embedded data could not be displayed.
</object>
</div>
This allowed me to place as many galleries as I wanted in whatever position I wanted without any interference between them.
Note though that this didn't seem to work for mobile browsers, which was fine as for screens that small I wanted a fallback option anyway to render as an overlay over the whole page due to limited screen real estate.

Fancybox 2 and Swipe Slider do not work together

I want to create a fancybox with the Swipe image slider inside. By following the instructions in the how-to page of fancybox, I create a hidden div where my slider will be put.
<div style="display:none">
<div id="hidden" >
<div id="mySwipe" class='swipe'>
<div class='swipe-wrap'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
</div>
Now I use such hidden content to populate a fancybox:
<p align="center"><a class="fancybox" href="#hidden">Click me</a></p>
Unfortunately that has some problem I have the slider with empty (or hidden?) content. In other words I am not getting the slideshow 0 -> 1 -> 2.
I suppose that this problem is caused by the 'display:none' style. In fact if I take this out, the slideshow is working, but it shows the hidden content and I don't want this.
Here I report you the head of my html:
<!-- Add JQuery -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!-- Add Swipe Slider -->
<script src="js/slider/swipe.js"></script>
<style>
/* Swipe 2 required styles */
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
/* END required styles */
</style>
<!-- Add Fancybox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".fancybox").fancybox();
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {});
});
</script>
You can try to set instead of display:none
<div style="position:absolute; left:-5000px;">
In this way the result is similar as display:none (the content of the div is not visible) and you should avoid the described problem

How to fix Google ads that force their way to the top of other divs on webpage?

I have a site on Google App engine written in python/django/html. Site is located at http://perlesloyfer.no
Its a kind of blog that shows some images of people with a kind of bows i make. I have implemented a "sticky header" at the top, and im showing ads in the 9th position of the posts. But when i scroll the list the Google Ads are somehow forcing them self to be on top of the header. Image of this is in the bottom of the question.
What causes this, and is it possible to fix it? I want the ad to scroll like the other posts, but it should not show as it is "over" the header when its at that position.
Sticky header jquery code:
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#sticky').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
//$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
$('#sticky').addClass("sticky");
} else {
$('#sticky').removeClass("sticky");
}
});
});
Actual HTML for the header:
<div id="sticky" class="top-area">
<div class="main-header">Perlesløyfer</div>
<div class="main-subheader"><p>Av Håkon Bogen</p></div>
<div class="tabs">
<ul>
<li>Bilder</li>
<li><a class="selected" href="./about">Om</li></a>
<li>Kjøp</li>
<li>Last opp</li>
</ul>
</div>
CSS for sticky:
#sticky {
background-color: white;
position:fixed;
top:0;
width:100%;
}
Google Ad code:
<div class="commercial" id="page-wrap-ad">
<p id="ads">
<!--- google_ad_client = .... -->
<script type="text/javascript">
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
Not sure if I am allow to post this or not, but here goes:
Find the specific target element (div, class, etc) of the Ad in questions and use CSS to overwrite its positioning.
Example:
#myAnnoyingAd{
position: fixed !important;
top: 0 !important;
left: 0 !important;
}
Just added a greater z-index to the sticky header. Wasn't harder than that.
#sticky {
background-color: white;
position:fixed;
top:0;
width:100%;
z-index:1000;
}

iframe loading in middle of page, instead of top of page

I'm embedding wetransfer through iframe into a website, but the problem I have is when the page loads, it automatically jumps past the header section of the site, instead of having the new page load at the top of the page.
How can I stop this from happening? I tried using jquery scrollto, but doesn't make any difference.
https://jsfiddle.net/dbruning22/c0s6mhkv/1/
HTML
<header>
Some Header information and navigation
</header>
<body>
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
CSS
header {
background: green;
height: 600px;
}
Use this
header {
background: green;
height: 600px;
position:absolute;
left:0;
top:0;
}
header height is 600px so iframe is placed right behind.
If you want iframe to cover the page from the top you should set
iframe{
position: absolute;
top: 0;
left: 0;
}
fiddle
If you want to place iframe right behind header, just remove
height: 600px;
fiddle 2
The green header is 600 px high because of your CSS. Adjust the height: value as needed.
Also, <header> is a regular page content tag and therefore should be placed inside <body>, not before it.
First: put header tag inside body tag. Not outside.
<body>
<header>
Some Header information and navigation
</header>
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
Second:
Remove 600px height from header css.
Profit :)
use following code :
<header>
Some Header information and navigation
</header>
<body>
<div>
<iframe src="#" width="100%" height="400" id="iFrm"></iframe>
</div>
</body>
<script type="text/javascript">
var body = document.body,
html = document.documentElement;
var documentHeight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var iframeHeight = parseInt(document.getElementById("iFrm").getAttribute("height"))
document.getElementById("iFrm").style.marginTop = (documentHeight - iframeHeight) / 2;
</script>
Its working fine for me. Hopefully works for you
Not really sure if you want it to be like this but try it out
<header>
Some Header information and navigation
</header>
<body>
<iframe class="test" src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
css:
header {
background: green;
height: 600px;
}
.test {
position: fixed;
top: 0;
z-index: 1;
}
But you could use angularjs modal_dialogue to make a pop up window which would display your information from an url.
This worked for me. My iframe html has:
<body class="container-fluid">
<div class="admin-pages" id="top-of-page">
etc...
</div>
</body>
And javascript:
$(window).on('load', function() {
$("#top-of-page").scroll();
etc...
Takes the iframe to the #top-of-page when the page loads.

Categories