1

I got the code working in the w3schools Editor, but in WordPress 4.3.1 I can't get it to jump to the tag. I am quite a beginner to this so I am asking for help here. I want to insert HTML from an .txt file and jump to section X using #Term-X. It's a glossary. My code is based on this answer found here. This is my code:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
  $('.glossary').popover({ 
    html : true,
    content: function() {
      return $('#pcw').html(); // pcw = popover_content_wrapper 
    }
  });
  $('#pcw').load("http:// — myURL — .txt");
  $("a").click(function(){
    $(this).popover('show');    
  });
});
</script>

<style>
.popover-content {
      width:250px; 
      height:250px;
      overflow: auto; 
}
</style>
</head>

<body>

<a class='glossary' data-placement='auto' href='#Term-X'>Term I want to show in Popover</a>
<div id="pcw" style="display: none"></div>

</body>
</html>

and this is my .txt script in the external file:

<!doctype html>
<html>
<head>

<style>

<!-- some CSS here -->

</style>
</head>

<body>

<div class="box" id="Term1">
    <div class="title"><b>Term1</b></div>
    <div class="description">soandso</div>
</div>

<div class="box" id="Term2">
    <div class="title"><b>Term2</b></div>
    <div class="description">soandso</div>
</div>

<div class="box" id="Term3">
    <div class="title"><b>Term3</b></div>
    <div class="description">soandso</div>
</div>

</body>
</html>

Any ideas? Thanks in advance!

Community
  • 1
  • 1
hari
  • 11
  • 2

1 Answers1

0

In the html document line 11 the character after the word glossary is not

'

Fix it

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
  $('.glossary').popover({ 
    html : true,
    content: function() {
      return $('#pcw').html(); // pcw = popover_content_wrapper 
    }
  });
  $('#pcw').load("http:// — myURL — .txt");
  $("a").click(function(){
    $(this).popover('show');    
  });
});
</script>

<style>
.popover-content {
      width:250px; 
      height:250px;
      overflow: auto; 
}
</style>
</head>

<body>

<a class='glossary' data-placement='auto' href='#Term-X'>Term I want to show in Popover</a>
<div id="pcw" style="display: none"></div>

</body>
</html>
Rakib
  • 136
  • 1
  • 6