Develop Reference

Javascript Scroll to section

I want to scroll to a section on the page with vanilla JavaScript. Is the browser support good?
This is my code:
Document.getElementById("menu-item-1").on("click", function() {
Document.getElementById("services").scrollIntoView();
};

<a id="menu-item-1" href="#services">Click to Scroll to Services</a>
Then add services id where you want to scroll to.
<div id="services">Scroll Here</div>

Have You tried linking an id?
<h1 id="menu-item-1">Menu Item #1</h1>
<div>Go to Menu Item #1</div>
(The code above doesn't scroll because it is inside of a sandbox)

Show/hide multiple partial views on same page

I have a dashboard kind of page where on the left you would have menu items like:
link 1
link 2
link 3
Each of them going to a different action in the same controller.
I would like to have each action render it's data in the same page (in partial views) but I have no idea what the "best" way of doing this would be.
So lets say link 1 is rendering a list of people (table), link 2 statistics (charts) and list 3 some configuration properties.
How should I define this so that on each click, the main frame (which is the menu bar on the left containing the link 1-2-3 and is defined in a shared view) stays but only the middle content (partial views) would change, keeping in mind that link 1 is a table, link 2 charts and other controls and link 3 a bunch of controls (textboxes, drop down's and so on).
Should I show/hide div's on each click? This seems/feels kind of dirty to me?
All input/suggestions are very welcome!
EDIT:
This is the behavior I want (accepted answer): Show/Hide Multiple Divs with Jquery
Note: I am using C# in an ASP.NET MVC project and I would prefer a C# ASP.NET MVC solution (Javascript if needed), not other script/coding languages or frameworks.

You could add an onClick Handler on a Link:
<a onClick="handleLink1()">Link1</a>
Assuming the Rigth side locks like this:
<div id = "renderArea">
</div>
With that you could write the handleLink1() Functio nas follows:
function handleLink1(){
//Here you asign the new HTML:
Document.getElementById("renderArea").innerHTML = "<div/>";
}
Now you can write an Function for every Link and rerender the Rigth Part as you wish.

You should use ether PHP or Java for this kind of Setup.
Alternativly you could use an JS Framework like Angular or React, they can Handle it as well.
For Plain JS you can alsways use an Event (The Links gets clicked) to change the Page as you wish.

For now I have implemented this answer: Show/Hide Multiple Divs with Jquery since the other ones are not in my direct knowledge to implement them
Code sample:
jQuery(function() {
jQuery('#showall').click(function() {
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
http://jsfiddle.net/XwN2L/
I am still open to other suggestions, specially if they involve Partial views and not to much of other things.
Thank you all so far!

jump to a section on different page is not working properly

I have navbar like this :
<ul class="dropdown-menu" role="menu">
<li>People</li>
<li>Main Page</li>
</ul>
but when I click on "People" link, it will not position correctly, because I am loading some charts on that page. I have many section with unique id and content is loaded from JavaScript (charts).
<section id="top_something">
<div class= "container">
<h2 class="blue-headings text-center"><b>Top People</b></h2>
<div id="div_something"></div>
</div>
<br>
</section>
The content of a div id="div_something" I am making in JavaScript ...
I have a 10 div's like this on that main_page with unique id. I can see that when I click on a a href="/main_page#top_something" on navbar it will paste me on that section , but as soon as it loads JavaScript it will move me upper
thanks in advance

If your main_page is a directory (which it probably is) then you need to simply include a slash before the anchor name.
People
If you have JavaScript injecting content after the page loads then you will be brought to the appropriate anchor but the page may move because the additional content added by JS will push the anchor down the page. You might consider repositioning the screen to the appropriate anchor using JS after its done injecting content.

Weird jQuery Mobile highlight behavior on click

I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.

It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.

Separating Tabs from Container in jQuery UI

I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.
What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents position in the middle. Like this:
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li>Pets</li>
<li>Family</li>
<li>Bio</li>
</ul>
</div>
</div>
So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).

I think what you need to do is use the 'select' method
So you would bind your links to the tab you want to click
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li id="pets">Pets</li>
<li id="family">Family</li>
<li id="bio">Bio</li>
</ul>
</div>
</div>
$(function(){
//set-up your tabs as normal first
$('#bio').click(function(){
$('#center_console').tabs("select", '#bio');
});
});
You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did
Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/
thanks