Menu
  • HOME
  • TAGS

fixed navigation bar not only with position:fixed

css,position,fixed

You can do this by setting the elements position to fixed, but don't set its top, left, bottom or right parameters. As long as you don't set them, your element will stay on the place where it belongs (relative to the initial parent positioning) .your-element{ position: relative; } Check this...

CSS Fixed Position in FireFox without overlapping on body

html,css,firefox,position,fixed

Left and right position need to be replaced with margin-left and margin-right for this to work with fixed positioning. Using your original left: -160px; moved the banner 160px off the screen. Left and Right are relative to the window not the container. body { margin: 0px } div#banner1,div#banner2 { position:fixed;...

Transparent Circle in header bar CSS

html,css,webkit,fixed

Instead of using clip-path you could use box-shadow by attaching a :before pseudo-element on .header to achieve this. body { margin: 0; background: gray; } .header { position: fixed; width: 100%; height: 50px; overflow: hidden; } .header:before { position: absolute; content: ''; width: 10px; height: 10px; background: transparent; border-radius: 50%;...

Trying to fill remaining space next to vertical fixed div with fluid dimensions

html,css,fixed,fluid-layout,minmax

I figured it out. I placed the min/max fluid div inside the content div and covered it up with a fixed div of the same dimensions. Thanks for all your quick responses. Here's the fiddle. http://jsfiddle.net/T52Ms/ (The code below is all in the fiddle.) CSS html, body { margin: 0;...

How to combine fixed & relative with width 100%

css,fixed

DEMO HERE CSS #fixed { position:fixed; right:0; float: right; width: 100px; background: rgba(255,0,0,0.7); height:400px; text-align: center; } #relative { position:relative; margin-right: 100px; background: rgba(0,0,255,0.7); height:400px; width:100%; display: inline-block; float:right; text-align: center; } HTML <div id="fixed" > I am fixed. </div> <div id="relative"> I am relative, fluid, width 100% </div> ...

Using a bootstrap popover as a modal

javascript,html,twitter-bootstrap,fixed,popover

As stated in my comment: Why don't you use the modal in the first place? I guess customizing that to what you need could be easier then hacking popovers to behave like modals In this issue on Github @Fat recommends to use the focus trigger method instead. However I just...

Background-attachment: fixed image fluid to a certain point

html,css3,fixed,background-attachment,fluid-images

The height: 400vh is your problem I believe if you can put this code on the html element as such html { background: url("http://...") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } and delete the class "me" from your code this should be fluid for...

ASP.Net Ho to fixed 2 rows header Gridview [closed]

c#,asp.net,gridview,header,fixed

You can use GridViewScroll with jQuery plugin, it's flexible and easy to use. Here's a sample on how to apply it: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" /> src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" /> <script type="text/javascript" src="../Scripts/gridviewScroll.min.js" /> <script type="text/javascript"> $(document).ready(function () { gridviewScroll(); }); function...

Display CSS: some divs fixed, some flexible (2)

html,css,fixed

I think this might be what you want (using the answer from your other question) ... horrible way to build something though haha. http://jsfiddle.net/uKPEn/5/ .middle1 { background: blue; height: 100px; top:50px; } .middle2 { background: green; top: 150px; height: 100px; } .logo { background: pink; overflow: scroll; top: 250px; bottom:0%;...

Align fixed div tag percentage

html,alignment,fixed,percentage

just reduce width size in #relativeDiv to width:62%; or adjust it

Fixed sidebar menu on the left and fixed header on top

html,css,header,fixed,sidebar

The issue has indeed to do with the width: 100%. The text is horizontally centered within the 100% wide header. The header is as wide as the screen, but as it also has a margin-left: 120px gets pushed 120px past the right end of the screen. As you use position:...

How to create two divs where one of them will be fixed and other will be scrollable

html,css,fixed,scrollable

Flex layout will really help you here: HTML: <div id="content">content</div> <div id="footer">footer</div> CSS: body { display:flex; flex-direction:column } #content { flex:1; overflow:auto; } #footer { height:50px; /* Whatever fixed height you desire */ } Example: http://jsfiddle.net/0qhevkbn/...

Scrolling elements then fixed

javascript,css,scroll,fixed

Try using waypoints to fix elements at set positions on scroll, you will find it's very simple to use and also has a shortcut for sticky elements. Documentation here: http://imakewebthings.com/waypoints/ Shortcut: http://imakewebthings.com/waypoints/shortcuts/sticky-elements/ EDIT: Use for multiple waypoints... $('.wrapper').each(function() { $(this).waypoint(function() { //do something }); }); ...

I want to turn my menu fixed on top

javascript,scroll,menu,navbar,fixed

Add the following in the menu css: position:fixed; top:0; And add the following in your arrow css: position:relative; That should do what you are thinking to do. Edit: .menu-container{ position: fixed; top:0; } .menu{ display: block; position: relative; } .menu-toggle{ margin:0 auto; position:relative; } ...

iOS 7 overflow scroll for fixed Div

iphone,ios7,scroll,overflow,fixed

After a lot of research I finally found out that this was a bug with iOS safari and viewport units as described here: http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html Rather than using viewport units to set the height of the pop out i've had to resort to javascript: var viewportHeight = $(window).height() + 70; var...

jQuery Mobile Dialog Page - Fixed Position Header

jquery-mobile,dialog,fixed,scrollable

You can set the max height and scrolling of the content div instead of the entire dialog: .ui-dialog-contain .ui-content{ max-height: 450px; overflow:hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } Here is a DEMO ...

Once nav bar reached top of window, how to keep it there?

html,css,fixed,nav

A small bit of jquery you can achieve the sticky header. check the DEMO. Here is the jquery code. $(window).scroll(function () { if ($(window).scrollTop() > 280) { $('#nav_bar').addClass('navbar-fixed'); } if ($(window).scrollTop() < 281) { $('#nav_bar').removeClass('navbar-fixed'); } }); ...

fixed menu issue, menu stacks vertically when fixed

html,css,fixed

You have to add the position fixed to the ul (not the li) and add width:100% as well. ul{ list-style:none; position:fixed; width:100%; } Have a look at your fiddle I've updated it....

Position a div relative to a fixed div

html,css,fixed,relative

Use jquery. fiddle $(document).ready(function(){ $("#content").css('padding-top',$("#header").height()); $(window).resize(function(){ $("#content").css('padding-top',$("#header").height()); }); }); ...

Trying to “fix” navigation position on scroll

jquery,html,css3,fixed

Alright, I figured it out. My problem was that I was trying to figure out the top position of #navbar, but #navbar was my menu and theoretically always moving, and so the top position was always changing. What I had to do was to find the top position of #navbar,...

Change div content while scrolling using jQuery

jquery,html,image,scroll,fixed

This question shows very little by the way of effort, but just to get you started, you could use Bootstrap Scrollspy and then hide any links without the active class. If this doesn't meet your needs, please use this as a starting point to ask a more focused question in...

high z-index in low z-index - special navagation bar

html,css,position,z-index,fixed

you will need to move the nav out of the header for the #content z-index to work and need to align nav with fixed positioning or by giving margin header { display: block; position: fixed; width: 100%; top: 0; right: 0; left: 0; height: 80px; background-color: blue; z-index: 1; }...

Fixed DIV next to 5 fluid DIVs

css,html,fixed,fluid-layout

You can achieve your layout with CSS by wrapping the fluid divs in a container with margin-left:150px;. Then you must claculate so the sum of fluid divs width equals 100% : FIDDLE HTML : <div class="parent"> <div class="s1"></div> <div class="fluid_wrap"> <div class="s2"></div> <div class="s3"></div> <div class="s4"></div> <div class="s5"></div> <div class="s6"></div>...

Custom CSS for a Fixed DIV

html,css,fixed

Your specific question is not very clear. However, this is an example of how you could make a simple notification bar: #notification { position: fixed; width: 100%; height: 20px; top: -20px; background: orange; text-align: center; transition: all 0.5s; } #hover { position: fixed; top: 0; background: orange; width: 100px; height:...

Error in MATLAB.Undefined function 'det' for input arguments of type 'embedded.fi'

matlab,fixed

If you check the documentation for det, it says that the input must be single or double. Fixed point is probably not supported. As your matrix is of fixed size 4, it's simple to replace the function: [email protected](M)M(1)*M(4)-M(2)*M(3) Then use det2 instead of det....

Fixed div on scroll… need to push body down to compensate for div height?

jquery,css,scroll,fixed

Specificity relationships only work one way, so there aren't selectors to target parents of elements, and although there are a few ways to do so, I don't think they fully apply to your situation. I think what you might want to do here is not use toggleClass and just do...

space between bottom and fixed ul

css,position,html-lists,margin,fixed

In your case you should set the height for #navbar it's fix trouble #navbar{ position: fixed; z-index: 100; bottom: 0; left: 50%; transform: translate(-50%,-50%); /*margin-bottom: -1%;*/ height:22px; } http://jsfiddle.net/c31y7kL0/...

IOS8: whole page scrolls down when input in fixed footer gets focus

html,ios,css,css-position,fixed

Make body element fill 100% of width and height with hidden overflow. Then add additional div-container to the body and put all body's former content inside this div. Make the div scrollable. Now it's safe to put the fixed footer inside the body. It won't scroll.

Android Studio: Fixed footer that's locked to bottom

android,xml,android-studio,fixed

Try like this better to use Relative Layout for this

Adjust Width in CSS on the fly based on a master dynamic width

html,css,dynamic,width,fixed

Can't you just make them width:100% or whatever percent you needed them to be? This is essentially what bootstrap and foundation do for fluid grids. You have rows and columns and everything is based on a percentage of its parent container. I'd give that a shot, and I think you'll...

Java (Eclipse) WindowBuilder setting maximum dimensions

java,eclipse,swt,fixed,dimensions

SOLUTION After playing about for a while I decided that I would try my hand at using JFace instead. And I can report that by using JFace to build application windows you are able to disable re-sizing of the window. You cannot (to my knowledge) prevent re-sizing of the SWT...

How to set a maximum top margin for a fixed element?

jquery,css,scroll,fixed

$('#sHome').css('top', Math.min((current_top*1), YOUR_MAXIMUM_VALUE)); should work fine...

“position:fixed” Not Working For Header Menu

css,menu,position,fixed

This is because the transform creates a new local coordinate system - http://www.w3.org/TR/css3-2d-transforms/#transform-rendering Here's a look here body { background-color: #1B725F; color: #333; /*font-family: "brandon-grotesque", "adelle", "Times New Roman", sans-serif;*/ font-family: "brandon-grotesque", "adelle", sans-serif; font-size: 18px; font-weight: 100; font-style: normal; line-height: 1.625; position: relative; -webkit-transform: translate3d(0,0,0); <-- here transform: translate3d(0,0,0);...

How to center fixed navbar in another div?

html,css,position,fixed,relative

You could keep your nav in center of screen, but you need to wrap it inside fixed container, working Fiddle. HTML is slightly different: <div id="page-wrap"> <header> <div class="nav_container"> <nav id="nav">Nav</nav> </div> </header> <div id="main">Lorem ipsum flash.</div> </div> In CSS fixed element becomes .nav_container and nav must become inline-block -...

CSS right sidebar fixed width and left contant fluid

html,css,width,fixed,fluid

Just move .page-side before .page-content in your html .page-main{ padding: 10px; height: auto; overflow: hidden; } .page-content{ background-color: red; width: auto; overflow: hidden; } .page-side { float: right; width: 200px; background-color: green; } <div class="page-main"> <div class="page-side"> Sidebar </div> <div class="page-content"> Content </div> </div> ...

How can I get text to appear only in a div 'window' while scrolling by?

css,position,fixed

If you want a pure CSS implementation, you can use negative z-index's: body{ height: 1000px; } div{ position: relative; background:white;/*Covers the text, or you can see it through*/ } #text-container { position: relative; height: 300px; /*width: 400px;*/ background: cyan; overflow: hidden; width:100%; z-index:-2;/*Places it behind everything*/ } #text-container .boxtext {...

My fixed navbar doesn't work properly

html,css,menu,fixed,navbar

Could you use in your CSS the z-index property? Like so: z-index:999; ...

Creating a contingency table with fixed margins in R

r,table,statistics,fixed,contingency

Are you looking for the r2dtable function from base R? set.seed(101) tt <- r2dtable(n=1,c=rep(25,6),r=rep(50,3)) addmargins(as.table(tt[[1]])) ## A B C D E F Sum ## A 7 9 7 11 9 7 50 ## B 10 7 10 6 7 10 50 ## C 8 9 8 8 9 8 50...

how do i put upper and lower limits on a fixed div that is dynamic to when a user scrolls?

javascript,html,css,fixed

The script it is using to do that is here: http://theeverygirl.com/sites/all/themes/everygirl/js/layout.js?n549sa (Starts at the "// Make article left sidebars sticky" bit) Basically, it works by calculating if you are scrolled further down the screen than the beginning of the article. If you are, it adds "position:fixed" css to the contributors...

CSS: covering fixed element with z-index

html,css,css3,css-position,fixed

Demo Fiddle You need to give cover a position for z-index to work, e.g. .cover{z-index: 10;position:relative;} From MDN: The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an...

ruby on rails 4: How to predefine fixed values in one of the columns

ruby-on-rails,fixed,database-migration,warehouse

it appears to me that you are not looking for "default value" but rather a way how to show list of posibilities for that value in a view form. # app/models/location.rb class Location < ActiveRecord::Base def numbers_letters # EdwardM code here end end # app/controllers/locations_controller.rb class LocationsController < ApplicationController def...

Fixed Prices in Woocommerce

php,wordpress,woocommerce,fixed

You can filter the price via woocommerce_get_price. An example: function so_30998358_price( $price, $product ){ if( has_term( 'expensive', 'product_cat', $product->id ) ){ $price = 20; } else { $price = 10; } return $price; } add_filter( 'woocommerce_get_price', 'so_30998358_price', 10, 2 ); ...

Chrome issue with background-attachment fixed and position fixed elements

css,google-chrome,webkit,fixed,background-attachment

Since a fixed positioned background seems to break for no reason in Chrome, you can potentially try playing around with the clip and position:fixed properties. It's not very well known, but the clip property when set on an absolute positioned element will actually even crop fixed positioned child elements. There...

How to make a fixed menu/sidebar while using position:relative?

jquery,html,css,scroll,fixed

I'm one of the devs from the site you linked to, Fixate. Currently, some implementation of jQuery will be the best choice. This is a tricky problem to solve - you need a good understanding of both JS and CSS layout fundamentals. There is a position: sticky; property which will...

position: fixed; does some funky stuff to my css menu

html,css,menu,position,fixed

It works with position: fixed but you need to set right instead of left. .nav {position: fixed; top: 0; right: 0;} .nav ul {margin-top: 0;} http://jsfiddle.net/cvdbumw7/6/...

fixed overlay - scrolltop doesn't address the div

jquery,html,css,fixed,scrolltop

You're actually scrolling the .overflow which is being overflown, not .inside which causes the overflow So you need to get the scrollTop of .overflow instead of .inside $(window).scroll(function(e){ var scrolltop = $(window).scrollTop(); var scrollinside = $(".overflow").scrollTop(); $("#console").html("body: "+scrolltop+"px; <br /> fixed div: "+scrollinside+"px"); }); Updated JSFiddle...

How to control the anchor landing position

html,scroll,anchor,fixed

HTML (add an additional anchor tag) <a id="anchorpoint" class="anchor"></a> <div>Some content here</div> CSS .anchor { display:block; padding-top:100px; margin-top:-100px; } It's a slight modification of Fixed position navbar obscures anchors. The advantage lies there, that you don't prepopulate padding and margin of the actual container....

Removing fixed classes does not properly remove them from the presetation

jquery,class,d3.js,nodes,fixed

Are you wanting to go back to the force layout ? Its because you have only removed the class not the actual fixed property. Try this : d3.selectAll(".node") //select your node here .each(function(d){d.fixed = false;}) .classed("fixed", false); force.start(); //-bring the force layout back Updated fiddle : http://jsfiddle.net/d2gjxy7n/11/...

d3js why are my fixed nodes moving?

javascript,d3.js,fixed,force-layout

Finally I found a solution: I set the attributes of the force like this: var force = d3.layout.force() .size([width, height]) .charge(0) .gravity(0) .linkStrength(0) .friction(0) .on("tick", tick); In this way, all my fixed nodes do not move, except when I drag them....

Fixed header (nav) disappears over hero unit

header,position,fixed

You should try to post the relevant pieces of code here along with your question, to make it easier for people to answer. I just took a quick look at your site, and it seems like you're using a variable called aboveHeight that controls when the header is given "fixed"...

Navbar stuck to top, margin error?

jquery,css,fixed,parallax

I found out what was wrong. I wrapped the navbar in another wrapper, and set a height on that wrapper. Now it works perfect! :)

