I'm trying to implement a <div> with number of child <div> having dynamic flex value as per the number of child <div>.
Related
Can I use angular js with three sectioning of the web page for make it responsive by making two sections into dropdown buttons
<body>
<section id="main">
<section id="body">
// data in li
</section>
<aside id="side">
//data with links
</aside>
</section>
</body>
The HTML section tag has no built in behaviour, it just denotes a section of the document, normally with its own heading, where other tags such as article or nav are not appropriate e.g.
<section id="my-section">
<h2>Heading for section</h2>
<p>Some content</p>
</section>
See https://developer.mozilla.org/en/docs/Web/HTML/Element/section
The HTML element represents a standalone section of functionality contained within an HTML document, typically with a heading, which doesn't have a more specific semantic element to represent it.
As an example, a navigation menu should be wrapped in a element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a .
So for making a responsive layout, using section over div or any other element does not really have any meaning. You must use CSS (e.g. with media queries) or JavaScript to change the layout (FYI, the default for section is display: block).
I need to parse a large document that has elements arranged as a series of headings followed by a div, something like this:
<h2> Section Title </h2>
<div> Section Content</div>
<h2> Section Title 2</h2>
<div> Section Content2</div>
<h4> Section Title 3</h4>
<div> Section Content 3</div>
So basically in the dom, I need to group together an <h> with the next following <div>. The dom doesn't seem to be an element for the child / sibling / parent functions, and I need to allow for inconsistencies in the input file as well so don't want to do something like find all the h elements, find all the divs, and walk through each list in a loop assuming the elements are the correct matches. Is there any way to get the dom set up so I can walk through it using the child functions, or some other clean means of walking through the dom to do this?
Easiest way I figured out is to access the element 'root'to get to the top of the dom as an element.
From there it is still tricky to figure out how to walk through the sequence of child elements but in this case, search on the divs and prev_sibling() appears to work, if the content is predictable, but my content might be
I have a sortable in which two consecutive elements may be "attached" to each other. When the attach action is performed, I wrap the two "field" elements in a "field-group-container" div in hopes that I would be able to drag both inner "field" elements as a unit.
Oddly enough, this approach works perfectly if I initiate the dragging from the field-group-container's first child (of two children), however, if I initiate the dragging from the second child, the field gets pulled out of the field-group-container. I would like the two field elements to move together regardless of which element is clicked to initiate dragging.
I tried making the "items" sortable option more specific to only allow dragging field-group-containers and fields that are not children of a field-group-container but it looks like the click event is cancelled before it bubbles up to the field-group-container.
In order to find out whether this is an issue with the sortable or my implementation of it, I created a boiled down version to see if I could replicate my issue.
<div id="sortable">
<div class="field">A</div>
<div class="field">B</div>
<div class="field-group-container">
<div class="field">C</div>
<div class="field">D</div>
</div>
<div class="field">E</div>
<div class="field">F</div>
<div class="field">G</div>
</div>
http://jsfiddle.net/prsGz/
It works exactly as expected!
This contradicts the behavior I'm observing in my project. In my real
implementation the "field" elements have several inner elements such
as labels, buttons, etc.
My question
Does anyone know what would be causing this behavior?
What could be causing my two field elements to not move as a unit
even though they are both wrapped in a parent container?
I have a view that renders a side bar for a content page. The side bar can be rendered several times on a single page. The page's layout defines several content sections (or, positions, in Kooboo's terminology) which are, in an actual page, bound to specific views. In each such view I need to optionally render a side bar by redering the general-purpose side bar view.
Side bars' content is stored in Kooboos database. I'm using a specific content type which has, for the sake of simplicity, the following two fields:
Position — the ID of the position in the page, which matches an ID of a position defined in the layout
Content — an HTML fragment that constitute's the side bar's actual content
The side bar view's logic should be as follows: from all side bar data bound to the current page select a single item with a Position matching a position passed from the outer view as an argument, and, if found, render it. The problem is, I can't figure out a way to pass arguments into a view
Sample layout fragment:
<!-- Header section -->
<section>
<div class="section-content">
#Html.FrontHtml().Position("Header")
#Html.FrontHtml().Position("HeaderSectionContent")
</div>
</section>
<!-- Main section -->
<section class="even">
<div class="section-content">
#Html.FrontHtml().Position("MainSectionContent")
</div>
</section>
Sample view bound to the Header position:
<div class="header-container">
<h1 class="page-title" #ViewHelper.Edit(ViewBag.Solution, "Title")>
#ViewBag.Solution.Title
</h1>
<!-- How to pass "Header" string as an argument into the Controls.Sidebar view? -->
#Html.FrontHtml().RenderView("Controls.Sidebar",ViewData)
<h2 #ViewHelper.Edit(ViewBag.Solution, "Perex")>
#Html.Raw(ViewBag.Solution.Perex)
</h2>
</div>
The intended general purpose side bar view Controls.Sidebar:
#if (ViewBag.Sidebars != null)
{
// How to retrieve an argument and select the matching side bar data?
var sidebar = ViewBag.Sidebars ... ;
if (sidebar != null)
{
<div class="side-bar">
<h3>#item.Title</h3>
#Html.Raw(item.Content)
</div>
}
}
At the end of the day I need to be able to render this view several times, and conditionally render several side bars in respect to data availability.
I was looking into the Parameters definitions available in the view editor, but it seems this provides access to query string parameters, which is not a mechanism I could (would like to) leverage. Kooboo documentation is lacking any information related to this topic.
There are at least two ways to pass some parameters from one view into another in Kooboo:
First you can store your parameter value in the parent view like this:
Context.Items["ParameterName"]=value;
or like this:
var customViewData = new ViewDataDictionary();
customViewData.Add("ParameterName", value);
Then you can call rendering of a child view:
#Html.FrontHtml().RenderView("ChildViewName", ViewData) //a default ViewData passed
or as following, respectively:
#Html.FrontHtml().RenderView("ChildViewName", customViewData)
On the receiving side in ChildViewName you simply fetch the parameter value either thus:
var value = Context.Items["ParameterName"];
or thus, respectively:
var value = ViewData["ParameterName"]; // NB: don't forget to cast parameter to a proper data-type, because ViewData is not processed same smoothly as ViewBag would.
Both ways work just fine for this purpose.
In my we page i am dynamically changing the top value for a div's style ie.
<div id="div1" style="top:89;">Test </div>
What i need is to capture the event using Jquery while top value is changed to 88 or 90?
There is no event that is generated when you change the style of an element, so this is impossible.
If you change the style of the element yourself using jQuery, you can of course generate some event there.