I'm working on a website that would allows users to post advertisements - they are displayed as a table of post-it notes on the board. I'm generating them using JSP's c:forEach tag (advertisements are stored in XML file) - every advertisement is a cell of a table. I added a functionality that allows to see full content of the advertisement after clicking on it (I also change the size of advertisement's div). And here is my question - I would like the bigger versions of advertisements (after clicking on them) to overlap with other advertisements located nearby, instead of moving them along. Is something like that even possible?
PS: Sorry for my English, I hope you understand what I want to achieve.
Or maybe I will change my question - I would like to display full version of the advertisement in new window, but I don't know how to forward a whole bean to the JSP page (the one which I want to open in new window). I will be very grateful for any advice.
Yes, you can have a different css class for an expanded view, then put a div within the table cell, and when the advertisement is displayed, you can set "overflow: visible" for the td to see its contents in full size.
See this link for overflow property
Related
(Sorry in advance for the long post)
I'm trying to help an open source CMS project called N2 CMS modernize its drag & drop toolbox. I'm not sure what the best way to do this is, but I basically want to take a floating menu and "dock" it against the left side of a web page, such that the entire body of the page is shrunk in width. However, the functionality of this panel depends on the user's ability to drag something out of the panel and drop it onto the page.
This is what it looks like currently. There is an outer "management" page wrapper (the blue bar that is visible at the top) and an inner iframe which wraps the content page being edited. The drag & drop panel is a floating div that is rendered by including some code in the content page akin to #{ RenderToolbox(); } (it basically just writes the div + some inline CSS out to the page)
This is what I'd like it to look like, ideally. You can see how the toolbox now has the whole left column (so the page isn't obstructed) and the whole width of the page has shrunk.
Is it possible to accomplish this by injecting a <div> into the page? Maybe some kind of jquery that can re-parent the whole body inside of a <div> container? Is this even the best way of going about this sort of thing?
I guess something like this would be possible:
jQuery(function(){
$('body').wrapInner('<div class="wrap" />')
})
However, we are worried that it might be hard to make this look good on all layouts, e.g. layouts that use absolute positioning or html/body margins.
Therefore, we are turning to the larger Stack Overflow community for any advice and thoughts on this problem. Your guidance is much appreciated!
So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.
I have a div area (for main slider. But there will not be sliding inside).
And under this div area there is a tab system.
In these tabs there are 1-6 images (In each tab there are another images (1 to 6 images)
When I click one of these images I want to show the related content / photo etc in this Div area above.
How can I do that? Any example? Any clue?
I tried to use jquery for show/hide, toggle etc but for example I couldnt find how to keep those big divs unvisible within my html (I tried css "display:none;" but that didn't seem to me wise enough) and call them in its place (above of the tab system)
P.S: when an image is shown the others must be hidden.
Here you are demyr obviously you will have to modify to your exact needs:
http://jsfiddle.net/S4LGr/1/
It is no problem here is the updated code, edit as you need you should really be able to take it from here:
http://jsfiddle.net/S4LGr/3/
I changed the images on this one so you can actuall see it happen, very similiar to ford.ca:
http://jsfiddle.net/S4LGr/5/
Here you go man all the pieces brought together:
http://jsfiddle.net/S4LGr/9/
totallyFeelLikeIdidYourHomeWork lol you owe me a beer!
you can bind a function on all images/text that loads the relevant images/text to the detail div. Like this fiddle: http://jsfiddle.net/9jc46/
I'm trying to build a word processor web app, similar to Google Docs. I've started using Mercury Editor (which relies on the contentEditable attribute) and I've created an editable div element that looks like a paper page (as Google Docs does).
Now the big problem is how to deal with several pages, i.e., how to detect when text (or other content) overflows the page height and then create a new page with the content split. There are a few scenarios when this could ocurr:
A user type a break line at the end of the page. A new page should be created.
A user is typing a word and he reaches the end of the page. A new page should be created and that word should be moved to the new page.
A user pastes some large text and it doesn't fit totally on the current page. A new page should be created and only the text that doesn't fit should be moved to the new one.
A user inserts any other element (an image for instance), that doesn't fit in the current page. A new page should be created with that element.
I've tried to dive into the Google Docs JS code but it's pretty impossible to follow, since it's compressed. There is a standalone version of Google Docs, with the code beautified, however it's old and doesn't handle several pages.
Any hint about how to accomplish this will be appreciated.
If your container have a fixed size you can use the overflow event to detect it.
window.addEventListener ("overflow", yourFunction, false);
Basically you'd want two divs, like this
<div id='pageWrapper'>
<div id='page' style='max-height: 600px; overflow: hidden;'>
</div>
</div>
All #pageWrapper does is sit there and look like a page, all the content that someone adds is added to the #page. Everytime someone adds content, whether through pasting or typing check #page's scrollHeight versus it's offsetHeight. If the scrollHeight is bigger you've overflowed the page, and you can start moving content (word by word, or element by element) to the next page until the scrollHeight is equal to the offsetHeight again.
If the user inserts a page break, just set #page's height to wherever the page break is, so that anything that comes after that will overflow the page. This will get tricky with large documents, since if someone overflows page 1, content will have to be adjusted until page whatever, but I guess that's why Google Docs doesn't have pages.
I have a real-time HTML editor, with a textarea on the left for code entry, and a 'preview' DIV on the right to contain the preview of the code entered. At the moment, when editing the code in the left pane, the preview just sits where it is, so often the part of the code you're editing is not in the visible area of the preview (especially when images are involved).
My question is how do I make the preview scroll to show the part of the code that's currently being edited?
Here is the page I have so far:
http://www.caerphoto.com/rtedit.html
You'll notice in the source I have a (currently unused) matchPreview() function that tries to match the scroll position of the preview based on the scroll position of the textarea, but obviously if images or large text are involved the two panes no longer match.
Instead of a div from the clone target try using a tag.
let me decompose your task into 2 subtasks:
get informed when the dom changes
you could listen on changes of the dom like onsubtreemodified.
see
en.wikipedia.org/wiki/DOM_events
scroll the element into view
the answer to this is the scrollintoview method:
see
www.quirksmode.org/dom/tests/scrollintoview.html
however, this might not help you too much, since you are updating the whole html document on every change of the textarea. since you cannot get the position of the cursor inside the textarea, this might be not that easy.
sorry mate, at the end I have no solution, but maybe my rumination helps in some way nevertheless.
good luck!
When I tried this in Firefox. no line-breaks were seen in the preview; is this correct? I may be able to help (done something similsr recently), but not if the line breaks are removed...