Is it possible to autoexecute a javascript on tab opening? - javascript

I explain better: i'm growing my community on facebook asking friends to invite other friends with this link
https://m.facebook.com/send_page_invite/?pageid=MYPAGEID
I'm wondering if could i insert this url inside an iframe and auto-execute the script i use for invite all friends
*--- javascript:var inputs = document.getElementsByClassName('CLASS-NAMES'); for(var i=0;i
on tab opening.
I hope my English is sufficiently understandable, and thank you all

The only thing that comes to mind is to track tabs, if user clicked a link with blank on it, then add some value to a session, or to href parameter, and then manualy check if he came from a new tab or something.

If you want FB invite friend in an iFrame you have
to initiate the facebook Connect API first and for this we need XFBML initialization in the bottom of the page.
You should use fb:serverfbml tag to get fb:friend-selector working.
assuming this is your iframe body content
<fb:serverfbml style="width: 650px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://your-site.com/invite/sent"
method="POST"
invite="true"
type="My App"
content="download my application FREE NOW"
<fb:req-choice url='http://your-
facebook-canvas-url'
label='<?php echo
htmlspecialchars("Accept button text",ENT_QUOTES);
?>'
/>
" >
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends."
exclude_ids="optional"
rows="3"
/>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
//this script up will display the invite friend on the //iFrame tag .
//to connect use FB.connect code
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript">
</script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init("write your api key authintication
here", "/xd_receiver.html"); });
</script>

Related

Stop loading site to display a message

I wanna show my visitors a message before they enter the site, and then allow them to continue to the main site using a button. I don't wanna move the main sites location either.
Similar to this:
<script>
function continue() { /* function to continue loading site */ }
</script>
<p>This is a message. <button onclick="continue();">I agree</button></p>
<script>
//stop loading what's below when someone enters the site, and display only the message
</script>
<html>
<body>
<p>This is my main site with a lot of content.</p>
</body>
</html>
I can't just cover the main site, I don't want any of it's functions to run when the visitor is reading the message.
Can anyone point me in the right direction?
You can't stop loading page by JS. In some situation JS can stop render page. But it still readable by machine/show-source.
If you don't want cover site, you can hide some elements by style="display:none".
If page must be unreadable by machine you must realize this on server side:
<?php
session_start();
if(!empty($_POST['policy'])) $_SESSION['accepted_policy'] = true;
if(empty($_SESSION['accepted_policy'])) {
?><form action="?" method="post">
<input type="checkbox" value="1" name="policy"> I've accepted ...<br />
<input type="submit" > </form>
<?php die();
} ?>
normal page
If you don't want execute any JS before continue() you can run it from this function instead $.ready()

Make a Popup/Alert Window in a html with a "dont show again" option

I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>

How Display a div using jquery when user login?

I want to display my account only when user login into website and i am creating this into netsuite here is my account section html code
<div class="name" style="display:none;" id="
my_act">MY ACCOUNT</div>
I m using this script but its not working
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function()
{
if (entityId != null && entityId != "")
{
$j('#my_act').css('display','block');
}
});
</script>
I would say try putting an alert in the if loop to check whether the element exists at the time when the script is run.
Possibly, the script is gettig executed prior to the element actually getting loaded in the DOM.
First of all, you can't properly manage logins with javascript/jQuery alone. Logins are best managed with a back-end language, like PHP or ASP/.Net. This is because it is the server that must determine if someone has logged in, not their own browser.
I will use PHP as the server language for this example.
A great tool for keeping track of whether someone has been authenticated is PHP $_SESSIONs
<?php
session_start();
mysql_connect('localhost','my_cpanel_login_ID','my_cpanel_password') or die($connect_error); //or die(mysql_error());
mysql_select_db('cpanelLoginID_dbname') or die($connect_error);
if(isset($_SESSION['user_name'])===true) {
echo '<div id="my_act">Here is the information from their account</div>';
}else{
echo 'Login';
}
Here are some online video tutorials that may help:
PHPAcademy.org - used to be free, but is now just low-priced
Registration and Login tutorial
PHP and MySQL with PDO and mysqli_
TheNewBoston.com -- try this one:
Project Lisa - Unfinished tutorial but very good
Intro to PHP
Intro to jQuery
<html>
<head>
<script src="jquery.js"></script>
<script>
$j=jQuery.noConflict();
$j(document).ready(function()
{
$j("#my_act").show();
}
)
;
</script>
</head>
<body>
<div class="name" style="display:none" id="my_act">MY ACCOUNT</div>
</body>
</html>
Hope this helps !
This is not an answer, just an extended comment with some things (untested) for you to try:
Since entity has a value, you can try checking the length of the entityId. First, begin with an alert:
alert(entityId.length);
to ensure it does what we desire.
Then, something like:
if (entityId.length > 0) {
$j('#my_act').css('display','block');
}
BTW, are you sure that your jQuery.noConflict(); code is working correctly? Try something simple (without any if statements to add any additional layers of complexity):
$j('#my_act').css({'color':'red','font-size':'bold'});
Does that work?

making a div tag dynamic

I am working on a module of the project and I seemed to have stuck up. Tell me explain me what I am trying to do.
I have a text box where the user of my web portal will post the facebook like box code, either a fbml code or xfml code.As soon as the user clicks the submit buttton he should be able to see that like box on my site.
But whats happening right now with me is that I am not able to see the like box .
I have put upon the code below,
<!DOCTYPE HTML>
<head>
</title> Facebook like widget </title>
<script type="text/javascript"/>
function display_fb()
{
var fburl= document.getElementById('fb_link').value;
document.write(fburl);
}
</script>
</head>
<body>
<h1>IF YOU HAVE ANY FACEBOOK FAN PASTE THE LINK HERE!!!</h1>
<label> Paste the link here<input type="text" id="fb_link"/> </label>
<input type="button" value="submit" onClick="display_fb();" />
<div id="userFBLink" >
<label>Wanted is here:</label>
</div>
</body>
</html>
I guess need to refresh the div tag once the user puts his facebook like box code.
I believe I didn't understand you wrong and you want to add the text of this input into that div as a label (I'll suggest you to use "span" instead, because "label" is for labeling form fields).
It seems that you are looking for that:
function display_fb()
{
var fburl= document.getElementById("fb_link").value;
var lblLink = document.createElement("span");
lblLink.appendChild(document.createTextNode(fbUrl));
document.getElementById("userFBLink").appendChild(lblLink);
}
Or with jQuery:
function display_fb()
{
var lblLink = $("<span></span>");
lblLink.append($("input#fb_link").val());
$("div#userFBLink").append(lblLink);
}
It's up to you!

