Random elements on page - javascript

I have created a website ( link here ) where the breeders at the middle of the page are shown random whenever someone enters the page.
I was wondering if it would be possible that if someone goes from the homepage to another page, then presses back button, the breeder order to be the same as it was when he first entered the website.
Right now the order changes every time someone enters the homepage.

Suppose you have the breeders per string, something like
$div[0]='<div>My breeder 1</div>';
$div[1]='<div>My breeder 2</div>';
$div[2]='<div>My breeder 3</div>';
$div[3]='<div>My breeder 4</div>';
and an array
$my_breeders=[0,1,2,3];
If you shuffle the array, you will get something like
$my_breeders=[1,3,2,0];
this is the order you display your divs in. Put this in a string and write it to a cookie.
$order=implode('-',$my_breeders); //gives a string: 1-3-2-0
setcookie('breederorder',$order,time()+(30*60) )
the next time someone visits the page, check for the cookie
if(!empty($_COOKIE['breederorder'])){
$my_breeders=explode('-',$_COOKIE['breederorder']);
}
Now you have the same array as before.
Note, I set the cookie time at half an hour (30*60). If you set it too long, the next time a visitor comes to your page, het will still get the same order.

You can save the state from the order of your elements in a cookie and prevent the randomize function, if a cookie is set.

Related

Clear page data without reloading page?

I have a simple game that produces a random number and takes a user input where the user attempts to guess the number, and the code appends each user guess to a list so they know which numbers they've guessed. There is also a "new game" (.new) link up top that the user can hit at any time to start over. Currently I have the following js:
/*--- Reset game ---*/
$(".new").click(function() {
location.reload();
});
While this works, I would prefer to change the operation so that the page doesn't need to refresh, but rather resets the code to the beginning (i.e. produces a new random number, clears the list items, etc.)
Not sure how to go about doing this. Any Ideas?
Have a function that builds the random number and the call it every time new game is clicked.
So for example have a function called generateRandomNumber() and use it the following way:
/*--- Reset game ---*/
$(".new").click(function() {
generateRandomNumber(); //Function to start everything from the beginning
});
You could have a list, and when user checks their guess, add an element to the list. For the new, just get all the li elements from the list and remove them.
Two buttons, new and check, and two click events. I've made a quick sketch:
https://codepen.io/anon/pen/oxVKJB
You could complete it with the random number generation, validation and stuff.

Go back on browser - return to link location

I have a page with a long list of search result set.
When clicking a result you are directed to a different page that show this specific item details.
What I want is when the user goes back on his browser, the window is located at the link he clicked. (Which might be lower because its a long page that loads more feed when you scroll down, like the Facebook news feed).
Any suggestions with PHP/JavaScript or other language?
Thanks.
This would be quite hard to achieve, since it goes against the whole idea of infinite-scrolling.
You could refer to that item's ID and then preload the set it's in, while ignoring the previous result sets. Like so:
Let's imagine your list of results consists of a total of 100 items. And you want only 10 new items to load each time the bottom of the page is reached. That would leave you with 10 sets (with 10 items each). Quite similar to normal pagination, actually.
Now, if your itemID is 32 and you want to navigate right back to it, you can actually preload the list to show the 3rd result set by default (and you could even add option to scroll up or down to show the first two or the next result sets).
# result set 1: hidden
# result set 2: hidden
# result set 3:
item 30
item 31
item 32
item 33
...
item 39
#result set 4: hidden
If you want both resultSet1 and resultSet2 to be visible as well, you'll have to apply some sort of a JavaScript window height calculation in order to place the 3rd set in the center of the screen.
But, like I said - this is probably too much work and it takes away from the UX. Either use normal pagination or leave the infinite-scrolling as is.

How to save data from dynamically generated textboxes?

I have a page to edit the 'utilization' rate of each employee, based on their designations. So the page has all the designations listed as , next to which a textbox, for the user to fill in the utilization rate. Scenario is that the user will not save each designation's utilization rate immediately after filling it. User will keep going till he fills the last item and then hit the submit button to save. Now, in php I can get all the values from the Request Array. But, how will I know which designations these values belong to? So, what i have as a solution is to name the textboxes with the designation_ids as suffix. May be like;
utilTextbox_1, utilTextbox_2, utilTextbox_3 etc...
Then when the form is submitted;
Check each Request Array element to see if its name starts with 'utilTextbox'
If Yes, split it using '_' to get the designation_id
Update the db table with the value of the text box
Check the next Array Element.....and so on...
is this the correct method or is there a better way of doing this?
You can have array as names in html forms. So something like utilTextbox[1], utilTextbox[2], utilTextbox[3] will work perfectly fine. In php you will get an array in $_REQUEST and you need not to convert in an array because it is already an array.

