internal link display none to block

+1 daniel ophir · September 26, 2015
Hello everyone I'm pretty new to web design and I'm trying to create internal link (inside a section) just to switch between the articles I need a few buttons like that but for now the concept will be enough here is the example:

That is the internal links or buttons how ever you want to call them.

<div id="new_div">
<nav id="nav">
<ul>
<div id="link1">
<li><a href= "#aboutme" class="button button-large button-primary">About me</a></li>
</div>
<div id="link4">
<li><a href= "#contactinfo" class="button">Contact info</a></li>
</div>

That is the section i need the visibility and display to change on both.

<section id="main_section">
<div>
<article id="aboutme" style="visibility: visible;">
<header><h1>About me</h1></header>
<p>bla bla bla yate yate yate etc etc etc...</p>
<footer><p id="signature">Made by Daniel.O.</p></footer>
</article>
</div>
<div>
<article id="contactinfo" style="visibility: hidden; display: none; ..">
<header><h1>Contact info</h1></header>
<p>bla bla bla yate yate yate etc etc etc...</p>
<footer><p id="signature">Made by Daniel.O.</p></footer>
</article>
</div>
</section>


all i need is to switch between the articles and for now i couldn't even managed to make the link for the contactinfo so any help will be appreciated!

Post a Reply

Replies

- page 1
Oldest  Newest  Rating
0 Aakash Ahmed · October 5, 2015
Remove all the css first, you given to them.
Remove all the jquery files included.

then insert this into your html head before including any javascript code or file
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


this will include the jquery 1.9.1.

then include my code!

Please remove all the css you have given to the links and articles!
like visibility, display, opacity!
0 daniel ophir · October 5, 2015
It's working pretty nice, but one more issue for now: the back on browser is not working like i can't see what was the previous article
0 Aakash Ahmed · October 6, 2015
no no you can't  override browser back button with javascript. the back button only shows previous page that you loaded before this page
0 daniel ophir · October 6, 2015
I have two problems with the website now:
1. the article in the URL is not necessarily that one that is showing meaning i will see www.example.com#aboutme and the article in the center will be contact info
2.this is the the continuing of the first problem when i press back button on the browser i see the same article but the URL changes www.example.com#contactinfo before the back button and after www.example.com#aboutme (as it was the last page i was in) but then again i go back to the first problem the article itself doesn't change beside that, its good the jquery code you gave me helped me so far thanks a lot.
just those two issues and if it's not JS or Jquery code tell me what sub forum to go to.  
0 daniel ophir · September 29, 2015
Hello guys i see that it's been a few days and no one gave me an answer so should i give more information about my question or quote something else from the html doc? I'm still waiting, and it's pretty important to me.  
0 Aakash Ahmed · September 29, 2015
Using JQuery, You should write this:

$(document).ready(function(){
  var aboutArticle = $("article#aboutme"),
      contactArticle = $("article#contactInfo"),
      aboutButton = $("a[href='#aboutme']"),
      contactButton =$("a[href='#contactinfo']");

  // Hiding both articles at first
  aboutArticle.slideUp(400);   // set the speed you like , e.g 400==0.4s
  contactArticle.slideUp(400);

  aboutButton.on("click",function(){
    contactArticle.slideUp(400);
    aboutArticle.slideDown(400);
  });

  contactButton.on("click",function(){
    aboutArticle.slideUp(400);
    contactArticle.slideDown(400);
  });
});

Hope, this'll help you!
0 daniel ophir · September 30, 2015
It's not helping and i suspecting it's something in the html code 
<nav id="nav">
<ul>
<div id="link1">
<li><a href= "#aboutme" class="button">About me</a></li>
</div>
<div id="link2">
<li><a href= "CV.doc" class="button">CV en</a></li>
</div>
<div id="link3">
<li><a href= "CV.doc" class="button">CV he</a></li>
</div>
<div id="link4">
<li><a href= "#contactinfo" class="button">Contact info</a></li>
</div>
<div id="link5">
<li><a href= "http://www.danielophir.com" class="button">Gallery</a></li>
</div>
<div id="link6">
<li><a href= "1/english.html" class="button">Web designs</a></li>
</div>
</ul>
</nav>

that is the full navigation bar should i go to html css forum and that's it?
0 Aakash Ahmed · October 1, 2015
What are you trying to do? 
Create a navbar?
or
Switching between articles?

If switching between articles, then what type of switch, mean hide one and display other or to load the page entirely?
Please describe it?
0 daniel ophir · October 1, 2015
im trying to create a situation when you press on one of the links from the navagation bar to your left < the page doesn't change but the article in the center does.
for example:
i have a pattern means the owl page : css tags navagation bar everything. I would like to keep that pattern only changing one aspect of text meaning the article inside the section i want the article to come up only when pressing the related link also i want it to be in the same section so it will come up with the same css attributes. 
0 Aakash Ahmed · October 2, 2015
I am exactly showing you the code to do that. I displayed only contact article and and about article in this code. you can create as many as articles in it.

Make your links in navbar like this:
<a href="#aboutme" data-article='about-me' class-'article-link button' >About Me</a>

1- give your id of article which you want to switch in data-article
2- Give any classes to the links you want, but "switch-link" is neccessary.

Make your articles like this:

<article id='about-me' class='article-box'>
<!-- article content -->
</article>




1- Make as many as links and articles you want and use the javascript below, i give.
2- you have to give article-box class to every article.

For this javascript, you need jQuery 1.9.1 or up:
$(document).ready(function(){
  $("article.article-box").each(function(){
    $(this).hide();
  });

  $("a.article-link").each(function(){
    $(this).on("click",function(){
      var articleofthis = $(this).data("article");
      $("article.article-box").each(function(){
          $(this).hide();
      });
     
      $("#" + articleofthis).show();
    });
  });
});
  • 1
  • 2

Javascript

107,338 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators