Hide DOM content if there is an alert - javascript

Say we have - /test?id=123 , and when we're on the respective page, there is a check occurring here, and if this check fails - there is an alert message that pops up and redirects you to '/'.
Right now, this works fine, except that it loads the DOM content to the HTML page when the URL is hit. Is there anyway I could hide the DOM content completely, if the check fails and redirects me to the index page? This basically means that if the alert message pops up, the user should not be able to see what the HTML page contains and should be redirected immediately.

I would use ng-if to wrap your sensitive DOM content, like so:
<html>
<head>
...
</head>
<body>
<header>
...
</header>
<dialog ng-if="!checkPassed">This is your alert.</dialog>
<main ng-if="checkPassed" ng-cloak>
This is your protected content.
</main>
<footer>
...
</footer>
</body>
</html>
ng-cloak will stop your content being visible at page load.
ng-if will remove your content from the page if the condition (in this case $scope.checkPassed) resolves to false.
In your Angular controller you would need to set the value of $scope.checkPassed to be true or false depending on whether your check succeeded or failed.
This is better than ng-show because it means someone can't code inspect your site and see the content anyway.

Related

Asp.net:show loading image before page loads for the first time

i am trying to display a loading image when the page is loading.Here is my code.
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="setTimeout('show()',2000);">
<div id="divWait" style="display:none" >
<h1>wait...</h1>
</div>
<div id="main" style="display:none">
<asp:Button ID="btnHidden" runat="server" OnClick="code behind handler"
<div/>
<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="0";
divwait.style.zIndex="1";
divwait.style.display='inline';
divmainpage.style.display='none';
setTimeout("show()",2000);
}
function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="1";
divwait.style.zIndex="0";
divwait.style.display='none';
divmainpage.style.display='inline';
}
</script>
</body>
Problem is, it is not working when the page is loading for the first time.when i checked using console.log() i see for the first time control is not going inside doHourGlass() function.but for button click event it is working perfectly.
Things i tried:checked this link on SO, but i am not putting static html.I am trying to get the id of an html element and then working on that element so i can not use that solution.
Edit:one way i found is to keep divwait visible and hide main division then show main div when the page loads.but this way i can only display static html.i want to be able to call a function when page is loading for first time.
what is happening?is there a way to achieve it?please guide me.

How to load div only on click and not when page loads?

Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.
The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>

Jquery load url underground

I have this code
<div class="wrap-box-video" id="31">
<div class="addfav">
</div>
<img src="/etc.jpg" />
</div>
and with this code
$(document).ready(function(){
$("div.addfav").click(function(e){
window.location = "?wpfpaction=add&postid=" + $(this).parents(".wrap-box-video").attr("id");
});
});
i want to load the ?wpfpaction=add&postid=31 (in this exemple) but not to show in the url tab i want this to be underground. if i'm on exemple.com page and i click the addfav div i want the exemple.com to be the same but the script to work.
If you're talking about changing what text appears in the browser tab, you can alter the title element of the HTML rendered at you ?wpfaction endpoint.
If you want to change what the actual URL that appears in the URL bar, see Modify the URL without reloading the page

html body onload function need to remove and execute the same function with cookie but only first visit

this is my html page content (a part of it)
<body onLoad="javascript:introJs().start();">
<div id="page">
<div id="header">
Link
Headline
</div>
I have implemented introjs with my html page as shown above. but i need to automatically execute the function given on html onLoad.. but only on first visit with cookies. I have no idea about cookies. can anyone please change or create a cookie which execute the introjs automatically on first visit.
You can use localstorage like,
SCRIPT
window.onload=function(){
if(!localstorage.getItem('intorjsInit') && localstorage.getItem('intorjsInit')!=1)
{
javascript:introJs().start();
}
else
{
localstorage.setItem('intorjsInit',1);
}
};
HTML
<body><div id="page">.....

javascript popup window loads parent url

I've been working on a web page where they want the person to sign up for something. As a result, they have an alert window on the page, the person hits the "sign up" button, and the alert window loads with a form.
No big deal about that. However, on the browser page underneath, and on the form on the second stage of signup, there are links to standard disclaimer pages. They want these to be pop up windows when the user clicks on them.
When I was testing it out, in generic form (no user signed in - the page and disclaimers are declared "public" so you don't need to be logged in to see them), it worked fine.
However, if the user is logged in, when you hit the disclaimer links, it instead loads that same "signup" page - the parent page!
I'll post my coding, but what I'm looking for is twofold - is there an easy way to keep other content from loading in that popup?
If not, I'm guessing that it has something to do with that omnipresent signup popup/alert, and as this other content gets pulled in, there's coding that tells it to load any subsequent popups with that same page. Is there some kind of language I should be looking for? It's all very modular, with a lot of includes, to tracking things down can be tricky. Less so if someone has some suggestions, I'd guess.
<script language="javascript" type="text/javascript">
// Popup window code
var popupWindow = null;
function popitup(url2,winName,w,h,t,l,scroll){
settings =
'height='+h+',width='+w+',top='+t+',left='+l+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url2,winName,settings)
}
</script>`
<p>© <%=Year(now)%> <%=usr_Company%> All Rights Reserved.
<a style="color: #898787;" href="info_privacy1.asp" onclick="popitup(this.href,'disclose','700','780','100','200','yes');return false">Privacy Policy</a> | <a style="color: #898787;" href="info_terms1.asp" onclick="popitup(this.href,'disclose','700','780','100','200','yes');return false">Terms of Service</a> <br /><br />
<%=brand_name%> legal disclaimer blah blah blah blah blah.<br /><br />
</p>
</div>
</div>
</body>
</html>
`
You have to let the JS know that the user is signed in. Few ways to do this - AJAX, but more so simply on page load -IDK what you are using - php or whatever, but what it should do is this:
if user is signed in, print out a globav variable to javascript "userSignedIn = 1"
then when the user clicks a link, js checks if userSignedIn is set to 1, and if it is, it will not display the signup window, but continue to the next one, if userSignedin is not set (or is not 1), the signup form will be displayed...

Categories