This question already has an answer here:
Count Number of Clicks on a link (Without onclick) [closed]
(1 answer)
Closed 4 years ago.
i want to count clicks when this link is clicked. AND show "how many times(number) link clicked"in example.com
not to use mysql.and better php if not,then javascript is ok
example.com
For a pure JS implementation, you could use localStorage as follows:
<html>
<script>
function init() {
let count = localStorage.getItem('counter');
if(count === null){
count = 0;
localStorage.setItem('counter', count);
}
count = parseInt(count);
updateCount(count);
}
function incrementCounter() {
let count = parseInt(localStorage.getItem('counter'));
count = count + 1;
localStorage.setItem('counter', count);
updateCount(count);
return true;
}
function updateCount(count) {
document.getElementById("count").innerHTML = "Clicked "+count+" times!";
}
</script>
<body>
<p id="count">-</p>
<script type="text/javascript">
init();
</script>
Google
</body>
Related
This question already has answers here:
GET URL parameter in PHP
(7 answers)
Closed 6 years ago.
I'm trying to get page number from web address like beds.html?page=3
but, if I use php get method, then it's not returning anything.
I hope to find any easy solution.
cheers
If You Want that parameter on html page then you have to use javascript for it
<script>
var param1var = getQueryVariable("page");
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
alert('Query Variable ' + variable + ' not found');
}
</script>
if you are on php page simply use
<?php
echo $_GET['page'];
?>
you can get page like this:
<?php
$_REQUEST['page'];
?>
and also you can type echo before $|_REQUEST to check you are getting proper page number or not
get is the right method to use.
<?php
$_GET['page'];
?>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
javascript - document.write error?
I have a piece of Javascript that I'm using that checks to see if a div is a certain style and then runs an if else statement:
window.onload = function () {
if (document.getElementById('slidingDiv').style.display == 'none') {
document.write('<img src="images/show-more-arrow.jpg" width="61" height="45">');
} else {
document.write('<img src="images/show-less-arrow.jpg" width="61" height="45">');
}
};
This works OK, but it only shows this HTML image on the screen. I need it to add the HTML to the existing code on the page.
Many thanks
Use appendChild or innerHTML
example:
document.getElementById("elemId").innerHTML = '<img src="images/show-less-arrow.jpg" width="61" height="45">'
var wrapper = document.createElement('div');
var image = document.createElement('img');
image.src='images/show-more-arrow.jpg';
wrapper.appendChild(image);
Something like this.
This question already has an answer here:
How to paginate query results for Infinite Scroll?
(1 answer)
Closed 8 years ago.
Infinite scroll should stop after 10 rows of records. If there are more records, ajax pagination should be displayed. For example, consider this infinite scrolling example.
So after 20 records I want to display pagination and same should be done on next page. Please let me know if you have any of this ideas or solution.
Here is my code on which I am working:
//On doMouseWheel = 1 I have taken the currentdealoffset value and check it with the total no of deals present
//If count is less, then simply calculating the window position displaying the allotted records say 10
//On next scroll just doing the same process and fetching records using ajax until end of the deals
//Now the problem is I am not able to code a logic where after say 10 records show a pagination and
//When click on next page the same process should be managed by fetching the offset count of scrol and offset of pagination bar
doMouseWheel = 1 ;
$(window).scroll(function() {
if($('#facebox_overlay').is(':visible')==false){
$('#endofdeals').show();
$('#endofdeals').html("<center><img src='"+SITEIMG +"ajax-loader_1.gif' ><center>");
//console.log("Window Scroll ----");
var currentdealoffset = 0; //alert(currentdealoffset);
var currentdealoffset = parseInt(document.getElementById("countval").value); //alert(currentdealoffset);
var displaymode = parseInt($('#displaymode').val());
var totalcountdeal = parseInt($('#totaldeals').val()); //alert(totalcountdeal);
if(currentdealoffset<totalcountdeal){
if (!doMouseWheel) {
return ;
} ;
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop){
//console.log("Window distanceTop to scrollTop Start");
doMouseWheel = 0 ;
$('div#loadMoreComments').show(5000);
//console.log("Another window to the end !!!! "+$(".postedComment:last").attr('id'));
$.ajax({
type : 'POST',
dataType : "html",
data: {
typeday : $('#remdumtype').val(),
catid : $('#catid').val(),
},
url: "<?php echo https_url($this->config->item('base_url'))?>popup/dealsearch",
success: function(html) {
doMouseWheel = 1;
if(html){
if(displaymode==12)
$('#listTable tr:last').after(html);
else
$("#postedComments").append(html);
//console.log("Append html--------- " +$(".postedComment:first").attr('id'));
//console.log("Append html--------- " +$(".postedComment:last").attr('id'));
$("#last").remove();
$("#postedComments").append( "<p id='last'></p>" );
$('div#loadMoreComments').hide();
$('#endofdeals').hide();
}
}
});
}
}
else
{
if($('#endofdeals')!='')
{
$('#endofdeals').hide();
if(currentdealoffset < displaymode)
{
$('#endofdeals').hide();
}else if(currentdealoffset > displaymode)
{
$('#endofdeals').show();
$('#endofdeals').html("<center><h2 style='color:#4C335B'>End of deals !!!!!!!</h2></center>");
}
}
}
}
});
According to me, You want page numbers but the pages should load slowly as you scroll.
If this you want then, you should not use Infinite scroll technique but LazyScroll will help you and if you want 20 records then make your query for 20 records also create pagination below
Here, you can have the Plug-in and Demo.
I'm following this tutorial here: http://brenelz.com/blog/implementing-paging-using-php-and-jquery/
Here is what I have: http://eataustineat.com/testingfolder/
I've encountered a strange problem when the page initially loads. All that shows is the Next and previous link when the first set of results and the next link should be present. Once you click next or previous, then the the results show. But after that, the next and previous links no longer work. The numbered links will work, however.
I've included the jquery below because i believe it to be the source of the problem:
function pager(dir) {
var page = parseInt($("#offset").val());
var max = parseInt($("#maxpage").val());
var no = isNaN(parseInt(dir));
if (!no) {
page = parseInt(dir);
}
if (dir == "next") page = page + 1;
else if (dir == "first") page = 0;
else page = page - 1;
if (page == 0) {
$("#prev").remove();
} else $("#prev").add();
if (page == max - 1) {
$("#next").remove();
} else $("#next").add();
$.post("page.php", {
val: page
}, function (result) {
$("#table-div").html(result);
});
}
Thanks for reading.
The problem is the var page = parseInt($("#offset").val()); line in your pager function. There is no element with an id attribute of offset. The result of parseInt is NaN and when you try to add a number to it, it doesn't add since NaN isn't a number.
You most likely forgot to add the element that contains the offset in your form somewhere. It looks like that's covered in Step 9 of your tutorial.
Is there createTable($link,$sql_offset,$limit); in your php code, Step 8
I'm looking to create a simple jquery game.
It starts like this, the user enters a number in a text field.
<form>
<input type="text" id="MyNumber" value="" />
<button id="getit">Play</button>
</form>
<div id="randomnumber"></div>
After the click the play button, a series of numbers will appear in the div id randomnumber.
The objective is to click on the randomly rotating numbers in the div id randomnumber when they see the number they intered in the my number text field. If they click their number, they win.
The jquery script I have requires a button be pushed to generate the number, (I don't want a button pushed each time a new number should be generated.) The script also doesn't identify the number that was clicked, or send it to my checknumber.php page so I can store the number entered and the number picked in a database.
Any help?
this is the jquery script I have.
function IsNumeric(n){
return !isNaN(n);
}
$(function(){
$("#getit").click(function() {
var numLow = $("#lownumber").val();
var numHigh = $("#highnumber").val();
var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
if (IsNumeric(numLow)
&& IsNumeric(numHigh)
&& (parseFloat(numLow) <= parseFloat(numHigh))
&& (numLow != '')
&& (numHigh != ''))
{
$("#randomnumber").text(numRand);
} else {
$("#randomnumber").text("Careful now...");
}
return false;
});
$("input[type=text]").each(function(){
$(this).data("first-click", true);
});
$("input[type=text]").focus(function(){
if ($(this).data("first-click")) {
$(this).val("");
$(this).data("first-click", false);
$(this).css("color", "black");
}
});
});
The "Play" button is good to start the ball rolling (I'm not certain if you were thinking of removing it entirely). To generate numbers periodically, use setInterval.
$(function(){
var initialPeriod=500; // 0.5s
var generateNumIval;
function generateNum() {
var numLow = $("#lownumber").val();
var numHigh = $("#highnumber").val();
var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
if (IsNumeric(numLow)
&& IsNumeric(numHigh)
&& (parseFloat(numLow) <= parseFloat(numHigh))
&& (numLow != '')
&& (numHigh != ''))
{
$("#randomnumber").text(numRand);
} else {
$("#randomnumber").text("Careful now...");
}
}
function run(period) {
clearInterval(generateNumIval);
generateNumIval = setInterval(generateNum, period);
}
$("#getit").click(function() {
run(initialPeriod);
return false;
});
...
You can change the period (such as to increase the difficulty when the user clicks the correct number, or decreasing the difficulty when the user makes too many sequential mistakes) by calling run with a new period. If you want to change the period after generating each number, use setTimeout rather than setInterval.
To check a click on a number, register a click handler on #randomnumber that compares its val() to #MyNumber's val(). From there, take appropriate action as to whether it's a hit or miss. As Dan says, doing this for every click will create quite a bit of network traffic. Though only a small amount of data may be transmitted each time, the number of connections can cause a significant impact. Instead, have a "Stop" button and send the data if the user clicks it, or use an unload handler (one does not exclude the other).
Your server will crash and burn if you have more than a couple people playing this game. People can identify and click very fast (multiple times per second), but unless they live next to your server, you can't receive and respond to HTTP requests that fast, nor can your server handle hundreds or more per second from the multiple users.
Write the game in JavaScript and when they're done, send the totals (# of wrong clicks and # of right clicks, or whatever) to your server to save. Do your best to obfuscate how they're sent so that it's not trivial to make up scores.
There's a couple of things to look out for here. There's no reason why the random numbers can't be generated from the number the player has entered himself, or even better, a number generated by the game itself.
The way which you've done the placeholder text, using data and two event handlers is also somewhat messy. At a minimum you should be using .one to attach a one-time event handler for this, but it would be much better if you use the HTML5 placeholder attribute with a Javascript fallback.
Other than that, you're still missing significant amount of game logic in there. I won't advice you to work on this game for too long though - it's great as an exercise in working with JavaScript and jQuery, but otherwise not very worthwhile.
Oh, and just for fun, I also built my own version of this.
var hitCount = 0,
missCount = 0;
function IsNumeric(n) {
return !isNaN(n);
}
$("#getit").click(function() {
var li = [],
intervals = 0,
n = parseInt($('#MyNumber').val());
if (IsNumeric(n)) {
setInterval(function() {
li[intervals++ % li.length].text(Math.random() > .1 ? Math.floor(Math.random() * (10 + n) + (n / 2)) : n).attr('class', '');
}, 500);
}
$('#randomnumber').empty();
for (var i = 0; i < 5; i++) {
li.push($('<li />').click(function() {
var $this = $(this);
if (!$this.hasClass('clicked')) {
if (parseInt($this.text(), 10) === n) {
$this.addClass('correct');
$('#hitcount').text(++hitCount);
} else {
$this.addClass('wrong');
$('#misscount').text(++missCount);
}
}
$this.addClass('clicked');
}).appendTo('#randomnumber'));
}
return false;
});
Crude yes, but it sort of works. Have a look at it here: http://jsfiddle.net/DHPQT/
For fun..
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var mainLoop;
$(function(){
$("#getit").click(function() {
if ($(this).attr('class') == 'start') {
$(this).attr('class','play');
$(this).html('STOP THE MADNESS!');
mainLoop = window.setInterval(function() {
var output = '';
for (var i = 0; i < 10; i++) {
var numLow = $("#lownumber").val();
var numHigh = $("#highnumber").val();
var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
output += '<div>'+numRand+'</div>';
}
$('#randomnumbers').html(output);
},250);
} else {
window.clearInterval(mainLoop);
var sweetWin = false;
$('#randomnumbers').children().each(function() {
var v = $(this).html();
if (v == $('#MyNumber').val()) {
alert('WIN!');
sweetWin = true;
$.post('127.0.0.1',{outcome:'win'});
}
});
if (!sweetWin) {
alert('FAIL!');
$.post('127.0.0.1',{outcome:'loss'});
}
$(this).attr('class','start');
$(this).html('Play');
}
});
});
</script>
</head>
<body>
Low: <input type="text" id="lownumber" value="0" />
High: <input type="text" id="highnumber" value="100" />
<input type="text" id="MyNumber" value="50" />
<button id="getit" class="start">Play</button>
<div id="randomnumbers"></div>
</body>
</html>