I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck
Related
I'm looking to create a floating action button for my mobile application. Similar to the ones used in the Gmail and WhatsApp mobile applications (see the red button in the image).
I'm building a small app using jQuery Mobile and I would like the button to bring the user to another page. I've been researching for quite a while, with mixed results, but the main problem seems to be that the button doesn't sit above all of the other content on the page and doesn't stay fixed in a position once the user scrolls the page.
Does anyone have any resources or knowledge that could assist? Thank you
The JQM footer has already the fixed positioning and the correct z-index which plays nicely together with the other JQM widgets, like panels and so on. Why don't use that?
The classes ui-btn-left and ui-btn-right don't behaves well in footer, so I am using a grid with transparent background. The advantage with this approach is that You can quickly add more buttons, if You need it later.
.ui-footer {
border-width: 0 !important;
background: transparent !important;
}
.ui-grid-d {
overflow: visible !important;
background: transparent !important;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
text-align: center !important;
background: transparent !important;
padding-top: .3em;
padding-bottom: .9em;
}
.ui-icon-big {
height: 40px !important;
width: 40px !important;
margin-top: -18px !important;
border-radius: 20px !important;
}
.ui-icon-big:after {
width: 32px !important;
height: 32px !important;
background-size: 22px !important;
background-color: #F4123D !important;
background-color: rgba(244, 18, 61, 0.8) !important;
margin-top: -16px !important;
margin-left: -16px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js">
</script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
<h3>Page content</h3>
<hr>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-grid-d">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e">
</div>
</div>
</div>
</div>
</body>
</html>
Moreover, You can decide to use data-tap-toggle="false" on not (default is true) to allow Your users to show the footer buttons on demand, when the page content is bigger than the screen height.
this is more a CSS question than a JS question although you could use either to solve it. In CSS that button element or whatever element contains it should have the attributes; position: absolute; and a z-index: x; (a z-index which is higher than any other element in the DOM). If you try to solve this with JS then you still have to have a z-index property and that only works when and element has a fixed, absolute, or relative position attribute... so you may as well just use CSS. you could use js to determine the hight of the window (the device height on mobile since the browsers are not resize-able like on a desktop) and then set the top: Xpx attribute so that to button appears to be in the same position regardless of the device.
I think this pen would help you. It has a tutorial link.
To make sure that your button is above all other elements, add z-index: 999 to your button in css.
You can think of z-index as layers.
So a z-index: 2 element will be above a z-index:1 element.
For further details about the z-index css property go here and here.
Here you are:
https://material.io/develop/web/components/buttons/floating-action-buttons/
Read more about it here:
https://material.io/design/components/buttons-floating-action-button.html
Have you tried using the "fixed" or "sticky" property values in CSS to hold the image in a relative position to browser window or user's scroll position?
Hope this helps, it's the first idea that comes to mind.
https://www.w3schools.com/cssref/pr_class_position.asp
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener('scroll', function (e) {
alert("scroll");
});
document.getElementById("myDIV").addEventListener('click', function (e) {
alert("click");
});
</script>
Why its not working in IE I played this same code in w3 try it yourself page, it works in IE but not if I tried it as a separate file, so confused. Even if some one downvote this please tell me what I am missing?
I found these things when I browse other answers:
pointing to window.scroll but I need on a particular element
Use overflow-x: scroll; overflow-y: hidden; or vice versa.(which didn't work and also I need scroll on both ways)
NOTE:
This code works clearly in other browsers.
Its my bad. May be helpful for someone like me, Please enable scripting in your IE. :_(
A thing to note here is, Although script is not enabled it w3 school exercises exercises worked because of iframe?. If so how?
I was creating an accordion but because of the transition between height: 0 and height: auto can't be animated I found a way animating max-width
but like you can see in this way the timeline is not good, before open the one where the user clicks, then close the others.
Is there a way to solve that?
.content{
overflow: hidden;
max-height: 0;
transition: all 1s;
}
.active .content{
max-height: 500px;
}
FIDDLE HERE
UPDATE:
the problem is about max height, because with a specific height works like a charm.
You could just use jQuery's sliedUp() and slideDown():
$(document).ready(function(){
$(".singleAccordion").on("click", function(){
$(this).siblings().children(".content").slideUp();
$(".content", this).slideDown();
});
});
with following CSS:
.content{
overflow: hidden;
max-height: 500;
display: none;
}
Let me try to give some explanation.
Usually both transitions should run (pretty much) at the same time. If you replace max-height with just height (in your original code) you can see that that's actually the case. But for max-height this seems to be different. I don't know why this is the case but I'd guess that it might be hard to derive the actual height that has to be applied while other transitions are running on the same DOM subtree and so it's just getting queued.
I'll take a look at some docs to see what's the reason behind this. Will report back if I find more intel.
Alright, I digged a little deeper. It really seems like the calculation of the actual height is the issue. Take your above code and replace max-height: 500px with max-height: 5000px. You'll see that it takes reeeaally long until the collapse happens. Now put max-height: 50px in there and they will appear to happen at the same time.
Maybe this is because it's still animating beyond the actually required height. Sadly you can't animate onto height: auto - most probably for quite the same reason.
Remove the
.removeClass
like this
$(document).ready(function(){
$(".singleAccordion").on("click", function(){
$(this).addClass("active").siblings("active");
});
});
Just use Jquery Ui Accordion. That is awesome.
Here is JssFiddle
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h3>Part1</h3>
<div> <p> 1 </p> </div>
<h3>part2</h3>
<div> <p> 2 </p> </div>
<h3>Part3</h3>
<div> <p> 3 </p> </div>
<h3>Part4</h3>
<div> <p> 4 </p> </div>
</div>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</body>
I would like an iframe to be above a footer section that has some content.
I am a real beginner at this, but I was able to scrap together some code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html {
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#footer {
position:absolute; left: 0;
top: expression(document.body.clientHeight-150);
right: 0;
height: 150px;
background: red;
}
#content {
position:absolute;
left: 0;
right: 0;
bottom: expression(document.body.clientHeight-150);
top: 0;
background: blue;
height: expression(document.body.clientHeight-150);
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" src="https://www.link.com" />
</div>
<div id="footer">
Test content
</div>
</body>
</html>
-The order is right, the iframe sits above, however the iframe itself is too small. I want there to be there is no scroll bar. The footer section doesn't show the background color or text. I've clearly made a mess of things.
-I also don't want the footer to be absolutely positioned, a user should scroll down a bit to see it.
-I am also curious to learn how to get rid of a scroll bar from an iframe even when the iframe is too small. Actually, it would be nice if there was a way to 'cut off' the bottom section of a source link and replace it with my footer.
oke first of - I would advise refraining from inline CSS and ID's it's 'better' practice to use a CSS file and link to it and rather using classes and for instance using footer tags for the footer etc. - But that's minor! don't worry about that, you can see on the fiddle bellow I took your example and put it into what I believe is what you wanted:
Edit: Updated jsFiddle -- http://jsfiddle.net/xuwd9/1/
I will add your code edited if need be :)
I am setting up a website like this (vertical slideshow almost):
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
Here is the ENTIRE page so far. It's simple coding to get the current effect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.container { height: 400%; width: 100%; }
.section { height: 35%; width: 100%; }
#section1 { background-color: #1d9ad7; }
#section2 { background-color: #c83e3d; }
#section3 { background-color: #75b946; }
#section4 { background-color: #f4be2f; }
</style>
</head>
<body>
<div class="container">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
</body>
</html>
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-case to get an idea about how to prevent a user from scrolling.
You can get the desired effect using the
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
For example,
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
I was after the same thing so asked a similar question a few weeks ago. I found an addon called stellar.js that had the functionality but the demo was in horizontal and I couldnt for the life of me change it to vertical. Anyways, someone posted a solution, which I edited for mousescroll instead of click: http://jsfiddle.net/djsbaker/dxzk4/
On a site note, I had issues with it being quite laggy with huge fixed background images. In fact very laggy, but I was using parallax which didn't mix well.