This question already has answers here:
Moved HTML into a different folder, now it's not linking CSS correctly
(2 answers)
Closed 5 years ago.
I have developed a website with 13 webpages. The majority of them have the same header, footer, right aside, ... I know that I can place a HTML or JSP file that contains the code for the header or footer and include it in all my pages so I do not have to write the same code in all my wepages. This is an example of what I will like to place in file called header.html which I would include in all my webpages:
<header>
<hr id="barraCabecera11">
<hr id="barraCabecera12">
<h1 id="nombreBarberia"> The Notorius Barbershop </h1>
<nav>
<ul>
<li id="indexN">Inicio</li>
<li id="seccion1N" onmouseover="ver(1)" onmouseout="ocultar(1)">
<p id="conocenosN">Conocenos</p>
<div id="subseccion1">
<p>Historia</p>
<p>Filosofía</p>
<p>Barberos/Peluqueros</p>
</div>
</li>
<li id="seccion2N" onmouseover="ver(2)" onmouseout="ocultar(2)">
<p id="eventosN">Eventos</p>
<div id="subseccion2">
<p>Reservar</p>
<p>Contratar</p>
</div>
</li>
<li id="hairstyleN">Hairstyle</li>
<li id="notbarN">The NotBar</li>
<li id="cursosN">Cursos</li>
<li id="contactanosN">Contáctanos</li>
</ul>
<div class="borrar"></div>
</nav>
</header>
The problem is that I have different relative links in the nav of this header, so I cannot include a file with the same content in all my webpages. Is there a standard way of changing these relative links depending on which webpage the header is included?
Please, let me know if I am not explaining myself well.
I'm not sure if this is standard but I would change the href of the elements on each page by altering it in javascript after the page is loaded.
Edit: An example would be,given the following anchor tag:
<a href="google.com" id="anchorTest">
You would do:
document.getElementById('anchorTest').href = 'youtube.com';
Related
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 trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I have a website that has a documentation section powered by Atlassian Confluence. In the footer of my documentation there is some information by Atlassian as shown in the picture.
What I am trying to do is to add a sentence above it. So far I have only been able to add it underneath the existing ul. On confluence I can only override elements by inserting new code in a custom HTML block.
My website's footer
This is the code I get from the footer when I inspect the footer element on my web browser.
<section class="footer-body">
<ul id="poweredby">...</ul>
</section>
and this is the code I am inserting into the custom HTML block to get my sentence on the footer. (As seen on the picture)
<ul id="copyright">
<li class="noprint"> THIS INFORMATION SHOULD BE ABOVE </li>
</ul>
How can I change this code so it gets inserted above the existing confluence sentence?
as documented here:
https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
function move() {
var copyright = document.querySelector('#copyright');
var target = document.querySelector('#poweredby');
target.parentNode.insertBefore(copyright, target);
}
window.setTimeout(move, 3000);
<section class="footer-body">
<ul id="poweredby">
<li> hello world</li>
</ul>
</section>
<ul id="copyright">
<li class="noprint"> THIS INFORMATION SHOULD BE ABOVE </li>
</ul>
Using jQuery, on document load you can dinamically move one element into another
$(document).ready(function() {
$('#copyright').prependTo($('.footer-body'));
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is my HTML for my Navbar buttons
<button class="navbar-toggle" data-toggle = "collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li><a href="#Portfolio" class="smoothScroll">Portfolio</a </li>
<li>Contact</li>
</div>
So when I click the portfolio button, it should jump to the portfolio section: this one
<a name="Portfolio">
<!-- <section id="Portfolio"> -->
<div id="whitecontainer1">
<h1> Portfolio </h1>
hello
<br>
<br>
<br>
<br>
<br>
</div>
</a>
But instead it jumps/scrolls to this section
<section id="About">
<div id="redcontainer1">
<div id="aboutinfo">
<h2><strong>Ashpan Raskar</strong></h2>
<div id="aboutme">
I am an intuitive <strong> software developer</strong>, and newly a
<strong> web developer</strong>. I began by learning Java at the age of 10 from an online
YouTube series: "Java (Beginner) Programming Tutorials." Soon after I started becoming
interested in <strong>Websites
and Web Design</strong>, so I learned how to create websites with XHTML, but it was not at
all responsive and was bare to the bone.
<br>
<br>
From then a learned quite a few more languages such as Jquery,
PHP, Javascript, C#, Ajax, etc, and I plan to learn Android Development as my next stage.
<br>
<br>
<a target="_blank"class="btn btn-default" href="Ashpan_Raskar.pdf" role="button">Check out my Resume!</a>
</div>
Any help is really appreciated, my code is on GitHub, you can see it here https://github.com/Ashpanr/Personal-Website-v1/
Thanks in advance
You have an error in Lines 80 - 81 of index.html:
<a name="Portfolio">
<!-- <section id="Portfolio"> -->
Change it to:
<section id="Portfolio">
And it works well. The reason behind it is, <a> you have given and there's no closing tag. There's a </section> at line 93 but no starting tag. And moreover, it is better to use <element id="section-name"> than giving the deprecated <a name="section-name">. A major reason is, you cannot have block elements inside inline <a> element. It is that, simply, you cannot have <div> or any other block level tags inside <a> tag.
But the real reason is...
You have the following CSS:
#introbg {position: absolute;}
And this doesn't tell the browser, where it finishes. You should not use position: absolute without a reason. And so, the <a name="Portfolio">, which comes later gets the position before #intro.
Remove the position: absolute for the code and it will work correctly.
I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be [header_img_height] and when I get to section one it would return to margin-top:0px.
My header markup right now:
<header>
<div id="header_banner">
</div>
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
</li>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
</li>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
</li>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
</li>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
</div>
.
.
.
other sections
This is what I want to end up with:
I would recommend you to do it with CSS directly.
Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.
Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.
You even have an example of how to use them in this Apple demo also available in the files to download.
Would this help? On the first section it adds the class fixed-header to your nav, and on the other sections it will disappear
$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});