I have 3 div's images are below. They pull the entire column and display it. I need it to only display say 255 characters. And then I have a Read More link where they can click to go to the full article.
You see how the box on the left has the Read More I would like all 3 boxes to display part of the content and then have the read more link. The only reason the first box works is because the content is super small to begin with.
The site is HTML5 with CSS and some CSS3.
The information is being pulled in from Entity/LINQ I assume I will need to limit the content there?
Here is one example:
db.TPGForums.Where(m => m.boardID == 11)
.SelectMany(m => m.TPGForumTopics)
.SelectMany(m => m.TPGForumPosts)
.OrderByDescending(p => p.dateCreated)
.FirstOrDefault();
Everything is wrapped in a <div class="news-block">content</div>
How can I achieve this?
EDIT:
Another issue that may cause problems is the content being pulled in is HTML Decoded. So only pulling part of it may cause some HTML Errors on the page with the possibility of some things not being closed properly. So I think my only option now is to limit it through the size of the div and hide the over flow.
You would need to limit the content where it is being pulled in. Alternatively you could set a max height with overflow hidden and use some sort of a gradient to keep the bottom edge from looking janky. Or you could use text-overflow: ellipsis.
Related
Will I have to face any problem if i have large number of hidden divs in my page ??
i mean that in my page there is a loop which contains some hidden divs and some buttons which when clicked shows one of the hidden div...
i just want to ask that will i have to face any problem with these hidden div..
the code here is just an example ....
any help will be appreciated..
thanks in advance
<?php
for ( $a = 1; $a < 10; $a++ ) {
<div style='display:none'>
content goes here....
</div>
}
?>
I have many pages with over half a million divs that work fine. Probably the most important thing with many hidden divs is that you enclose the hidden divs within another element which is of fixed layout. If you have a massive amount of html and a fluid layout and you change the visibility of an element, the browser must calculate all the layout again which can be slow and give the user poor responsiveness.
No problem! but It will be indexed but can be frowned upon by Google if you are hiding/showing content for SEO reasons. In other words, what Google sees should be what the user sees when clicking the link.
No problem! But if you are having more and more your websites load will be heavy. That might cause slower performance and perhaps hangs up. It would take loading time too..
That depends on what you try to do.
If you fill your hidden divs with images and other heavy stuff, it all will be loaded immediately with page and may slow things down. Also, browsers would still take time for parsing everything you hid (but that is actually not much time).
So, if you are talking about like 1000x1000 grid of buttons or something like that (for making kind of a game maybe), it will result in sad performance.
If you are talking about dynamic loading of a lot of heavy content, like a whole facebook timeline, it won't work well neither.
But if you just want to show users some blocks, which would work okay if you didn't hide it at all, you will have no problems.
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");
I'm currently developing out a blog page with a 3 X 3 grid layout for content to fall into the different boxes (see attached example).
http://imageshack.us/photo/my-images/337/cssex.jpg/
The content blocks in the lighter gray are meant to be stationary, so any updated, recently added, etc. content will not affect these boxes, only the black ones. I'm trying to figure out the best approach with keeping the gray boxes stationary, but allowing the black boxes to be populated dynamically (WordPress blog entries) and floating naturally through the layout.
As of now, I'm thinking that each individual black box will query the recent post that aligns to it. So, the first black box would query the most recent post, the second black box would query the second recent post and so on.
A big order!
Here is the general idea to help get you going:
You need to make those blocks a <div> or <section> with an ID tag like this:
<section id=brief1>
(BTW, you can also use a "table" & merge cells to get that layout, just ensure you use an ID)
Then you need find a script to update the innerHTML using straight JavaScript, or a JS library like jQuery, MooTools, etc. This will allow you to inject text &/or an image inside those boxes. Example search: http://duckduckgo.com/?q=javascript+update+innerHTML+div
Once you have 1 spot updated with text, it is time to edit that script. Make an array of our ID tags, then loop though all of them to insert new content one at a time.
Good luck! If I see something pre-rolled on my travels, I'll update this thread.
I'm trying to re-make an existing ASP.Net page which generates labels. The original uses hideous tables-within tables-within tables to force a layout, and as our order quantity has increased it's now got to the point where it's spitting out 65k lines of HTML assuming it doesn't time out first.
I've replaced it with an unordered list for my list of lables, with each list item floated, and the on-screen layout is now perfect. For print, it's 4 labels per page, one in each corner.
However, at least in IE-land, go to print preview and it goes back to being a vertical list.
Any thoughts?
make sure you are using a float:... in your css of li class it will fix it :)
Let me know if that helps
Changed from UL/LI elements to the ubiquitous DIV, and placed every set of 4 inside a container which did the job. Still none the wiser about why FireFox, Chrome and IE all ignored float:left in print though, but it's working now.
I'm new on this particular project, and I've been tasked with resolving an issue that's appearing in IE8.
If you check http://funds.ft.com/ETFHomepage.aspx, There's a section called "News". In that section, there's a column called "Most Popular ETFs". This should be the same width as the "Recently Viewed ETFs" column.
For reference, this page is appearing correctly in Firefox. Can somebody please point out what I can do with CSS or (some other means)* to resolve this?
*I know the best way to resolve this issue is to scrap the terrible design and implement it correctly!! :-) -- we're actually doing that right now. It's a big job, so it's taking a long time. In the mean time however, we have to fix the bugs as they appear. Thanks
Update: just to note what I've said to Hristo, "I think the problem is with the table (rather, nested tables) on the left. The table in the center has its width defined by the image, and the table on the right doesn't have an image so it gets crushed"
Well the reason this is happening is because of the url you have under the "Alphaville: Overcoming the Volcker rule, with ETFs" header. Since the url has no whitespace in it, the table tries to give it space. So there are a couple of ways to fix this problem:
Plain text urls aren't very becoming on a webpage (especially when they're not in anchor tags so you can click on them.) Could you update the content so that you don't have a raw url in your content?
If you must be able to handle long lines of text with no whitespace then you need to figure out how to change the layout of the page so it forces the text to either wrap or clip to fit the container. Try playing around with putting "table-layout: fixed" on your tables to force the column widths to be sized based on the table's specifications only (instead of content). Firefox seems to be wrapping on dashes and slashes in the url whereas IE only wants to wrap on the dashes in the url.
I would say your layout is fine, and you just need to fix the content generation so it doesn't include any long plain text urls (option 1 above)
EDIT: If you do decide to go with option 2 above, then look into the css rule "word-break: break-all". It is IE only and it forces the text to break as soon as it reaches the end of the container. Not good for words, but it works for url's. So you couldn't apply this to the whole news table, but you could to just the cell that contains the url.