Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to get to the bottom of a webpage so that all the items are on the page before I run a script to find a specific item. However, I have to scroll down at least 5 or so times to allow more items to load. Is there a way to get all items to load right away so that I do no need to scroll?
To answer your question, you can add this to your script and call it in a loop to keep scrolling until you find your item:
window.scrollTo(0, document.body.scrollHeight); See here Scroll Automatically to the Bottom of the Page
You can also trying look at the Network tab in Chrome console (or other dev consoles) to see if there is some API you can try to access.
You can use the DOMSubtreeModified event like so:
html:
<div id='container'></div>
javascript:
document.getElementById('container').addEventListener('DOMSubtreeModified', function () {
window.scrollTo(0, document.body.scrollHeight);
}, false);
Assuming your items are dynamically added to the div with id=container.
Note: this is not going to win a beauty contest.
If your using pure JavaScript, use async attribute.
<script async>
//This will load the script after HTML body has been loaded.
</script>
For jQuery, you can use either async or $(document).ready(function() { });
This way you can let your document body be loaded first.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I was wondering how to efficiently maintain a navigation bar. Based on my understanding right now, we just include the html code for the bar at each individual webpage. However, if I had many webpages I would need copy and rewrite the html code for each page. And if I would want to add or remove links I would need to change and update all of the pages. Is there a more efficient way to do this?
There are a lot of ways we can achieved this but here are the simplest I can think of right now.
1. Using PHP include_once function
You can use php for that. Simply store your navigation in a file called header.php for example, then include_once('header.php'); in your page. Make sure your page have a .php extension instead of .html
2. Using jQuery
If you want to stay with the current language(HTML,CSS,Javascript), you can also use JQuery load function.
$("#header").load('header.html');
It is better to run this after the DOM is ready:
$(document).ready(function() {
$("#header").load('header.html');
}
Somewhere in your code, you should have <div id="header"> for the script to inject the nav in header.html
what they do is that they load the page which is called from the server, besides the navigation bar. like either you can call the page in an iframe or you can run a script that could render the elements besides the navigation bar. That's how they could maintain the navigation bar
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a jQuery application that adds a "tile" when i click "addTile" button. The resultant tile will have a menu of buttons (google, youtube, ...), which on click, removes the button menu and replaces it with the respective widget. This part is working fine. The next part includes adding the widget directly on load. Whcih means i have to programmatically click() the "menu" button which is not yet on the DOM. If i want to display a google widget directly on load of the document, how can i do that?
i am right now at this.
$(document).ready(function () {
$("#addTile").click().$("#setGoogle").click();
});
Do not try and click the button. That's impossible. Instead... only try to realize the truth...
There is no button.
You'll see, that it is not the button that clicks, it is the functionality of that said button that needs to be invoked directly.
try below thing
$(document).ready(function () {
$("#addTile").trigger('click');
$(document).on('click','#element_id',function(){
alert('click event is triggered');
});
$("#element_id").trigger('click');
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on a huge single page website and would like to show an scroll down hint (icon or something like that) at the bottom of the window when the user visits the website.
The hint should vanish when the visitor either scrolls down or clicks on the icon. I've seen this on several websites which I can't remember now unfortunately. Already been searching on but with no results as I'm probably searching with the wrong keywords...
Anyone has any directions on where to start to achieve this?
Here is a start to get the scroll hint working. Now on styling, that's up to you but I would personally do something like position: absolute and then work from there and give it a zIndex about everything on the page.
$(window).scroll( function() {
if($(document).scrollTop() == 0 ) {
// SHOW scroll hint
} else {
// HIDE scroll hint
}
});
I did this on one of my own web pages.
http://codepen.io/pattmorter/pen/mFDLs
Just check out the javascript and the css.
I think you would need an ID on your icon/link and then have two event listeners. One for clicking on the ID itself and the other onscroll. Once either of those events are fired you can call .remove()
If you don't know where to start, try to read reference of window object. For visibility change you can use opacity, and position attribute to make it fixed at bottom of screen.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a website with Bootstrap and jQuery (latest from the jQuery CDN) and I want to load the content of the page within a DIV (that is, only a section of the page is loaded, the Bootstrap navbar at the top stays the same as well as other things like scripts, CSS etc.) when a link is clicked.
Example:
My site URL is http://nintri.x10.mx/, and the front page is the same URL. On the page I would have a div with an id, for the purposes of this example, of #pageContent.
jsa005's Profile
should, when clicked, load /profile.php?user=jsa005 in #pageContent.
That's really all there is to it. ;)
You could use window.location.hash (if you were to do this manually. There are of course scripts for this).
You could just load the script from the hash directly like you wanted. Then load the html that the script returns directly to your content's html.
$(function(){
$("#clickme").on("click", function(e){
var hash = window.location.hash.replace('!','');
//or $.ajax or $.get or other.
$.get(hash,function(data){
$("#content").html(data);
})
});
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have this js that beginning so:
$( "#map-page" ).live( "pageinit", function()
{
//Here the body function
});
I would load this function after the page has completed to load.how can i do?
Update: Looks like this method won't work with jQuery mobile (strangely enough).
Try this instead:
$(document).ready(function () {
$("#map-page").doWhatever();
})
For what you want, I think that load suits better
You can read about it here http://api.jquery.com/load/
You should be more clear that you're referring to jQuery Mobile, anyways the best way is to bind a live event to the pagecreate/pageshow event that's triggered on the <div data-role="page">
If you want the code to run just once use pagecreate, if it needs to run everytime the page is shown (there is dynamic data) then use pageshow and fetch any changes via AJAX. Please note if you re-navigate to the page again via the back button etc, it may be fetched from memory in which case your html won't be updated - you must use non-AJAX loading or update your DOM via AJAX in the pageshow
Use an id or class to properly attach the listener, here's a more detailed answer I wrote: https://stackoverflow.com/a/9085014/737023