I'm working with Firefox OS, on customer requirements I can not use frameworks for JavaScript (like JQuery), ie everything must be html, css and JS.
I have to do the pull-down menu with the same side effect of "pushing the page" (this one) we've seen in JQuery Mobile.
They know how I can do this effect?
Thanks a lot
A basic way of doing this is to create a div box (page) and set a z-index lower than the main page so its always behind the main page. Then using css you can move the main page up and down to reveal the page behind.
CSS
#page {
z-index: 999;
width:100%;
height:100%;
background-color:white;
position:fixed;
top:0;
left: 0;
-webkit-transition: all .5s ease;
}
.box {
position:fixed;
top:0;
left: 0;
height:100%;
background-image: linear-gradient(#ddd, #ccc);
width: 100%;
display: block;
z-index:1;
}
.move {
top: 0em;
margin-top:10em;
}
.moveb {
top: 0em;
margin-top:0em;
}
JavaScript
function doMove() {
var element = document.getElementById("page");
element.classList.remove("move");
element.classList.remove("moveb");
element.classList.add("move");
}
function doMoveb() {
var element = document.getElementById("page");
element.classList.remove("move");
element.classList.remove("moveb");
element.classList.add("moveb");
}
Demo
http://jsfiddle.net/cut3y0sq/
Related
I'm creating a toggling menu using JQuery slide effect. I am trying to make the collapse menu show a bit of over hang for the user to still see a bit of the drawer background when it's closed.
EDIT TO ADD: What do I mean by "overhang"?
In the Google example below, the white app drawer is present at the bottom, it never fully disappears. A piece of it hangs over the content so users can see a few things on it plus a small prompt to slide it up fully. I’d like my own slider to not fully disappear but leave some pixels of overhang.
Here is the code I am successfully using for the drawer:
$(function () {
$("a.toggle").click(function () {
$(".menu-container").toggle("slide", {direction:'right'}, 500);
$(this).toggleClass("open");
});
$(".main-navigation ul li a").click(function () {
$(".menu-container").toggle("slide", {direction:'left'}, 350);
$("a.toggle").toggleClass("open");
});
});
.menu-container {
position:fixed;
top: 0;
left: 0;
right: 0;
height: 999em;
background: rgba(144, 144, 144, 0.85);
display:none;
}
.menu-container ul{padding:2em;}
.toggle{
background:red;
color:#fff;
cursor:pointer;
padding:1em;
transform: rotate(-90deg);
position:absolute;
z-index:999;
top:50%;
right:0;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a class="toggle">Menu</a>
<div class="menu-container">
<ul>
<li>Menu Item 1</li>
</ul>
</div>
Here's how I actually want it to function (I am showing Google Maps mobile drawer as an example):
The white drawer at the bottom has a few settings links
The little grey tictac on the white drawer lets you swipe the container up to take up the whole screen
Is it possible for the jQuery container I'm toggle sliding in and out to have a bit of overhang like this, for users to see even when closed?
You could do this in 10 different ways - but it all depends on your situation. It's always a little bit of a juggling act. - but check out translate. That's what I'd use.
var thing = document.querySelector('[rel="clicky-thing"]');
thing.addEventListener('click', function(event) {
event.target.classList.toggle('open');
});
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.menu {
border-radius: 10px;
border: 1px solid blue;
padding: 1rem;
min-height: 400px; /* arbitrary */
/* */
width: calc(100% - 20px);
position: absolute;
top: 100%;
left: 10px;
cursor: pointer;
/* */
transition: .2s;
transform: translateY(-200px);
}
.menu:not(.open) {
transform: translateY(-50px);
}
<nav class='menu' rel='clicky-thing'>
this is a menu... and it would have stuff in it
</nav>
example with button: https://jsfiddle.net/sheriffderek/zwq2okev/
Iam positioning my div at the center of the page using below css code :
.content{
width:1000px;
height:600px;
margin:auto;
margin-top:auto;
}
My Requirement :
I would like to implement the above in $(document).ready(function () {} using JQuery. Initially i will assign the div negative position and hide it. Then in document.ready i want to show it and animate the div assigning the above properties.
I tried to implement the same. I am able to assign width and height but margin:auto and margin-top:auto; is not working.
It will be very helpful if somebody can guide me..!!
This is what i am doing:
http://jsfiddle.net/rgd9mwjz/
I need to see the animation of div moving from -5550px to center of div. How to achieve this?
You don't need jQuery to center the item, I've used it to add a class on the div in my example, making it come from left to right :
$(function() {
$("div").addClass("shown");
});
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
div
{
top: 50%;
left: -50%;
background: darkred;
width: 100px;
height: 100px;
position: relative;
transform: translate(-50%, -50%);
-moz-transition: .5s ease;
-webkit-transition: .5s ease;
}
div.shown
{
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I've found a interesting reply on this post Using jQuery to center a DIV on the screen
Hope it helps you!
Check this DEMO:
http://jsfiddle.net/60c977nf/
$(document).ready(function()
{
$('.content').css('display','block');
$('.content').addClass('other_properties');
});
I have added a new class to the div .content on document ready state and specified the new styles in the css files. That would make it easier for you to write new styles using the css file itself.
If you want to add styles using jQuery itself then use .css() property itself.
So here is the idea, creating a sidescrolling game from JS, and working on the enviroment. The foreground element is set to scroll normally, the background elements are fixed (sky, sun). I have a middleground element that I want to scroll along with the foreground, but I want it to move in smaller 'porportion' to the foreground. It is a fixed element of the page, so I suppose that I will probably need to access the layer and adjust the background-position, but I am not sure how to accomplish this in javascript. Would really like to leave jquery out of the equation and go just with the JS and CSS.
CSS code:
<style>
body{ background: #5993fc; text-align: center; height:100%; width:100%;
padding: 0; margin: 0; overflow-x: auto; overflow-y: hidden; }
.sun{ position:fixed; height: 320px; width: 320px; z-index: 10;
background-image: url('wasteland/wasteland_sun.png'); opacity: .9;}
.cloud{ position:absolute; height: 160px; width: 800px; z-index: 30;
background-image: url('wasteland/wasteland_cloud.png'); }
#ground{ position:absolute; height: 169px; width: 10000px; z-index: 130;
background-image: url('wasteland/wasteland_foreground.png');bottom: 0px;left: 0px; }
#middleground { position:fixed; height: 244px; width: 100%; z-index: 129;
background-image: url('wasteland/wasteland_middleground.png');bottom:80px;left:0px; }
</style>
You can see an example of the actual page and issue http://thomasrcheney.com/games/wasteland-perspective.html
and a jsfiddle here http://jsfiddle.net/K5f7b/
The only thing I can think of after pondering is an event listener attached to the arrowkey, but that would be useless if the user were to grab and drag the scrollbar. Just not even sure how to best approach writing a function to handle this.
I want to rotate the image in y direction . My code is as follows
Js part
$(function () {
$("#content").click(function () {
var css = {
'transform': 'perspective(2000px) rotateY(-25deg )',
'transition-duration': '500ms'
};
$("#content").css(css);
});
});
CSS part
#mainpage{
height: 100%;
width:100%;
position: absolute;
top:0;
left:0;
}
#menubar{
height: 100%;
width:100px;
position: absolute;
top:0;
left:0;
background: #FF0000;
}
#content{
height: 100%;
width: 100%;
position: absolute;
top:0;
left:0;
background-image:url(images/clubs/Informals.jpg);
background-size:100% 100%;
}
HTML part
<div id="mainpage">
<div id="menubar"></div>
<div id="content"></div>
</div>
The code is working perfectly in firefox. But in chrome the perspective effect comes only after the animation is complete. In IE animation is not working it just changes to the final position. I tried adding the prefix '-webkit-' but still I am having the same problem.
You need yo use browser specific -webkit- for transform
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
To prevent your jquery becoming unmanagable I may be beneficial to put these values within a class and then just add the class rather than the css
I have put a mootools Spinner (from the More library) on my website. The spinner sits in the body of my webpage, and appears when the user does a search (which uses ajax). The spinner graphic appears at the center of the body element - so, halfway down the page. This doesn't look good if the page is longer than one screen.
I initialize the spinner like this:
loadingSpinner = new Spinner(document.body,{message:"Fetching results..."});
For now, I'm just using the default css, like this:
.spinner {
position: absolute;
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
z-index: 999;
background: #fff;
}
.spinner-msg {
text-align: center;
font-weight: bold;
}
.spinner-img {
background: url(img/spinner.gif) no-repeat;
width: 24px;
height: 24px;
margin: 0 auto;
}
.spinner-msg and spinner-img (which I want to center) both sit inside .spinner-content, so I tried doing this in this css:
.spinner-content {
position:fixed;
top:50%;
left:50%;
}
But it didn't do anything. I confirmed the the .spinner-content element was correctly receiving that css, so I assume the spinner internally uses some javascript to position the spinner instead.
How do I get the spinner to appear in the center of the screen?
Try this:
loadingSpinner = new Spinner(
document.body,
{message:"Fetching results...",
containerPosition: {relativeTo: document.body, position: 'center'}
}
);