We do use CKEditor in a SaaS system that is meant to produce Presentation material (think Powerpoint but on the Web, basically). We actually produce "slides" with a CKEditor.
A slide has a definite height in our specific case. The height will not be dynamic, we know beforehand how high (in pixel) an article typed into CKEditor will need to be before being cut off in the Presentation.
Problem: we want a sort of live display, like a red line or something alike, that shows when the page is going to break; so that the user typing into CKEditor gets a feeling of when the breaks are going to come (I an not talking about putting the breaks in there manually, just having a display of when breaks naturally occur).
How should we tackle the problem with CKEditor ?
Let's say that your slide height must be 500px.
Create an empty transparent PNG image with width 1px and height 500px. Make the last 2-3 pixels red. This will indicate the page break.
Then, find contents.css inside your CKEditor folder and modify the .cke_editable section to include background-image: url('page_break_indicator.png'); which will add the image as a background that will be repeated both horizontally and vertically.
But beware that when a user creates 3 or more slides and then modifies a slide that's not the last, all other slides that come after it must be checked according to their page breaks.
Related
We used to have a silverlight page that used canvas to scale the page, this resulted in a page that would always be the size of the window it was on, making the whole page smaller if the window was smaller (it does preserve aspect ratio), as if the page was a single png but it isn't, it has dynamic elements. Also when one tries to zoom in or out, it does nothing, it just makes a scroll appear to the right and bottom without affecting the page.
We are migrating the page to HTML 5 with CSS, and we haven't been able to replicate this behavior. It is a page that has 10 small tables and each has 10 "messages" that can appear. When zooming in stuff starts to overlap in addition to change size, when resizing the window,stuff overlaps too but without changing size. Most of the positions are absolute but have % in their position onscreen. However we don't want it to be responsive, we want the behavior of the silverlight version. At least that's what the bosses want.
We have been researching how to do this but so far haven't really found a good solution, especially with messing the zoom functionality of browsers. most pages/forums say this shouldn't be done.
Edit:
For now I have added a bunch of max-width and max-height in the html style and body style, as well as added a media query for switching % left to px left for an absolutely positioned group of objects. However this is by no means whay I seek to accomplish. We need the whole page to behave like an bgimage, scaling every element with the size of the window.
I'm looking for directions rather than any specific code (wich I wouldn't spit on neither ;))
I have to code a portfolio for a friend, something like the first following picture (Sorry I only had Paint on the computer I'm asking with) :
The images should either be disposed and able to stay proportional whatever the screen size is or get arranged based on the screen size. So that the screen is always full and no need to scroll in any direction.
Then, as on the second picture of the linked album...
When clicking on a picture on the start screen, I'd like to open the screen in half and display the rest of the project. The rectangle you see up the second screen is supposed to be the same as in the center of the first one, supposed again to be the name of the portfolio. Of course I should be able to close it to get back to the page showcasing all the projects.
The effect I'm looking for is something similar to the about section here, but the other way :
http://www.b--i--g.com/about/
To sum up,
How to dynamically layout images full screen(s).
How to split in half the main screen and display other things in it.
I'm guessing here there is some keys javascripts doing all the magic so, again, any leads on wich scripts to use you know of or wich html/css structure is the best suited to do that kind of things.
I just don't have, this time, the time to start over multiples times (again) and scratch all over my code trying to make a victorian chimney blow white steam.
can you create a http://jsfiddle.net/ or http://plnkr.co/ to start with.
if you have an example webpage then you can just look at its source.
To sum up,
How to dynamically layout images full screen(s). - not clear what that means but, absolute positioning + javascript
How to split in half the main screen and display other things in it. - there are many ways to achieve that effect. in the link you sent, they are being overlapped by the middle content. image is rendered twice on either side and the middle content right half and left half of left and right image respectively.
please post a plunker to have other help you without creating the page from scratch.
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
There is a link at the bottom. Pretty much what happens, is when the page gets opened, it loads entirely on the right side of the screen. Then when it finishes loading every single element, it moves to the center which is it's actual position.
I believe the problem is caused by javascript, since the site works perfectly fine without it. It doesn't seem to matter what javascript is included, if I leave just 1 of them, the whole thing comes back.
Could really use the help. Also the site right now is about 500 pages big, so I'm really hoping for a solution which can fix this with just a few steps.
Thanks.
Here is the link to the page so you can get css/code: http://bit.ly/3EyoWu
Its definitely javascript. I think the banners on your site are loaded at the very end, which leaves the browser making incorrect guesses about the dimensions of the content until the page is loaded.
Try enclosing your javascript code inside fixed width (and height) divs or tables. You can easily determine the width (and height) required by javascript generated code by inspecting your page after its loaded. If its the banners, they are almost always predefined size.
Edit 1 ----
I got it. The specified cell widths for your table are narrower, the browser therefore is unable to calculate the page layout until the page is rendered completely. A column with width 110px has a banner having width = 120px.
Edit 2 ----
Try specifying widths for all-but-one column. That is, if you have three columns in the suspect table, specify the width for two, and let the browser decide the width for the third. Furthermore, the banners seem to occupy a width of 125px instead of 120px, probably because of unnecessary white space around them. I suggest that you revise the column widths appropriately (and parent table's width if necessary).
This might almost qualify as a 'flash of unstyled content' (FOUC) except that the browser doesn't first render a page in an unstyled format.
Instead, you see styled content before the Javascript is able to add the finishing touches.
You might get some further hints by searching for 'flash of unstyled content'.
I'm in the midst writing a Lessig-Method slideware object in javascript (so something fun, not important), and I keep encountering strange text layout anomalies, the likes of which I can't say I've ever seen. And yet, they are pervasive across my slides.
The background is straight-forward. Presentation has Slides, and Slides have Lines. A line, could be a word or a phrase, and in the images I'm linking, the slides have three Lines.
The presentation "screen" is the viewport of the browser window. The CSS line-height property of each Line is calculated by the viewport height divided by the number of lines. Each Line is a div with a font-size comfortably below the line-height (90%, but set in px).
A good looking slide looks like the first one on this page:
bbby.org/share/so_pics.html
(I can add only one link).
Here's where it gets weird:
Because everything calculates based on the viewport size, having the firebug console up, or switching to full-screen mode adjusts everything's size (upon refresh). In some cases, the first one to three letters of a word pushes all the way to the left of the screen, stacking on top of each other. The only thing different is that I went fullscreen and refreshed (and new sizes were calc'd).
Depending on the font-size modifier I set (90%, 80%, but again set in px), it could happen on a regular view (not full screen).
Has anyone ever seen anything like this before?
Funny that there are badges for trolling. I'd hate to see this site become the new youtube or failblog in our comments are issued.
That aside, the effect is controllable (though still not explained). By fine tuning the fontSize via script, I can see at what point certain letters in words fall apart.
For example, in a div with lineHeight=269 , the letters "ri" from the word "right" fly away as pictured in the original post with a fontSize >= 209 , but nothing under. The letter "l" in the word "left" has a higher number, possibly increased because "f" is also a tall letter.
For a currently consistent workaround to this very real and troubling problem (tyvm), I'm setting the fontSize attribute to be 73% of the lineHeight on the parent container.