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...
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;...
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%;...
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;...
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> ...
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...
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...
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...
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%;...
html,alignment,fixed,percentage
just reduce width size in #relativeDiv to width:62%; or adjust it
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:...
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/...
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 }); }); ...
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; } ...
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,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 ...
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'); } }); ...
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....
Use jquery. fiddle $(document).ready(function(){ $("#content").css('padding-top',$("#header").height()); $(window).resize(function(){ $("#content").css('padding-top',$("#header").height()); }); }); ...
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,...
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...
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; }...
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>...
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:...
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....
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...
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/...
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,xml,android-studio,fixed
Try like this better to use Relative Layout for this
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,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...
$('#sHome').css('top', Math.min((current_top*1), YOUR_MAXIMUM_VALUE)); should work fine...
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);...
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 -...
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> ...
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 {...
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...
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...
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,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...
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 ); ...
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...
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...
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...
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....
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/...
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....
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"...
I found out what was wrong. I wrapped the navbar in another wrapper, and set a height on that wrapper. Now it works perfect! :)
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() {...
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....
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 ...
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...
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...
javascript,html,css,scroll,fixed
Assign height: 100%; and overflow: hidden to body while the pop-up is shown
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 {...
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...
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...
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...
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....
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...
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"...
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...
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,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...
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...
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(); }); ...
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 {...
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:...
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.....
You want gutter-position: inside-static, and also a column-width setting. The static gutter size will be calculated from the column-width.
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...
deleting height:100% on .main-body-grid > .grid-left, .main-body-grid > .grid-right and .main-body-grid > .grid-left worked for me