spry menu take up whole height of web page - javascript

Having trouble getting my side spry menu to take up the length of the whole web page. I was thinking some like this
$("nav").css({
"height" : $("nav").height()
});
would maybe suffice in stretching out the side, but still no luck. I just want grey like in this jsfiddle http://jsfiddle.net/nLq9b/1/ to reach the bottom of the page regardless of the length.
thanks

Try this:
nav {
background: #666;
padding-top: 10em;
width: 10em;
position:absolute;
top:0;
bottom:0;
}
no jQuery needed.

Related

Isotope troubles with layout

I am working on this site:
http://www.thecarlossanchez.com/Test/thecarlossanchez/Galleries/stilltest.html
When I created the thumbnails everything worked great, but for some reason it added all this extra space if you scrolled to the right. Everything worked the way it should with in the window and it never made me scroll right ever, so I ignored the extra space.
Now I am adding Isotope in order to filter the content, but when a category is selected all the thumbnails drop down and to the right. Something is centering the content to all that extra space. And I am not familiar enough with jquery to figure what where the problem is.
Here is an example of how it should work without isotope:
http://www.thecarlossanchez.com/Galleries/people.html
Any ideas on how to fix this?
Upon checking on your site, I noticed you got an enormous padding size being set on your gallery element.
Currently it's :
.gallery{
width:80%;
padding:800px; /* enormous padding */
position:relative;
}
I've changed that to padding: 0; and the extra space at the right side is removed.
.gallery should look like this now:
.gallery{
width:80%;
padding:0;
position:relative;
}
Also if you want to center your gallery when the page is resized, add margin: 0 auto to .gallery element.
e.g.
.gallery{
width:80%;
padding:0;
position:relative;
margin: 0 auto; /* center gallery */
}

buttons not keeping up with slider when window re-size

Whenever i re-size my window the slider buttons (next/previous) disappear and do not move with the slider. Any idea on how to fix this?
JSFIDDLE:https://jsfiddle.net/b31kvqwr/
Buttons CSS:
#nav img {
position: absolute;
top: -10px;
cursor:pointer;
color:grey;
width:40px;
height:30px;
}
#prev {
margin-left: 530px;
font-size: 10px;
}
#next {
right: -30px;
margin-top: 13px;
}
PS: if the result in the jsfiddle doesn't show, expand the result tab.
This is how the slider looks like when full screen (the right way);
This what happens when i re-size the browser horizontally:
The buttons aren't moving with the slider. Any help please?
The problem at the moment is that you are using margin-left:530px; meaning that the arrows will always be 530px from the left of the screen no matter the size of the screen. It also looks like what ever is wrapping it has a set width and isn't resizing, your code was to messy for me to find this but there are a few thing that I found to make the problem a little better,
https://jsfiddle.net/b31kvqwr/2/
I have managed to keep it the correct place for a lot of the, however to improve get it working perfectly you will need to create 1-2 #mediaqueries to tweet the alignments at different sizes to make it perfect.
The way I did this was by changing margin-left to position:absolute and use a left positioning instead on your prev and next buttons;
#prev {
left: 50%;
font-size: 10px;
position:absolute;
}
#next {
margin-top: 13px;
left:58%;
position:absolute;
}
As I side note I would recommend cleaning up your code like #TingGaint said as it is insanely messy. Also when posting on stack try only include the relevant code not all of it as it makes it quicker and easier to look through and help.
EDIT
I have found the problem, still do what I said above however now instead of have the arrows div where they are now, move them out and so there below <div id="wrapper"> however you will have to play around with the placement as they will be at the top of the screen. However now they stay in the same place when re-sizing!
Example - https://jsfiddle.net/b31kvqwr/4/

Creating a full screen background image, But still allowing users to scroll down

I'm working on a website that all fits on one page and scrolls down to other sections that will act like other pages. Id like to have a landing page that is a dynamically readjusting image, that will take up the entire page of the user when they enter. I was able to get the image to work, but im not able to scroll the page down to other content.
.full-size {
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
overflow:hidden;
}
.page-welcome{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
text-align: center;
background: #292929 url(http://placekitten.com/1600/900) repeat fixed;
background-size: cover;
}
Heres the css I'm using.
I also set up and example in jsfiddle HERE
Please note that "Test" should be centered, must of copy pasted wrong or somthing.
Just to expand on my comment: Adding margin-top:100%; to the div you are wanting to push down should yield the desired results. Please see the link below, I added a div called "test" with that property and it appears to accomplish what you wanted.
http://jsfiddle.net/tm2v6/13/embedded/result/