facebook connect redirect after invite friends

can I have a question about how to redirect the page after user invite their friends?
i have a code like this: (in javascript)
function inviteFriends(){
if(isBusy) return false;
isBusy = true;
$(".musicPlayer").addClass("invisible");
var fbsc = '<fb:request-form
action="apps.facebook.com/yourapp?pageid=thanks"
target="_self"
method="post"
nvite="true"
type="Contest"
content="Come and Join this contest!"> <fb:multi-friend-selector
target="_self"
showborder="false"
max="30"
import_external_friends="false"
email_invite="false"
cols="5"
actiontext="Invite your friends!" /></fb:request-form>';
var uiSize = FB.UIServer.Methods["fbml.dialog"].size;
FB.UIServer.Methods["fbml.dialog"].size = {width:625};
FB.ui({
method:'fbml.dialog',
display: 'dialog',
fbml: (fbsc),
width: '625px'
},function(response) {
$(".musicPlayer").removeClass("invisible");
window.location = "?pageid=thanks";
isBusy = false;
});
}
that script will call fbml window with facebook's invite friends dialog inside facebook dialog window.
what i want is:
when you close the window (press x at top right corner) it'll redirect to: ?pageid=thanks (this is works with the script above)
when user press the skip button on invite friends dialog it'll redirect to: ?pageid=thanks (this is not working - It'll redirect to ?pageid=thanks but inside the fbml window)
when user have done inviting their friends, it'll also redirect to: ?pageid=thanks (this is also not working - it'll redirect to ?pageid=thanks but in new window -.-!)
am I miss something on my script above, or I'm using the wrong way?
I'd like to achieve this for at least in IE and Firefox
is anyone have done with this before? I really need your suggestion,
EDIT:
if i put:
<fb:request-form target="_top" blah...> <fb:multi-friend-selector target="_self" blah...>
The skip button is working :) but still, after you're done inviting your friends it'll redirect to a new window
If I Put:
<fb:request-form target="_top" blah...> <fb:multi-friend-selector target="_parent" blah...>
This is work if you invite your friends, but not if you press the skip button -.-!
I reckon this is because of facebook open-up another dialog window when you click invite your friends (to preview before you click send)
so the structure level was different between skip button and send button (i hope you got what I'm write)
Thank you in advance
AnD
This is The answer :)
var fbsc = '<fb:request-form action="url here" target="_top" method="post" invite="true" type="Contest" content="blah...">
<fb:multi-friend-selector target="_top" showborder="false" max="30" import_external_friends="false" email_invite="false" cols="5" actiontext="Join NOW to WIN!" /></fb:request-form>';
Note: target="_top"
Try changing target="_self" to target="_parent" i'm not sure that is exactly what you need but the target is the relevant parameter here.

Categories