Is there a way using only CSS to have a background image scroll within a fixed element?

css,scroll,fixed

There is not a way to do this with just CSS, you will need JavaScript. THIS jQuery to be exact: http://jsfiddle.net/3s3qu2yv/4/ -- updated to better illustrate the effect I'm going for. function scr() { var scrolled = $(window).scrollTop(); $('.fx').css('background-position', 'center -' + scrolled + 'px'); } $( document ).ready(function() {...

HTML Footer is Hidden by ScrollBar

html,css,footer,fixed

In your footer's CSS, replace the width:100% with right:0 jsFiddle example Or keep it, and add box-sizing:border-box jsFiddle example In your original code, the box at 100% width alone was too wide based on the boder and padding of the element....

CSS fixed header overlapped by elements only when they are transparent

html,css,transparency,fixed,visual-glitch

#nav { position: fixed; background-color: #222; opacity: 1; width: 100%; top: 0; z-index: 99999; } Just add the z-index property with the proper number. Here the JSfiddle ...

All sections show over fixed header when scrolling

jquery,html,css,fixed

I think there is some problem with z-index as per your description This might help Mobile WebKit and Chrome 22+, a new stacking context is created by position: fixed, even when z-index is auto. So the stacking context hierarchy looks like this: document root (z-index 0) #element (z-index 9998) #element2...

