I am using Swipeview (http://cubiq.org/swipeview) to create a touch-enabled carousel working on an iPhone and Android. The basics works great.
My problem starts when i try to get it to show 25% of the next slide pr default. The idea is that the user can see 1/4 of the next slide/image, which should then make them slide the image to reveal the next slide/image. The first image then disapears, the second image becomes 100% visible, aligned to the left, and the 3rd image is then visible by 1/4. And so on.
I have tried changing the div.style.cssText (in swipeview.js) to have a width of 75% instead of the default 100%. This works for the initial load, but when i scroll, the part of the 2nd image that was visible on slide 1, is now hidden on slide 2.
I made a fiddle to demonstrate: http://jsfiddle.net/zeqjN/1/ (test it in Chrome and try dragging the image to the left)
Any ideas as to how i can modify swipeview.js to fit my needs?
You can achieve this with css only. Just add a scale effect on the items.
.scroller .scroll-item { float: left; -webkit-transform: scale3d(1.1,1.1,1.1) }
Check out:
http://jsfiddle.net/frapporti/Xt9dM/
Related
I need to make slick slider where next slider from right is cropped by half, but not from the left side. I did it with set up slidesToShow: 1.5, like in the screen below.
But also I need to make that if it's the last slide, then the previous slide should cropped by half and after the last slide there is not empty space, like in the screen below.
And if I swipe back it should be like in the first screen, cropped by the right side only.
How can I achieve this? I was looking for examples but didn't find much.
Just add folowing css
div.slick-list{
padding:0 50px 0 0;
}
I'm making my first website and I've run into a problem I can't easily fix as I'm not sure how to phrase a google search for it. I need to slide images into the page without making the scroll bar appear or, rather, without the page expanding in width to encompass the newly appeared image while it slides in.
Here's the actual test version of the page:
http://test.dingac.com/accommodation.html
The part I need help with is the sliding of the pictures when you click on the arrows next to the blueprint for each apartment in the accommodation tab.
If you want to look at the code, the relevant code is in the JqueryAnimate.js file but keep in mind, the comments aren't in English, I'm new to this so the code is a bit weird and the CSS isn't fine tuned yet. I've posted the relevant code snippet further down. My current issue is the slide animation. The way I did it right now is for all the images to be there from the start but all but one have display:none. When you click the arrow to the right it fades out and slides out the current picture (using Jquery) and turns on the display of the next picture (which is positioned relatively at left: 2000px) while animating it to left:0px.
In the moment the new image appears, the page sees that a new element is on the page and not everything is being displayed so it expands the width of the page to encompass the off-screen picture. This is only an annoyance on desktop as it only makes the scroll bar appear, but on mobile it makes the whole page zoom out until the new picture is on screen and then zoom back in as the picture slides in.
$("#buttonRight"+apInd).click(function(){
if(status[apInd].circleIndex!=status[apInd].numApPic){
status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
status[apInd].PreviousPicture=status[apInd].Picture;
status[apInd].Picture=status[apInd].NextPicture;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
status[apInd].circleIndex++;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));
}
if(status[apInd].circleIndex===status[apInd].numApPic) //hiding/showing arrows when at the edge of the selection
{
status[apInd].arrowDisplay="left";
$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
}
else
{
if(status[apInd].arrowDisplay!=="both")
{
status[apInd].arrowDisplay="both";
$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
}
}
});
What I need is for the page width to stay constant or, more specifically, that there be no zooming in mobile and no horizontal scroll bar on desktop.
Use overflow: hidden (or, for more fine grained control, overflow-x: hidden) in your CSS.
For example, if this is the HTML of your page:
<body>
<div id="page-wrap">
Contents
</div>
</body>
You can use overflow like so:
#page-wrap {
overflow-x: hidden; // hides horizontal overflowing elements
overflow-y: auto; // shows scrollbars if the content vertically overflows
}
Link to MDN
Try to add an overflow:hidden on the span with id="apImgBox"
I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.
Hi so I've used the command:
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 4500
})
});
right before my closing body tag in order to get my bootstrap carousel to start and scroll through automatically.
The problem is that the last slide briefly resizes to a smaller height (moving the whole page up with it) before sliding back to the first slide.
To explain: All the slide images are the same size and all show at the same size as they slide through. But the last slide shortens (decreases in height) quickly before the first slide appears again (the first slide is shown back at the correct/original height of the slides). This is annoying because the temporary decrease in slide height causes the entire page to shift upwards.
To clarify, the last slide is initially starting at the correct height, then for a split second before sliding back to the first slide the last slide shortens in height. The first slide is then shown at the correct height again.
I have no idea what is causing this?
This is because there is no default height for the carousel slides. To keep the slides at a consistent height, add a predefined height or min-height to the slide's css. Example:
.carousel-inner .item {
min-height: 400px;
}
I use min-height in case my content overflows on different devices.
I want to make the same effect as is on Nexus 5 site ( http://www.google.com/nexus/5/ ) - this with staying Nexus and changeable screens inside of it while I am scrolling (it's 4th section).
My case is that I have same section on my site, but with an iPad in the center and text content on both sides and I want to change just images inside the iPad while I will be scrolling.
Any ideas, please?
Thanks a lot!
take a look at this:
http://jsfiddle.net/sTH5w/47/show/
basically control the slider via 'scroll' event and the position - scrollTop()
for example:
if(/* some condition with $(document).scrollTop() */) {
if($('#img2').css("margin-top") == "295px") { // if the image is down
$('#img2').animate({"margin-top": "0px"}, 300); // slide the image up
}
}
see full code here: http://jsfiddle.net/sTH5w/47/
NOTE: in my example, ALL the content after the slider must be in <div id="after-slider"> to be displayed.
To do the 4th section
First what you want to do is make a PNG of an IPad with a transparent center. This can be done by googling "IPad" and finding an image that you like, then go into your favorite image editing program and mask and delete out the center part of the IPad(Where the content would go).
The next thing you have to do is center the image of an IPad on a webpage. This can be done by puting the picture in a <img> tag like so
<img src="pathToIpadPicture" id="mainPic">
then add some css
#mainPic {
display: block;
margin: auto;
margin-top: calc(50% - heightOfYourPictureHere);
}
That should center the picture vertically and horizontally in your page.
Now you want to add in the interactive scroll part. This is why we made a IPad with a IPad with a transparent center. Now you have make some content. Make this content as big as the center of your IPad. Than add these pictures of content to your web page and center them the same way we did for the IPad picture. Make sure to hide them with
display: none
until they are needed. Then when the user scrolls at certain points animate the content pictures up. A good library for animating with Jquery is JS Transit. With the proper animation it should look just like the Nexus 5 page. If you want little text bubbles saying what the content is (like "HDR") just do the same thing but put them above the IPad frame(Layer wise) and animate them up the same way.