I'm making a really simple website and was curious how I can modularize the content sections of the body while leaving the static portions of the site alone. I figured using partials would be the key but they operate much differently than I had originally thought. This is my first time using Angular so I'm not very familiar with anything just yet.
Right now the site has a simple design similar to the following:
<div id="wrapper">
<div class="header"></div>
<div class="sidebar">
<ul>
<li><a href={{option.path}}>Option 1</a></li>
<li><a href={{option.path}}>Option 2</a></li>
<li><a href={{option.path}}>Option 3</a></li>
</ul>
</div>
<div class="content"></div> <------ content changes with selected option in .sidebar
<div class="footer"></div>
</div>
Barring the inherent syntax errors here, what can I do so that when I click on an option in .sidebar such that the {{option.path}} won't just be appended to the URL?
Currently, this is what I have happening:
I have my site open on index.html where the .content section is completely empty.
The user then chooses an option and I want to direct their browser from /index.html to /partials/option1.html.
If the user then click AGAIN on option 1, their browser directs to /partials/partials/option1.html, which returns a 404 error.
Is there a way to avoid the problem in part 3 or is that simply how partials are meant to work?
Angular JS uses $route to designate partial templates to URL's. You will also need to learn about ngView to make this work.
I admit egghead.io is a great resource for Angular but I think you are in need of this specific screen-cast => http://youtu.be/i9MHigUZKEM
This LinkedIn group also contains every Angular.js resource I have come across.
Related
I put a link to a wikipedia page through this line of HTML :
<div class="voiraussi">
<h2>Voir aussi</h2><br>
<ul>
<li>Biographie d'Alan Turing</li>
<li>ARPANET, ancêtre technique d'Internet</li>
</ul>
</div>
Those two links work on one of my pages (i have 5 .html files) but on the others, it doesn't work at all, i have no idea why. Those lines above are part of the footer of my website, i copy/paste the footer on all the pages, so i don't understand. I checked on the existing posts but didn't find anything that could help...
Thanks in advance !
From what I understand after looking at your comments and the question, you have some sort element overlayed on the links on the pages where the links are unresponsive. One quick hack to check if this is actually the issue would be to give one or both the links a greater z-index. Try this:
<div class="voiraussi">
<h2>Voir aussi</h2><br>
<ul>
<li><a style="z-index:100" href="https://fr.wikipedia.org/wiki/Alan_Turing" target="_blank">Biographie d'Alan Turing</a></li>
<li><a style="z-index:100" href="https://fr.wikipedia.org/wiki/ARPANET" target="_blank">ARPANET, ancêtre technique d'Internet</a></li>
</ul>
</div>
A moron-level question here: how do I include one HTML5 file (like a navigation bar or sidebar) inside another one? I would prefer not to have to copy/paste all of the same stuff over and over across a website.
I've done a lot of searching through this site so far, and all of the answers I've found so far seem to strip all of the formatting and css from the "included version". If it helps, I'm using GitHub Pages and an HTML5 template to make a personal website, which sorta leaves out server-side stuff like server-side includes or PHP (I hear those don't work there).
What I've got right now:
<!--some html-->
<header id="header">
Some text
<ul class="icons">
<li>Some more stuff that I want to include </li>
</ul>
</header>
<!--more html-->
And then this solution results in the HTML getting included, but all of my styling getting stripped. I also tried <embed> and got the same result.
Main file:
<!--some html-->
<object name="foo" type="text/html" data="header.html"></object>
<!--more html-->
Header file to include (header.html):
<header id="header">
Some text
<ul class="icons">
<li>Some more stuff that I want to include </li>
</ul>
</header>
http://www.hongkiat.com/blog/html-import/
The above link discuss about your issue. Import is used to use to include html file to other html file. Hope this solves your problem.
Github pages brings all the features you want.
And no : you're not a moron to ask such a question.
You can start your journey : here
Then go Jekyll.
Is there a way to link to a form using only HTML/CSS? I am still a beginner in web dev and have not yet started on JavaScript or JQuery.
So what I want to do is,
<div>
<ul>
<a href="??" target="_parent">
<li class="toggle1">Guest</li>
</a>
<a href="??">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
...in the tags in the I want to link to a form which has elements like First name, Last name etc, such that when I click on "Guest" the form for the guest should appear and likewise for "Owner"
There is! Make the href tags to #guestform and #ownerform. Then, make each form's id attribute those values (guestform and ownerform). This looks like so:
<div>
<ul>
<a href="#guestform">
<li class="toggle1">Guest</li>
</a>
<a href="#ownerform">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
<form id="guestform">...</form>
<form id="ownerform">...</form>
Then, in the css, do the following:
form {
display:none;
}
form:target {
display:block;
}
Hope this helped you!
EDIT: As sdcr said, the a tag should be inside the li, and not the other way around for it to be semantically correct. It should be like this instead
<div>
<ul>
<li class="toggle1">
Guest
</li>
<li class="toggle2">
Owner
</li>
</ul>
</div>
I may have misinterpreted your answer based on the lack of information given.
If you don't care who the end user is, and make both forums accessable to them no matter if they're a guest or owner, you'd simply create another HTML document and link to that document (provided that your web server can serves "static" content).
For instance, say you created another file called owner_form.html and somewhere within the body, you had:
<form>
...
</form>
From your index.html you could link to owner_form.html via a <a> tag like this:
... Contents that will redirect you
(old answer)
No, this is not possible in only HTML and CSS. Not even (securely & validly) with JavaScript.
HTML and CSS don't have the ability to differentiate the client using the page on their own. And JavaScript can't securely do this either.
You should look into server-side programming. This is where the magic would happen for you. You can try many different frameworks / scripting languages that have web-server functionality to them, for instance, some of the popular ones are:
Ruby on Rails
PHP
NodeJS
Django
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
~Carpetfizz
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
Yahoo
Or target any other link in your site.
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
This behavior is built into HTML; it's not something unique to using Bootstrap.