I am using a jQuery slider panel that pushes the content down rather than overlap it (intended), which works fine on Chrome but not Firefox. On Firefox, it pushes the content down, but when I close it, the pushed down contents stay put, thus leaving a gap where the panel used to be.
How exactly do I go about fixing this? Here's the code I used for the panel:
<div id="about">
<div id="panel">
<!-- the content -->
</div> <!-- end #panel -->
<p id="top" class="slide">+ about</p>
</div> <!-- end #about -->
This is the Javascript:
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
Thank you for your help. :)
Modify the panel style to include float:left and width:100%
#panel{
background-color: black;
display: none;
float: left;
height: 250px;
padding: 50px 0 20px;
width: 100%;
}
This should fix your problem.
Related
I am having some scrolling issue when using my website on mobile devices (tested on iPhone).
The issue is that, on mobile, when touching or moving finger outside of the scrollable div, when trying to scroll this div after that, it is blocked until you wait a moment or scroll slowly, or touch it.
https://imgflip.com/gif/75nefo shows my issue. when scroll outside 'scrollable', then when scrolling back into scrollable, it keeps scrolling the whole body and takes a few more tries until it finally scrolls where I want.
The website is the following, as seen in the gif.
body{
margin: 0;
padding: 0;
}
.frame{
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
background-color: lightblue;
overflow: hidden;
}
.scrollable{
overflow: scroll;
}
.bottom-nav{
width: 100%;
background-color: lightcoral;
padding: 30px 10px;
box-sizing: border-box;
}
.sample-cube{
background-color: lightgreen;
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 200px;
}
.sample-cube + .sample-cube{
margin-top: 10px;
}
<body>
<div class="frame">
<div class="scrollable">
<div class="sample-cube"> this is stuff on the scrollable area</div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
</div>
<div class="bottom-nav">
navigation area with options
</div>
</div>
</body>
I was wondering if there's any way to give the scrollable div a priority so that, whenever it is scrolled on, it scrolls from the first finger touch-swipe instead of being locked...
Ended up finding something that works for me, after doing some investigation, the issue seems to be related to how IOS Safari handles scrolling. This question has many approaches as answers but there's one in particular that works the best for me.
There's this library that lets you block the body scroll, when you want a fixed body like on my case, and allow scroll only on a certain element. It works like a charm!!!
Body Scroll Lock on npmjs
Now my scroll doesn't 'freeze' when I scroll outside of my scrollable element and quickly scroll my scrollable element again!!
Here is a example
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
max-height: 220px;
margin: 10px;
padding: 20px;
width: 300px;
overflow-y: auto;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
width: 80%;
margin: 2px;
padding: 6px;
word-break: break-all;
white-space: normal;
cursor: pointer;
}
.FlexItem:hover{
background-color: red;
}
<html>
<head>
<title>demo</title>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
The contents is short in IE11.
</div>
<div class="FlexItem">
The contents is long - inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
</div>
</body>
</html>
In chrome it can work well
chrome work well
But In IE11 It's not what I expected.
IE11 work not expected
This issue only happen when container height is less than fex items and set overflow-y:auto/scroll.
Is anyone can help me find the cause of the issue?
Appreciate for your help.
Internet Explorer needs you to specify the flex value of you children.
Try to add the property flex: 1 0 auto; to the FlexItem class
I've found the key point maybe the format of setting the width of FlexItem.
If you change the width:80% as 200px, it will work well in IE.
I guess that if you write in % format, IE may could not understand it well.
So you should give a static length to it.
I'm putting together a menu for a bootstrap website, learning this as I go but I'm lost in the world of javascript now.
Just say we have a tabbed nav menu typical to boostrap, when the tab is clicked it becomes active, and it also activates a drop down menu. I can get it to do one of either but not both.
Demo here
http://www.bootply.com/120851
Basically when "pane2" is clicked the dropdown should appear in pane2 content area.
I have included the link to toggle the dropdown separate from the menu just so you can see it works when "pane2" is selected/active. I hope I make sense here.
Thanks!
You can use the following code int pane2
<div id="pane2" class="tab-pane">
<div id="collapseTwo" class="tab-pane">
<div class="the-window">
<div class="dropDownTab">
<div class="taglist">do stuff</div>
<div class="taglist">do stuff</div>
<div class="taglist">do stuff</div>
</div>
</div>
</div>
</div>
and following css:
.dropDownTab {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 48px;
width: 72px;
text-align: center;
}
http://www.bootply.com/121226
Gone down a different road for the same effect with onclick link.
I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents.
The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts?
I've created a sample below to really illustrate the point.
http://jsfiddle.net/fz7qs/2/
<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<a id="page2link">To Page 2</a>
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="test2" style="height: 568px">
<div data-role="header">
<h1>Page 2</h1>
</div>
<a id="page1link">To Page 1</a>
<div data-role="content" style="height: 50%;">
<p style="height: 80%; border: 1px solid black;">This is page 2</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
The entire jsFiddle page jumps on the very first visit in Chrome desktop browser, so press the jsFiddle RUN Button to load correctly before use.
EDIT: Answer and jsFiddle revised per comment section developments.
EDIT 2: jsFiddles now use jQuery 1.7.2 with jQuery Mobile 1.2.0 to fix Chrome Browser Bug.
jsFiddle DEMO
The solution is to set your styles in a CSS file and not the HTML section since the jQuery Mobile UI has it's own style themes via a style sheet too.
Also, you have an extra closing div for page at the bottom in that HTML as well as not closing the webpage. The head section in your HTML is not necessary for jsFiddles, as the page is setup for HTML5 and you just need to import files (mobile jQuery) into jsFiddle using the Manage Resources button.
Although you listed in your Question as complete percentage units, I've keep the pixels units as shown in your example, but those can be percentages as well.
CSS Settings:
a {
cursor: hand;
cursor: pointer;
}
.content1 {
height: 268px;
}
.text1 {
height: 50%;
border: 1px solid black;
}
.content2 {
height: 568px;
}
.text2 {
height: 80%;
border: 1px solid black;
}
In your HTML section, I've also pinned the footer to the bottom of the page using data-position:
<div data-role="footer" data-position="fixed">
Besides pinning the footer to the bottom of the page, you can also have it not animate by adding an extra setting of data-id for each page that has the same value.
<div data-role="footer" data-id="foo" data-position="fixed">
jsFiddle FOOTER.
EDIT 2: Per recent discovery of jQuery 1.8.2 and jQuery Mobile 1.2.0 bug seen in Chrome (hidden scrollbar still causes body elements to jump), here is a revised jsFiddle example:
jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0
About this bug:
I just discovered that using jsFiddle with jQuery 1.8.2 and jQuery Mobile 1.2.0 does not work as intended when overflow is set to hidden during use of a scrollBars function within that jsFiddle.
That function is to hide the browsers scrollbars during jQuery animations, preventing elements to briefly jump around during the animation period of page changes.
The browsers scrollbars are in fact hidden, but elements in the body section continue to "jump" as if the scrollbars are still present.
This does not happen when jsFiddle jQuery is set to 1.7.2.
If your curious how to have multiple psuedo pages on a single page, check out this jsFiddle for an unrelated SO Answer here.
Try to change this:
<div data-role="content" style="height: 50%;">
to that:
<div data-role="content" style="height: auto;">
example: http://jsfiddle.net/fz7qs/13/
takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.