Attached to Detached Navigation Issue - javascript

I am currently building my personal portfolio and, not having a lot of practical knowledge in javascript, but having gone through a lot a tutorials, I decided to try to implement something I saw elsewhere: A detachable navigation.
Using this site, http://code.stephenmorley.org/javascript/detachable-navigation/, as a reference I set about creating my detaching navigation; however, something went horribly wrong.
For one, the header will automatically align to the left rather than returning to its default position.
Second, although you can't yet see it implemented, I wanted the social icons to show up in the navigation once they were scrolled past using an animation. That bit of code was so convoluted that I scrapped it.
Any pointers would be greatly appreciated.

Why not just use Bootstrap? It has this built in already: http://twitter.github.com/bootstrap/components.html#navbar
Download bootstrap: http://twitter.github.com/bootstrap/assets/bootstrap.zip
Add the bootsrap Javascript and CSS to your page.
In your HTML, add the following DIV:
You can change the div to fit your needs.
<div class="navbar navbar-fixed-top">
<li class="active">
Home
</li>
<li>Link</li>
<li>Link</li>
</div>

Related

I can't get scrollspy to work with my bootstrap navbar

I know this is a very common problem, but I have spent ~two days crawling the forums, trying fixes, can't seem to find the answer.
I have a standard bootstrap setup that uses some parallax scrolling. I have a navbar fixed to the bottom of the page. Each <li> is shaped like a circle, and inside the <li> is an <a> tag. Each 'circular' <li> is linked to an anchor tag on the page in order to provide navigation around the page. This is a one-page template set up.
Here is a fiddle:
https://jsfiddle.net/k8g3qydw/1/
I have the bootstrap.css and .js files properly enqueued, I added data-target=".scrollspy" data-spy="scroll" data-offset="0"
to the body tag and added the class .scrollspy to the parent element of my <ul> like so:
<div class="scrollspy board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="nav-item active">
So, I am pretty confused as to what to do!
Any help is much appreciated!
There are multiple mistakes in your code.
You should use one method to add Bootstrap ScrollSpy to your page, not both:
via Data Attributes or JavaScript. So you should delete your body attributes or javasript line $('body').scrollSpy({...});
ID attribute must be unique to the whole document. You have repeated IDs on page. And.. In wrong place. On working fiddle #spy was assigned to nav wrapper, since it is the one which is being spied.
Navbar links should point to "resolvable id targets" instead of <a name="service">. You should use <a id="service">.
And also make sure that bootstrap.min.js is included after jQuery in your document. Since jQuery is required for Bootstrap, not other way.
Here is a working JSFiddle

menu on only a single page

I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. I want to create a single site menu. So if i press on a list item the browser should open an other content but on the same page. I tried using css with targets but everytime i click a new target the tagets will overlap and the old content will not disappear. I tried using Javascript with innerHTML but in javascript i need to write the whole page in a single line (.innerHTML ='websitecode') this will create a horrible overview.
Is there any other possibility to create something like this? Maybe with the require() / involve() function in php?
Thank you
From your question, what I understood is you want menu navigation without loading the content again.
`http://codepen.io/ArslanRafique/pen/raZybL`
Above is the snippet, I recently developed, simple menu navigation by using simple CSS and HTML. You can achieve simple menu navigation by using HTML label and can swap your views accordingly.
Please have a look at shared snippet, hope it will help you.
Sounds like you would like to create a single page web application:
There are many great javascript frameworks for this, try angular.
https://www.airpair.com/angularjs/building-angularjs-app-tutorial
Put your menu in the header file, and the content you want to replace in to views.
Or use angular UI-router https://github.com/angular-ui/ui-router/wiki
There are few possibilities to achieve your goal.
The simple and not so elegant one would be to generate the complete content and set anchors on the page. From the menu the user can call the anchors and will be brought to a desired part of the page. Example:
<!-- Menu -->
<ul>
<li>About us</li>
<li>Products</li>
</ul>
<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>
More elegant, sophisticated and professional approach would be creating a SPA (single page application). It would include some techniques like AJAX, where you can load (or remove) contents on the page without refreshing.
There are many modern JS frameworks that can help you, for example AngularJS, ReactJS, etc.
Wikipedia offers also more information on SPA:
https://en.wikipedia.org/wiki/Single-page_application
So Arlan's version looks a lot prettier, but you can also use javaScript with divs that you can hide or display with functions. You can format the divs in your css with whatever you want. May get a little clunky if you have a long menu...
<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>
var formatOne = document.getElementById("button1"); //create handle for first button
formatOne.onclick = function() { //add functionality
document.getElementById("divOne").style.display = "block";
document.getElementById("divTwo").style.display = "none";
document.getElementById("divThree").style.display = "none";
}
Jsfiddle to show the functionality.
https://jsfiddle.net/lattivalidus/s7a9dLe7/

