Hi I want to do a fixed size page, but don't want the page to break or reflow at all if the user resizes the window. Is this a javascript function?
sample: http://www.neimanmarcus.com/
Most people put all the content of there page inside a div with an id, such as 'doc', then they would apply the following rule:
<body><div id="doc">
YOUR PAGE HERE
</div></body>
body {
test-align: center;
}
#doc {
margin: 0 auto;
text-align: left;
width: 940px
}
The "text-align" fixes an IE 6 issue, really you just need to assign a margin to your wrapping document div.
it doesn't need java script function .
but remember : don't use % for declaring width or height for elements in css.(for having a static element that resizing window doesn't effect that).
for example : "width:90%;" ==> replace this with "width:100px;"
Related
Currently I have a layout like so
<parent-comp>
<child1> </child1>
<child2> </child2>
</parent-comp>
Parent component have fixed height ( 1000px )
Child 1 have 2 states: Expanded( 200px ) and Collapsed( 10px )
I would like to use these information to calculate and update child2's height accordingly
I do not want to set child2's height to auto ( I need a specific value since this is the requirement to pass it into another library (the virtual scroll) )
How can I achieve this?
I tried ViewChild + ElementRef to get child component's height from parent component but it seems to cause ExpressionChangedAfterItHasBeenCheckedError when I try to update the child component's height
Should the child component output it's current height to the parent or the parent should read it from it's child?
instead of doing it the hard way, you can simply use flex-box, which would take care of doing all the calculations for you.
e.g
.parent {
display:Flex;
flex-direction:column;
flex-wrap:wrap;
height: 1000px;
}
.child1 {
/* expanded */
flex: 0 0 20%;
}
.collapsed {
flex: 0 0 2%;
}
.child2 {
flex: 1;
}
you can apply collapsed classed dynamically with the help of ngclass, hope this helps.
If you want to learn more about flexbox play these free game at https://flexboxfroggy.com/ Hope this helps.
Yes, you're right. You need to Output the value from child to parent and propagate it to desired components and do your calculations.
Here's an example.
If you want to pass this change of height to Components other than the children then I would suggest you use a SharedService to subscribe and make changes to the value(s). Siblings or not, this way you can share data between multiple components.
If you just want to update the height, using Flexbox or Grids is a better alternative.
I'm trying to embed the bitcoin widget headlines from www.bitcoin.com into my website but is there a way to make it full-width?
here is the widget (taking out the divs to be able to show it here):
div class="btcwdgt-news" bw-entries="3" bw-theme="light"
I'd like it to occupy the whole width of my page if possible.
(original link: bitcoin.com/widgets)
You can override the widget CSS parameters by inserting in you CSS file the following:
div.btcwdgt {
max-width: 100% !important;
}
Also I would recommend you to read this: How to override the properties of a CSS class using another CSS class
(function(b,i,t,C,O,I,N) {
window.addEventListener('load',function() {
if(b.getElementById(C))return;
I=b.createElement(i),N=b.getElementsByTagName(i)[0];
I.src=t;I.id=C;N.parentNode.insertBefore(I, N);
},false)
})(document,'script','https://widgets.bitcoin.com/widget.js','btcwdgt');
div.btcwdgt {
max-width: 100% !important;
}
<div class="btcwdgt-news" bw-entries="3" bw-theme="light"></div>
I am looking for a way to set a print-devoted css that shows a fixed title on every page.
Unfortunately, I couldn't manage to print this title nicely on the 2nd page, since it always "walks on " the table, ignoring declared body padding / margin ... though I am quite sure the body is not suited here, I couldn't find any working way.
Any idea?
<h2 id="tableTitle">Fixed title</h2>
<button class="noPrint" onclick="myFunction()">Print this table</button>
<table>...content fitting at least 2 pages ...</table>
...
body{
margin-top:100px;
}
#tableTitle {
position: fixed;
top : 0;
}
Here's the fiddle
I received a task at work to create some mini-webpage layout with bootstrap. I decided to base on already done layout (Amoeba). Here is the preview: Amoeba bootstrap link
Well, on localhost almost works except one thing - footer. Just take a look on provided link and then: click Portfolio (from navigation) and then filter the gallery by Photography.
When you will scroll down you will see ugly space. And this is my issue. I dont want that. So i thought that I need a footer OR portfolio div class which will automatically resize to proper size. BUt I dont how how to achieve that. Any tips?
You need only to change the code of modernizr slightly. Change forceHeight to false and will work good.
if (Modernizr.mq("screen and (max-width:1024px)")) {
jQuery("body").toggleClass("body");
} else {
var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
}
Im not sure why, but your body element gets some height inline styling. Anyways here is the solution of your problem:
body {
height:100% !important; // inline styles, so you need to add "!important" here
position:relative;
}
#footer {
position: absolute;
width: 100%;
bottom: 0px;
}
You can also add wrapper div if you don't want to add position:relative and height:100%!important properties to your body element. Just see how it works and choose a better option for you.
On this link I've build a simple html/css based layout. What I want to achieve the following: I want that the content section gets a overflow-y as soon the window height is smaller then the content height. The footer and header need to stay in the same position. Only the content section must be smaller.
This sounds very simple, but to my own surprise I couldn't find a solution yet. I'll tried to add some max-/min-height and overflow values to the content section, but this wouldn't work.
Would be awesome if someone could help me out. Thanks
I would use a combination of CSS and jQuery addClass() as follows (I am calling the content section #Content, let's say 600px for this post):
//css
#Content {
height:600px;
//etc.
}
.contentoverflow {
overflow-y:scroll;
}
Now on page load, add an onload function to the body (note that the Content div lacks any classes):
<body onload="checkHeight()">
<div id="Content">
<!--Your content goes here-->
</div>
Now the JavaScript / jQuery:
function checkHeight() {
var scr = screen.availHeight;
var contentHeight = 600; //or whatever number you choose)
if (contentHeight > scr) {
$("#Content").addClass("contentoverflow");
}
}