i have a child window whereby it contains the twitter sharing page... how to detect if the twitter sharing form has been submitted to twitter? note: this is a child window..
because I want to show an alert box after the sharing window closes
twitter sharing submit detection
var myWindow;
function openTwitterWindow(url){
var width=550;var height=425;var left=parseInt((screen.availWidth/2)-(width/2));
var top=parseInt((screen.availHeight/2)-(height/2));
var windowFeatures="width="+width+",height="+height+",status,resizable,left="+left+",top="+top+"screenX="+left+",screenY="+top;
myWindow=window.open(url,"subWind",windowFeatures);
jQuery('form#update-form').submit(function(){
onWindowClose(myWindow, myCallback);
});
}
function myCallback() {
alert("Your message has been shared. Thank you");
}
function onWindowClose(windowRef,callback, period) {
period = period || 20;
setTimeout(function check() {
if(windowRef == null || windowRef.closed) {
callback();
} else {
setTimeout(check, period);
}
}, period);
}
THAT CODE ABOVE IS WRONG...I NEED HELP
<a style="cursor: pointer" onclick="openTwitterWindow('https://twitter.com/share?url=<?php echo $url; ?>&text= and so on and so forth...
You can try something like this:
var child = window.open('urlofchild');
var closetime = setInterval(checkChildClose, 500);
function checkChildClose() {
if (child.closed) {
alert("Child window closed");
clearInterval(closetime);
}
}
Usually, when I design 'child' windows I use CSS and do virtual windows. Then you have all the information you need within a page. Then, you can use AJAX and JSON to work with the data.
Demo: http://www.codesoaked.com/demo/css-popup-window.html#
Related
I'm trying to display a hyperlink that has a colorbox popup associated with it.
The javascript is:
function bid() {
var bid = document.getElementById("bid").value;
if (bid>0 && bid<=100) {
var per = 3.50;
} else if (bid>100 && bid<=200) {
var per = 3.40;
} else if (bid>200 && bid<=300) {
var per = 3.30;
}
var fee = Math.round(((bid/100)*per)*100)/100;
var credit = 294.9;
if (fee>credit) {
var message = 'Error';
} else {
var message = '<a class="popup" href="URL">The link</a>';
}
document.getElementById("bidText").innerHTML=message;
}
The javascript works fine and displays the link in the right conditions, the problem however is that when clicking the link, the Colorbox isn't being applied and the page loads as a normal hyperlink.
I have the following code in the header:
jQuery(document).ready(function () {
jQuery('a.popup').colorbox({ opacity:0.5 , rel:'group1' });
});
If I output just the hyperlink in the standard html source, it works fine and displays correctly in the Colorbox.
Any help would be greatly appreciated :)
You need to wait until you've appended the link before you call the colorbox() method on it.
Move your colorbox() method so that it comes after your innerHTML.
jQuery('a.popup').colorbox({ opacity:0.5 , rel:'group1' });
when adding html dynamically you, the event added already can not be triggered.
try the following code
jQuery(document).ready(function () {
$("a.popup").on("click", function(event){
applycolorbox($(this));
});
function applycolorbox($elem) {
$elem.colorbox({ opacity:0.5 , rel:'group1' });
}
I have several divs that a user can Minimize or Expand using the jquery toggle mothod. However, when the page is refreshed the Divs go back to their default state. Is their a way to have browser remember the last state of the div?
For example, if I expand a div with an ID of "my_div", then click on something else on the page, then come back to the original page, I want "my_div" to remain expanded.
I was thinking it would be possible to use session variables for this, perhaps when the user clicks on the expand/minimize button a AJAX request can be sent and toggle a session variable...IDK..any ideas?
There's no need for an ajax request, just store the information in a cookie or in the localstorage.
Here's a library which should help you out: http://www.jstorage.info/
Some sample code (untested):
// stores the toggled position
$('#my_div').click(function() {
$('#my_div').toggle();
$.jStorage.set('my_div', $('#my_div:visible').length);
});
// on page load restores all elements to old position
$(function() {
var elems = $.jStorage.index();
for (var i = 0, l = elems.length; i < l; i++) {
$.jStorage.get(i) ? $('#' + i).show() : hide();
}
});
If you don't need to support old browsers, you can use html5 web storage.
You can do things like this (example taken from w3schools):
The following example counts the number of times a user has visited a
page, in the current session:
<script type="text/javascript">
if (sessionStorage.pagecount) {
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else {
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
Others have already given valid answers related to cookies and the local storage API, but based on your comment on the question, here's how you would attach a click event handler to a link:
$("#someLinkId").click(function() {
$.post("somewhere.php", function() {
//Done!
});
});
The event handler function will run whenever the element it is attached to is clicked. Inside the event handler, you can run whatever code you like. In this example, a POST request is fired to somewhere.php.
I had something like this and I used cookies based on which user logged in
if you want only the main div don't use the
$('#'+div_id).next().css('display','none');
use
$('#'+div_id).css('display','none');
*Here is the code *
//this is the div
<div id = "<?php echo $user; ?>1" onclick="setCookie(this.id)" ><div>My Content this will hide/show</div></div>
function setCookie(div_id)
{
var value = '';
var x = document.getElementById(div_id);
var x = $('#'+div_id).next().css('display');
if(x == 'none')
{
value = 'block';
}
else
{
value = 'none';
}
console.log(div_id+"="+value+"; expires=15/02/2012 00:00:00;path=/")
//alert(x);
document.cookie = div_id+"="+value+"; expires=15/02/2012 00:00:00;path=/";
}
function getCookie(div_id)
{
console.log( div_id );
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==div_id)
{
return unescape(y);
}
}
}
function set_status()
{
var div_id = '';
for(var i = 1; i <= 9 ; i++)
{
div_id = '<?php echo $user; ?>'+i;
if(getCookie(div_id) == 'none')
{
$('#'+div_id).next().css('display','none');
}
else if(getCookie(div_id) == 'block')
{
$('#'+div_id).next().slideDown();
}
}
}
$(document).ready(function(){
get_status();
});
Look about the JavaScript Cookie Method, you can save the current states of the divs, and restore it if the User comes back on the Site.
There is a nice jQuery Plugin for handling Cookies (http://plugins.jquery.com/project/Cookie)
Hope it helps
Ended up using this. Great Tutorial.
http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
Using a hashchange event I'm detecting when a user clicks the back button in a browser and changing the URL accordingly. Is there a better way to do this for pagination? I'm currently changing the URL after a user clicks my pagination control like so:
$(".pager").click(function(){
var start = null;
if ($.browser.msie) {
start = $(this).attr('href').slice($(this).attr('href').indexOf('#')+1);
}
else {
start = $(this).attr('href').substr(1);
}
$('#start').val(start);
$.post("visits_results.php", $("#profile_form_id").serialize(),
function(data) {
$('#search_results').html(data);
location.href = "#visits=" + start;
});
return false;
});
My javascript to detect the back button looks like this:
function myHashChangeCallback(hash) {
if (hash == "") {
$("#loadImage").show();
var no_cache = new Date().getTime();
$('#main').load("home.php?cache=" + no_cache, function () {
$("#loadImage").hide();
});
return false;
}
else {
// adding code to parse the hash URL and see what page I'm on...is there a better way?;
}
}
function hashCheck() {
var hash = window.location.hash;
if (hash != _hash) {
_hash = hash;
myHashChangeCallback(hash);
}
}
I currently plan on checking each hashtag and the value to see what page I should load unless there is a better more efficient way.
Any thoughts or suggestions?
The jQuery Address plugin does this very well. Once setup it provides a series of logical navigation events which you can hook into. It also has very good support for history.pushState() which eliminates the need for hashtags in newer browsers and has equally good fallback support for those browsers that do not support pushState.
A simple implementation would look like this:
// Run some code on initial load
$.address.init(function(e) {
// Address and path details can be found in the event object
console.log(e);
});
// Handle hashtag/pushState change events
$.address.change(function(e) {
// Do more fancy stuff. Don't forget about the event object.
console.log(e);
});
// Setup jQuery address on some elements
$('a').address();
To enable pushState() support pass an argument to the script like so:
<script type="text/javascript" src="jquery.address-1.3.min.js?state=/absolute/path/to/your/application"></script>
I'm setting the URL after the hashmark with a jquery click event. The URL is getting set properly but when I use the browsers back button it doesn't take me to the previous page.
Before my click event the URL looks like this:
http://example.com/menu.php?home
My click event looks like this:
$('#visits').click(function() {
$('#main').load("visits.php?type=1&view=1", function () {
location.href = "#visits";
});
return false;
});
My URL now looks like this:
http://example.com/menu.php?home#visits
It seems as though menu.php doesn't get called with the browsers back button.
Any idea what I'm missing?
You could code something like this:
var _hash = '';
function myHashChangeCallback(hash) {
// handle hash change
// load some page using ajax, etc
}
function hashCheck() {
var hash = window.location.hash;
if (hash != _hash) {
_hash = hash;
myHashChangeCallback(hash);
}
}
setInterval(hashCheck, 100);
Use the onhashchange event of the window, to check if the hash changes. This is getting called when you hit the back Button of your browser.
$(window).bind('hashchange',function() {
if (location.hash != '#visits') {
//Code to revert the changes on the page
}
}
Older versions of IE don't support hashchange, so you have to cheat by using setInterval to poll a few times a second and check if it's changed.
if($.browser.msie && $.browser.version < 7){
setInterval(function(){
if(window.location.hash != window.lastHash){
hashChangeHandler();
window.lastHash = window.location.hash;
}
}, 100);
}
else{
$(window).bind('hashchange',function() {
if (location.hash != '#visits') {
hashChangeHandler();
}
}
}
For example, Lets say I have a flash swf game, and when users press connect they are assigned a random id that's then put into a mysql table. Then I have other users that connect and then can connect to these random ids. When users click disconnect i have the id taken out of the table that way when other people want to connect they dont get ids that arent active. is it possible that when a window is closed to have it run a php script? so i can get it to clear their user id?
use onbeforeunload
var clicked = false;
document.onclick = function()
{
//alert(event.srcElement.tagName);
if(event.srcElement.tagName)
clicked=true;
}
var IE = document.all?true:false
// If NS -- that is, !IE -- then set up for mouse capture
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {
} else if (window.sidebar) {
clicked= true;
} else {
if(window.opera && window.print) clicked= false;
}
</script>
<script>
function doUnload()
{
urlstring = "http://www.google.com/popup.php";// add popup url
window.open(urlstring,'mywin',"height=400px,width=500px,status=no,toolbar=no");
}
</script>
<body onbeforeunload="if(!clicked) doUnload(); ">
You could do this with a bit of Javascript in the HTML (outside of Flash). This example uses jQuery's .unload():
<script type="text/javascript">
$(window).unload(function() {
$.ajax({ url: "clear_user_id.php"});
});
</script>