I'm working on a CMS system where the user has the ability to select between a number of different templates for their site. When they select from the list of templates on the left I want the middle of the page to show the preview of the template and the right side to show a property inspector for manipulating things like colors, font sizes, sections, etc. Clicking on an element inside the preview changes what is focused and thus changes the property inspector.
The big challenge is that the templates are designed by 3rd party designers and the CSS is designed with the expectation that there is no other CSS (like the CSS for the CMS). I might force them to restrict everything their design to work on any page and to always have a top level DIV that I can just inject into the page.
I could IFRAME it but that is not ideal because DOM manipulation becomes more complicated.
Ultimately I have full control over the template structure and how they are made but I'd like to keep it as simple as possible for designers.
What's the best way to go about structuring this kind of setup?
Given the requirements of no iframe (which would be the right way), I see 2 solutions:
Put the template in a div with a certain class/id and preprocess the CSS to prefix every selector with that class.
Use the Shadow DOM, but then you would only target Chrome.
Related
I want to add a split menu to a Typo3 site that shall also be responsive for mobile screens.
So far I have solved it with two separate menus using lib.mainMenu.special.value = x,y,z on both sides (left and right). The problem is how to merge the two menus to one in responsive mobile viewport.
All pages are at the same level in the tree (but this is not a must).
Any ideas, solutions, scripts or tutorials?
Depending on your framework you either have already some mechanism for changes of menu-display or you need to create your own.
Frameworks like bootstrap already use javascript to dublicate your menu into a hidden one for displaying it in the 'burger-menu' on small screens.
You can do the same: render the menu in the complexest view and rebuild other variants with javascript.
pro: smaller html, faster server-response.
con: work to do in the client, additional JS.
You also can build all versions in TYPO3 and render them and only CSS decides what to display in current screen resolution.
pro: complexer or more different markup for different versions are easier to handle, no DOM-changes at the client
con: more rendering time, bigger HTML
it depends on the complexity of the design:
is the menu splitted inside the HTML?
how much differ the splitted and joined version for each entry?
There are several approaches that could help
The oldest (and outdated IMO) is yaml css. There you could use the layout to (re)sort columns.
A nice approach I just used for a project is flexbox-layout, there you can resort, and restructure almost independent from HTML-structure. One source for explanations is css-tricks.com
another possibility is using css grid layout, you can read about it on css-tricks.com too.
with Javascript and the DOM-model you can do almost everything, you can manipulate whatever you want, it's just a matter if you like the menu determined by JS, i.e. for accessible-aspects I avoid it usually, at least on that level you like to reach.
another option is to restructure the menu, i.e adding already the 2nd menu to the first one, but using breakpoints to show it or hide it (and the 2nd menu in the right sidebar).
my preference is to create the menu(s) that only display has to be change depending on the device, but nothing has to be hidden or created double, just the styling is changing based on breakpoints.
I have solved it by hiding the menu items I want on the right side and wrapped every item with either "hide0" or "hide1" with
NO.wrapItemAndSub = <li class="hide{field:nav_hide}">|</li>
NO.wrapItemAndSub.insertData = 1
doNotLinkIt.field = nav_hide
JavaScript and CSS does the rest. Now I can display non-hidden elements in the left menu, hidden ones in the right menu and the responsive menu displays all. Thanks for the help.
I am working on a CMS project where users can drag and drop different components(such as button, div, etc) from components menu on canvas area. Once they are happy about their layout then they click on button finish. What I want is when finish button is clicked then in popup they should see html and its appropriate CSS code.
How can I parse through those components and generate html, css and Javascript if necessary?
Are there any solutions available? I could not find any after googling.
maybe this approach is different but.
can you use of svg element? because with svg you can get positions for every element and then use for whatever you want (like get positions for example).
here some useful tutorials:
http://www.tutorialspoint.com/html5/html5_svg.htm
http://www.w3schools.com/html/html5_svg.asp (for some reason some people don't like this site)
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.
I'm working on a browser script that scans a page for keywords, highlights them, and when the user hovers over them - creates a tooltip that gets filled using AJAX and PHP. The only problem I've run into is that the CSS of the website the tooltips are displayed on is interfering with the CSS of the tooltip content.
The tooltip uses an <img>, <p> and <table> with <tr> and <td>. My PHP file echoes these elements back with ID's which I have styled in my CSS file. My CSS displays properly on some sites like Wikipedia, but others mess up the padding/margins/alignment. For example, certain websites may align <td> center, while I would like it aligned left. I have already added "!important" to many of the ID's used.
Question: How do I keep a website's CSS from interfering with the styles of my tooltip?
One thing you could do is to use a id for your tooltip container.
You just need to keep in mind that id have to be unique. So you must not have two tooltips on your page.
<div id="my-tooltip-2986234">
the content of the tooltip
</div>
Then for your css file your create something like this:
#my-tooltip-2986234 * {
/*reset all style properties here (you can take this of a css reset script)*/
}
Because id a have a higher weight then rules without an id this should overwrite all stylings of the foreign page inside of your tooltip container.
You will also need to prefix all your rules for the tooltip with that id.
#my-tooltip-2986234 a {
/*style for your a*/
}
You indeed could still have problems with !important rules of the foreign site. But creating your styling code that way would minimize the conflicts. Your can still think of adding !important rules to your rules. But at least for the things I created prefixing the rules with an id was sufficient.
Another solution - but not as elegant as the one above - is to create an iframe container where you write your content to. That way you would have complete sandboxing of your css rules. But because I didn't use iframe for a long time I don't know right now where the pitfalls in the various browsers are (You need to create an iframe without a src, because of cross domain policies, which used to cause problems in some browsers).
Does anyone know a javascript WYSIWYG (free or paid) that allows for absolute positioning of text and images inside of it?
Hotglue is free, OpenSource, and allows complete absolute positioning, it can create entire pages, has support for multiple users, and stores HTML docs in flat-files and uses AJAX to keep the pages saved while editing, it even has a history and you can compare/restore previous versions.
http://hotglue.org/
I replaced the icon pictures though, as they aren't very similar to current designs out there, and you can disable things you don't need like embedding videos/etc.