Getting jquery mmenu to display in normal doc flow above 768px

I'm trying to get mmenu to display in normal document flow when above a certain screen width, and below that width display as it does out of the box. I came across an answer where "cloning" was mentioned, though I'm not sure what this entails (is it just duplicating the menu with a different ID?)... I have a project with a 15 page site that this would be perfect for, if I could get it working as I'd like! Any help would be greatly appreciated!
I've tried wrapping the function like so (my jQuery/javascript is most definitely not my strong suit!):
$(document).ready(function($) {
if($(window).width() < 768) {
$("#menu").mmenu();
}
});
HTML:
<nav id="menu">
<ul>
<li class="Selected">ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</nav>
Creating a clone (and yes, changing its ID) gives you two NAVs with the same HTML inside it.
Fire the plugin on the first NAV and use CSS and media queries to show it in the mobile site. Again use CSS and media queries to hide it in the desktop site.
Vice versa use CSS and media queries to hide the first NAV in the mobile site and show it in the desktop site.
Note that the mmenu plugin has a build in option for cloning the menu that will automatically prepend all ID's in the menu with "mm-":
$("#menu").mmenu({
clone: true
});

twitter bootstrap popover displaying but looks weird - rails

Hi I'm using twitter bootstrap popover functionality with seyhunak / twitter-bootstrap-rails gem.
I have the following code in my view:
<ul class="nav nav-pills subnav">
<li>
<a class="label-with-popover" data-content="popover content" data-title="popover title">Home Valuations:</a>
</li>
</ul>
The following in my page.js.coffe
jQuery ->
$('.label-with-popover').popover()
The popover appears but looks like so:
Bootstrap popover displays weird with extra vertical line through it: does anyone know how I can fix this?
Let me know if you need more info.
You've got a bunch of collisions between Bootstrap CSS and the CSS you wrote for your project. In the future, you should consider using a namespace for your own general-purpose classes like .arrow, or your CSS will interfere with third-party libraries (like Bootstrap) which use such common class names.
Here's an edit to your fiddle: http://jsfiddle.net/5rT9t/1/
I removed the margin declaration on .content, the padding values on .arrow, and, strictly for demo, added a container div to offset the popover so you could see the whole thing.

Simple ajaxify, without hash or hashbang urls

