Keep table headers on screen as user scrolls - hover

I have an HTML page that contains a table. The table headers get eventually scrolled off the top of the screen, but I would like the headers to stay visible at the top.
I want to use a method like alaskaair.com's "Fares Selected" widget. Their little Fares widget stays visible as you scroll the page: Screenshot of alaskaair.com widget.
Note that in my case it would look more like this: Simple Mockup

I use xTableHeaderFixed to freeze my headers:
http://cross-browser.com/x/lib/view.php?s=xTableHeaderFixed

I was in a similar situation recently (creating an inbox-style display for notifications), and after some googling, I came across these:
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://www.imaputz.com/cssStuff/bulletVersion.html
I'm presently using (1) and I haven't encountered any issues with it so far. You can follow the discussion of the solution here.
EDIT
I just re-read your question, and I guess this isn't exactly what you were looking for. Still, maybe it'll be useful to someone else.

Related

SSRS Page Breaks. Past the end of my rope

(This is for SSRS 2012)
Hey guys. I know this really isn't the way to do things, but I am just completely done struggling with this.
Here is a zipped-up .rdl file for a report I'm working on: http://www.flowdex.net/files/amalgam_rdl.zip. Included in the .zip file is a .pdf with a typical output of that report.
I am getting several phantom page breaks that I simply cannot understand. I have scoured the internet, including stack overflow, and none of the regular suggestions have worked. I have made sure everything fits within the dimensions of a page, margins included, and have looked at the properties of every element in the report. Nothing gives ANY CLUE WHATSOEVER why a blank page must be inserted within a tablix that goes past one page, or why there is a page break in-between the two tablixes.
I don't know how viewing my .rdl will work... obviously you're not getting a database, so you won't have any way to test it. All I'm asking is for someone to take a quick glance at how everything is formatted and let me know if anything major stands out.
Sorry for the terseness, and I guess I'd understand if this question gets ignored / rejected. I just do not understand why this is so difficult. Teaching myself PHP was a million times easier than finding a stupid page break in SSRS.
Thanks in advance, and apologies again for being rude. This is crazy frustrating.
It looks to me like what you should do is take the DIV6 image and [Seiten] move them over to the left a little, then take the report body and collapse it to be right up against them. Right now, with your margins I think you are going over and it creates that phantom page thing.
Put visible borders onto everything. Start with the obvious: tablix's,text boxes, lists, images but also add to Report, Header, Footer, Body etc.
Make them all a different colour. You should then see which object is spilling onto the other page.
Note: adding a border adds a pixel (or point) to the width and height, so make sure you adjust for that when removing them or identifying the culprit.
Plan B:
From the screenshot, your empty page does not have a Batch:[Name] which indicates it could the way you are calculating your group maybe causing the problem (if it was due to pushing an element too wide, the header should have the same [Name] as the previous page.

MDL: Fixed header icon misplaced?

I'm trying out Material Design Lite to make a nice-looking webpage for a school project. I'm having an issue where the sandwich icon in the header is off-center for seemingly no reason.
I copied and pasted the exact source from the fixed header example here (click the CodePen button to see the exact full source I'm trying) and it doesn't appear the way the examples do.
Is there something I'm missing? It's been a while since I've done HTML/CSS but I don't see why this would be happening. Could it even be a bug? Thanks.
I wish I could add a comment to help. Unfortunately my score is too low.
I went into the fiddle i believe you created and cut and pasted the info from the code pen. It looks like it is working. Please post the code you are using. Also you mentiono a fixed header but it looks like you are taking the header titled Scrollable Tabs. Correct?
I would be happy to help, i could imagine there is something in the CSS unless you're not using any of your own style sheets. #Jainam is on the right track by asking if you could set up a fiddle.

On scroll cover previous section, no js

I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/

Different layout display on website over multiple loads

I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).

html help frameset

I'm working on my html project, and everything is going well.
Now I'm doing the same project with framesets, but I discovered that the page in a frame set won't scroll as a whole page (you can only scroll each frame at a time).
How can i solve this?
Please help
It sounds like what you want is perhaps a static design around your scrolling content, correct?
If so, what you should actually do is make a single page (not a frameset) with your desired DIV layout (a good example can be found here), and then have your content div use CSS that will allow it to scroll (e.g. overflow:scroll;).
Hope this helps.
Don't use frames! I know this is a horrible answer to your question, but believe me - loads of peeps would agree!
If you can, use plain ol' CSS and NO FRAMES.
Also, there is rogue synchronised scrolling Javascripts floating around on the Interwebs - But I wouldn't use them. People who have Javascript off won't get that effect.