Fixed position not working for header

html,css,header,position,fixed

Your issue is that you have a transform on your content element. This is because the transform creates a new local coordinate system, this means that fixed positioning becomes fixed to the transformed element, rather than the viewport. I can see you are using transform for you mobile nav, a...

Oveflowing fixed position popup, scrolls body beneath

javascript,html,css,scroll,fixed

Assign height: 100%; and overflow: hidden to body while the pop-up is shown

Enable scrollbar for a fixed positionated container

css,scroll,scrollbar,fixed

Try add height: 100%; to #fixedNav .anchors - Now Anchors is filling its parent out. bottom: 0; to #fixedNav - Now your sure that your fixedNav is on the bottom of the screen. Then add #fixedNav { position: fixed; left: 0; top: 70%; bottom:0; z-index: 1000; } #fixedNav .anchors {...

Fixed position div on top vertical space

html,css,fixed

A nice solution could be to change the height of the fixed div to be expressed in vh not in % (see), for example: div.fixed-at-bottom { height: 20vh; .... } and then set a margin-bottom to your contents div with the same value (or a little more to get more...

Div with position fixed inside another div

css,css3,position,fixed

if you want the fixed div to take full height set top:0 bottom:0 and overflow-y:scroll if you want to make it scroll for the content div just set margin-left little more then the fixed div so that it leaves some space * { margin: 0; padding: 0; } .container...

Modifying area of appearence of div

html,css,position,fixed

Although I am not a fan of your layout method this what you want is possible. Firstly, you have not stated position values for your fixed divs so that needs to be addressed. The, by adding padding top & left (top = equal to the height of your header) and...

Moving the body with fixed elements

jquery,html,css,fixed

That's how fixed positioned elements work - they are positioned relative to the viewport. You might animate left or margin-left properties of the the fixed elements too....

How to make div FIXED at the bottom when scroll down? [closed]

jquery,css,position,fixed

You just need to calculate scroll offset + window height, to get the bottom part of the window, and then check if that is greater than element offset + element height. Also, you have to remove bottom margin from the element, if you really want it pinned down to the...

iOS moves background image when positioning fixed

html,ios,css,css-position,fixed

I found a quite suboptimal solution, but at least it works. I don't use background-image in CSS anymore but put a img tag inside the background div and position it absolute: #background img { top:0; left:0; right:0; bottom:0; position:absolute; } Here is the fiddle Unfortunately, the paragraph "this is text"...

stop scrolling inside fixed div

html,scroll,fixed,sticky

If I undersand correctly, make it so that top has a maximum value of $('#filters').height()-$('#leftDiv').height(), which is as far as you want filters to scroll. Further, to make it be able to change directions gracefully, rather than set the margin of #filters equal to scroll top, we have to instead...

Position absolute but with fixed scrolling

html,css,scroll,fixed,absolute

Is it this you want? .navblue { position: fixed; left: 10%; } .navorange { position: fixed; right: 10%;; } http://jsfiddle.net/6vb5u7eg/2/...

Fixed div inside other div after certain scroll

javascript,jquery,html,scroll,fixed

var parent_top = $(".parent").offset().top; var parent_bottom = $(".parent").offset().top + $(".parent").height() - $(".child").height(); $(document).scroll(function() { var y = $(document).scrollTop(); if(y >= parent_top && y <= parent_bottom) { $(".child").css({"position": "fixed", "top" : "0px"}); } else { $(".child").css("position", "relative"); } }); FIDDLE...

JQuery: Fix Div including re-sizing window

jquery,css,scroll,resize,fixed

You are facing scoping issue, fixDiv() method being declared inside onload handler. You could use instead: function fixDiv() { var $cache = $('.pin'); if ($(window).scrollTop() > 100) $cache.css({ 'position': 'fixed', 'top': '10px', width: $('.pin-wrapper').width() }); else $cache.css({ 'position': 'relative', 'top': 0, 'width': $('#header').width() }); } $(window).on('load resize scroll', fixDiv); But...

asp.net DataGrid set fixed row height

asp.net,datagrid,height,row,fixed

This has been solved by adding a Wrap property in ItemStyle and setting the value to False.

highcharts datetime point at fixed distance

datetime,highcharts,fixed

You can use HighStock's ordinal value within the xAxis. However that might mean that you have to get additional licenses if you have not paid for HighStock and only paid for HighCharts - refer here The ordinal parameter in the HighStock API and example...

show submenu click and fix

css,menu,fixed,submenu

If you want show on click then use jquery. You can try below code: Demo $('.has-sub a').click(function(){ $('.has-sub ul').hide(); $(this).next().show(); }); ...

How to hide scrolled content under fixed transparent header

css,scroll,fixed,transparent

Since your background image isn't transparent, the logical thing to do is to apply that image to the header as well as the body. Since you want a color overlay of that grid image, you would have to apply a second background-image using a linear gradient. JSfiddle Demo body {...

Fixed block with negative z-index overlaps the body background

html,css,fixed

Body is not an actual layer that can overlap any other layer... One solution that solves what you want, is to create another div layer as your desktop/body. <style> html, body, .desktop { min-height: 100%; } .desktop { background: green; position:absolute; top:0;left:0; width: 100%; } .sidebar { z-index: -999; position:...

css position:fixed never works at all in my site but works in other site

html,css,position,fixed

Now I found the solution & working on it. It was because I call some other css files. when i remove one of the css it works perfect. I don't know why but it works.....

fixed-width inside gutters using Susy-Sass

fixed,fluid-layout,susy-sass

You want gutter-position: inside-static, and also a column-width setting. The static gutter size will be calculated from the column-width.

Change Jquery value depending on window size

jquery,html,scroll,resize,fixed

To answer both parts of your question: jQuery(function($) { function fixDiv() { var $cache = $('.getFixed'); var theHeight = $cache.parent().height(); if ($(window).scrollTop() > theHeight) $cache.css({'position': 'fixed', 'top': '0px'}); else $cache.css({'position': 'absolute', 'top': theHeight+'px'}); } $(window).scroll(fixDiv); fixDiv(); $( window ).resize(function() { var width = $(this).width(); var parentWidth = $(this).offsetParent().width(); var percent...

css “position:fixed; overflow:auto;” bad bottom padding

css,overflow,fixed

deleting height:100% on .main-body-grid > .grid-left, .main-body-grid > .grid-right and .main-body-grid > .grid-left worked for me