I have some code that doesn't refresh when the window gets resized...so if it's big even if I have the size set to 100% it doesn't auto-adjust. The original solution I thought about was to refresh the content, which definitely works, however on mobile every time I scroll the page up and down the page gets refreshed - so I can't even browse the site. It's more of a nuance than a fix. I was hoping there was a way to tweak what I'm using to just refresh the div instead of the entire page.
The div code I have looks like:
<div class="fb-page" data-href="https://www.facebook.com/woodsyhollow" data-width="800" data-hide-cover="false" data-show-facepile="false"></div>
I can throw an ID on the div, so if there was a way to target this specific div, I think that's all I need.
The code for the refresh looks like:
<script>
window.onresize = function(){ location.reload(); }
</script>
Any help is appreciated!
Thanks,
Josh
You can use CSS media queries for a simple fix .
Try something like;
#media screen and (max-width:600px) {
div data {
width: 200px
Related
I've seen quite a few old posts with similar issues but haven't been able to quite find a solution that works for me. In my blazor server project I have a script that should scroll a div inside a component on pages. (timeline of events). This div should scroll on load (to bottom of items). Now if the timelone is not in view when it loads (lower down on page, this is by design) it would also bring the div into view (scroll the page down), where I only want the div to scroll to the bottom. This is what I currently use. What's the easiest way to only make the div scroll, and not the page even if the div isn't visible?
The reason I also specify an item in my script is that if events happen higher up (event status changes, etc) then it requires view, so it would scroll up to get to the item of focus. On page load, I would just specify the index of the last item.
<script>
function ListViewScroll(args) {
let div = document.getElementById('lstTimeLine');
div.querySelector('[data-uid="' + args.id + '"]').scrollIntoView({ behavior: 'smooth' });
}
</script>
Thanks so much for help in advance.
To Mister Magoo's point, This is what worked for me:
function ScrollTimelineToBottom() {
let div = document.getElementById('lstTimeLine');
div.scrollTop = div.scrollHeight;
} ;
Sorry for the dup post.
You should use his css style in your page, so that your page do not have scrollbars and also do not scroll
html, body
{
overflow-y: hidden;
}
I have this very simple function to resize a div according to an element on the page.
Because of the static navigation bar on top of the page, I need to control the empty space underneath it, for the first div with content to appear on the right place (below the navigation bar), specially because when the screen is smaller, the navigation bar gets larger (height is bigger).
My question is: why does it not always work? It works fine most of the times, but sometimes I need to refresh the page for it to work.
Here is the dummy HTML:
<div id="menu-fixed-top"></div>
<div id="empty-space"></div>
<div id="content"></div>
where the #empty-space is the div I want to control the height.
I used the document.ready and the window.resize to control it.
The JQuery function is:
$(document).ready(function() {
var height = $("#menu-fixed-top").innerHeight();
$("#empty-space").height( height );
$(window).resize(function() {
$("#empty-space").height( height );
});
});
Is there any way to get it working 100% of the time? Or the only way is to be sure is to use media queries?
Thanks
document.ready will trigger when the whole DOM has loaded and is ready for javascript to execute. This is to avoid any problems with javascript being ready to go but the whole DOM hasn't finished loading.
http://learn.jquery.com/using-jquery-core/document-ready/
I would first check to see that the DOM has finished loading without document.ready being triggered before drawing the conclusion that jquery isn't kicking it off.
You may also want to look at window.load if you're wanting to calculate heights and such as the DOM != the fully rendered page
I have an existing link which opens up a webpage in a new window with scrollbars disabled as follows:
<a onclick='window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");' href='#'>Click to pop up without scroll bars</a>
For the sake of argument, I cannot change this window.open() code. I need to enable scroll bars after the window has been opened.
This works in IE using the following code:
<script type="text/javascript">
onload=function()
{
enableScrolling();
}
function enableScrolling()
{
document.body.scroll = "yes"; // IE
}
</script>
However this does not work in FireFox or Chrome.
According to this page, the following code should work for FireFox and Chrome but it does not (perhaps this worked in earlier versions?)
document.documentElement.style.overflow='scroll';
document.body.style.overflow='scroll';
Does anyone know if it is possible to enable scroll bars in FireFox and Chrome after the window has been opened with scrollbars disabled?
Just like Nikunj Soni said, setting a height attribute to your body tag will help you solve the problem in every browser. What I will do differently is the following:
Instead of setting a fixed height, I would set height:100%, which enable you to open the popup also in different sizes than the original.
<body style="overflow:auto; height:100%;">
The rest of your HTML code
</body>
This is also not the best solution, but you are actually removing the restictions you get from the link.
Hope you find this answer helpful.
Since you add js for IE I assume you can change the way displayed page works.
In that case I would try to put the contents of the opened window in div, and set its style to something like: height: 200px; overflow: auto;
Actually I tried with different browser, If you have fixed requirement about height, what you can do is wrap all the content of example.html in a specific div with the attached css like overflow:auto;height:200px. I will show you the whole code.
<body>
<div style="overflow:auto;height:200px;">
Your HTML code
</div>
</body>
put it into example.html. Height you can get from your code window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");.
This is not the the actual solution but it will solve your problem in every browser.
Hope this help.
I'm using the following code:
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
everything works fine. My problem is, I got about 8 scripts like that, and whenever I switch the content of the div, it doesn't do that smoothly, first of all, it clears the DIV and let me see that for about 0.7 seconds, after that, it loads ALL of the content within a second, and it's really disturbing my eye.
I thought about a solution, that I will get the height of the page I wanna load, and then set the DIV height to that height, and then load the info. Will it work? because, the LOAD function removes everything from the div, will it remove the height property as well?
generally, this is what im trying to achieve:
//GET TARGET'S HEIGHT
//SET #galleries TO THAT HEIGHT
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
I don't know how to get the target's height and set it. But anyways, will it work? or maybe someone has another solution for me?
Thanks in advance!
You aren't using the complete callback of load() which allows you to run code after content is loaded.
Try something like this:
$(function(){
/* hide first, then load*/
$('#galleries').hide().load("letters/index.php", function(){
/* new content now exists*/
$(this).slideDown()/* or fadeIn() or any other effect*/
});
});
SlideDown is not dependent on overall height so will smoothly move content below it down
==================
Name: //html text box//
age: //text box//
//div//
//table//
==================
Assume the above as a HTML page. Also assume the table has atleast 50 rows so that, the entire page could be scrolled. currently, when I scroll the page, the entire page (div, table) scrolls. I want the div to be at top of the page while scrolling such as the figure below:
==================
//div//
...
...
...
//row21//
//row22//
...
...
==================
I would like to know if this is possible at all. I tried using CSS for div:
//CSS for div:
position: fixed;
width: 100;
But, it displays the position of the div exactly where it was earlier. But, I would like to move the div to the top of the page while scrolling.
Thanks.
This is NOT trivial
You will need to use JavaScript to copy div and make its position fixed.
You will need to handle scroll event to hide and show fixed div
I have a small library to do such thing for table headers , I think you can read the source code or use as-it-is for a table
demo : http://www.agyey.com/demo/stickyhead/demo.html
code: https://bitbucket.org/anuraguniyal/stickyhead
This is not possible in the CSS alone. As you already know you can use:
position: fixed
to keep the element in the same place with respect to the browser window, but in order to move it to the top when the content is scrolled you need to use JavaScript.
You may want to look at this SO post to get an idea how to achieve that effect.
You need to add this to the css.
top:100px;//adjust til the div is below the name and age section.
position:fixed;
I think that's what you are looking for.