I am wanting to access a div tag from the template and add html underneath that tab for a certain page for my website. So assuming that this was my script
<!-- Page Content -->
<div class="span8 page-content" id="page-content">
<div>
</div>
</div>
<!-- /Page Content -->
<!-- Right Rail -->
<div class="span4 right-rail" id="right-rail">
<div class="first-col">
</div>
<div class="second-col">
</div>
</div>
<!-- /Right Rail -->
is there anyway I could access
<div class="span8 page-content" id="page-content">
from another script and add html underneath it? I need that part of the template to stay the same except for on this page. So the final script would be something akin to
<div class="span8 page-content" id="page-content">
<div>
<div>
</div>
</div
</div>
Use jquery to append HTML to the DOM.
Or
Use Javascript to find the element by id and add to it.
document.getElementByid ect
Related
I have a main layout page with a menu bar on the left displaying links to other pages. I'm trying to include a partial under that menubar on the left ONLY when the user is on a specific page within that layout.
Here is another question that is asking for pretty much the same thing.
The problem with that question is the answers are over five years old, and the outdated <% %> syntax isn't working in my website.
Is there a way to do the same thing while still using the regular #Html.Partial syntax?
In your page layout, where you want to include your side bar:
<div id="header">
</div>
#RenderSection("Sidebar", false)
<div id="content">
#RenderBody()
</div>
<div id="footer">
</div>
false means it is not a required section, so pages that don't need don't need to include it.
now to display the section, simply add it to the bottom of the page that needs it displayed, other pages within the same layout will not display this section:
<h2>This is a page</h2>
#section Sidebar {
<div id="sidebar">
your sidebar....
</div>
}
Your full html will display something like this with a sidebar:
<div id="header">
</div>
<div id="sidebar">
your sidebar....
</div>
<div id="content">
<h2>This is a page</h2>
</div>
<div id="footer">
</div>
and other pages will simply be:
<div id="header">
</div>
<div id="content">
<h2>This is another page</h2>
</div>
<div id="footer">
</div>
Like if I had:
<div class="body">
<div class="logo">
<img...>
</div>
<p>some text</p>
</div>
Could I go...
<div class="body">
<div class="logo">
<img...>
</div class="logo">
<p>some text</p>
</div>
...so that it knows to end the second div and not the first?(this is a light example of what I am trying to do, but I think you get it)
(and if it is possible, a way using just HTML or css)
If your motive is to identify the closing tag effectively means, possibly you can use the comments
<div class="body">
<div class="logo">
<img...>
</div> <!-- logo div closed here -->
<p>some text</p>
</div>
Proper formatted code will help to find the closing tag hierarchy.
Nope.
Closing tags always close the most recently opened matching tag. In your example, it simply works as desired. And the alternative would not be valid markup: tags cannot overlap.
I don't think you can, but great news coming: you don't need to!
The moment you put a </div>, than the closest (going backwards) div (and therefore its class/classes) will close.
Indentation helps understanding how it works:
<div class="first">
<div class="second">
<div class="third"> <!-- Next closing div closes "third" -->
</div> <!-- Next closing div closes "second" -->
</div> <!-- Next closing div closes "first" -->
</div>
Another example:
<div class="first">
<div class="second"> <!-- Next closing div closes closest one, in this case "second" -->
</div>
<div class="third"> <!-- Next closing div closes "third" -->
</div> <!-- Next closing div closes "first" -->
</div>
Notes:
You might want to look into learning how to style element's children, like all the <p> elements in all <div> elements which have the class="cool".
This could avoid the need to close and reopen the same classes multiple times.
This game teaches child selection in a great and visual way: http://flukeout.github.io
Lastly, note that there currently is no parent selector in CSS. What that is (Er.. would be) you'll figure out yourself soon after learning about child selection.
What HTML5 tags best suited to build this mobile web app which needs to runs inside webViews of various smartphone platforms "iOS, Android, Window, ..." ?
The title in the middle of the header will change, The label and number of buttons on the footer will change, the content in the middle will have many data input controls (textfields, radio groups,...) so needs to scroll vertically but with the header and footer fixed. The side navigator shows up at initial start and can slide out with a swipe gesture or by hitting the top leftâ° menu button.
Thank you
Is something like this best suited?
<body>
<section id="firstpage" data-role="page">
<div data-role="header">
<h1>Activity</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
</body>
Yes that is a good representation of it:
<body>
<section id="firstpage" data-role="page">
<div data-role="header">
<h1>Activity</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
<section id="secondpage" data-role="page">
<div data-role="header">
<h1>label2</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
</body>
I currently have my layout page divided into two columns using bootstrap 3 with something similar to this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
I want the div with class "info" to stay fixed on the top left side when scrolling the page. When I try the bootstrap "affix" class the content in "info" effectively gets fixed but the "tasks-column" suddenly moves all the way to the left completely covering it.
I have also tried the plain css position:fixed; on "info" but it does not do anything.
The content in info is NOT a navigation panel.
Thank you guys.
Edit: the content in info is dynamic (it varies depending on the user input).
You need to offset the tasks-column. Try this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 col-md-offset-4 tasks-column">
<!--some Markup -->
</div>
This is because you are fixing the content that pushes "tasks-column" to the right.
The simple way to do what you want is just to move "info" inside col-md-4, like this:
<div class="row">
<div class="col-md-4">
<div class="info">
<!--some fixed Markup -->
</div>
</div>
<div class="col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
Hope this helps!
I am trying to create a very simple chat page on jquery mobile, with the following page schema:
<div data-role="header" data-position="fixed">
<h1>Chat with...</h1>
</div><!-- /header -->
<div data-role="content">
<div id="chatcontents"></div><input type="text" />
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
Footer
</div><!-- /footer -->
with the div "chatcontents" to contain all the messages, and the input text to be at the bottom.
The problem is that jquery mobile sort of overrides my css settings, so it does not work out to be textbox at the bottom (considering the footer) and "chatcontents" to occupy the rest of the screen with the text starting from the bottom.
Anybody already tried this already?
Thanks in advance.