I'm working on a website with a menu fixed on top. At the home page, I have tags that should anchor to id's from other pages on my website. The anchor to these id's work fine, however, the top part of their content stays behind the fixed menu.
I tried to solve it by using JavaScript animate method and adding the menu's height value. This works well when the anchor's destiny id is from the same page. But it doesn't work in my case, because I want to go to an id in another page from the website.
My HTML:
My JavaScript:
<script src="http://localhost/meu_site/js/jquery-3.4.1.min.js"></script>
$('.psi-block-item').click(function() {
var target = $(this).attr("href")
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100)
})
Apparently, when jumping from the home page to another page, it seems to ignore my last js command and just follow the href, keeping part of the content behind the fixed menu.
I already saw some people suggesting to use pseudo css elements and hiding them to make it works, but I was looking for a clean and more professional solution, using only html and javascript.
Thank y'all.
$(document).load(function() {
var target = this.location.href;
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})
i'm not sure, but this should be the logic to work it out...
Most probable the page is reloaded before it can execute the code. Therefore I would suggest that you include a window onload event listener to every page that looks for the hash and then executes your animation.
EDIT:
Please see the answer by #nengak-dakup. His answer looks pretty good.
The implementation would look like this.
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
Link to Page1 - Anchor 1
Link to Page1 - Anchor 2
Link to Page1 - Anchor 3
</header>
</body>
and page1.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page1</title>
<style type="text/css">
header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: grey;
z-index: 5;
}
.box {
position: relative;
top: 100px;
width: 100%;
height: 800px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).load(function() {
var target = this.location.href;
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})
</script>
</head>
<body>
<header>
Back
</header>
<div id="anchor1" class="box" style="background-color: blue"></div>
<div id="anchor2" class="box" style="background-color: green"></div>
<div id="anchor3" class="box" style="background-color: red"></div>
</body>
Hello i have a problem with my website.
I want to make a JavaScript function which scrolls down to an object with the id #important. Usually i just modify the link to page.html#important. but because the object is at the bottom of a div which has a scrollbar itself that won't work.
Code:
<script language="javascript" type="text/javascript">
var timeout = setInterval(reloadChat, 10);
function reloadChat() {
$("#chat").load("chat.php");
}
reloadChat();
</script>
and in chat.php i fetch rows from my database in which the last row is being displayed in a <div id="lastmessage"></div> which i want to scroll down to
Thanks in advance
Is .scrollIntoView() something like you want?
https://www.w3schools.com/jsref/met_element_scrollintoview.asp
Or maybe this can help?
https://stackoverflow.com/a/270628/4335288
var objDiv = document.getElementById("important");
objDiv.scrollTop = objDiv.scrollHeight;
I would use Element.scrollIntoView() with behavior set to smooth.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
window.onload = function(e){
var element = document.getElementById('second');
element.scrollIntoView({ behavior: 'smooth' });
}
#first {
height: 2000px;
background-color: lightgreen;
}
#second {
height: 2000px;
background-color: lightpink;
}
#third {
height: 2000px;
background-color: lightblue;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
behavior: 'smooth' will quickly provide good UX.
You can choose when to call element.scrollIntoView({ behavior: 'smooth' });. It will scroll to that DOM element when called.
I am facing issue with tap event on mobile devices.
create 3 divs with same height. Tap on second div to hide the first div and it will trigger the event on third div.
sample code: reproducible in chrome device simulator
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phone issue</title>
</head>
<style type="text/css">
.hide {
display: none;
}
#one, #two, #three {
width: 100%;
height: 150px;
border: 1px solid #000;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#two').on('tap', function () {
$('#one').toggle();
});
$('#three').on('tap', function () {
alert('you just clicked me!');
});
});
</script>
<body>
<div id="one">hide</div>
<div id="two">main</div>
<div id="three">click</div>
</body>
</html>
try to use 'click' event instead of 'tap' event. I run in to the same issue and manage to solve it by using 'click' event. Please see jquery mobile documentation for details: https://api.jquerymobile.com/vclick/. Regards.
I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}
I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:
<html>
<head>
<title>Drag reposition test</title>
<script type="text/javascript" src="js/css_browser_selector.js"></script>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable({
start: function(e, ui) {
$('#initialdragger').css('top', 400);
x = y; // Javascript error, which weirdly causes a redraw.
}
});
});
</script>
</head>
<body>
<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
<p>Drag me around</p>
</div>
</body>
</html>
How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.
I think binding a mousedown event will get you what you want
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable();
$('#initialdragger').bind("mousedown", function(e) {
$(this).css('top', 400);
});
});
</script>