Scrolling ability in a fixed div - javascript

I have a div that slide from the left 100% once you press a button. In that div it will display my menu for the site. The issue I am having is when on a small browser size the content gets covered and you are unable to see the rest of the links.
My div #slidingMenu has a fixed positioning and I gave the div an overflow-y:scroll. Once I added that code I did have the ability to scroll. But the problem was #slidingMenu now slides out displaying a white bar (scrollbar). Is there a way to have the main scrollbar of the browser control my menu in #slidingMenu when I scroll?
Here is the css and the file http://jsfiddle.net/bC5zh/6/
#footer{
background-color:#999;
width:100%;
height:50px;
position:absolute;
top:100%;
margin-top:-50px;
line-height:50px;
}
#toggle{
color:#FFF;
margin-left:50px;
cursor:pointer;
}
#slidingMenu{
position:fixed;
background-color:#999;
width:100%;
height:100%;
top:0;
left:-100%;
overflow-y:scroll;
}

You would use
overflow-y:auto;
To remove the scrollbar but allow for scrolling when inner content is overflowing, updated fiddle
For a smoother scroll on WebKit mobile devices you can use
-webkit-overflow-scrolling: touch;
Which mimics default iOS scrolling reference

Try adding in your css
#slidingMenu::-webkit-scrollbar {
display: none;
}
this will hide the scrollbar giving you the ability to still scroll on the site.

Related

Element moving after Jquery fadeIn()

I have a jquery script which controls some menu bars when activated. Basically, when the user presses the top menu bar, the bottom two would slide down and make space for the content (a html table in this case). After this, the content will use the fadeIn() function to appear on the page. However, at this point. the two bottom menu bars would jump further down the page.
Is there anyway to make them stay at their original positions on the page without change the .animate() function measurements?
Here is the relevant jQuery code:
menustatus=0;
function menuconfig(){
if(menustatus===0){
$('.menuhead2').animate({
top:"500px"
},300)
$('.menuhead3').animate({
top:"555px"
},300)
$('#table1').delay(300).fadeIn(300);
menustatus=1
}
And here is the relevant CSS code:
.menuhead2{ /*This is the one of the bottom menu bars */
position:relative;
top:80px;
cursor:pointer;
height:30px;
z-index:10;
}
.menuhead3{ /*This is the one of the bottom menu bars */
position:relative;
top:135px;
cursor:pointer;
height:30px;
z-index:10;
}
.menuhead1{ /*This is the top menu bar */
cursor:pointer;
height:30px;
position:relative;
top:30px;
}
#table1{ /*This is the content that fades in using the fadeIn() jQuery function. */
position:relative;
top:50px;
left:30px;
display:none;
z-index:9;
}
It's not super clear without a jsfiddle but try setting #table1 to position absolute instead of position relative

Make a div position relative to another that is static

I'm trying to make a fullscreen site, also responsive, but on smaller screens the elements in the container overflow making it not 100% it varies depending on how many items are in it. Using:
top:100%;
position:relative;
width:100%;
height:100%
works, only if the screen is a certain size, on mobile devices using that it doest work, and appears half on the previous container.
Is there a way to position from the bottom of the element rather than top?
http://jsfiddle.net/q8tvwm2k/2/
Update:
Never minds found a pretty bad but working solution.
I'm pretty sure you really want a position:absolute to have another div relative to it. You just didn't word the question correctly. position:relative sets the point to which its children can be position:absolute, which is where you want to use top and the like. This is the structure you need to see:
HTML
<div class='surround'>
<div class='inside'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</div>
</div>
CSS
.surround{
position:relative;
}
.inside{
height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
height:100px; width:100px; position:relative;
}
.inner{
position:absolute; top:30px; left:10px;
}

Keep the ads div fully in view