How to make search field for user with autofill for html list

I need a search field on my site allowing users to search for their location (for a local weather forecast).
I have a html list of locations - each location is clickable (with href to the relevant weather forecast page).
The user should start typing a location in the search field - and as the location name is typed, a match function should start and autofill the search field.
The user should not see the list - only the search field.
Once the match function has autofilled the search field, user should press go or return - and the link to the relevant weather forecast be activated.
I know some html and javascript, but this one is above my level.
I found this code on stackoverflow Filter search for <ul>. It's something like that - but user must not see the list.
You would have shared a bit info with us:
You know some HTML, but don't wanna show it? We would have helped you better if you just sent us some code! :)
What you'll need
Ok, here is the thing.
First create an input field such as:
<input type="text" name="text" id="text" value="" onkeyup="search()"/>
Then use a function as:
function search () {
var value_field = $('#text').val();
$.ajax({
// create an ajax request here..and get the value
success: function (data) {
$('#div').html(data);
}
});
}
<div id="div"></div>
This will be the div where all the data from ajax would come and display.
Where all the thing is happening
Now the main thing is from the other page. You need to control it to show the data or hide it or whatever you want it to do. That's going to happen on the other page the page where request is going.
You can try to show the data only when there is a perfect match else write this:
$('#div').html('Keep writing, you can match');
And make the user write some more words, who know what he mind match!
User will never see the list
Untill or unless you let him go to the page, untill then he will just see the results you are viewing him! So you should use a Database to show the data when the request is Ajax only, otherwise don't create a connection to the database. This way user would never ever see the list, unless its you! :D
Summary:
And the thing is same, the main process is:
You create a function in the input field to search when there is any word added. Forget the backspace right now.
You will send the value to the next page for processing, get the data, set it to the type you want the user to see.
Display it using `$('selecter').html(data);
Good luck.

Remove page from JQuery Mobile history such that 'Back' button bypasses it

I've looked through the jQuery Mobile documentation to no avail, so hopefully someone here has solved what I so far haven't found a way to.
I have a jquery mobile page, served in the usual way (call it 'item display'). It contains info about a particular item. There is a button on this page that takes the user to a page in which he/she can take notes (essentially a big textarea) on the item displayed. Clicking 'save' on the notes page POSTs and redirects back to the item display page.
My issue is that once the notes have been saved, I would like the 'Back' button on the item display page to link back to the page the user was at before first visiting the item display page, NOT the default behaviour of taking the user back to the notes page (since it was technically the last page the user was on).
So, current behaviour:
item list page -> item display page -> click 'Edit Notes on item' -> notes page -> click 'Save' -> item display page -> click 'Back' -> notes page.
I want to replace the last step with clicking 'Back' to take the user to the item list page.
Any such luck? Thanks for any and all guidance you can provide
You can change pages without keeping them in browser history like so:
$.mobile.changePage('#page', {reverse: false, changeHash: false});
this is based on this answer: Jquery mobile, remove previous page
I have been in the same issue as you and I have created an approach, the only one that worked. If someone knows something better, it would be greatly helpful! So, let me explain how to solve (it is a bit complicated, but worked for me).
You will need to override the back button to roll back the history by X pages in the html you want, for example:
$(document).ready(function() {
$('[data-rel=back]').click(function() {
window.history.go(-4);
return false;
});
});
But, the 4 is actually a navigation counter variable in session.
If you use jsf, it would be like this:
window.history.go(-#{mySessionManagedBean.navigationCounter});
Also, you need to initialize and increment this each page change.
If you use jsf, it would be like this:
<h:commandButton ...>
<f:setPropertyActionListener target="#{mySessionManagedBean.navigationCounter}" value="#{mySessionManagedBean.navigationCounter + 1}" />
</h:commandButton>

Categories

Resources