Change the title of the page according to the title of a division

JavaScript
,
1

When a specified element is visible to viewport, the title of the page will change because of the element is visible to viewport, but how can I change the title according to the ‘title’ of a division?

jsFiddle
Website for live viewing and testing

(Some of the codes are from the GitHub repo “jQuery.isOnScreen”; I don’t claim the right to say it that it is mine, but i’m trying to use it and modify it for my website, kudos to the original dev :D)

2

That code works as is, what’s the question?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<style media="screen">
body, html {
  height: 100%;
}
div#a1 {
  border: 5px solid red;
  margin: auto;
  border-radius: 3px;
}
div#a2 {
  border: 5px solid black;
  margin: auto;
  border-radius: 3px;
}
</style>
</head>
<body>
<div id="a1">
  <p> The title is normal, but when you hover down... </p>
</div>
<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 id="a2" class="target label label-info" title="Article 2 | Prospekt">
  <p> Stackoverflow is an amazing place! Please check your title if someting happened! *something happens magically* </p>
</div>

<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
<script type="text/javascript">
// This Gets the Article Title from a Division!

$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

function updateTitle() {
  if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        document.title = "An Article"; // show this if visible
    } else {
          document.title = "Prospekt | A Gaming Community"; // show this if NOT visible
    }
  }
}

updateTitle()
$(window).scroll(updateTitle);

</script>
</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.