Ionic slider: Allow cards not to be sticky - ionic-framework

I am using ionic slider to display 3 cards where each card takes around 90% of the screen width (so that the next one is visible slightly)
Here's how it looks
<ion-slides [options]="{ slidesPerView: 'auto'}">
<ion-slide>
test 1
</ion-slide>
<ion-slide>
test 2
</ion-slide>
<ion-slide>
test 3
</ion-slide>
</ion-slides>
The problem is that when I start dragging the slide and when I release it, it does not stay where I left it (e.g. between the slides), but moves the focus to the image which occupies the most of the screen. It is "sticky".
What I'd like to achieve is that whenever I grab the slide, it stays where it is when released, rather than moving left or right.
For example, I need it to stay like this, if the user left it:
Desired look
How can this be achieved?
Thank you!

But that's how ion-slides work, it tries to imitate the behavior of the native PagerView (in the case of android).
What you want is a simple horizontal scrollable area. You don't need ionic for that, it can be easily achieved using only web technology (css):
<style>
.slider {
display: -webkit-box;
overflow-x: scroll;
}
.slider .slider-item {
width: 90%;
margin-right: 20px;
}
</style>
<div class="slider">
<div class="slider-item">...</div>
<div class="slider-item">...</div>
<div class="slider-item">...</div>
</div>

Related

ion-fixed not moving smoothly on ios devices

I have a page that scrolls, and I want to add a fixed div to the bottom of it in ionic2. I use the ion-fixed, and it works great on android devices staying fixed in the bottom of the page, but on iOS upon scrolling the page, it sort of jumps all the time until get the position.
I am sure someone working in ionic has forced the same issue.
I have tried to detect platform and to use a css tweak of
position: sticky;
and it moves smootly, but I am facing another bouncing issue once you are in the end of the page ( the native over-scroll ios behavior, if you continue to scroll the page from the top or the bottom area).
If you want to place a div in the bottom of the page, fixed, the best way to do it in Ionic is to put that div outside of the ion-content:
<ion-header>
<!-- ... -->
</ion-header>
<ion-content>
<!-- ... -->
</ion-content>
<div class="fixed">
<!-- ... -->
</div>
And then use some css style rules to set its position according to your needs:
div.fixed {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
z-index: 999
}
Since it's outside of the content, it will be ignored by Ionic during the scroll event.

Ionic - Dynamic Column for Picture gallery

I have a page which shows list of images in a grid. Each picture has a constant height and width. When the user resizes the browser or loads the page, I want the number of images per row to be depending on the screen size. For larger screen sizes, the more images.
For now I tried this.
<ion-grid>
<ion-row>
<ion-col col-3 *ngFor="let product of products">
<ion-card>
<ion-card-content>
<div (click)="OpenProductDetails(product.ProductId)">
<img src="{{product.MainMediaUrl}}" style="height:200px; width:200px; margin:auto; margin-top:15px" />
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
Now on page load, it is loading correctly, but as I change the browser size or I make portrait to landscape, it is still the same and not responsive.
How can I fix this.
You could set breakpoints to your grid cols like this
<ion-col col-xs-3 col-sm-4 col-md-2 col-lg-2 col-xl-1 *ngFor="let product of products">
col-xs- sets col for min-width: 0px and forward.
col-sm- sets col for min-width: 576px and forward.
col-md- sets col for min-width: 768pxand forward.
col-lg- sets col for min-width: 992px and forward.
col-xl- sets col for min-width: 1200px and forward.
Knowing this, if you set a col-md- it'll set the same number to cols lg and xl. Just see what's better for your problem, if in larger displays the image breaks then you can set a smaller number of columns when in mddisplays or larger.
Hope this helps.

I have created a jssor slider, that scales well but kind of flickers when displayed on an iPhone 4S

I have created a jssor slider, that scales well but kind of flickers when displayed on an iPhone 4S both in landscape and portrait but is fine on an iPad. I suspect it's hitting the limit of scaling or some such issue.
Also any idea on how to centre the slider vertically.
The URL is www.anamacdonald.co.nz/2.html
Please place your slider in the wrapper below,
<div style="position: fixed; display: table; width: 100%; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div id="slider1_container" ...></div>
</div>
</div>
Or you can use $('#slider1_container').css("top", top); to set top of slider1_container to change position manually while window resize.

