I have an arbitrary HTML I am outputting to a page inside of a table, and I need to be able to "layer" elements over all of the links (one per link).
My current solution is to search the HTML for the links (which I have in a separate array from another source), then insert a div with a different z-index and position absolute into the HTML. This works some of the time, and breaks bizarrely other times.
Is there something that I'm missing here? I've seen nice implementations of this on various forums, but they are slightly different in that they usually require interaction from the user to come up, I want mine to be up all of the time.
Long question short, is there an easy way to do this?
Using Javascript (and specifically jQuery), yes.
There are many tooltip libraries out there.
http://plugins.jquery.com/project/tooltips
http://flowplayer.org/tools/tooltip/index.html
http://craigsworks.com/projects/simpletip/
I'd say the top one would suit your needs the best. To enable it to be "always on" you'd set the css element .tooltip as follows:
.tooltip {
display:block; // This replaces the "none" they have in the example, but the line itself isn't necessary
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
Two things come to mind to see if you get getter results. 1) have you tried relative positioning inside the table cells instead of absolute positioning? 2) is your script firing after the table is rendered? If not, be sure it runs after the entire table is rendered.
Related
We wanted some numbered lists and found this cool counter thing you can use in you css to have the browser calculate numbers for you:
ol.instructions {counter-reset:instructions-section;}
ol.instructions > li:before {
content:counter(instructions-section);
counter-increment:instructions-section;
}
The html we're making contains pages of instruction sets, each set numbered from 1,2,3 and so on. Only one set is visible at a time, when you click a header you show that set and hide the others.
It worked like a treat and we were sitting there with smiling faces until someone thought of testing it in Internet Explorer 8, where we ran into some epic Microsoft-style weirdness. When a set was brought up by clicking, all the numbers were zero (0).
I googled around and found this page - it describes the problem fairly well (it's a combination of using :hover and css counter logic used in hidden content), but gives a solution that is less than satisfactory - I would love to be able to keep using the css counters and just implement some ie8-specific hack that somehow makes the page update the numbers. I'm having a hard time finding other stuff on the internet about this problem.
My particular page will describe zeroes until I move the mouse pointer into the div that contains the numbered list, at which point the numbers will magically fix themselves. Is there something I could to "nudge" the page into believing that a mouse is hovering over the element? Or is there a more proper solution?
Ive had the same issue. I was able to fix it by using JavaScript to apply inline CSS of padding-left 0 (there was already no left padding) once the element was visible. This seems to make IE 'redraw' the element.
If, as is suggested, the "hidden" is causing a problem then you could try "hiding" the content by instead moving it off screen with this piece of CSS:
.hide {
position:absolute;
left: -1000px;
}
I've used the code example from the linked to document to show a possible solution here: http://codepen.io/akademy/pen/LDhGl
Is it possible to make the table rows to overlap each other, using only css and html?
Please help. The page is here, when the user choose conditional leave, they will prompt with different additional field(s) to fill up. But I just want to know if rows can be set to overlap so the table will not be too long.
http://www.tritech.com.sg/consultants/intranet/leave_application/leave_form/index.php
Yes, it it possible using CSS and HTML to allow elements to overlap, and there are many techniques to do this, however in doing so you will cause the content of those rows to overlap. Unless you actually want to hide you content its not a good space saving technique. It would be better to reduce padding in the rows, and or cells.
Having said that..
tr
{
display:block;
position:absolute;
height:15px;
top:0px;
}
You need to set position to block to stop them acting like table rows, then position either relative or absolute depending on how you need to control them. then set the new top values to match. This style will align all table rows to the top of the table.. Important to note that the cells within the table will no longer be constrained to the element, this means they'll jump out of the table so will have to be hidden using overflow:hidden;
I hope this awnsers your question, but I would urge you to consider a better option than this. If you don't need the content to be displayed setting the elements display:none; Has a better effect and is easier to toggle either inline or as a class.
P.S would be a better example If I had sample code to use.
Though there are many ways of doing this with CSS/JS, is there a way to do this just using HTML?
The reason that I want this is because it makes it much easier to copy.
I do not think it is possible with only HTML.
I want to address this:
The reason that I want this is because it makes it much easier to copy.
First of all, it doesn't.
By separating CSS and HTML you are actually copying less every time you want to duplicate an instance of anything.
For example:
CSS:
img{display:none;}
a:hover + img {display:block; width:100px; height:100px; background:black;}
HTML:
img{display:none;}
a:hover + img {display:block; width:100px; height:100px; background:black;}
Demo
Now if you want another image, just copy and paste the HTML right next to it.
However, the real benefit of separating content and style is the ability to edit once and change everything.
If I had fifty images across three pages on my website and I wanted to add a border to them, I would have to manually go into each page and change every single instance.
With CSS, I can change one line in one file, and they all update.
For this particular problem, however, I would look into a Javascript solution. Ideally image previews wouldn't load unless they are called on, and this is out of the scope of CSS.
This is not possible with just HTML. You need at least CSS or JavaScript, sorry. You might be able to get close with CSS.
I am working with the Google Engine for a class, and I had a question about css tabbed menus. I found a tutorial for tabbed menus, here is the link to that one if it matters:
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
I was wondering if anyone knew of a way to make it so that it didn't have to reload the page every time I click a link in the menu. Basically have it already have the info in memory and change just the text, or only refresh a specific part of the page. I have no idea what types of stuff you might need, but I basically copied that code exactly, and used the app engine and template inheritance to get the different page info. Let me know if you need other info. Thanks in advance.
WWaldo
I can suggest at least two possibilities using JavaScript; you could either target the links in your CSS menu items towards:
Altering the content (e.g., the value of the src attribute) of a main iframe element (for example), or revealing/replacing preloaded content into/out of div element(s); and/or,
Trigger an AJAX call to a server to determine an update, and update the contents of the required components (e.g., div) dynamically.
The difference is pre-loading all the page content first (1) as opposed to accessing it dynamically on command (2). If you don't have control over a server to implement AJAX in suggestion (2), then (1) will suffice, but at the cost of offloading the work (and downloads) to the client.
Both approaches will require dynamic update of page contents using JavaScript. The 'net is littered with examples of this; check out this one, for instance.
It is actually quite easy to make a tabbed menu in HTML, with CSS, javascript is not needed for my design. I did this example in about 1/2 an hour.
Here are some screenshots of my example. (I Censored My Name Out Of The URL, And I Cropped Them)
All you do is make 3 boxes, With links to other webpages in them. It can look the same in all the pages. It is recommended to make rounded corners.
<div id="Tab1">Tab Numbah One </div><div id="Tab2">Tab Numbah Two </div><div id="Tab3">Tab Numbah Three </div>
Go into your external CSS sheet, make them all float left, and on the same line, make it look pretty, and you NEED a border of some sort.
Then make an overriding style in each of your pages. Make the bottom border non-existent, so it looks like the tabs of a binder. I changed the color, so when you were on that page, it looked a bit better. Note, I indent my CSS very unusually.
Page 1
#Tab1 {
border-bottom:none;
background-color:white;
}
Page 2
#Tab2 {
border-bottom:none;
background-color:white;
}
Page 3
#Tab1 {
border-bottom:none;
background-color:white;
}
For an iPhone ebook application I need to break arbitrarily long HTML documents up into pages which fit exactly on one screen. If I simply use UIWebView for this, the bottom-most lines tend to get displayed only partly: the rest disappears off the edge of the view.
So I assume I would need to know how many complete lines (or characters) would be displayed by the UIWebView, given the source HTML, and then feed it exactly the right amount of data. This probably involves lots of calculation, and the user also needs to be able to change fonts and sizes.
I have no idea if this is even possible, although apps like Stanza take HTML (epub) files and paginate them nicely. It's a long time since I looked at JavaScript, would that be an option worth looking at?
Any suggestions very much appreciated!
update
So I've hit upon a possible solution, using JavaScript to annotate the DOM-tree with sizes and positions of each element. It should then be possible to restructure the tree (using built-in XSLT or JavaScript), cutting it up in pages which fit exactly on the screen.
Remaining problem here is that this always breaks the page on paragraph-boundaries, since there is no access to the text at a lower level than the P-element. Perhaps this can be remedied by parsing the text into words, encapsulating each word in a SPAN-tag, repeating the measurement procedure above, and then only displaying the SPAN elements that fit onto the screen, inserting the remaining ones at the front of the next page.
All this sounds rather complicated. Am I talking any sense? Is there a simpler way?
You should look at the PagedMedia CSS module: http://www.w3.org/TR/css3-page/
CSS3 also support multicolumn layouts (google for "css3-multicol". I don't have enough Karma to include a second link here :-)
About your update: how about doing the layout of one single page, then use a DIV with overflow:hidden for the text part. Next thing would be to overlay a transparent item on top of that, that would programmatically scroll the inner content of the DIV PAGE_HEIGHT pixels up or down according to some navigation controls (or gestures).
The other option is to have a parent <div> with multiple css3 columns: link1, link2.
This works on Android:
<style type='text/css'>
div {
width: 1024px; // calculated
-webkit-column-gap: 0px;
-webkit-column-width: 320px; // calculated
}
p {
text-align: justify;
padding:10px;
}
</style>
The CSS multicol suggestions are very interesting! However, and I hope it's ok to respond with another question: how would you go from splitting one or more long <p> elements into columns to having one particular of these columns being rendered in a WebView? The DOM hasn't changed, so you can't pick out an element and render it. What am I missing?