I am working in website,I have 2 page index.html and product.html,In product.html
i have 2 div element with different ID,Now when i click the anchor tag in index.html which navigate to product.html but it should navigate to particular ID which holding different content in product.html need help
In index.html page i have anchor tag
<a href=products.html>Building</a>
<a href=products.html>Infrastructure</a>
In product.html page i got 2 div
<div id=#Building>
<div class="container">
</div>
<div>
<div id=#Infrastructure>
<div class="container">
</div>
<div>
when i click the anchor tag i should navigate to particular ID like if i click Infrastructure anchor tag it should directly navigate to product.html infrastructure div
just add that id to your href.
like product.html#divid
index.html
<html>
<body>
<a href='products.html#Building'>Building</a>
<a href='products.html#Infrastructure'>Infrastructure</a>
</body>
</html>
products.html
<div id='Building'>
<div class="container">
building<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div>
<div id='Infrastructure'>
<div class="container">
Infrastructure
</div>
<div>
create inedx.html and products.html files and paste above code.
it working as expected.
Related
Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?
I have 3 html files. Index.html invokes chat.html. Chat.html body contains a DIV which I want to populate with Div of a third HTML file (star.html) which resides in the same folder as chat.html.
chat.html -
<body>
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header text-center">
Chat - Group Menu
</div>
</nav>
<!-- Begin page content -->
<div class="container" id="chatDiv">
<div class="page-header">
<h1>Mobile Layout</h1>
</div>
<p class="lead">Chat stuff to appear here</p>
</div>
</div>
<div id="testDIV"></div>
<div id="footer">
//some DIV content here
</div>
</body>
star.html -
<body>
<p> hello all </p>
</body>
jquery code I am using (in an external .js file) is -
$(document).ready(function() {
$("#stars").click(function() {
alert("change DIV to show STAR stuff");
$("#testDIV").load('star.html');
});
});
Here, the alert is displayed. But the content is not moving to chat.html Div.
What am I missing here?
Seeing as how you are opening a new window for chat, you need to address that window in order to manipulate that DOM. You may also need to add jQuery to the chat.html page if you haven't already
$('#loginBtn').click(function() {
$(this).validateEmail();
$(this).validatePassword();
var window.popup = window.open("html/chat.html");
});
$("#stars").click(function() {
alert("change DIV to show STAR stuff");
window.popup.document.$("#testDIV").load('star.html');
});
using SwipeJS how can I call a different html? For example using the following code to swipe pages I use it as index.html and I want to call other three inside like page1.html page2.html and page3.html Is that possible?
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div class="page">
Page 1
</div>
<div class="page">
Page 2
</div>
<div class="page">
Page 3
</div>
</div>
</div>
I am trying to find all the tags in a div and compare the href to the page in the current url. If they are the same I will add css to the parent of the tag. Why wont this work to find the tags? This is being used in SharePoint.
<script>
var jse_vertical_nav = document.getElementById('JSE_vertical_nav');
alert(jse_vertical_nav.getElementsByTagName('a').length);
</script>
<div id="JSE_vertical_nav">
<div class="jse_link_row">
HOME
</div>
<div class="jse_link_row">
ABOUT
</div>
<div class="jse_link_row">
NEWS
</div>
</div>
It does not work, because you need to use JavaScript AFTER you output your HTML!
I have one main page and other sources on other pages. Since I can't use ajax loading because of the server limitation, I have to use target="_webapp" attribute to load on new page
<div id="home">
Link to external page
... content ...
</div>
Since normal back button ( a href="#") doesn't work with external page, I'm using javascript:history.go(-1)
<div id="the-external-page">
<div class="toolbar">
<h1>The External Page</h1>
<a class="back" href="javascript:history.go(-1)">Back</a>
</div>
<ul>
<li>Internal page</li>
<li>Internal page</li>
</ul>
... content ...
</div>
<div id="page1">
<div class="toolbar">
<h1>Page 1</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
<div id="page2">
<div class="toolbar">
<h1>Page 2</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
It works if user navigate #home -> #the-external-page -> #home
but since the other pages have multiple link within it when user visit #page1, #page2 all the history stack and the back button doesn't work until pressed multiple time.
I can't put absolute link in the back button either because the list of original pages are dynamically generated.
Is there way to go back to resolve this ?
Did not test with your code, but I suspect .goBack() in the jQtouch object may be what you're looking for: https://code.google.com/p/jqtouch/wiki/PublicObject
Relevant section:
goBack( to:object )
Forces jQTouch to go back to a certain page in the history. You can pass a specific page ID, a number of pages to go back, or nothing to go back one page. If the specified page can not be found, jQTouch will go back one page by default.