I don't think this is a very basic question, but I need some help or if you can guide me to a resource I'd appreciate it. I have a script that I would like to run only when the visitor comes for the first time.
<script>
$(document).ready(function(){
$(".posts").hide();
$("#header").hide();
$("#body").hide();
$("#footer").hide();
$("#intro").click(function(){
$(".posts").show(3000);
$("#header").show(3000);
$("#body").fadeIn(3000);
$("#footer").show(3000);
$("#intro").hide();
$("p").hide();
});
});
How do I go about this? The visitor enters my site and everything is hidden, then they press a button and it shows everything in a cool way. I do not want to run this script again after visitor returns back to home page from some other page on the website. Any ideas on how this can be done? I am using javascript with jquery.
Thanks in advance.
UPDATE: Thank you Emeeus and Chiran K. for helping me. This is the code and it works fine. For first time visitor, we enter if-block, first time visitor clicks button and enters site. When visitor goes back to home page, it goes to else block, and hides what I want.
$(document).ready(function(){
if(!localStorage.getItem("firstTime")){
$(".posts").hide();
$("#header").hide();
$("#body").hide();
$("#footer").hide();
$("#start").click(function(){$(".posts").show(3000); $("#header").show(3000); $("#body").fadeIn(3000); $("#footer").show(3000);$("#start").hide(); $("p").hide(); });
localStorage.setItem("firstTime","true");
} else {
$("#start").hide();
$("p").hide();
}
});
I think this should work
if(!localStorage.getItem("firstTime")){
//code executed first time
localStorage.setItem("firstTime","true");
}else{
//code executed 2th 3th etc.
}
That could be executed after some event, like click or onload. Keep in mind that you could store whatever you want with localStorage.
There are multiple ways to achieve this depending on your exact requirement.
If you want to handle it once per session, then you can have a session variable and handle it.
If you want to handle it once per user agent, then you can use either local storage or cookies to handle it.
refer this for more info.
Related
I am starting off on a non-angular page, clicking a button with browser.findElement.
Upon clicking on the element the user is taken to an angular page that has a spinner until the page load is complete. Using the following code, protractor waits for the page to load completely before doing the below and I would like it to begin checking for the page-busy-indicator as soon as the initial button is clicked because by the time it gets to this code, the spinner is no longer active.
browser.wait(function(){
element(by.className('page-busy-indicator')).getAttribute('class').then(function(value){
console.log(value);
if(value.indexOf('active')>-1){
return true;
}
});
});
Thanks to finspin and Barney for their comments that pointed me in the right direction. In the end, I needed to turn off waitForAngularEnabled and then use the opposite of what Barney had mentioned (presenceOf). Sorry if the question was confusing because of the way I worded it. Thanks again!
Note that what this is doing is setting up a watch for .page-busy-indicator.active and looking for it for 5 seconds before timing out.
browser.waitForAngularEnabled(false);
browser.wait(protractor.ExpectedConditions.presenceOf(element(by.css('.page-busy-indicator.active'))), 5000);
So I have a function in a script called start() and at the end of the start() function I will ask if the user if s/he wants to play again. If they do want to play again, i want the page to refresh and im doing this using location.reload() and then i want to start from the beginning of the start function again. However, when i simply do this...
location.reload();
start();
it doesn't refresh the page. I was wondering if there is another way for me to go about doing this?
More Info:
this is a black jack game that i am creating for learning purposes.
start function is called when a button is clicked.
in the start function, the dealer and player cards will be shown and then the player has option to either hit or hold.
I wanted all of the things done in the start function erased on the webpage and i done it by refreshing the page(it was the simplest way to me). and then i wanted to call the start function again when the page is refreshed and the user selects okay on the confirm dialog box that he wants to play again.
**EDIT: http://jsfiddle.net/MAbgW/7/ my code is here. pls help if you're free. seems like an easy fix i think i might just be saying it in a confusing way.
Have you tried...
location.reload(true);
Alternatively, you could do...
location.href = location.href;
This would simply send them back to the same URL.
You don't have to reload page. Restart your function in a loop like this:
function start() {
do {
alert('The Game is On!');
} while (confirm('Do you want to play again?'))
}
start();
Do not use page reload as a means of reinitializing data - rather initialize them at the beginning of your start function (first thing inside of do block in code above)
Demo with data init: http://jsfiddle.net/e9W6q/1/
This should do it. Reloads the page and stops the rest of the start() function, unless the user is done.
EDIT:
function start(){
alert("Going...");
var cont = confirm("Do you want to continue?");
if(cont){ location.reload(); end; } // notice the end
alert("Let me know if you see this when you select OK");
}
start();
This code will work: http://jsfiddle.net/MAbgW/9/
I'm a bit lost.
I have two pages; Results and Detail. Whenever user navigates from Detail to Results using the browser back button, Results page should refresh, this way I can show what product user just seen on Detail (like amazon does with recently viewed items)
I don't know if it is better to load page asynchronously,
or use setTimeout as seen here (the example below works, but page refreshes forever)
if(window.top==window) {
// you're not in a frame so you reload the site
window.setTimeout('location.reload()', 3000); //reloads after 3 seconds
} else {
//you're inside a frame, so you stop reloading
}
and when I try reloading just a div also doesn't work
$('#div-id').triggerevent(function(){
$('#div-id').html(newContent);
});
I've also came across a lot of examples leading to this but didn't managed to make it work.
Any suggestion is welcome.
Thank you
The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.
If you don't care about rebuilding the page and want to actually reload it, then you could do:
<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>
I believe you should reload the page asynchronously.
Maybe attaching the event ready to the body will work.
$(function(){
$('body').ready(function(){
alert('worked');
//Code to reload the page or data
});
});
I was wondering if it is possible to stop javascript running on a page when a link is clicked. The problem i am having is the pages refreshes every 30 seconds (A list needs to be up to date on the site) But if a user clicks a link from the list and before that has finished loading the 30 second refresh begins, it stops the link from opening and instead refreshes the page.
Here is the script that is running,
<script type="text/javascript">
window.name = "NewRegistration";
setTimeout("location.reload(true);",30000);
</script>
The link is to another page on the site.
If anything is not clear please ask.
Thanks,
Jack.
<script type="text/javascript">
var id;
function stopRefresh()
{
window.clearTimeout(id);
}
window.name = "NewRegistration";
id = window.setTimeout("location.reload(true);",30000);
</script>
Some Link
If you're using jQuery, this is much easier to apply to all the links on the page:
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
stopRefresh();
});
});
</script>
You don't have to stop all the javascript on the Page.
You have to work on your refreshing page function. For example you can set a flag to false when a link is clicked.
After 30sec
if (flag == false) do not refresh the page
else
refresh the page
That's all :)
The most common way of doing this these days is to update in the background without reloading the entire page, though that's a bit more work to set up. Read up on Ajax to learn more.
A solution that is simpler to implement is to... well, Sean Bright already beat me to that just now I see ;)
Let's say, in website, I want to display the notice message block whenever people click any of the link at my website more than x number of times. Is that possible to count with javascript and display the notice message block ? And can we count the refresh times also ? Or can it be only done with server side language like php ? Please kindly suggest. Thank you.
With Regards,
To do something when any link is clicked is best done with JQuery's live:
Description: Attach a handler to the
event for all elements which match the
current selector, now and in the
future.
$('a').live('click', function() {
// Live handler called.
});
Even if you add more links in run time, this will take care of it.
For counting refreshes I would do it with ajax calls on window.load event, or if you want to use new tech - store it locally with Html5. :-)
You can do that on the client. However, this will be limited to the browser. The simplest will be to store this information in cookies on the client. For instance with jQuery you could simply intercept clicks like that:
$("a").click(function() {
var clickedUrl = $(this).attr('href');
// Here you update the cookie for the count of clicks for that A URL
});
I would either count page refreshes serverside or probably call an ajax function to update the count when the page loads.
If you want to count clicks you may need to bind an event to each link and then for each indivisual button store the number of clicks in global variables...
You could register each click event on the document by using:
$(document).click(function()
{
// Check the number in the cookie and add another
// click to the cookie
});
Then you could use the jQuery cookie plugin to store that value and check it each time there is a click (in the function above).
here's the cookie plugin: https://github.com/carhartl/jquery-cookie
I threw together a quick example. If you're not worried about doing this from page to page then you don't need cookies, just store it in a variable:
http://www.webdesignandseo.net/jquery/clickcount/