We Keep Coding

Go to url and affter page is load run function

I want to make button witch run function (Price List filter) after new page is loaded. How to do that (in Javascript)?
Let's say I have button like this:
var faceButton = document.getElementById('faceButton');
faceButton.addEventListener('click', function () {
window.location.href = '/pricelist.html';
window.onload = function () {
facePrizes();
}
});
function facePrizes(){
document.getElementById('nose').style.display = 'block';
document.getElementById('eyes').style.display = 'block';
document.getElementById('arm').style.display = 'none';
document.getElementById('leg').style.display = 'none';
}
After clicking on faceButton I want to go to prizes.html file and run facePrizes() after page it's load

So I manage to find a solution :)
I've added querystring to link -> if link is correct run function
Working code:
var faceButton = document.getElementById('faceButton');
faceButton.addEventListener('click', function () {
window.location.href = '/pricelist/?face';
});
if (window.location.href == "http:/example.com/pricelist/?face") {
facePrizes();
}
function facePrizes(){
document.getElementById('nose').style.display = 'block';
document.getElementById('eyes').style.display = 'block';
document.getElementById('arm').style.display = 'none';
document.getElementById('leg').style.display = 'none';
}

How to execute jquery function one after other

In below, When i click on button call the jquery click event,It will first shows the alerts upto this it works properly, In this i have call two functions(i.e. reload() and popup()) when i click on button it gives alerts and after that it execute popup() function and reload() function at a time.
My query is i want to execute first reload function(it reload only once) then execute popup function means when i click on button first reload the page only once and then show me my popup.
<script>
$(document).ready(function()
{
$('.button').click(function()
{
var href = $(this).val();
alert(href);
$.session.set("linkurl",href);
alert($.session.get('linkurl'));
//window.location.reload();
function reload()
{
if(document.URL.indexOf("#")==-1)
{
// Set the URL to whatever it was plus "#".
url = document.URL+"#";
location = "#";
//Reload the page
location.reload(true);
return true;
}
}
function popup()
{
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
$.when( reload() ).done(function() {
popup();
});
});
});
</script>
<button class="button" value="<?php echo $value['3']; ?>" style="background-color:#ff8c21;">Buy Now</button>

try something like this:
function reload() {
if (document.URL.indexOf("#") == -1) {
// Set the URL to whatever it was plus "#".
url = document.URL + "#";
location = "#";
//Reload the page
location.reload(true);
return true;
}
function popup() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
if($.session.set("reload") == true ) {
popup();
$.session.set("reload", false);
}
$('.button').click(function() {
$.session.set("reload", true);
reload();
});

The simple answer - it will not work. You cannot reload a page and execute any JavaScript after it. After unloading a page, JavaScript will stop executing.
You need to pass any sort of flag to your target page in order to tell it to show a popup. You can use GET parameters, for example.
There is a good Stackoverflow article on this topic:
Global Variable usage on page reload

$(document).ready(function() {
$('.button').click(function() {
var href = $(this).val();
alert(href);
$.session.set("linkurl", href);
alert($.session.get('linkurl'));
//window.location.reload();
reload(function () {
popup();
});
});
});
function reload(callback) {
if (document.URL.indexOf("#") == -1) {
// Set the URL to whatever it was plus "#".
url = document.URL + "#";
location = "#";
//Reload the page
location.reload(true);
return true;
}
}
function popup() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}

Setting and checking localstorage for a certain value, then performing a function based on the data

I'm trying to set local storage from one page("index.html/settest.html"), and check for it on "index.html". If the check comes back with a certain result, it'll execute a function.
I have written some code for this, but it doesn't work. I don't really know why, so I'm hoping to get some assistance here.
Here's what I have on my "settest.html" page. It's really simple -
<script>
window.onload=setlocalstorage() {
localStorage.setItem("one", true);
}
</script>
So the way I understand it, when the page loads, it should set the value of "one" to true in localStorage.
Here's what I have on my "index.html" page -
<script>
window.onload=setInterval(function() {
var one = localStorage.getItem('one') || '';
if (one != 'yes') {
function hideone() {
var elem = document.getElementById("one");
elem.className = "hide";
}
}
}, 1000);
</script>
From what I understand, this should check localStorage every second for "one", and execute the function "hideone" if it comes back yes(or true).
However, when I go to "settest.html", and then visit "index.html", nothing happens. There are no errors in the console, or anything abnormal showing. I just don't get why it won't work.
Thanks in advance, if anyone needs more information or context feel free to ask!
-Mitchyl

You're not defining the window.onload functions correctly. Either:
<script>
window.onload = function() {
localStorage.setItem("one", true);
}
</script>
Or:
<script>
window.onload = loadFunction;
function loadFunction() {
localStorage.setItem("one",true);
}
</script>
And on your other page:
window.onload = function() {
setInterval(function() {
var one = localStorage.getItem('one') || '';
if (one != 'yes') {
function hideone() {
var elem = document.getElementById("one");
elem.className = "hide";
}
}
}, 1000);
};
Additionally, you're setting localStorage.one to true on the first page, and checking if it's yes on the other page. Not sure if this is meant to be or is a mistake.

None of your functions are correctly defined. It looks like you want to do this:
settest.html:
<script>
window.onload=function()
{
localStorage.setItem("one", true);
}
</script>
index.html:
<script>
window.onload = function ()
{
setInterval(function()
{
var one = localStorage.getItem('one') || '';
if (one !== true)
{
var elem = document.getElementById("one");
elem.className = "hide";
}
}, 1000);
}
</script>
Assuming you want it to check every second to see if it needs to set the class on a specific element to 'hide'.

JavaScript Server element onclick event

Html
<a id="lnkShowExportBtn" runat="server">Look at image</a>
jQuery
lnkShowExportBtn.Attributes.Add("onclick", #"{ var rowImage = document.getElementById('rowImage');
if(rowImage.style.display == 'none')
{
rowImage.style.display = 'block';
var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
lnkShowExportBtn.innerHTML = 'Hide image';
}
else {
rowImage.style.display = 'none';
var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
lnkShowExportBtn.innerHTML = 'Look at image';
}
}");
Get this error:
Uncaught TypeError: Cannot set property 'innerHTML' of null
What am I doing wrong? Just can't get to the point.
Thanks.

You are passing '<%=lnkShowExportBtn.ClientID%>' as a string and it is not evaluated to replace the real client id value, which you can see in the generated html. It would be a lot more simple if you add javascript in aspx and just bind it on server side.
In code behind
lnkShowExportBtn.Attributes.Add("onclick", "YourFunction()");
OR, in ASPX
<a id="lnkShowExportBtn" runat="server" onclick="YourFunction();">Look at image</a>
In javascript
function YourFunction()
{
var rowImage = document.getElementById('rowImage');
if (rowImage.style.display == 'none') {
rowImage.style.display = 'block';
var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
lnkShowExportBtn.innerHTML = 'Hide image';
} else {
rowImage.style.display = 'none';
var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
lnkShowExportBtn.innerHTML = 'Look at image';
}
}

Try this with jQuery : Here I have bind click event to lnkShowExportBtn and changing inner html of it with the help of if condition which checks of image visible. And by using .toggle(), I am making image hide and show.
$(document).ready(function(){
$('#lnkShowExportBtn').click(function(){
var innerHtml = 'Hide image';
if($('.rowImage').is(':visible'))
{
innerHtml = 'Look at image';
}
$(this).html(innerHtml);
$('.rowImage').toggle();
});
});
Demo
For more Information on jQuery : click jQuery

Javascript show more/ show less with speed effect

i have this javascript code:
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
it is possible to add a toggle speed effect for show and hide?

Adding Effect to you code will result you to add more code line for Browsers Compatibility.
I suggest you to use jQuery, It will save you lot of time developing and testing.