I have a php page and I am trying to scroll user to section automatically after entire page is loaded. Right now it takes directly to that section on page load, I want entire page to be loaded and then scroll the page to that div. What I am doing is.
<script type="text/javascript">
<!--
function gotoit()
{
window.location="#gohere";
}
//-->
</script>
<body onload="gotoit()">
some code here
<a name="gohere"><div class="I want to scroll to this div"></a>
Please help me what should I do to scroll smoothly to that section automatically after page load.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(window).load(function() {
var theHash = "#go-here";
$("html, body").animate({scrollTop:$(theHash).offset().top}, 800);
});
</script>
</head>
<body>
<p>Lots of content here...</p>
<p>More content...</p>
<p>etc...</p>
<p id="go-here">Scroll down to here automagically</p>
<p>Some more content</p>
</body>
</html>
$(window).load() ensures the page starts to scroll after all your other assets have loaded (images, for example).
Here is a jQuery function I use to achieve this:
function scrollToStart(){
$("#scrollToStart").click(function (){
$('html, body').animate({
scrollTop: $("#startHere").offset().top
}, 2000);
});
};
Related
<html>
<head>
<script src="js/jquery-1_9_1_js.js"></script>
<script>
$(function() {
$("#mainDiv").load("two.php");
});
</script>
</head>
<body>
<div class="main" id="mainDiv"></div>
</body>
</html>
Hi, I have above code in one.php. It loads data from two.php into mainDiv.
The contents of two.php are overlapping out of the div instead of the scrolling inside the div in one.php. Please help me insert a script/code that will scroll the contents inside mainDiv instead of overlapping.
try this :
<div id="" style="overflow-y: scroll; height:'your height';">
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#mainDiv').load('home.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
it will refresh every 5 seconds
Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:
$(document).ready(function() {
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:
<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>
The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>
The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>
What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.
This is how I tested:
main page:
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>
and the page being opened in fancybox: fancy.php
<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>
[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]
There is my code so far. The issue is that the popup seems to be working perfect in Chrome but in Firefox it sticks to the top of the window after entering and in IE the popup does not even appear.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
$(function () {
$("#dialog").dialog({
show: {
effect: 'drop',
direction : 'up',
distance: 1000,
duration: 2000,
},
});
});
}, 2000)
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
</body>
</html>
I want the popup to behave in the same manner as it is in Chrome with all the browsers.
http://jsfiddle.net/fakhruddin/x39Rr/14/
Web Page Link
Please guide.
Try to add:
<body style="height:100%">
The solution is simple! Add to the begin of file:
<!DOCTYPE HTML>
i want to refresh a page in php(which is executing the sql statements) to p refreshed every 10 seconds. I load the page in a div like:
<div id="test"> <?php echo showPage() ?></div>
So how can i just refresh this duv that will make the data fetch by the sql refresh..
thank you
You can include a <meta http-equiv="refresh" content="10"/> tag in the head tag, or, if you do not have access to the head tag, you can insert a script tag anywhere in the page like this one:
<script type="text/javascript">
setTimeout(function() {
location.reload();
}, 10000);
</script>
<script type="text/javascript"><!--
$(document).ready(function() {
setTimeout('$(\'#test\').load(\'abc.php #test >* \' )', 10000)
});
//--></script>
Write your script in the below way
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#test').load('test.php');
}, 10000); // refresh every 10000 milliseconds
</script>
<body>
<div id="test"> </div>
</body>
I have encountered an issue that I cannot seem to work out in regards to loading page content which contains a google map. Below is the index.php page containing the parent header and the google api information.
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.2.min.js"></script>
<!-- Google Maps -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("location-wedding"),
mapOptions);
}
</script>
<!-- Switch Layout -->
<script type="text/javascript">
$(document).ready(function() {
$('.Theme_Page').load("test.php");
});
</script>
</head>
<body onload="initialize()">
<!-- Page Change -->
<div class="theme_holder">
</div>
<div class="Theme_Page">
<!-- Content To Go Here -->
</div>
</body>
The page being loaded in is the following:
<div id="location-wedding" style="width:700px; height:250px"></div>
The problem is if the above div is within the index.php then the map is present, as soon as it place it in the to be loaded page it does not show at all. The reason as to why I am wanting it to be in the .load() page is because I'm going to use Jquery to change the contents on this page (with an onclick event)
Any help or guidance would be most appreciated.
Cheers Lee.
As yoda said your initialize function kicks in before load.php is loaded. so there will be no div where javascript can put map in instead of calling initialize function from body onload you should call this function in load.php ..... try this:: remove onload function from body and place following javascript code on load.php
<script type="text/javascript">
$(document).ready(function() {
initialize()
});
</script>
At a guess, because the onload="initialize()" kicks in before the test.php div is loaded. Put the initialize() statement in the loaded page.