We Keep Coding

Modify page scroll after url hash navigation is done

I need to account for navbar size after the page has loaded if a hash id has been passed in url e.g. example.com#id-of-some-element
I am trying to use the following:
$(document).ready(function(){
if(window.location.hash){
$(window).scrollTop($(window).scrollTop() - 80);
}
});
However $(window).scrollTop() in this case always returns 0.
This leads me to think that .ready fires before the navigation to the hash id has been done.

I believe your theory is correct. Below are 3 examples, one using $(document).ready(), one using $(window).load(), and one with logic to make the adjustment after the first scroll (but not subsequent scrolls).
All 3 show expected $(window).scrollTop() values, but $(document).ready() always appears in the hash location rather than the expected shifted location. $(window).load() appears with the expected 80px adjustment some of the time, but it is not consistent. The third option uses logic that should always work, though it's admittedly a bit clunky. There may be a better solution, but I hope this helps!
Try expanding each snippet and clicking "Run code snippet" repeatedly to see results over several test runs.
Never works: Using $(document).ready():
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
$(document).ready(function() {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>
Sometimes works: Using $(window).load():
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
$(window).load(function() {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>
Always works: Using logic to detect first scroll:
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
var loading = true;
$(window).scroll(function(event) {
if (loading) {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
loading = false;
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>

I want to refresh this div and its content

I have this jQuery to refresh the div, once it reloads it removes the content inside the div. Can someone help me to fix it so it can refresh without removing the content in div?
$(document).ready(function() {
setInterval(function() {
var message = $('#show');
$('#show').html('');
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show" align="center">Refresh me</div>

//I don't know why the heck you want to do these.
$(document).ready(function() {
var message = $('#show').text(); // retrieve the text bet^ the div
setInterval(function() {
$('#show').html(message); //Add the text bet^ the div
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show" align="center">Refresh me</div>

Running script with onclick event when only inside a particular div element

I'm looking at running this script:
$(document).ready(function() {
$('a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load($(urlyep).attr('href'));
});
});
This loads content from a local HTML file via a menu hyperlink into the #content div. It works great but I want to make it more specific so it only works when the click is made in the #menubar div.

Err… You mean $('#menubar a').click(…) ?

<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load("yourexternalpage.html");
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" >menubar</div>
If you have more than one link on the menu bar, I am assuming you have, each needing to load it's own content/page you could do something like the following.
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this.name);
e.preventDefault();
$("#content").load(urlyep);
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" ><a href="#" name="page1.php" >menubar link1</a>-<a href="#" name="page2.php" >menubar link2</a></div>

$(window).resize not working

$(window).resize is not working, what am I missing?
So I have this page with a single vertical menu of 350px width, centered horizontally. The links open iframe's that show different content. The iframe that shows an external site gets his width through: $("#iframeweb").width($(document).width() - $('#menu').width()) so that it fills up the screen, pushing the menu to the side.
That part works, but it also needs to change the width on resize of the window, but it does nothing...
the code:
<div id="wrapper">
<div id="outer">
<div id="inner">
<iframe name="iframeweb" id="iframeweb"></iframe>
<div id="menu">
</div>
<iframe name="iframeA4" id="iframeA4"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
$(window).resize(function() {
$("#iframeweb").width($(document).width() - $('#menu').width());
};
</script>
<script type="text/javascript">
$("#linkA4").click(function(){
$("#iframeA4")
.hide('fast')
.animate({"width": "0px"}, 'fast')
.animate({"width": "210mm"}, 'fast')
.show('fast');
$("#iframeweb").hide('fast');
});
$("#linkweb").click(function(){
$("#iframeA4")
.animate({"width": "0px"}, 'fast')
.hide('fast');
$("#iframeweb")
.hide('fast')
.width($(document).width() - $('#menu').width())
.show('fast');
});
</script>

You have a simple syntax error, closing the parenthesis
$(window).resize(function() {
$("#iframeweb").width($(document).width() - $('#menu').width());
}); // <--

How to create HTML+jScript Scroll Triggered Box

I have a blog at Blogger.com and I want to add a Scroll Triggered Box like Dreamgrow or Qoate Scroll Triggered Box of Wordpress. I referred Scroll Triggered Box with jQuery. I have created a HTML file and testing it but this is not working for me. May be I have mistaken somewhere. My coding is
<html>
<head>
<title>Scroll Triggered Box With jQuery</title>
<style type="text/css">
.Comments
{
font:georgia;
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var y = $(window).scrollTop();
var c = $('#comments').offset();
if (y > (c.top - $(window).height())) {
$('#the_box').fadeIn("slow");
} else {
$('#the_box').fadeOut('slow');
}
});
});
</script>
<div>
<!--My long post here-->
</div>
<div class="Comments" id="the_box">
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments
</div>
</body>
</html>
I am little weak in jScript. I don't know how jScript works.
How can I resolve my issue and get this working in my Blogger.com blog?

i can tell your code is haywire.
var a =$(window).height();
var num = c-y;
if (y > num){
do your function
}else{
do whatever
}