Is it possible to "Reload everything except" using pjax? - javascript

Is it possible using pjax to do something like "Reload everything in body except footer and header"?
I've tried go But it is not working (footer and header disappears).

This is not the suggestive way of using a PJAX Call
When you wanted to refresh a division, you must provide a valid identifier.
Header and Footer elements are part of body, there is nothing called leaving out for header and footer.
Alternatively, define a #id to your division to refresh
<body>
<header>
</header>
<div id="pjax-container">
</div>
<footer>
</footer>
</body>
Now provide a link like
<a href="/home" data-pjax="#pjax-container">
I believe this could be found over the PJAX Documentation.

Related

How to make a link from one HTML document to another HTML document and also includes a quick link?

I would like to link from one page to the other. But it should also be scrolled down after I came to the other document. I don't know if you can do that with this code...
I know that you can use it to link to other sites and also make quick links, but is that also possible at the same time?
also looked at some other posts, but they are too complex for my brain. xD
LG JJ
<a name="anker" href="#anker"></a>
Yes, you can link to an item from another file using /file#id adress. Take a look at this example.
Inside file1.html:
<h1>This is file 1</h1>
Link
Inside file2.html:
<h1>This is file 2</h1>
<div>
Something
</div>
<p id="item">Hello</p>
for smooth scrolling effect use
html{
scroll-behavior: smooth;
}
and link this to file2.html.

Material design lite: mdl-layout__tab-bar and page scroll

I have a mdl-layout__tab-bar with a few links in the navigation bar. I want these links to trigger a page scroll to sections of the page.
I have tried the following solutions:
# the targeted section starts with the <a name="myTargetedSection" id="myTargetedSection"></a> tag
<div class="mdl-layout__tab-bar">
My link
...
</div>
This does not work and neither does
<div class="mdl-layout__tab-bar">
My link
...
</div>
It seems that mdl-layout__tab links work only with mdl-layout__tab-panel elements. The (unsatisfying) solution I found was to use regular mdl-navigation__link links, but these have no bottom-border, and cannot be horizontaly browsed on small screens.
Any idea? Thank you!
Resolved: the following code works
<div class="mdl-layout__tab-bar">
My link
</div>

How to place a banner on one page which reflect on the rest of the pages automatically?

I have a banner in a div and I like to place it on home page which automatically reflects on rest of the pages?? Is it possible ?? without placing the code on the each page specifically ??.
Any help would be appreciate :)
If you're using PHP, you can write the whole banner in html, then save it as .php (e.g. banner.php). Then somewhere before the content of each of your pages, use PHP's include
keyword
For each of your page you can write it this way:
<body>
<div id='banner'>
<?php include "/path/to/banner.php"; ?>
</div>
<div id='content'>
<!-- Main content here -->
</div>
</body>
Either this can happen with php as #javiniar-leonard recommends, or you can use css.
In every page the basic structure is the same I guess. So target the div and place the div as background:
.main{
background:url("../your_banner_url.jpg");
}

HTML Navigation bar disappearing on page load

Hello I have created a website for my school work and I am trying to implement a navigation bar for all the pages of the site. I got it working on all my other pages but there is one page in particular where it the entire navigation bar disappears when the page is loaded. The header section should display the navigation bar while the body loads the prime number table.The page should have a navbar like this.
However the prime number table page will not load the home and back icons.
I cant get the stackoverflow formatter to accept my html code so I have to put a link to it, sorry!.
This is the source code
Headers should not be in the <head> element; instead, they should be at the top of the <body> element. So move this code:
<div class="header">
<div class="container">
<div class="navbar">
<a class="logo" href="http://w3.cnm.edu/~tteichelmann"></a>
<a class="back" href="http://w3.cnm.edu/~tteichelmann/cis1210" onclick="history.back();" value="Back"></a>
</div>
</div>
</div>
Into the body. Also, HTML 5 introduced the <header> element (more here), which is a more syntactical way of defining a header... Consider that an alternative, not a requirement.
Move your div with the class of header outside of the head section of the document. It should be within the body tags.

nanoScroller.js doesn't initialize

I have a strange problem with a website where I try to embed nanoScroller.js
I've implemented the HTML structure and loaded the necessary js and css but it doesn't load the scroller. Has anyone an idea?
Website is: http://www.ehmesevents.de/portfolio If browser Window is wider than 980px
The updated docs of nanoscroller showed, that not the id of the content is needed. the class "nano-scroller" is needed. so it would look like:
<div id="about" class="nano">
<div class="nano-content">
content....
</div>
</div>

Categories

Resources