I've got to (unfortunately) put our ads onto our website. They're positioned down the right hand side of the page, outside of the content area.
When the screen width gets smaller, because it's positioned outside of the content they get cut off by the browser. I can offset everything by putting left: -someValuepx, which moves everything over.
Rather than having to put in lots and lots of media queries to keep slightly moving it over, is this something I can do in Javascript, to automatically keep them in the view? Ideally I'd like a function that I can run on page load, and then on the window resize event.
Here's a jsfiddle of the CSS at the moment. Edit the #container left attr to move the content.
And here's the code (as I believe it's required if you link to jsfiddle?)
HTML
<div id="container">
<div id="ads">
</div>
<div id="content">
</div>
</div>
CSS
#container {
width:500px;
min-height:100px;
background-color: firebrick;
margin:0px auto;
position:relative;
left:-50px;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:-170px;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
I have a pure css solution, if you change your div structure to the following:
<div id="container">
<div class="padding">
<div id="ads"></div>
<div id="content"></div>
</div>
</div>
You are able to use the following styles:
#container {
width:670px;
min-height:100px;
margin:0px auto;
position:relative;
}
#container > .padding {
margin-right:170px;
background-color: firebrick;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:0;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
#media (max-width:670px) /*this is the width of the container*/
{
#container {float:right;}
}
And this will keep your adds in view when the viewport is resized
Example
What you can do, is to create a function in JS that gets executed one time when the document is loaded and also when you resize.
This function should add a class (ie: hidden) to the the ads. you want to hide, and with CSS, give the right properties. Just addClass and removeClass, depending on the situation, should make the trick.
Example:
#ads { // normal values that makes the content of the ads visible }
#ads .hide  { // offset values to hide the ads }
This way, you keep behavior & presentation separated.
Hope it helps !
In your html markup, you have both content and the ads inside a container. The problem is that the content takes all space of the container, and the ads are positioned outside of it.
Just make the container wide enaugh to hold both content and the ads, then position them appropriately. Make one break point on the width of content+ads (660px), where you would position the ads below the content, and give the container its current width (500px).

Prevent underlying div from scrolling in iOS Safari

I have a div that is 100% height, 70% viewport height, and overflow:scroll.
Now I want to create an overlaying div which touch devices can use to scroll the whole page instead of the div.
I created a div with position:absolute and full page height. If Android users drag on this div, the whole page scrolls, like expected. However, on iOS7 the underlying div is scrolled, like the touch event goes right trough the div.
JSFiddle
.scrollDiv{
width:100%;
height:200px;
overflow-y:scroll;
border:solid 1px #f00;
-webkit-overflow-scrolling: touch;
}
.pageScroller{
position:absolute;
right:0;
top:0;
bottom:0;
width:50%;
background-color: rgba(0,0,0,0.7);
}
If you use iOS7 and drag on the page div over the scrolling div, the scrolling div is scrolled instead of the page.
Does anybody know a solution for this?
On your .pageScroller scroller element, add the overflow-y: scroll; and -webkit-overflow-scrolling: touch; attributes, together with a postive z-index. That prevents the scroll action to reach the "layer" beneath.
.pageScroller{
position:absolute;
right:0;
top:0;
bottom:0;
width:50%;
z-index: 1;
background-color: rgba(0,0,0,0.7);
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
}
Check this JSfiddle: http://jsfiddle.net/R9Ut6/

jquery - inserting a header section on an existing webpage

I am trying to inject a banner div
<div id='banner'></div>
on top of an existing webpage in such a manner so that when a person scrolls the webpage the banner remains on top. Also the webpage should be pushed down by the banner so that every part of the page remains accessible.
Here is my CSS:
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
}
Here is my jquery:
$("body").prepend("<div id='banner'></div>");
I tried using jquery to find all divs that were fixed and changing them to relative before executing the above line but still the banner does not work. The error is shown in the following picture https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing
Please Help.
And I am not looking for ad revenue here this is just a practice task.
Here is a jsFiddle I have created. The banner div is at the top of the page.
It stays at the top while scrolling.
The HTML:
<div class="page">
</div>
The css:
.oldBody
{
width:100%;
height: 3000px;
background-color: navy;
margin-top:250px;
}
#banner
{
position:fixed;
top:0px;
background-color:#FFFFFF;
width:100%;
height:250px;
border:2px solid;
z-index:10000;
}
The JS:
$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");
Please maintain z-index of banner div.Z-index should be grater then other div on that page.
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
z-index : 99999
}
i'd just like to present a different way to create the element:
var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
this technique for creating elements with jquery comes in handy when you have several different element to create. as a note, you can also create the element like so:
var $banner = $('<div/>').attr('id', 'banner');
I think the best way is first keep your ad on top in relative position when a person scroll page your function check the page-scroll .scrollTop() and then add fixed position on banner ad container just like freeze header, if you need further help in this regard let me know, I will provide you code. thanks I hope this technique will help you

Categories