How to navigate to sections inside a webpage without remembering history? That is, suppose I use the following code. When I click on About, it takes me to the About section. But it also adds #about in the URL. The problem is, if I click 10 times alternating between Home and About to navigate inside the page, then when I click the browser back button I backtracks all my actions like a stack. I want it to completely come out of the webpage. How to achieve this?
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<ul class="nav">
<li> Home</li>
<li> About</li>
</ul>
<section id="home" style="margin-top: 100%">
Home Sweet Home!
</section>
<section id="about" style="margin-top: 100%">
About Me
</section>
</body>
</html>
PS: If it is not possible with only html, using java Script is fine.
You can do the job with pure HTML like this:
<body>
<ul class="nav">
<li> Home</li>
<li> About</li>
</ul>
<section id="home" style="">
Home Sweet Home!
</section>
<section id="about" style="display: none;">
About Me
</section>
</body>
It's just so you get the idea, but in practice, you should write more organized JavaScript and probably need help from a library like JQuery to build a useful website or app with navigation. Even in this example, there's a lot of room for improvement:
There's a lot of long and repetitive code crammed in it, a problem an external JavaScript script or app will solve.
Thanks to history.pushState, the button link and browser back/forth works as expected (look in the address bar to see the URL change without refreshing page), but as soon as you refresh page, you'll get an error. You need a web server to serve the right content for this to work, with help from the client too.
Update
Improved version with organized script and animation to demonstrate what you can do with in-file CSS and script.
<!DOCTYPE html>
<head>
<title>testing</title>
<style>
section {
position: absolute;
left: -800px;
top: 100px;
transition: left .6s;
}
section.visible {
left: 200px;
}
</style>
<script>
function navTo(page) {
if (page === 'about') {
document.getElementById('home').classList.remove('visible');
document.getElementById('about').classList.add('visible');
history.pushState(null, null, 'about');
} else {
document.getElementById('about').classList.remove('visible');
document.getElementById('home').classList.add('visible');
history.pushState(null, null, 'home');
}
}
</script>
</head>
<body>
<ul class="nav">
<li><a href="#home" onclick="event.preventDefault();navTo('home')">
Home</a></li>
<li><a href="#about" onclick="event.preventDefault();navTo('about')">
About</a></li>
</ul>
<section id="home" class="visible">
Home Sweet Home!
</section>
<section id="about">
About Me
</section>
</body>
</html>
use:
element.scrollIntoView()
element=document.getElementById("element's id")
in html:
<a onclick="elementId.scrollIntoView()">element name</a>
note: any tag will do... the <a> will lose the underscore and color change - could be fixed with style. how about (flat, with style) buttons?
Related
I am really new so my knowledge in general is really poor.
I am trying to add a P5js sketch into a Bootstrap template.
The ideal would be to be able to build a responsive design website, with some image and video galleries with a p5js code on the background.
I have done some tests using an example I found onine but I was not able to do it.
I attach the code here
https://codepen.io/llorencg/pen/LYVMLjZ
Any help will be apreciated !!
Thanks :)
<html>
<head>
<meta charset="utf-8">
<title>p5 walkthrough</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-dark navbar-full bg-inverse" style="">
<a class="navbar-brand" href="#">Bootstrap and P5.js</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">A Link to Nowhere</a>
</li>
</ul>
</nav>
<div class="container">
<div id="jumbo-canvas" class="jumbotron">
<h1>Fun With P5.js</h1>
<p class="lead">P5 is a JavaScript library that can be used to draw things onto an html canvas. The P5 reference guide can be found here, and legendary videos by Daniel Schiffman can be found here.</p>
<hr />
<p>By giving this div an id of jumbo-canvas and and placing <code>canvas.parent('jumbo-canvas')</code> in our setup function, we can draw inside this Bootstrap jumbotron.</p>
<p class="lead">
<a class="btn btn-info btn-lg" href="#" role="button">Click this button for some truth</a>
</p>
</div>
</div>
</body>
I found an old thread here which seems to have the answer to your question, as I think this is what you mean.
So i'm building a small website on gh-pages and i'm using a gh-pages markdown theme.
To implement a navigation bar i've slightly modified the "default.html" file to also feature a bar inside the header.
Now i'd like to link or navigate between pages while still keeping the theme, header and such. But when using
Another Page
it reloads an entire new blank page.
But when first visiting https://myPersonalPage.github.io/ it loads up just fine and it does load index.md properly.
So in short, I'd like to change the content of a gh-page without changing the header and I don't know how.
In the default.html file my links look like this:
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title">MyProjects</h1>
<div id="navbar">
<ul>
<li>HOME</li>
<li>PROJECTS</li>
<li>ABOUT ME</li>
</ul>
</div>
</header>
</div>
And in the default.html file the content-load looks like this:
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
{{ content }}
</section>
</div>
Alright, i figured it out. Instead of projects.md, i had to link on projects.html and everything works out fine.
I am designing a webpage in which I want that when a user click on link a popup (new window) will open with a linked webpage.
My code looks like below
<head>
<script language="javascript">
function win(add,w,h)
{
window.open(add,"","width="+w+",height="+h+",location=0,directories=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1,top=5,left=5");
window.location.reload();
}
</script>
</head>
<body>
<h1>Click to open link in new window</h1>
<ul>
<li>Account Master
<ul>
<li>New</li>
<li><a href="#" value="mod.html" onclick="win(this.value,600,500)" >Modify</a></li>
<li>Delete</li>
<li>View</li>
</ul>
</li>
</ul>
</body>
In Firefox on clicking the link a popup appear but no link open(means it open only blank page) and in IE popup appear with link(/undefined) not the link provided link.
I am unable to detect what is the error.
Try this...
<head>
<script language="javascript">
function win(add,w,h)
{
window.open(add,"","width="+w+",height="+h+",location=0,directories=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1,top=5,left=5");
window.location.reload();
}
</script>
</head>
<body>
<h1>Click to open link in new window</h1>
<ul>
<li>Account Master
<ul>
<li>New</li>
<li><a href="mod.html" value="mod.html" target="_blank" onclick="win(this.href,600,500)" >Modify</a></li>
<li>Delete</li>
<li>View</li>
</ul>
</li>
</ul>
</body>
Whether or not a link opens in a tab or window is determined by the user's browsers settings. You may want to rethink your end-solution.
Instead of displaying your linked page in a "new window/tab", try firing a modal. Here are some nifty modal effects that are easy to implement
http://tympanus.net/Development/ModalWindowEffects/
use this property of anchor tag target="_blank"
<a target="_blank" href="link.html">Link</a>
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help
I normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.
i am calling Jquery within the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And I am calling my bootstrap.js file
<script src="js/bootstrap.js" type="text/javascript"></script>
The css for the navbar is as follows
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Am i missing something blindly obvious because the button is not responding?
Any help appreciated
Have you included the required bootstrap.css stylesheet?
<link href="css/bootstrap.min.css" rel="stylesheet">
Edit 1:
Here's a jsBin with your HTML/bootstrap. If you aren't seeing the same output then something is indeed wrong. If you're expecting some behavior when one of the navbar buttons gets clicked, then it isn't actually an error: there is no js behavior attached to the click of the navbar.
Bootstrap will provide you with a "prettified" navbar, it changes the aesthetics but not the behavior, you still need to connect to the individual clicks and define your own behavior for them.
Edit 2:
To connect to the clicks you have to get your menu items and use jQuery to define onclick behaviors. An example would be to define unique ids for each navbar item
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>
And then retrieve them with jQuery's selectors and attach click handlers:
$("#home").click(function() {
alert('home clicked');
});
$("#about").click(function() {
alert('about clicked');
});
I've edited the jsbin to add this example.
The CDN wasnt pulling the jquery so i have hosted the file locally now and it works fine