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>");
Related
I have added a HTMLDelegate to a QTreeView instance I'm tinkering with (see How to make item view render rich (html) text in Qt), so I can present its contents with rather simple rich text (HTML). The hits are presented as
<headerstyle>result type</headerstyle><br>
%d results of this type
where "headerstyle" is either a single tag (say ) or a combination of such tags.
That I'd like is to add underlining to the 1st line that spans the entire width of the QTreeView. Checking existing suggestions on here make it seem doubtful that this will be possible, but maybe I'm overlooking something?
I tried adding <span style="border-bottom: 1px solid"> but no borders are ever drawn. That may be a limitation in the HTMLDelegate, but it probably wouldn't work anyway. does work but only applies to the actual text, not the entire first line. I guess what I'd need is a right-aligning tab character...?
Current actual code: https://github.com/RJVB/audacious-plugins/blob/RJVB-MP-Qt/src/search-tool-qt/search-tool-qt.cc#L166
I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)
Is there any possibility of me hyperlinking a specific part in a html page.
Suppose i have a big image, When i click on the left side i would like to hyperlink it to a partcular image and when i click in the middle to another and on the right. I want to do this without cropping the image into 3 parts.
any idea how this can be done ?
The easiest way would be to use an Image Map.
Yea, it's pretty easy, so it shouldn't take you long. The idea is to create an image map over the image. This way you can specify various coordinates in the map which reflect the coordinates on the image and choose what parts link where. Here are some links to help you out.
Image map: http://www.w3schools.com/tags/tag_map.asp
I've never tried this way: http://www.ehow.com/how_4499356_make-image-map-using-photoshop.html
I usually do it through dreamweaver: http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c13a.html
You can do it by hand the way the first link shows, and get the coordinates in photoshop
If you have it in a background image in your css (I'm assuming you have your content in a div) put your content in a instead and wrap the span in an tag Example: <span>CONTENT</span>
You can do this using anchor tags: First cut the image into 3 parts, then put all the parts next to each other on the page (Use <nobr> tags around them to ensure they don't get out of line). Next put <a name='spot-on-page'></a> Where you want it it jump to, then put <a href='#spot-on-page'><img src='picture1'></a> As the link to that spot. Then repeat the second part with the other 2 images.
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.
I have a div element containing some text. When the user clicks a word inside that div I'd like to highlight just that word.
In order to do this I need to know what character position in the text the click occurred at, so I can then locate nearby whitespace and insert some formatting around the word.
Finding out where the click occurred within the text is the trick here. Is that kind of thing possible?
If your page is auto-generated, you might consider pre-processing the page by putting a <span class = 'word'> around every word in every selectable div. You might be able to this with javascript after the fact, and I think that would be your solution regardless, but pre-processing would make it easier.
The problem with relying on the absolute position of the word is that users can scale their fonts, which makes this task especially hard. By wrapping a span around every individual word, you can easily select which word was clicked by applying the click event to the span elements.