I have a simple jQuery click and scrollTO anchor script. I have another page, in which I link the content as index.php#home, index.php#about and so on...
How can I achieve the scrollTo effect from the external page? I'm thinking of linking the section as index.php?page=home and when the page loads, take the home variable and apply the animation.
Any other ideas?
EDIT, my code is below
$("nav a").click(function(event){
//prevent the default action for the click event
//event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 500);
});
I think index.php?page=home is an easy way to go.
While index.php is being generated in php test for the variable being set using
if ( !empty($_REQUEST['page']) )
Make sure to filter all user input before you use it
$sanitizedPage = htmlentities($_REQUEST['page']);
Output javascript onto your page that calls the appropriate scrollto action when the page loads
<script type="text/javascript">
window.onload = functionThatScrolls('<?php echo $sanitizedPage; ?>');
</script>
Here I assumed you have a javascript function that takes the anchor name as an argument to cause the scrollTo effect. If you are using jquery or another framework of course use their onload event handlers.
Related
I builded for my home page (index.php) a navigation bar, where I can click on one of the available links (anchors). Selecting one link a new body is loaded inside my page (index.php) that contains this code:
<script type="text/javascript">
$(document).ready(function(){
$('#myselector a').click(function(e) {
var url = $(this).attr('href');
$('#body').load(url);
e.preventDefault();
});
});
this works good.
But, now after loading new page page1.php inside the body of index.php I have this trouble:
My page1.php contains a form, and after the submission I need to reload the index.php with page2.php inside. How can I perfrom this?
Note: I edit my question: If you think that now it is clear can you upvote plese? (I was banned for this question and I can't post other question)
In order to catch events from nodes inserted at a later point you need to use event-delegation, for example like this:
$("body").on("click", "a", function(e){
var url = $(this).attr('href');
e.preventDefault();
$('#body').load(url);
});
This way every click on a link, which is a childnode of body will cause the eventhandler to fire. If you do not want to target all links, but just specific ones you can do that by adding a class to them and the selector.
I'm trying to load a php inside a div1 using jquery. The code I have so far below works fine for loading the initial div1.
<script type="text/javascript">
$(document).ready(function(){
$("#div1").load('load.php');
});
</script>
<div id="div1"></div>
Inside load.php I will have links like this below
Link 1
Link 2
Link 3
What I'm trying to do is on the page the div1 is loaded, when the links load inside the div1 I want to be able to click on the links and it will pass the ?id= var inside the div1 and re-load load.php?id= var here.
How would I go about doing this?
<script type="text/javascript">
$(document).ready(function(){
$("#div1").load('load.php');
$(document).on('click', 'a', function(e) {
e.preventDefault();
$("#div1").load($(this).attr('href'));
});
});
</script>
Adding the above would probably be the simplest way. It would take any anchor element and load it into div1 when clicked. The e.preventDefault() stops the link from loading the new page.
If you have other anchor elements in there that you don't want to direct into this div, you would want to add a class to the anchor elements and then only select that class in the click handler (like a.class instead of 'a').
$('#div1').on('click', 'a', function(e){
e.preventDefault();
var new_id = $(this).attr('href');
$('#div1').load(new_id);
});
This will bind the links loaded into #div1, using .on() let's it still work even though the content will be dynamic.
Then it grabs the href and loads that into #div1.
I have a page where entries are read from a table and then php generates the divs where each row is displayed - the div's name & id are set to a unique string based on the record #. For example:
When the page is loaded, it is passed the unique anchor string of the record to scroll to in the format:
href='showpost.php#g50'
When the page loads it correctly shows the url with the anchor but it doesn't scroll.
However, if I put my cursor on the browser's address bar and press <Enter> the page scrolls correctly to the record. Oddly enough, <F5> and <Ctrl-R> will not work (Firefox 16).
I am guessing that the page being dynamically created has something to do with it. Any ideas what might be going on?
You can always just use a simple javascript call to scroll to an anchor. You can call Javascript code from anywhere in the page, so to be safe, you could put it at the end of the page after the PHP has generated all the anchors.
<?php
// php generation code here
?>
<script type="text/javascript">
var hashSplit = location.href.split('#');
var curHash= hashSplit[1];
window.location.hash = curHash;
</script>
Or if you already know what the anchor of the page is going to be via php you can do it even easier.
<?php
$anchor = "home";
?>
<script type="text/javascript">
window.location.hash = "<?= $anchor; ?>";
</script>
Very useful example, thanks SISYN.
But I have my version
let hashSplit = location.href.split('#');
let curHash = hashSplit[1];
if(typeof curHash !== 'undefined') {
$('html, body').animate({
scrollTop: $('#' + curHash).offset().top
}, 1000);
}
I have pages with articles. When someone clicks on them from an outside source how can I make that article pop up in fancybox and have the index page as the parent page.
I have my pages set up in this format: pages.php?id=123
I want to open that link from my index.php with the fancybox already open to that link.
You can check the referrer on pages.php to see if it's from an outside source, and then redirect to the index page with something in the parameter (e.g. ?external=true;articleid=123) identifying that a Fancybox should pop up with the appropriate article.
For example, on pages.php:
$(function(){
if (document.referrer.indexOf(<your url>) < 0){
window.location = "index.php?external=true;article=123";
}
});
And then on index.php:
$(function(){
//Insert code here to parse query string. You can find code for this online.
var isExternal = getValueOfExternal();
var articleId = getValueOfArticleId();
if (isExternal){
//open fancybox
$.fancybox({
'href': 'pages.php?id=' + articleId
});
}
});
I am trying to figure out how to smoothly navigate between divs using jquery. I have a php website with 4 navigation divs. So when I click "staff" on the page I navigate to that div. How would I do this using jquery ?
This is how I´m using this:
<div id="top_links">
<p class="top_link">The Firm</p>
</div>
i´m trying to make it look like this website: http://themetrust.com/demos/solo/#services
I´m new to jquery. I cant see how I should do this so any suggestion would be a HUGE help.. Thanks :D
You can animate the scrollTop property with jQuery:
$('a').on('click', function (event) {
//stop the browser from jumping to the anchor
event.preventDefault();
//get the href for this link and the offset from the top of the page for the target of that href
var href = $(this).attr('href'),
oset = $(href).offset().top;
//animate the scroll to the selected element
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
//after the animation is complete, update the hash in the address bar so that the state is saved (if the user refreshed the page they can be brought back to this place, but that takes a bit more code)
location.hash = href;
});
});
Here is a demo: http://jsfiddle.net/Hpegt/1/
This requires that your links are targeting elements on the page using the syntax: #element-id.
Note that .on() is new in jQuery 1.7 and is the same in this case as .bind().
UPDATE
One cool thing that you can do with this is add a custom easing method. If you use the jQuery Easing Plugin ( http://gsgd.co.uk/sandbox/jquery/easing/ ) then you can choose from lots of types of easing. I like easeInOutExpo for animating page scrolling.
You can use the scrollTo plugin: http://demos.flesler.com/jquery/scrollTo/
The example page is using jQuery.ScrollTo
Looks like they're using these libraries:
jQuery.scrollTo
easySlider
visualNav
You'll want to use jQuery's animate() function to adjust the window.scrollTop property to align with the appropriate div.