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.
Related
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 have a page, consistng of several sections. All of them (except from last one) have to take the whole height of the screen, with parallax scrolling, and the last one - have dynamic height, based on its content. The content is few times taller than the screen, and has to be scrolled normally.
Here's codepen https://codepen.io/eagor/pen/MozVjo I've edited a bit to show what I need to achieve. First 3 sections behave just like I need. The only thing to add - normal scrolling for the last section.
You could go for something like
.background:nth-child(4) {
height: 100%;
overflow-y: scroll;
...
}
now you just need to redefine you transparent background.
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.
I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so
<div style="height:100%;overflow-y:scroll;">
//Content
</div>
But Its only showing scrolling bar and i am not able to scroll the content.
This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.
I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.
For example:
If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-
<div style="height:700px;overflow-y:scroll;">
//Content
</div>
Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.
In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.
Basically, in the main javascript file, you can set the height of the scrollable region.
body {
overflow-y: scroll;
}
function setElementToRemainingWindowHeight(selector, usedHeight) {
$(selector).height($(window).innerHeight() - usedHeight);
}
function calculateUsedHeight() {
return $('.header').innerHeight() + $('footer').innerHeight();
}
$(function(){
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
window.resize(function() {
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
});
});
You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).
Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...
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/