i have a web app that has content like a facebook wall. when you click a button it adds more content at the end of the current content then should scroll to it. but currently if im scrolled any amount down, when i add the content the page suddenly scrolls down a seemingly random amount, and I have not added the scroll-to code yet. Why is the page auto scrolling? and how do i get it to stop?
The simplest way to do this without looking to far into what your code might be would just be offsetting what you add. So using some js find out the height the new content would add and then when you add it, scroll down that amount
While I'm not exactly sure why it's happening, I do know that you should be able to play around with CSS to avoid any scrolling while adding content to the page. If you set the body overflow to hidden PRIOR to adding the content, then setting it back to visible afterward, you should be able to prevent any scrolling from happening.
If you're using jQuery, something like this:
$(document.body).css('overflow','hidden');
// do your stuff here e.g.
for(var i=0;i<1000;i++) {
$(document.body).append('<div>some content to append here</div>');
}
$(document.body).css('overflow','visible');
NOTE: if it's a 3rd party library that's appending the content and they're using JS to scroll the page, this solution may not work.
Related
I'm sorry for asking a simple question as I'm still learning html/css/js. What I want to do is to be able to click on this button that is a div class made from css and js, to load it's content without refreshing the page, which I believe requires ajax or jquery, but not sure how. Here is my github page danielroberto.github.io and the repo https://github.com/danielroberto/danielroberto.github.io so you can get an idea of what I mean. I basically want to click on any of the navigation buttons and then loads whatever content I want without redirecting to whole new html page. For example, when I want to click on the "photography" button, I want the button effect to happen while my images load on the bottom without redirecting to something like photography.html. Similar to clicking on the "design" button, I want it to transition and load my content.
There is a wealth of resources on the net to get the intro you need to AJAX - the technique of loading parts of a webpage instead of the whole thing.
You correctly suggest that you could use the jQuery JavaScript library to do this - there are lots of alternatives, but that's easy to learn, and is widely used on the net. Tried and tested!
Start here: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
That would only be if you are planning to use some server-side technology to serve up your images.
If you are just going to manually set a list of images to show, and you want the buttons to cycle through these, then you're probably best just to build a carousel of some kind, using a jQuery carousel plugin, and include it all in your HTML markup from the beginning. Loads to choose from or get inspired by here: https://plugins.jquery.com/tag/carousel/.
Also, you should size your images to fit the screen you are serving them to. I recommend you look at using srcset. Your image on the test site was 4600px wide! Check this out: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I hope it goes well. The early days can be hard work but you'll soon get the hang of it.
You could store your content in a var in your js. Then when your button is clicked you can call the function which creates a text node or an element and append that to your div.
HTML
<button onClick="function()"></button>
<div id="show-data">
</div>
JS
var newText = 'Stuff here';
function function() {
var div;
div = document.getElementById('show-data');
div.appendChild(document.createTextNode(newText));
}
You can easily edit the html of an element when clicking a button using jQuery
HTML
<div class="my-button">click here</div>
<div class="my-content">init content</div>
JS
contentElement = $('.my-content');
$('.my-button').click(function() {
contentElement.html('new content');
});
https://jsfiddle.net/jaxon58/zp9mvu38/
i have div like This :
<div id="PartialOnPortFolioGrid" >
</div>
and in my Java Script File i use this code to remove and rebind the data like This:
$("#PartialOnPortFolioGrid").empty();
$("#PartialOnPortFolioGrid").html(datasearch);
And When im Running it, it cause my page kind of flash in other words all elements hide and show
so how can i fix it ?
by the way in my div i have a Kendo Grid
You could either use effects/animation to make the transition slow to see if it makes things smoother or not.
Or
you can set the visibility of the div to hidden then load the html content and then set visibility again to visible. That might solve the issue.
Working on creating a dynamic breadcrumb plugin using either jQuery or Javascript, and I do not have the knowledge to make it change dynamically while you scroll the page.
So we have a fixed header element, that will house the navigation and breadcrumbs.
While scrolling down the page, I would like the breadcrumb navigation element to change based on what section I am scrolling past.
Is this possible?
I appreciate any help or suggestions.
I believe this is possible. You can use <name> or <id> tags similar to the way you want to direct someone to a certain part of a page.
I would use those to determine whether an element is in the viewport or outside of it.
If you are okay with using a plugin you should go with the JQuery isInViewport plugin :
https://plugins.jquery.com/isInViewport/
You can also take a look at the raw code and change it to your liking.
I am building a website, which is having parallax effect,its almost done but i have an issue with that ,at a particular part I have some lengthy texts (hence scroll bar also present),now when i scroll the text ,the text scrolls as well as background also scrolls (which I don't want).I have tried putting things like position:fixed but it does not work.However I have observed that by disabling(not at all adding it in the index page) a particular .js (say custom.js) I achieve what I want.
My requirement is like when i hover upon the text area ,the background to be fixed(no scrolling) but text to be scrolling and when I come out of the text area,it should be like the previous case(background scrolling possible).Is it possible to disable a particular .js WRT mouse events.I have already tried a few online solutions on how to disable js and reload js but none works for me,am new to js does know much either .I have also read online that once js loads its effects cannot be removed(sticks to memory kind of thing),completely puzzled!
Any help
HERE is a SOLUTION
If you want to stop a script you can wrap your <script> tag by <noscript> tag using jquery wrap() function.
Here is an Example.
with scroll example too.
I have set up a page using bootstrap. (http://ethnoma.org/about.html) I have a sidebar navigation that is affixed (which is working great). I also am using bootstrap scrollspy on this navigation and all links in the navigation are within the same page (using ancors). Everything was working fine (even with a smooth-scroll plugin added). I simply had to call this script to force Scrollspy to refresh after all content is added to the page (which I placed in the <head>).
<script type="text/javascript">
// ScrollSpy
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
});
</script>
My client then asked me to add images to the page. I did so using bootstrap markup and css classes like the following:
<a class="pull-right pad5" href="#">
<img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/>
</a>
Which makes the parent "a" tag float to the right (in this case) and makes the img into a block element.
Problem is these floated images make the page longer than it was originally. Yet Scrollspy is still switching the active link at the same place. This causes scrollspy to activate links for content farther down the page than you currently are.
I am at a loss for how to force Scrollspy to take the floated images into account when calculating the location of the ID's the ancors link to. Do any of you have an idea how I could fix this. You can see the problem in effect at the following page http://ethnoma.org/about.html
I just came across this issue myself, so I thought I'd provide some explanation, and a possible solution, in case anyone else finds themselves in this bind.
First, scrollspy is working correctly. At the time that it computes the offsets of the various elements on the page, the images haven't loaded yet, so they have an effective height of 0. Later, when the images load, the browser determines their native dimensions, recalculates the page layout, and then repaints the page with the images. However, scrollspy is completely unaware that the page has been repainted, so it continues to use the stale offsets.
If you were to refresh scrollspy after all the images loaded, you'd find that the offsets would be correct. So, the question is how to do this.
One solution is to attach an onLoad event handler on every image, and then refresh scrollspy inside the handler. A simplified approach might look like this:
<script type="text/javascript">
function refreshScrollspy() {
$('[data-spy="scroll"]').each(function() {
$(this).scrollspy('refresh');
});
}
$(function() {
refreshScrollspy();
});
</script>
<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>
Here's a working jsfiddle example. Note that that image's load handler has to be registered before the image actually loads. Otherwise, it won't get fired. That's why I'm using an inline event handler here. A more elegant solution is left to the reader.
Came across this issue myself while trying to use the Scrollspy from Bootstrap, and it seems that the script doesn't take into account of the image's height while calculating, thus causing the Scrollspy to be in accurate.
I believe this is due to that the image doesn't have a height set to it. By inspecting the page, I have found that the floating images I have included in the page had the height set to auto, and when I've set it to a specific value after media queries in the CSS, my Scrollspy was working perfectly.