I'm taking a course in webdesign. I and a lot of the other students are really interested in ajaxifying our work. Our teacher is only into design and HTML - so he can't help.
I hope I use the right term - otherwise please correct me. By ajaxifying, I mean having my webpage only update certain parts when navigating.
For example, let's say I have a webpage consisting of 3 subpages:
1: index.html
<!DOCTYPE html><html><head><title> Welcome! </title></head>
<body>
<div id="Content"> Welcome, dear visitor... take a look around! </div>
<div id="Menu">
<ul>
<li><b> Home </b></li>
<li> Projects </li>
<li> Contact </li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
2: projects.html
<!DOCTYPE html><html><head><title> Projects </title></head>
<body>
<div id="Content"> All my projects are shown here! </div>
<div id="Menu">
<ul>
<li> Home </li>
<li><b> Projects </b></li>
<li> Contact </li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
3: contact.html
<!DOCTYPE html><html><head><title> Contact </title></head>
<body>
<div id="Content"> Contact info! </div>
<div id="Menu">
<ul>
<li> Home </li>
<li> Projects </li>
<li><b> Contact </b></li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
When using the links:
Only the Content-div should be reloaded.
The Menu should update which menu-point is active (here shown with bold-tags). If that's too complex a reload of the menu could work.
The Footer should not be reloaded at all.
The title should be updated.
The url should be updated.
I would really like the urls to be clean. That is: NOT /#projects.html or /#/projects.html, but just straight-up /projects.html or /projects
Working bookmarking and back-button are crucial.
Is this possible at all? I would be forever insanely thankful to anyone helping me here! :-D
I've tried out (and hacked around with) jQuery Address and History plugins, the History.js and a 'gist' to it. Couldn't get any of it to work. I've trawled and trawled stack overflow and google, but can't seem to find anyone explaining these things or having a simple solution.
A solution aiming at modern webbrowsers would be fine. If the IE guys and the no javascripts guys just gets the simple html-version, that would be cool - but it's not absolutely necessary.
Please help - any help would be very, very appreciated! Thanx! :-)
What you want is possible, but not quite easy to do.
As already mentioned, the HTML5 History API makes it possible, but you will need a good knowledge of javascript. Displaying more or less static pages isn't exactly what it's intended for, but the sake of learning, let's think about how it could be done.
You might probably want to use a framework like backbone that already comes with a router so that you don't have to write your own abstractions.
The basic idea behind a client side router is that you have an easy way of defining what URL triggers what javascript function similar to this:
var routes = {
"index": "open_index",
"projects": "open_projects",
"contact": "open_contact"
}
var open_index = function(){
// Do the logic that has to be done
// to open the index page
}
...
Note that the code is only there to illustrate the idea, it doesn't conform to any actual framework or library.
Anyway, every time that one of these routes is triggered you need to take care of basically taking apart the entire page and replacing everything with the desired content.
Now you have basically two choices for that. Either you fetch HTML from the server and just plug it in, or you only fetch the actual data in JSON and use client side templating.
What does that mean? Well, right now you use static HTML pages. They do have a basic structure that is shared by all the pages, namely the separation in 'Content', 'Menu' and 'Footer', however, since this is not a web application but a web site, the content of the 'Content' probably does not follow a structure that represents some kind of structured data.
An example for it representing structured data would be a phone directory. You always have a list of 'First name', 'Last name' , 'Phone number' and this is primarily what defines the page. The way it looks is not what the page is about.
The entire content of the page can be defined by an array like this:
var people = [
{ "firstName" : "John", "lastName" : "Doe", "number": "+12-2322132"},
{ "firstName" : "Dick", "lastName" : "Dobson", "number": "+12-656533"},
...
]
and rendered client side using a simple template like for example:
<ul class="phone_book">
{{#each people}}
<li>{{firstName}} {{lastName}} - {{number}}</li>
{{/each}}
</ul>
to generate the needed HTML. (That was handlebars by the way)
Using a framework, you can easily set it up for the script to update the information display automatically upon updating the data - for example by using AJAX.
In your case however, it is most likely that the way the page looks is what it is about. You need one image here and one image there and a bit of text inbetween, and all of this changes with every single page. You need HTML.
That's the reason why what you want isn't exactly what you would use the History API and AJAX for. It is primarily intended for complex web applications that need to spread several pages with their own urls that can also potentially capture the state of the application so that linking to a specific part of a javascript heavy web application becomes possible. Loading static websites works just fine without using AJAX and the History API.
Let's ignore this right now and just continue anyway.
Let's try and see what the open_index function needs to work.
var open_index = function(){
// 1. Fade out the old content and remove it
// 2. Request the new html content from the server
// 3. Mark the new active link in the navigation
// 4. Add the content to the DOM
// 5. Fade in the new content
}
All of this you can easily do with jQuery. You'll have no trouble finding an explanation for how to do this.
Now you are almost there. The only remaining thing to take care of is to make sure that you intercept the click events for your navigation so that you can use the History API and it won't just load the static page from the beginning.
For a simple use such as this, not a whole lot more is needed structure wise.
I'll say it again. This is complete overkill for your purpose and you should not be using it for that other than for learning purposes. If you don't use a library that abstracts away the History API a bit, the code will become a lot more complex.
I hope this helped giving you an idea of what you are dealing with.

Categories