CSS responsive-design issue between pc browser and iphone browser

im having some problems to understand how to render a web page in a decent way on the iPhone, i think the problem have to be releated with the margin-left but i have no idea how to solve the problem in order to have a good render on pc and mobile.
Here is how it looks on a pc browser:
Sorry for so many white spaces, is just to clarify the div is centered. And this is how its looks on my iPhone:
Even if a move the page with my finger im not abble to see the left side of the blue ribbon, it is just "out of the screen".
This is my code (part of it):
CSS
#center-coupon {
width: 474px;
height: 255px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -237px;
margin-top: -150px;
text-align: center;
}
#rib {
background-image:url(img/ribbon.png);
height:75px; width:474px;
}
#main4 {
position:relative;
background-color:#eeeeee;
height:300px;
width:340px;
left:66px
}
Html
<div id="center-coupon">
<div id="rib"></div>
<div id="main4">
<p style="font-size:35px;font-weight:bold;padding-top:15px;">El bar de mou</p>
<p>coupon awarded to</p>
<img src="http://graph.facebook.com/XXXXXXXXXX/picture" alt="profile picture" class="img-polaroid">
<span style="font-size: 25px; font-weight:bold;"> Domingo</span>
<p style="margin:10px 0 0 0; font-size: 17px;">Valid for: <b>Beer moretti 0.2l</b></p>
<p>created on 2012-10-21</p>
<a data-toggle="modal" href="#destroy_c" class="btn btn-danger btn-large">Destroy Coupon</a>
</div>
</div>
I know the center-coupon div is widder than the iphone screen, but that does not explain why im not abble to see part of the left side of the ribbon... A good solution will be forse the iphone to render the site with less zoom, but i dont know if that is possible, and dont know if that propety will be compatible with other mobile platforms. So what do you think?
I am no iPhone expert, but it is my understanding that the pixel density of the device has nothing to do with the CSS pixels. So, as far as CSS is concerned, the width of the phone is 320px. You are positioning the left edge of the coupon in the middle of the page, then moving it 237 pixels to the left, which essentially places it off of the screen. Have you tried changing the negative margin to a smaller amount?
You're negative margin is more than half the viewport width of an iPhone, therefore it is dragging it out of view.
If you want to center an element, you can use margin: auto (so long as an explicit width is set) rather than positioning the element with absolute positioning.

Multiple Full Screen Backgrounds on the same page with hashes - CSS or maybe Jquery

I made a website that has a jquery slider with left and right arrows that move to the next slide (webpage). All of the content is contained in one webpage and uses hashes.
http://www.ilandeistudio.com
It needed to have different full screen backgrounds for each page (hash) so I used a CSS technique that puts full screen backgrounds in DIVs which I found here (CSS Technique 1)
http://css-tricks.com/perfect-full-page-background-image/
This works but the height of the image is running off the bottom of the screen and therefore adding vertical scrollbars and you can't see the whole background image. I don't mind distorting the backgrounds a little (they are all w1024px x h682px) I just want the whole image in the viewable area.
I haven't been able to get it to work with CSS, let me know if someone has a suggestion otherwise maybe someone could recommend a jquery solution; but I don't know how to make most of those jquery examples work inside the DIVs for the multiple hashes.
Here is the CSS I am using now:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
And here are examples of two of the slides
<div id="home" class="slide">
<img src="images/bg_home1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header">
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
</div>
<div class="content">
test content
</div>
<!--Content ends-->
</div>
</div>
</div>
<div id="about" class="slide">
<img src="images/bg_about1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<!--Header starts-->
<div class="header">
<!--Navigation starts-->
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
<!--Navigation ends-->
</div>
<!--Content starts-->
<div class="content">
test content 02
</div>
<!--Content ends-->
</div>
</div>
</div>
The code itself looks correct. One thing that you didn't include but I would make sure of is that the header and navigation you have listed are positioned absolutely on the page rather than floating left and using margins to position things. That will add space to the 100% of the page.
So the image itself is expanding to the height of the page and the heights of header and navigation are being added on top of that. Most likely that is the problem if you seem to scrolling the height of those objects.