Div to fill remaing vertical space

I have a complex HTML application, so unfortunately cannot really provide a code sample. We are trying to get the div (highlighted in red) to fill the remaining vertical space (see image).
The application consists of a header (in black), a sidebar on the left which can be dismissed or resized (note: the horizontal components resize correctly). To the right of the sidebar is another div (mainDiv). mainDiv contains a div at the top for the controls, and a div underneath it for the table of data (highlighted in red).
This table can potentially contain lots of data, so it needs its own scrollbar if the data doesn't fit on the screen.
We just want the table to fill all of the available horizontal and vertical space. We just can't seem to make it work.
We have created a jsfiddle example to demonstrate our layout as best we can. This can be seen here. We just want this div (in jsfiddle the div is called "tablewrap") to take up all of the remaining space.
Code (from jsfiddle) is as follows:
html
<div class="header">Header</div>
<div class="sidebar">This is the sidebar</div>
<div class="tablewrapper">
<div class="tableheader-controls-etc"></div>
<div class="tablewrap">table</div>
</div>
css
.header { height: 50px; background:black; color:white; }
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; }
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;}
.tableheader-controls-etc { height:150px; background:blue; color:white; }
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;}
If anyone can provide a solution that would be great. We would prefer CSS but can cope with Javascript.
Thanks,
Phil
The trick is to set position: absolute, then adjust the top, bottom, left and right properties as needed. See fiddle and explanation.
.tablewrap {
position: absolute;
top: 240px;
bottom: 0;
left: 150px;
right: 40px;
height: auto;
width: auto;
...
}
You can try this:
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px}
(Set the min-height as you want)
Well, it's time to say what you probably don't want to hear hehe: you can't do this with CSS.
You have to use javascript in order to find out two things:
Viewport height
Controls div height
Once you know those two heights, you can set your table height to:
finalHeight = viewport - (controls+header+footer)
If header and footer have also dynamic heights, use javascript to calculate them.
You will also need to recalculate this height on window resize. And of course your layout won't work if javascript is disabled.

How to make winJS app scrollable?

I am new to developing Windows 8 store apps, and I am in the process of creating my first one.
The app I am making is a note taking app. I only started the app yesterday, so it's still very basic, but I am having a problem with the scrolling. Here is a screen shot displaying the problem:
As you can see, when a certain number of notes are entered, they start overlapping the screen. What I need to do is make it so that when the notes a certain amount of pixels from the side of the display, it makes it scroll-able.
The divs that the notes are contained in are created as the note is written. The notes also auto change size depending on the amount of text entered.
Does anyone know how I would make it so that they scroll to the left and right instead of overlapping?
EDIT:
Here is the CSS:
body {
overflow-x:auto;
}
#textInput {
padding:20px;
float:left;
margin-top: 20px;
margin-left: 20px;
position:fixed;
}
#noteInput {
display:block;
border-width:5px;
border-color:purple;
box-shadow: 5px 5px 5px;
}
#titleInput {
border-width:5px;
border-color:purple;
width:285px;
box-shadow: 5px 5px 5px;
}
#noteSubmit {
width:295px;
}
#headers {
margin-left:100px;
margin-top:80px;
}
#hr {
margin-right: 40px;
margin-left: 40px;
}
#noteContainer {
float:left;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
margin-left:400px;
}
I haven't really bothered with the UI and design much yet, as I want to get all the background stuff like javascript, jquery, and azure working first.
I am only doing this app as a project for practice, for the 70-481 and 70-482 exams I have in two months, so its never going to be in the store or anything.
Thanks for your help
Cheers
Corey
I strongly recommend using a WinJS.UI.ListView control instead of writing the div elements yourself.
That way you'll not only get a look & feel to your application that's consistent with what the user expects from a Windows 8 Modern UI app but it will also take care of the scrolling and management of the DOM elements for you.
See this tutorial on how to create and style a ListView control.
I agree with #ma_il, but if you do want to add scrolling functionality to custom elements, you simple wrap those elements in a div and add some CSS properties to that div...
overflow-x: auto; /* to scroll horizontally /
overflow-y: auto; / to scroll vertically /
overflow: auto; / to scroll in both directions */
If the contents of that div are wider (or taller or both) than the screen then your screen will automatically become scrolling and touch will be supported.

Categories