<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>YUI Calendar Control Example</title>
<link rel="stylesheet"
type="text/css"
href="yui/build/calendar/assets/skins/sam/calendar.css">
<script type="text/javascript"
src="yui/build/yahoo-dom-event/
yahoo-dom-event.js"></script>
<script type="text/javascript"
src="yui/build/calendar/calendar-min.js"></script>
<style type="text/css">
input {
margin:0px 10px 0px 10px;
}
</style>
</head>
<body class="yui-skin-sam">
<div>
<label>Please enter your date of birth:</label>
<input type="text" name="dobfield" id="dobfield">
<img id="calico" src="E:\HP_PROJECT\cal.png"
alt="Open the Calendar control">
</div>
<div id="mycal"></div>
<script type="text/javascript">
//create the namespace object for this example
YAHOO.namespace("yuibook.calendar");
//define the lauchCal function which creates the calendar
YAHOO.yuibook.calendar.launchCal = function() {
//create the calendar object, specifying the container
Var myCal = new YAHOO.widget.Calendar("mycal");
//draw the calendar on screen
myCal.render();
}
//define the showCal function which shows the calendar
Var showCal = function() {
//show the calendar
myCal.show();
}
//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
//attach listener for click event on calendar icon
YAHOO.util.Event.addListener("calico", "click", showCal);
//myCal.hide();
</script>
</body>
</html>
I have used the above code. But the problem with the code is that when I click image icon nothing is displayed. I am new to javascript. Please help me how to implement listener.
Please guide me where to do chages in the code.
Thanks
Padmaja
The problem is that myCal is a local variable to the launchCal() function. Giving the myCal variable a globally-accessible namespace will make it available to every scope.
Here's your original code (someone else accidentally put my correct code in your original question =/)
YAHOO.namespace("yuibook.calendar");
//define the lauchCal function which creates the calendar
YAHOO.yuibook.calendar.launchCal = function() {
//create the calendar object, specifying the container
var myCal = new YAHOO.widget.Calendar("mycal");
//draw the calendar on screen
myCal.render();
}
//define the showCal function which shows the calendar
Var showCal = function() {
//show the calendar
myCal.show();
}
//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
//attach listener for click event on calendar icon
YAHOO.util.Event.addListener("calico", "click", showCal);
//myCal.hide();
Now see my changes. Note the use of the global YAHOO namespace.
YAHOO.namespace("yuibook.calendar");
//define the lauchCal function which creates the calendar
YAHOO.yuibook.calendar.launchCal = function() {
//create the calendar object, specifying the container
YAHOO.yuibook.calendar.myCal = new YAHOO.widget.Calendar("mycal");
//draw the calendar on screen
myCal.render();
}
//define the showCal function which shows the calendar
Var showCal = function() {
//show the calendar
YAHOO.yuibook.calendar.myCal.show();
}
//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
//attach listener for click event on calendar icon
YAHOO.util.Event.addListener("calico", "click", showCal);
//myCal.hide();
Related
I have the following scenario like this :
I have a main window[main.html]. There are three links called Popup1, Popup2, Popup3. On clicking the link open Popup1 window, Popup2 window respectively.
<html>
<head>
<title>Popup Focus Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
var openWin = [];
$(function(){
$('#elem').on('click', 'a', function(){
var index = $(this).index();
var page = 'pop'+(index+1)+'.html';
var w = window.open(page, $(this).attr('title'), '_blank');
openWin[index] = w;
});
});
</script>
</head>
<body>
<div id="elem">
Pop 1
Pop 2
Pop 3
</div>
</body>
</html>
Now the windows open are window 1 & window 2. I want to transfer the focus of the window 1 from window 2. is there anyway this can be done?
pop1.html
<html>
<head>
<title>Popup 1 Example</title>
<script type="text/javascript">
function go() {
if(window.opener.openWin) {
var popup2 = window.opener.openWin[1];
popup2.focus();
}
}
</script>
</head>
<body>
<div>
popup 1 example
</div>
<div>Go to Popup2</div>
</body>
</html>
pop2.html
<html>
<head>
<title>Popup 2 Example</title>
</head>
<body>
<div>
popup 2 example
</div>
</body>
</html>
Check main.html code in fiddle http://jsfiddle.net/tmf8cry8/2/
You have written the code properly, please implement the two changes as listed below...
1) You need to push the window object in openWin Array
var openWin = [];
$(function(){
$('#elem').on('click', 'a', function(){
var index = $(this).index();
var page = 'pop'+(index+1)+'.html';
var w = window.open(page, $(this).attr('title'), '_blank');
//openWin[index] = w;
openWin.push(w); //Push the window object
});
});
2) Access the window object using the array index to focus the window
function go() {
//console.log(openWin);
//if(window.opener.openWin) {
// var popup2 = window.opener.openWin[1];
//popup2.focus();
//}
//Supposing that pop1, pop2 and pop3 are opened, you want to access pop2
openWin[1].focus();
}
Hope it helps!
You can use the method window.open
window.open("",window_name).focus();
Assuming your window is opened, you can transfer focus to the window using the above code.
Please use the following code in pop2.html and try [after opening all windows in a sequential order].
<html>
<head>
<title>Popup 2 Example</title>
<script language="javascript">
function openNew()
{
window.open("","Pop 3").focus();
}
</script>
</head>
<body>
<div>
popup 2 example
</div>
<a href="javascript:void(0);" onclick="javascript:openNew();">
Go to pop3</a>
</body>
</html>
As per you code, you are using title attribute to naming windows, hence Pop 3 is used to transfer focus to Pop 3 window.
Alternatively, you may check if the window instance is opened or not and then load the URL entirely or transfer focus
Hope it helps!!!
Make go() function just call a function in the opener window, e.g.:
window.blur(); //focus out of here
window.opener.myParentWindowFunction( 2 );
That function (in the "parent" window) should call then a function in the target window that just "window.focus()".
funtion myParentWindowFunction( target ){
window.blur();//focus out of here also
openWin[target].callFocus();
}
And on every popup:
function callFocus(){ window.focus(); }
You can't make a window "send" the focus to another (security issues I guess), but you can make a window to "ask for it"... and depends on the browsers if it's going to get it (in chrome doesn't work, but if you add an alert() after the focus it will change the window. Funny, because if you just put the alert but not the focus it doesn't swap the windows...)
Code is just a mockup, but that's the concept. You have to use the opener window as relay comunicate to the desired window that it have to call the focus. Hope you don't need it really crossbrowser.
I'm struggling trying to get a link to pop up in in the Dropbox chooser drop-in app. I'm using the javascript method and inserting into an html page. The dropbox chooser button shows up, and I'm able to select a file from the dropbox pop-up window, but the result is just a green checkmark and NO link like in the demo (I've tried both the direct and preview method). I've been struggling with this for a few hours. Anyone see anything wrong, or have a good code snipeet they want to share?
Here's my code:
<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="XXXXXX"></script>
<!-- Replace data-app-key with yours --> <script type="text/javascript">
// add an event listener to a Chooser button
document.getElementById("db-chooser").addEventListener("DbxChooserSuccess",
function(e) {
alert("Here's the chosen file: " + e.files[0].link)
window.location.href = 'e.files[0].link';
}, false);
</script>
<input data-link-type="direct" id="db-chooser" name="selected-file" type="dropbox-chooser" />
<div id="link-div" style="display: none">Link:</div>
<script type="text/javascript">
document.getElementById("db-chooser").addEventListener("DbxChooserSuccess",
function(e) {
var link = document.getElementById("link");
link.textContent = link.href = e.files[0].link;
document.getElementById("link-div").style.display = "block";
}, false);
</script>
I see two issues in the above code.
The first script references db-chooser before it's actually on the page, so that may not be working at all.
The second script looks for an element called link, but I think you mean link-div.
Finally, you might want to update to the latest version of dropins.js, just because it's the latest. :-) The input tag version has gone away, and instead you can use createChooseButton. Here's a complete working example using the latest version:
<!doctype html>
<html>
<head>
<script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="XXXXXX"></script>
</head>
<body>
<div id="container"></div>
<a id="link"></a>
<script>
var button = Dropbox.createChooseButton({
success: function(files) {
var linkTag = document.getElementById('link');
linkTag.href = files[0].link;
linkTag.textContent = files[0].link;
},
linkType: 'direct'
});
document.getElementById('container').appendChild(button);
</script>
</body>
</html>
I am retrieving contacts of the phone using phone gap and want to display the names in listview by using jquery mobile. But the css is not being applied while executing this code
This is the code
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="cordova-1.5.0.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="contact.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script >
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var contactList = new ContactFindOptions();
contactList.filter="";
contactList.multiple=true;
var fields = ["*"]; //"*" will return all contact fields
navigator.contacts.find(fields, getContactFields, onError, contactList );
}
function getContactFields(contacts) {
//displaying contacts in list view
for (var i=0; i<contacts.length; i++)
{
document.getElementById("temp").innerHTML+='<ul id="get" data-role="listview"><li>'+contacts[i].displayName+'</li></ul>'
}
$('get').listview();
}
function onError(contactError) {
alert('onError!');
}
</script>
This is the function I am using for displaying contact which is not applying the css
//displaying contacts in list view
for (var i=0; i<contacts.length; i++)
{
document.getElementById("temp").innerHTML+='<ul id="get" data-role="listview"><li>'+contacts[i].displayName+'</li></ul>'
}
$('get').listview();
Html body code where the contacts name to be displayed
<div data-role="content" id="temp"></div>
Its displaying like in the following image. The css get applied to the first name only
First you have few errors in your code.
Your way of adding list elements is incorrect. You are adding listview for every element contact element. So first create ul element and then through loop add li elements into it. Also if you are using JQM use it with proper jQuery sintax.
Instead:
document.getElementById("temp").innerHTML+='<ul id="get" data-role="listview"><li>'+contacts[i].displayName+'</li></ul>'
Use:
$('#temp').append(<ul id="get" data-role="listview"></ul>);
$('#temp ul#get').append('<li><a href="#contact">'+contacts[i].displayName+'</a</li>');
This is still not enough.
When listview is populated you must refresh its css like this:
$('ul#get').listview('refresh');
You can find more info about this in the JQM documentation.
This statement is not going to do anything:
$('get').listview();
You need to address it to the real ul element, and because get is its id it should look like this:
$('#get').listview();
I am doing something like this-
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_js_prop
but I want to replace the buttons with images that toggle to another image when clicked. In other words, the Play button will change to a Pause button.
There are many tutorials that show how to do this with only one button but as soon as I add more buttons, the new ones don't work.
Any help appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function changeIt()
{
var theImg = document.getElementsByTagName('img')[0].src;
var x = theImg.split("/");
var t = x.length-1;
var y = x[t];
if(y=='btnPlay.gif')
{
document.images.PlayOrPause.src='btnPause.gif'
}
if(y=='btnPause.gif')
{
document.images.PlayOrPause.src='btnPlay.gif'
}
}
</script>
<img src='btnPause.gif' name='PlayOrPause' border='0' />
Try this using input type image
HTML
<input type="image" src="play.png" class="play" onclick="toggle(this);"/>
CSS
.play, .pause {width:100px;height:100px;}
JS
function toggle(el){
if(el.className!="pause")
{
el.src='pause.png';
el.className="pause";
}
else if(el.className=="pause")
{
el.src='play.png';
el.className="play";
}
return false;
}
A fiddle is here.
swap : function(id) {
var e = document.getElementById(id);
e.className = (e.className == 'image1')
? 'image2'
: 'image1';
}
You can just make a function that checks the current class and switches it. This is the simplest example in which the 2 classes have different background images. The rest of the logic you could handle in a different function that manages the player's 'state' of playing, paused, etc.
I would like to customize my search form. I am using Google Search Service and have it linked to my domain and so on.
I chose the two column layout in the Control Panel, but however, I want to do something onSubmit of the form.
So I tried to put an actionlistener in jQuery into the form, however does not work.
Then I thought google certainly provides something for that. And yes they do. It is called:
setOnSubmitCallback()
http://code.google.com/apis/websearch/docs/reference.html
Unfortunately I dont get it.
So far I have:
google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
function initialize()
{
var searchControl = new google.search.CustomSearchControl('017998360718714977594:j6sbtr-d6x8');
searchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
searchControl.draw('cse', options);
}
google.setOnLoadCallback(initialize);
So i have two divs:
#cse-search-form for the form and #cse for the results
#cse is in another div #searchResults, that is hidden and here it comes:
I want to open #searchResults in a dialog from jQuery UI.
$("#searchResults").dialog( { minWidth: 750, minHeight: 750 } );
Which will result into:
.setOnSubmitCallback(function() {
$("#searchResults").dialog( { minWidth: 750, minHeight: 750 } );
} );
So my problem now is, where and on what do I have to put the setOnSubmitCallback?
I cannot put it on google.search.Search or CustomSearchControl as it is stated in the documentation. ANd I cannot call it in the onLoadCallback so it is very strange for me. Cannt figure out how to do that.
I hope somebody has some more experience for the google search and could help me out with a solution.
Thank you very much in advance.
NOTE: the code below is using something Google deprecated. Use this instead: http://code.google.com/apis/customsearch/v1/overview.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello World - Google Web Search API Sample</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
google.load('search', '1');
google.load("jquery", "1.5.2");
google.load("jqueryui", "1.8.12");
function OnLoad() {
var searchComplete = function(searchControl, searcher){
$('#searchResults').dialog({modal: true, width: 700, height: 400, position: [50, 50]});
for (result in searcher.results) {
var content = searcher.results[result].content;
var title = searcher.results[result].title;
var url = searcher.results[result].url;
$('#searchResults ul')
.append($('<li></li>')
.append($('<a/>').attr('href', url).text(title))
.append($('<p/>').text(content)));
}
};
// called on form submit
newSearch = function(form) {
if (form.input.value) {
// Create a search control
var searchControl = new google.search.SearchControl();
// Add in a set of searchers
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
// tell the searchControl to draw itself (without this, the searchComplete won't get called - I'm not sure why)
searchControl.draw();
searchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
searchControl.setSearchCompleteCallback(this, searchComplete);
searchControl.execute(form.input.value);
}
return false;
}
// create a search form without a clear button
// bind form submission to my custom code
var container = document.getElementById("searchFormContainer");
this.searchForm = new google.search.SearchForm(false, container);
this.searchForm.setOnSubmitCallback(this, newSearch);
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchFormContainer">Loading</div>
<div id="searchResults" title="Search Results">
<ul></ul>
</div>
</body>
</html>