I want to implement infinite scroll for the mobile website.
I want to find a plugin for this which uses JS,PHP and Ajax.
Also it should have show more for scroll like the one in Google Images Search.
Thanks in Advance!!
you can find one here
PS: jQuery runs fine with smartphones so i guess this should work fine for you.
Edit
Works perfect in a Windows Phone 7.5
Got a code :
<html>
<body>
<div id="test">scroll to understand</div>
<div id="wrapper" style="height: 400px; overflow: auto;">
<div id="content"> </div>
</div>
<script language="JavaScript">
var more = '<div style="height: 1000px; background: #EEE;"></div>';
var wrapper = document.getElementById("wrapper");
var content = document.getElementById("content");
var test = document.getElementById("test");
content.innerHTML = more;
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
function scroller() {
test.innerHTML = wrapper.scrollTop+"+"+wrapper.offsetHeight+"+100>"+content.offsetHeight;
if(wrapper.scrollTop+wrapper.offsetHeight+100>content.offsetHeight) content.innerHTML+= more;
}
addEvent(wrapper,"scroll",scroller);
</script>
</body>
</html>
But instead of this i want scroll to happen at the end of page as this jquery condition this..How to do this in javaScript?
$(window).scrollTop() == $(document).height() - $(window).height()
Related
When I reload the div content that time scrollbar is coming on top, I want when div reload that time scrollbar position same where I left.
<style type="text/css">
div.scrollbar {
height: 655px;
overflow: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
function newPost() {
$("#newpost").empty().load("slide/parts/extruderRight1.php");
}
var res = setInterval(newPost, 30000);
});
</script>
// How to Add scroll bar maintain where I left load("slide/parts/extruderRight1.php")
<div class="voice {}"class="voice {}"><span class="label"><b>To Do List</b></a></span></div>
<div id="scrollbar" class="scrollbar">
<div id="newpost">
</div>
</div>
What I have to do so I can run proper or add anything into the my code i wanted to resume it to the previous scrolled position suggest me or any changes required I am stuck on this step
<div class="a">hello</div>
<div class="b">bye</div>
I have a one page website and I want a div to be loaded first and then the second one and... Can I do this just with html and css? Or it needs JavaScript or...
Just do it with Javascript:
Change your Body to <body onload="onloadFunction()">
Add style="display: none;" to your div Elements
Add following script:
<script language="javascript" type="text/javascript">
function onloadFunction(){
document.getElementsByClassName("a").style.display = "true";
document.getElementsByClassName("b").style.display = "true";
}
</script>
and change the order of the document. lines to which order you want to have it.
You can try this with something like.
$(document).ready(function() {
$(".b").delay(2000).fadeIn(500); //class b is on delay
});
Can't done with only HTML and CSS. Need to involve JavaScript or jQuery code too.
Yes you need javascript and I suggest jquery(javascript library).
More info at: http://www.w3schools.com/jquery/jquery_get_started.asp
And here is working example(just run with browser and click button):
<div class="a" style="display: none;">hello</div>
<div class="b" style="display: none;">bye</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.a').show();
setTimeout(function(){$('.b').show()}, 2000);
});
</script>
I have a div block that I only want to display on the first page. I mean, if the user is on
http://mywebsite.com/
it displays the div. But if he navigates to the second page of the posts
http://mywebsite.com/page/2
it hides that div. I am using Datalife Engine.
Div example:
<div class="example"> This is a test </div>
Can this be done?
follow this and all be worked fine.
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if( $('#mainPage').length > 0 ) {
$("#hideMe").css({"display": "block"});
} else {
$("#hideMe").css({"display": "none"});
}
});//end doc ready function
</script>
</head>
<body>
<div id="mainPage"> </div>
<div id="hideMe">lorem ipsum</div>
</body>
hope it helps you
example http://jsfiddle.net/viktorino/56ea5/
For datalife engine, display just on the first page we use:
[page-count=1]Content goes here[/page-count]
How do I put this together? I'm working on this website that requires that every time that a item from the menu is clicked the background-position of two specific DIVs change and keep the selection.
Here is my attempt:
First I create a variable "p" to save on the url/address the selected page, so for example, if you are in about us you will probably see something like this on the address bar:
website.com/index.php?p=aboutus
On the menu, on the button about us I did this with a call to the function changeBG onClick:
About Us
I figured I need javascript to do the trick and here is where I'm stock.
This is the script that goes in the header:
<script type="text/javascript">
<?
// Set "p" value to HOME if previously empty.
if ($_GET['p']=='') $_GET['p']='home';
?>
function changeBg(pvalue) {
if (pvalue == '') {pvalue = '<?=$_GET['p'];?>';
}
if (pvalue=='aboutus'){
document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 20px;
document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 80px;
if (pvalue=='contactus'){
document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 10px;
document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 100px;
}
}
</script>
This is what goes on the body:
<div id="left_menu">
About Us
Contact Us
</div>
<div id="this_is_the_first_to_be_changed">
</div>
<div id="this_is_the_other_to_be_changed">
</div>
Can anyone spot why this doesn't work?
Try it using quotes:
style.backgroundPosition="0 20px";
UPDATED
Also, what about this line:
pvalue = '';
you are setting pvalue='=aboutus'
UPDATED
The script element is incorrect:
<script type="java/text">
right is:
<script type="text/javascript">
In addition use firebug or chrome to see the JS generated in the page.
I am trying to load WalkScore Map into one of div's on the page. For some reason my code works only if I alert() something right after $.get() method. Have no idea why.
Can someone suggest something? Thanks.
<html>
<head>
<title>jQuery - Ajax dynamic content loading</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadWalkScore()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
alert("hello");
}
</script>
<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
<script type="text/javascript">
var ws_lat = "40.710318";
var ws_lon = "-74.016553";
var ws_width = "630";
loadWalkScore();
</script>
</div>
Try using something like this, to make the call when the DOM is ready.
<script type="text/javascript">
$(function()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
});
</script>
Put this block after your first <script> element.
For me is working. I had to change the wsid for my domain. I've checked the get request using Firebug and I get a javascript as a response. At the begining I was getting an error because I was using you wsid and it seems that for each calling sides they generate a new one. Try to see if your wsid is the correct one.