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)
Related
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.
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.
I'm trying to fix the top menu on page change.
Example:
<div data-role="page" id="page1">
//page 1 contents
</div>
<div data-role="page" id="page2">
//page 2 contents
</div>
and my top menu
<div id="top-menu">
</div>
Is there any way to not make the menù code reappear on each page?
I want my menu div to be collective for all pages.
Any ideas?
Thanks,
Andrea
No, the concept of "pages" does not allow for static content to be shared among them.
But I see at least two solutions:
use only one page containing your menu, and many hidden div to encapsulate your content (like <div data-role="content" id="page1" class="hidden">). Using your menu navigation, you just have to show/hide the content you need
use some JavaScript trickery:
$(document).on("pagebeforeshow", "[id^=page]", function(event)
{
// "move" the menu to the content of the current page
// (you have to add IDs to each page like 'page1content')
$("#top-menu").prependTo("#" + this.id + "content");
});
I have a navbar that uses anchor links to connect to different divs. I have all the div's hidden, but I want them to show based on what link you click.
<!-- NAV CONTAINER -->
<div class="navContainer">
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Overview</li>
</ul>
</nav>
</div>
<!-- DIV CONTAINER -->
<div class="container">
<div class="sections" id="home">
homepage with title here
</div>
<div class="sections" id="page1">
page 1
</div>
</div>
I know you can do it using jQuery but I haven't been able to make anything work. Right now the divs are set to display:none. 'Home' should appear when you load the site.
One possible solution is to use the css pseudo-selector :target
.sections {display:none;}
.sections:target {display:block;}
Demo
CSS3 selectors are pretty well supported but :target can give odd or buggy behaviour as mentioned here: http://css-tricks.com/on-target/
If you want to control it with jQuery... try it: http://jsfiddle.net/luiggi/kRgt6/
$(document).ready(function () {
$("li.home").click(function () {
$("#home").toggle();
$("#page1").hide();
});
$("li.overview").click(function () {
$("#page1").toggle();
$("#home").hide();
});
});
You'll likely need to add some sort of CSS class to the anchor links so you can find the specific triggers more easily.
Just from memory, the code will be something like this (assuming anchors have the "ToggleDiv" class name).
$('.ToggleDiv').each(function(el){
var divId = $(el).attr("href");
$(el).click(function(){
$(divId).Toggle();
});
})
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