I want to implement a coding playground. At the moment, I use flex-box to define the position of different panels. Here is a JSBin, and its html part:
<div class="flex-box">
<div class="col" id="html-panel">
<p>html</p>
</div>
<div class="handle">
<div class="handle-inner"></div>
</div>
<div class="col" id="css-panel">
<p>css</p>
</div>
<div class="handle">
<div class="handle-inner"></div>
</div>
<div class="col" id="js-panel">
<p>javascript</p>
</div>
</div>
(to make it a playground, I add textarea inside each panel (e.g., html-textarea in html-panel), and combine the content of the 3 textareas to return an output. The playground reacts to every change to the content in textareas: I choose to use an AngularJS controller to do so, rather than JQuery event handlers.)
Now, I am wondering how to realise different layouts without repeating too much code. Like Liveweave proposing 4 layouts (see right bottom corner) to users, I want to propose displaying for example
horizontally the 3 panels as what looks like at the moment
vertically the 3 panels
1 on the left and 2 on the right
2 on the left and 1 on the right
So what's the best approach/structure/tool to implement this?
To share maximum, should we realise this with 1 common .html, 1 common .js and 4 .css files? Then, we just need to choose different .css file for different layouts?
Based on some research, this certainly can be done by nested views / UI-Router / AngularUI / Angular JS. And we will be able to define one html file per layout.
But I will first go for what #DCR suggested: by only JS and CSS. Because it is simpler, also because JS allows us to inject html, e.g., by innerHTML. Therefore, I could inject 4 html strings for 4 layouts. Inside the 4 html strings, there could be same class names, which enable some sharing of styling in CSS and functions (eg, splitter-dragging) in JS.
Related
I originally designed the whole website (single page) responsive, readapting simply using css and some inline classes from bootstrap 4.
Now i found myself in need of redesigning the whole desktop version (or let's say with a very different structure from how it currently looks on mobile).
So I'd like to keep the html i have and keep using it for mobile, and modify a copy of it and use it for desktop.
The easiest way i thought has been to keep a single index.html file as now, duplicate the whole index.html inner part (between the div with class="page", which basically comes right after body) and set one of them to class="page d-none d-lg-block" and the other one class="page d-block d-lg-none" , using bs4 classes to show/hide content based on screen size.
I have various inline js functions and other functions in js files which refer to ids, so my feel is that creates errors because js see same ids twice or some stuff appears as the page load (due to the bs4 inline class to show the content), but just to be sure does anyone know if this is a correct thing to do (also SEO wise)? Or will it mess with the javascript doing so?
Make an existing page to become responsive is not an easy thing, but its much more worth than using a workaround to hide in small and hide in large breakpoint.
The reason is because:
You will have redundant component, means your app size will be doubled after you make it responsive,
and if you use static content without database, you need to maintain the content in two place (small and large breakpoint).
Spend more time on learning grid layout, and implement it in the right way. It will become much more easier for you to maintain your web app in the future.
I am developing an application using Angular 1.X.
There is a component that is used across three pages.
I have several nested components into a main component. However there are two components that will only show on one page. I am currently ng-if(ing them) and was wondering if this is a bad option.
<!-- Component 1 -->
<div class="wrapper">
<div ng-if="showChildren">
<component2> </component2>
</div>
<!-- more code goes here -->
<div ng-if="showChildren">
<component3> </component3>
</div>
</div>
On the required page I would add in the controller
<component1 showChildren="true"></component1>
The code works, it gives no errors on page or in console.
Even though there might be other solutions for this, is there anything about this that is actually bad design/implementation?
This is mostly a matter of preference, as there's nothing inherently wrong with your solution.
Just a couple suggestions though:
If you are hiding all the children of the div.wrapper, why not apply the ng-show to the wrapper itself?
Since it seems that the value of showChildren won't change, why not use ng-if instead, and simplify the DOM? ng-show still generates the hidden DOM elements and uses styling to hide them, while ng-if will simply not generate them.
Well, I am trying create a web layout that I already have in mind. I have a header where I can create a set of tabs using jqueryUI. This is very easy and I already have it, I will show you a screenshot.
The html is there:
<div id="header"><div id="headerMenu"><!--headermenu is the tabs div --!>
<ul >
<li>edition</li>
<li>export</li>
<li>settings</li>
</ul>
<div id="tabs-edition">
<p>Text</p>
</div>
<div id="tabs-export">
<p>Text</p>
</div>
<div id="tabs-settings">
<p>Text.</p>
</div>
</div></div>
I want that this looks in another way, The tabs pane filling the entire main header (removing the white spacing), remove the rounded corners and customizing the css and color.
I know css enough for this changes, but I have serious dudes if there are a convection, a method, a general way to customize the jquery ui styles, (I suppose that developers in general not use the defaults styles and they have to changes).
Anybody can guide me about this topic?
You could use Themeroller to create specific changes you need and get the css required for it. It would probably be easier than trying to make changes by hand.
Themeroller is a part of the Jquery UI project.
I'm building a tabbed interface for displaying posts from various social networks (timelines) but not all tabs will have the same HTML markup. My factory service is returning JSON response so that part is fine.
Also, a sidebar contains tabs onto which I put ng-click for opening appropriate panes.
Now, I'm wondering if I should proceed with creating a custom directive to reside inside my tab-pane wrapper:
<div class="tab-pane">
<div timeline=""></div>
or
<timeline></timeline>
</div>
If so, I'm unsure whether $compile is the right approach? I've read that it is rarely used but it seems to me that it would allow me to dynamically decide which custom directive template to use, based on the clicked tab.
If there is a better approach to the solution, let me know. I'm really new to AngularJS but I'm eager to learn it, and learn it properly, applying best practices whenever possible.
The easy way might be:
<div class="tab-pane" ng-repeat="tab in tabs" ng-switch="tab.network">
<div ng-switch-when="Network_A">
/* Template for Network A here... */
</div>
<div ng-switch-when="Network_B">
/* Template for Network B here... */
</div>
<div ng-switch-when="Network_C">
/* Template for Network C here... */
</div>
</div>
So, you will need to add a network attribute to the tab objects, which tells what is the type of the social network.
Using directives might be a more efficient solution, but also more complicated.
I have a code blocks that repeat themselvs.
By writing code blocks I meen html, javascript and css that repeats in many pages.
for example:
.filter {
background-color:black;
}
$(document).ready(function(){
$('[name=aaclick]').click(function(){ alert('aa!'); });
});
<div class="filter">
aaa<input type="text" />
<a name="aaclick">click</a>
</div>
Can I combine those 3 parts of single unit together?
How can I prevent myself from writing this code again and again in different pages?
Can I combine those 3 parts of single unit together?
You can make them closer to each other (reduce number of parts to 2, at least), but I wouldn't recommend that. Styles should stay with styles, javascript with javascript and html with html.
How can I prevent myself from writing this code again and again in different pages?
1. Put this style definition in a common css file, included in every page. Do not repeat.
2. Put this javascript code in a common js file, included in every page. Do not repeat.
3. You can reduce third part to <div class="filter"></div>, if you generate the rest of the content from javascript. Something like this
$(document).ready(function(){
$('.filter').each(function() {
$(this).append('aaa').append($('<input/>').attr('type', 'text'));
...
$(this).find('input[name=aaclick]').click(...);
})
});
Now, you can put only <div class="filter"></div> in html, the rest will be autogenerated.
You probably need some templating tools.
One way would be to split them into a css, js and html file, named appropriately so you know they are related.
Then use code to add them to your page, using a standard method, thus allowing you to keep the functionality together.
In case of ASP.NET simply build user control, put the whole "repeated" block as-is in the .ascx file then wherever you need it to appear have <UC:MyBlock runat="server" /> and that's it - reliable in 100%, flexible.. really no reason to mess around with client side templates, jQuery plugins and such.