I have a sliding toggle div that is hidden on page load and when a button is clicked gets revealed. The div is 250px in height and is positioned top 0px. I have also tried bottom 100% which sort of does the same thing. I am using several layers of z-index and have had to position some divs using absolute in order to get the layout I wanted. But I was hoping there is a way to push all of these divs down by 250px when the sliding toggle is revealed. I was thinking that instead of using toggle div, maybe there is a way to scroll the page to -250px so that all the content appears the same but is pushed down?
This is the css for the div I am using in case there is something that can be done here:
#slidingTopBar
{
background:#199651;
display:inline-block;
position: fixed;
height:250px;
width:100%;
left:0px;
top:0px;
z-index:56;
}
The script for the toggle is being used as follows:
$(document).ready(function(){
$("#slidingTopBar").hide();
$(".show_hide").css('position','absolute').show();
$('.show_hide').click(function(){
$("#slidingTopBar").css('position','absolute').slideToggle();
}); });
And the toggle is being called using this html:
<div id="TopBar">SHOW</div>
Which is all working, except it is overlaying the content that is already there whereas I want it to push it all down.
Any help appreciated.
Using the clearfix method directly below the toggle div or it's wrapper should fix this:
HTML: <div class="clearfix"></div>
CSS: .clearfix { clear: both; }
Related
I’ve created a few components that handle form submission functionality. In each of these components, I want the form submit/cancel buttons to be fixed at the bottom of the view, much like the functionality available via ion-footer. The submit button needs reference to the variables + methods in the component for [disabled] + (tap) functionality, for example [disabled]="!formGroup.valid" (tap)="submitForm()"
If the component is a child of ion-content then there is no way to add ion-footer as it will be contained within ion-content, instead of below ion-content. At first glance, having ion-footer inside ion-content appears to view properly, but the rendering can be buggy especially in scroll situations. I went as far as setting a force-bottom css class with fixed position/bottom but it looks like the ionic javascript overrides fixed positioning when inside ion-content, so a pure CSS solution does not seem to be possible.
<ion-content>
<a-form-component>
</a-form-component>
</ion-content>
<ion-footer>
<!-- add a-form-component's button here -->
</ion-footer>
Any recommendations on how to achieve the desired functionality?
TIA
Let's say you have a page called page and a component called cp
inside page.html you have the component <cp></cp>
Inside cp.html you have
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
<button>login<button>
</div>
inside page.scss:
#the-footer{
background-color: #efefef;
text-align: center;
position: fixed;
width: 100%;
bottom: 0px;
z-index: 99999;
}
This will achieve the same result as ion-footer.
The div containing the button will always be visible regardless of the scrolling.
hope it helps
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.
I am writing a simple program for iPhone using jQuery mobile, I have created a div with number of images but the scroller that is coming is vertical which I don't want. I want vertical space to be fixed and overflow of images horizontally. I know there a re scrolling plugin like iScroll but in my case I cant use them because those scrolling plugins uses <li> with fixed number of elements to be showed on that page but I want to keep this dynamic, if user rotates his device horizontally then more images can fit in the screen so I want that adjustment that if user keep his device vertical then horizontally there is less space so images should scroll horizontally but if he rotates device horizontally then he gets more space horizontally and more images can fit in and leftover images will again scroll horizontally.
I fixed the height of div and tried overflow property to let images flow horizontally but I guess jQuery is preventing that behavior.
can you please put me on correct path.
I think you could still use iScroll for horizontal scrolling, but you need to call refresh method whenever the content dimensions change. In your case, you could listen to the orientationchange event and perform in that case refresh of your iScroll object.
Check the section "Mastering the refresh() method" in iScroll documentation.
Hope it helps!
EDIT. You can start testing with a quick example like this:
<div data-role="page" id="loadPage">
<div data-role="content">
Add text
<div id="scroller" style="border: 1px solid green; white-space: nowrap; width: 300px;">
<div id="text" style="border: 1px solid red; height: 20px; width: 0px;"></div>
</div>
</div>
<script type="text/javascript">
var iscrollPage = null;
$('#loadPage').bind('pagebeforeshow', function () {
iscrollPage = new iScroll($('#scroller').get(0), { vScroll: false, hScroll: true });
});
function addText() {
$('#text').append((new Date()).getTime()).css('width', '+=140');
iscrollPage.refresh();
}
</script>
</div>
Right now on my website I have the following JavaScript that shows and hides a
<div class="commentBox"></div>
when user clicks a
Show Comments
Full Code:
<script type="text/javascript">
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>
Show Comments
<div class="commentBox">Content</div>
The effect can be illustrated like this:
I wanted to modify this function to act differently, but I couldn't figure it out. Basically what I wanted was to show content that is at the bottom once it starts expanding and have a fade in effect.
This is what I was hoping to achieve:
Could anyone suggest how to achieve the slide / toggle effect that is shown in image 2? so when user clicks a link it expands like that and when link is clicked again it shrinks.
The effect you describe looks just like the JQuery UI slide effect to me (rather than the blind effect that you have at present). This doesn't provide the opacity animation but provides a very simple solution otherwise. Or maybe I am misunderstanding you?
(The method accepts a parameter to slide down, rather than right-to-left of course)
$("#test").show("slide", {direction: "up"}, 1000);
JSFiddle here
If you are just animating a background image, like that rabbit just set the background position like this:
background-position: 0 100%;
This will align the background to the bottom edge rather than the top.
For text content the same principle applies. You just have to position the content absolutely to the bottom edge. For example:
<div class="container">
<div class="content">
<p>Text</p>
</div>
</div>
Then use this CSS:
.container {
position: relative;
overflow: hidden;
}
.content {
position: absolute;
bottom: 0; left: 0;
}
The only issue with this is that you need to find the height of the content so that you know how much to expand the container.
To do this, you can use this jQuery:
var height = $('.content').outerHeight();
Then on the click event just animate to the correct height:
$('.container').animate({
'height': height
});
Hope that helps :)
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}