I've created a html page which consists of a div section in the body tag.
How do I change the contents of inner divs based on an event in another in vb.net winform(eg: when a button is pressed)?
<div id="magazine">
<div style="background-image:url(pages/01.jpg);"></div>
<div style="background-image:url(pages/02.jpg);"></div>
<div style="background-image:url(pages/03.jpg);"></div>
<div style="background-image:url(pages/04.jpg);"></div>
<div style="background-image:url(pages/05.jpg);"></div>
<div style="background-image:url(pages/06.jpg);"></div>
<div style="background-image:url(pages/07.jpg);"></div>
<div style="background-image:url(pages/08.jpg);"></div>
</div>
Give each of the DIVs an ID and runat="server" attribute. You should then be able to reference each one from server side code.
Related
I want to use one layout file in DNN for three pages. Each of the page has unique style(css). And most of the divs/section in those pages use class instead of id.
Problem:
In some cases the classes are applied to parent divs/section and their child are made editable. eg:
<div class="special-row">
<div id="div1" class="special-col" runat="server"/>
<div id="div2" class="special-col" runat="server"/>
</div>
As you can see there are containers inside special-row. Now say I have another page using the same layout and I need to add anothe class besides special-row, how should i do that. If i create another div eg:,
<div class="special-row">
<div id="div1" class="special-col" runat="server"/>
<div id="div2" class="special-col" runat="server"/>
</div>
<div class="special-row very-special-row">
<div id="div1" class="special-col" runat="server"/>
<div id="div2" class="special-col" runat="server"/>
</div>
I am hardcoding the layout, which is not how a template/layout should be used originally. Since i cannot add css class (and dont want to), the only way that i can think of is, create css file for each page, copy the code of all required class(s) and paste it inside an id selector eg:
Page1:
<div id="specialDiv" class="special-row">
<div id="div1" class="special-col" runat="server"/>
<div id="div2" class="special-col" runat="server"/>
</div>
page1.css:
#specialDiv{
// code of special-row
}
Page2:
<div id="specialDiv" class="special-row very-special-row">
<div id="div1" class="special-col" runat="server"/>
<div id="div2" class="special-col" runat="server"/>
</div>
page2.css:
#specialDiv{
// code of special-row
// code of very-special-row
}
Also note, i cannot make special-row a dnn container.
Is there a way such that I can apply css to parent div/section ?
You can use a css file specific to the page. You can specify a page css files under page settings for each page.
Use skin.css (in your skin folder) for styles that apply to any page using that skin.
You can use css files for containers, with special containers getting special css files.
And, as mentioned above, you can apply a special css file to each page.
I have this:
<div class="block3">
<div class="surround">
<div class="s_title">
<h3>Title</h3>
</div>
<div class="block_content">
<div class="content"> </div>
</div>
</div>
</div>
In my example I can't add content directly in HTML (blocks rendered by default in PHP), so I need to add in CSS.
The hard part of this is that I need to add text only in block3 element, after <h3> (.s_title:after will affect all s_title, so it will not work for me.)
Is there any way to do this?
Just add .block3 in front of your selector like how you would limit selection of any other element to some container element:
.block3 .s_title:after
Here is my fiddle:
http://jsfiddle.net/XKs8H/1/
And here's my problem:
I'm creating a wiki using MediaWiki. I'm trying to avoid using a lot of extensions and third-party stuff in my installation.
What I'm using is a MediaWiki Template to generate the content shown in my example. Because it's a template, it renders once for every time it's called. So, for each character in the example, the template first creates a left-floating DIV for the name tab and a DIV below that for the content of the character's bio. I can make that part work with absolute positioning, but then the rest of the wiki page content shows up below the absolute div.
Example:
<div id="tab1">Tab 1</div>
<div id="bio1">Tab 1's bio</div>
<div id="tab2">Tab 2</div>
<div id="bio2">Tab 2's bio</div>
<div id="pagebody">Rest of the page's content</div>
Each tab should float next to each other. The bio should show up below the row of tab divs, and pagebody should show up below everything.
I'd recommend something like this:
<div class="tab">
<div class="tab-name">Tab 1</div>
<div class="bio">Tab 1's bio</div>
</div>
<div class="tab">
<div class="tab-name">Tab 2</div>
<div class="bio">Tab 2's bio</div>
</div>
<div class="clearfix">Rest of the page's content</div>
Where the tabs themselves are floating, and clearfix is the common float-clearing page body.
For some reason div elements change their parents during rendering in unexpected way, reproducible in Firefox and Chrome.
E.g.
<div class="main">
<div class="slot"/>
<div class="slot"/>
</div>
<div class="footer"></div>
Firefox debugger will show as this at runtime as:
<div class="main">
<div class="slot"><div class="slot"/></div></div>
<div class="footer"></div>
</div>
When I remove .slot elements(see the code attached), everything renders as expected(#footer place in tree after rendering is same as in the source).
Code:
http://pastebin.com/3j3aQFdh
The problem is that you use empty divs: like that
<div />
You should try to change your code to use valid divs with empty content:
<div></div>
I am using JQGrid within an ASP .NET MVC application. The grid itself is working great. However, the header height of the grid (or first grid on the page) is growing to match the height of my left navigation menu. Here is most of the Site.Master layout that I have. I just don't see why this is happening.
<div class="page">
<div>
<div id="left">
<div id="leftnavmenu">
<%= Html.MvcSiteMap().Menu("MvcSiteMapProvider", "activenav")%>
</div>
<div id="leftnav-msg">
Message goes here
</div>
</div>
<div id="main">
<div id="mainsitename">
<div id="mainsitenameimage"></div>
<div id="mainsitename1">Intake Tool</div>
</div>
<div id="mainpagetitle">
<%--<%=Html.MvcSiteMap().SiteMapPath(" > ") %>--%>
<asp:ContentPlaceHolder ID="PageTitle" runat="server" />
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="maintabledata">
<asp:ContentPlaceHolder ID="TableContent" runat="server" />
</div>
<div id="footer"></div>
</div>
</div>
</div>
I assume that #left has a float:left style, while #main does not. This appears to be a bug with jqGrid. There's another post that deals with the exact same issue.
I have actually created a jsFiddle example that illustrates the problem.
In the other post Oleg suggests that you use float:left on both side-by-side <div>s, with another div with clear:both after them. This would not work in my case, because I want the right div to expand to the whole remaining width of the browser window. Floated <div>s must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated <div> to something small (1px) and set an explicit height for the content of that div. This is illustrated in the jsFiddle above.