I want to show the weather on my website. I have some javascript code like
$(function () {
// Specify the ZIP/location code and units (f or c)
//var loc = '10001'; // or e.g. SPXX0050
//var u = 'f';
var loc = 'TUXX0002';
//var loc = 'TUXX0014';
var u = 'c';
//var locA = 'TUXX0002';
//var locI = 'TUXX0015';
var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'";
var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
var url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;
window['wxCallback'] = function (data) {
var info = data.query.results.channel.item.condition;
$('#wxIcon').css({
backgroundPosition: '-' + (61 * info.code) + 'px 0'
}).attr({
title: info.text
});
$('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
$('#wxTemp').html(info.temp + '°' + (u.toUpperCase()));
};
$.ajax({
url: url,
dataType: 'jsonp',
cache: true,
jsonpCallback: 'wxCallback'
});
});
For now it shows only one location. (with loc variable). I want to add a dropdown or something like a change location link. Than if user selects 'A' location it shows 'A location's weather' etc. I added a dropdown item. Here is the code.
<select id="wxCombo">
<option value="istanbul">istanbul</option>
<option value="ankara">ankara</option>
<option value="izmir">izmir</option>
</select>
Than I add some javascript code for change function, on the same javascript page.
var wxCombo = $("#wxCombo").val();
$("#wxCombo").change(function()
{
if (wxCombo == 'Ankara')
{
loc 'TUXX0002';
}
});
It didn't worked. I need some guide for fixing this issue.
Here's a few things I would change.
First off, declare a function that will update the weather information, based on location:
function updateWeather(loc, u)
{
var query = "SELECT item.condition \
FROM weather.forecast \
WHERE location='" + loc + "' AND u='" + u + "'",
url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json';
$.ajax({
url: url,
dataType: 'jsonp', // this automatically disables cache too
success: function(data) {
var info = data.query.results.channel.item.condition;
$('#wxIcon').css({
backgroundPosition: '-' + (61 * info.code) + 'px 0'
}).attr({
title: info.text
});
$('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
$('#wxTemp').html(info.temp + '°' + (u.toUpperCase()));
}
});
}
Then, hook this into the .change() handler:
$("#wxCombo").change(function() {
var country = $(this).val();
if (country == 'ankara') {
updateWeather('TUXX0002', 'C');
}
// etc.
});
Demo: http://jsfiddle.net/ZF3aW/
on first glance you are missing an = sign...
var wxCombo = $("#wxCombo").val();
$("#wxCombo").change(function()
{
if (wxCombo == 'Ankara')
{
loc **=** 'TUXX0002';
}
});
Related
I am working on a web application in Visual Studio using visual basic and master pages. I have 10 textbox fields on a child page where I would like to emulate the iPhone password entry (ie. show the character entered for a short period of time then change that character to a bullet). This is the definition of one of the text box controls:
<asp:TextBox ID="txtMID01" runat="server" Width="200" MaxLength="9"></asp:TextBox>
At the bottom of the page where the above control is defined, I have the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/jQuery.dPassword.js"></script>
<script type="text/javascript">
$(function () {
var textbox01 = $("[id$=txtMID01]");
alert(textbox01.attr("id"));
$("[id$=txtMID01]").dPassword()
});
</script>
When the page loads, the alert displays MainContent_txtMID01 which is the ID of the control preceeded with the name of the content place holder.
The following is the contents of lib/jQuery.dPassword.js (which I found on the internet):
(function ($) {
$.fn.dPassword = function (options) {
var defaults = {
interval: 200,
duration: 3000,
replacement: '%u25CF',
// prefix: 'password_',
prefix: 'MainContent_',
debug: false
}
var opts = $.extend(defaults, options);
var checker = new Array();
var timer = new Array();
$(this).each(function () {
if (opts.debug) console.log('init [' + $(this).attr('id') + ']');
// get original password tag values
var name = $(this).attr('name');
var id = $(this).attr('id');
var cssclass = $(this).attr('class');
var style = $(this).attr('style');
var size = $(this).attr('size');
var maxlength = $(this).attr('maxlength');
var disabled = $(this).attr('disabled');
var tabindex = $(this).attr('tabindex');
var accesskey = $(this).attr('accesskey');
var value = $(this).attr('value');
// set timers
checker.push(id);
timer.push(id);
// hide field
$(this).hide();
// add debug span
if (opts.debug) {
$(this).after('<span id="debug_' + opts.prefix + name + '" style="color: #f00;"></span>');
}
// add new text field
$(this).after(' <input name="' + (opts.prefix + name) + '" ' +
'id="' + (opts.prefix + id) + '" ' +
'type="text" ' +
'value="' + value + '" ' +
(cssclass != '' ? 'class="' + cssclass + '"' : '') +
(style != '' ? 'style="' + style + '"' : '') +
(size != '' ? 'size="' + size + '"' : '') +
(maxlength != -1 ? 'maxlength="' + maxlength + '"' : '') +
// (disabled != '' ? 'disabled="' + disabled + '"' : '') +
(tabindex != '' ? 'tabindex="' + tabindex + '"' : '') +
(accesskey != undefined ? 'accesskey="' + accesskey + '"' : '') +
'autocomplete="off" />');
// change label
$('label[for=' + id + ']').attr('for', opts.prefix + id);
// disable tabindex
$(this).attr('tabindex', '');
// disable accesskey
$(this).attr('accesskey', '');
// bind event
$('#' + opts.prefix + id).bind('focus', function (event) {
if (opts.debug) console.log('event: focus [' + getId($(this).attr('id')) + ']');
clearTimeout(checker[getId($(this).attr('id'))]);
checker[getId($(this).attr('id'))] = setTimeout("check('" + getId($(this).attr('id')) + "', '')", opts.interval);
});
$('#' + opts.prefix + id).bind('blur', function (event) {
if (opts.debug) console.log('event: blur [' + getId($(this).attr('id')) + ']');
clearTimeout(checker[getId($(this).attr('id'))]);
});
setTimeout("check('" + id + "', '', true);", opts.interval);
});
getId = function (id) {
var pattern = opts.prefix + '(.*)';
var regex = new RegExp(pattern);
regex.exec(id);
id = RegExp.$1;
return id;
}
setPassword = function (id, str) {
if (opts.debug) console.log('setPassword: [' + id + ']');
var tmp = '';
for (i = 0; i < str.length; i++) {
if (str.charAt(i) == unescape(opts.replacement)) {
tmp = tmp + $('#' + id).val().charAt(i);
}
else {
tmp = tmp + str.charAt(i);
}
}
$('#' + id).val(tmp);
}
check = function (id, oldValue, initialCall) {
if (opts.debug) console.log('check: [' + id + ']');
var bullets = $('#' + opts.prefix + id).val();
if (oldValue != bullets) {
setPassword(id, bullets);
if (bullets.length > 1) {
var tmp = '';
for (i = 0; i < bullets.length - 1; i++) {
tmp = tmp + unescape(opts.replacement);
}
tmp = tmp + bullets.charAt(bullets.length - 1);
$('#' + opts.prefix + id).val(tmp);
}
else {
}
clearTimeout(timer[id]);
timer[id] = setTimeout("convertLastChar('" + id + "')", opts.duration);
}
if (opts.debug) {
$('#debug_' + opts.prefix + id).text($('#' + id).val());
}
if (!initialCall) {
checker[id] = setTimeout("check('" + id + "', '" + $('#' + opts.prefix + id).val() + "', false)", opts.interval);
}
}
convertLastChar = function (id) {
if ($('#' + opts.prefix + id).val() != '') {
var tmp = '';
for (i = 0; i < $('#' + opts.prefix + id).val().length; i++) {
tmp = tmp + unescape(opts.replacement);
}
$('#' + opts.prefix + id).val(tmp);
}
}
};
})(jQuery);
When I execute my code, the code behind populates the value of the textbox with "123456789" and when the page gets rendered, all the characters have been changed to bullets, which is correct. The problem I am having is that the textbox has been disabled so I can not edit the data in the textbox.
I removed (by commenting out) the references to the disabled attribute but the control still gets rendered as disabled.
As a side note, the code that I found on the internet was originally designed to work with a textbox with a type of password but when I set the TextMode to password, not only does the control get rendered as disabled, but the field gets rendered with no value so I left the TextMode as SingleLine.
Any suggestions or assistance is greatly appreciated.
Thanks!
As far as I know, it is not possible to have it so that while you type a password, the last letter is visible for a second and then turns into a bullet or star.
However what you can do is as the user types in password, with a delay of lets say 500ms store the string the user has typed in so far into some variable and replace the content of the password field or the text field with stars or black bullets. This will give you what you are looking for.
The code I have shown below is a json object which is fetched from my sql database using getURI function. And all this information will be displayed in details.html if only when user click on one of the listview list. If user not click on any in the list, the listview will stay on the page status.html.
so this is my code for json:
$(document).ready(function() {
var url = "FYPphp/json.php";
$.getJSON(url, function(result) {
console.log(result);
$.each(result, function(i, field) {
var id = field.id;
var name = field.name;
var ic = field.ic;
var phone = field.phone;
var home = field.home;
var vehicle = field.vehicle;
var plat = field.plat;
var color = field.color;
var wash = field.wash;
var stat = field.stat;
$("#listview").append("<a class='item' href='details.html?id=" + id + "&name=" + name + "&ic=" + ic + "&phone=" + phone + "&home=" + home + "&vehicle=" + vehicle + "&plat=" + plat + "&color=" + color + "&wash=" + wash + "'><span class='item-note'><p>" + stat + "</p></span><h2>" + name + " </h2></a>");
});
});
});
If you look on the append method, there is variable called "stat" (in class item-note). For this variable, it might have three value in sql table which are "done","pending" or "cancel" that user can insert from details.html. The code of selection for variable "stat" in details.html:
<div class="item">
<strong>Mark this entry as: </strong>
<select id="stat">
<option id="done">Done</option>
<option id="pending">Pending</option>
<option id="cancel">Cancel</option>
</select>
</div>
The button for update "stat" variable is like this:
$("#update").click(function() {
var id = $("#id").val();
var stat = $("#stat").val();
var dataString = "id=" + id + "&stat=" + stat + "&update=";
$.ajax({
type: "POST",
url: "FYPphp/update.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function() {
$("#update").val('Updating...');
},
success: function(data) {
if (data == "success") {
alert("Updated!");
$("#update").val("Update");
} else if (data == "error") {
alert("error");
}
}
});
});
I want make these value display by their own color in the listview (in class item-note) where green for "done", yellow for "pending" and red for "cancel". This is a screenshot of the listview
Is there any chance I be able to do this?
Thanks in advance.
I might be missing something but.... cant you just set it when creating the ?
$("#listview").append("<a class='item' href='details.html?id=" + id + "&name=" + name + "&ic=" + ic + "&phone=" + phone + "&home=" + home + "&vehicle=" + vehicle + "&plat=" + plat + "&color=" + color + "&wash=" + wash + "'><span class='item-note'><p>" + stat + "</p></span><h2>" + name + " </h2></a>");
you can do something like setting a class name or something based on the field "stat".
var bgColor = (stat == "done" ? "green" : (stat == "pending" ? "yellow" : "red");
$("#listview").append("<a class='item "+bgColor+"' href='details.html?id=" + id + "&name=" + name + "&ic=" + ic + "&phone=" + phone + "&home=" + home + "&vehicle=" + vehicle + "&plat=" + plat + "&color=" + color + "&wash=" + wash + "'><span class='item-note'><p>" + stat + "</p></span><h2>" + name + " </h2></a>");
I want to get all of the image from my Tumblr blog, (no limit)
even if I change the limit to the large number, by default it became 20 images, I just want to know what is wrong on my codes that I created, please help.. thanks in advance
please check the fiddle above to check the result.
here's my code on jsFiddle
$(document).ready(function(){
var tumblrUrl = 'http://api.tumblr.com/v2/blog/';
var blogUrl = 'blog.campbrandgoods.com';
var apiType = '/posts';
var apiKey = 'VtZPFbyp0dLYfOespTdo6oJyOE0nZx4anBSa46j9OoJO4SBIjg';
var limit = 995;
var postUrl = tumblrUrl + blogUrl + apiType + '?api_key=' + apiKey + '&limit=' + limit;
var tileContainer = $('ul#tiles');
$.ajax({
url: postUrl,
type: 'get',
dataType: 'jsonp',
complete: function(){
},
success: function( strData ){
console.log(strData.response.posts);
var posts = strData.response.posts;
$.each(posts, function (i, v) {
if(typeof v.photos !== 'undefined') {
var n = Math.floor(Math.random() * 6);
var info = $($.parseHTML(v.caption)).text();
tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a class="various fancybox" href="' + v.post_url + '">' + info + '</a></div></li>');
//tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a title="' + info + '" class="various fancybox" href="' + v.photos[0].original_size.url + '">' + info + '</a></div></li>');
}
});
tileContainer.gridalicious({selector: '.item', gutter: 5, animate: true});
$('ul#tiles').on('click', 'li.item', function (e) {
var href = $(this).find('.tile-info-container').find('a').attr('href');
$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
window.open(href);
//$(this).find('.tile-info-container').find('a').trigger('click');
});
$('ul#tiles').on('click', 'li.item a', function (e) {
e.preventDefault();
});
/*
$("a.fancybox").fancybox({
'type': 'image',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'autoScale' : false,
'autoSize' : false,
overlayOpacity: 0.7,
overlayColor: '#000',
onStart :function () {
$('#fancybox-inner').css('width', '97%');
$('#fancybox-inner').css('height', '97%');
},
onComplete: function(){
$('#fancybox-inner').css('width', '97%');
$('#fancybox-inner').css('height', '97%');
}
});
*/
$('.tile-img-container').on('click', function (e) {
$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
e.preventDefault();
});
}
});
});
#tiles li.item .tile-info-container {
background-color: rgba(0,0,0,0.7);
cursor: pointer;
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
font-size: 11px;
}
<div class="container-fluid">
<div id="page" class="row">
<div class="col-md-12 details">
<ul id="tiles">
</ul>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
On the Tumblr api docs, it is clearly stated that for the request /posts, you're only allowed to have a limit that goes from 1 to 20.
The approach I'd take would be a recursive function that takes an offset argument. (from the following I've removed some code that wasn't working / was commented out)
function GetImages(offset) {
var postUrl = tumblrUrl + blogUrl + apiType + '?api_key=' + apiKey + '&limit=20&offset=' + offset;
$.ajax({
url: postUrl,
type: 'get',
dataType: 'jsonp',
complete: function(){
},
success: function( strData ){
console.log(strData.response.posts);
var posts = strData.response.posts;
$.each(posts, function (i, v) {
if(typeof v.photos !== 'undefined') {
var n = Math.floor(Math.random() * 6);
var info = $($.parseHTML(v.caption)).text();
tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a class="various fancybox" href="' + v.post_url + '">' + info + '</a></div></li>');
//tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a title="' + info + '" class="various fancybox" href="' + v.photos[0].original_size.url + '">' + info + '</a></div></li>');
}
});
$('ul#tiles').on('click', 'li.item', function (e) {
var href = $(this).find('.tile-info-container').find('a').attr('href');
$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
window.open(href);
//$(this).find('.tile-info-container').find('a').trigger('click');
});
$('ul#tiles').on('click', 'li.item a', function (e) {
e.preventDefault();
});
$('.tile-img-container').on('click', function (e) {
$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
e.preventDefault();
});
// actual changed part
if (typeof offset === "undefined") {
offset = 0;
}
// (to avoid having to load a hundred pages for each time it was tested, there was also this in the if: `offset < 100 &&`)
if (((offset + 20) < strData.response.total_posts)) {
GetImages(offset + 20);
}
}
});
}
GetImages(0);
I am using Savant themeto build a website, I use the following JS code on some pages (using Custom Fields, I use a field name "example" then assign JS in value) to get list of properties by calling an API and receiving JSON data.
JS Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" language="JavaScript"></script>
<!--<script type="text/javascript" src="http://www.bedstax.com/realtorData/featuredCommunities.php?state=FL&area=Bonita Springs%20/%20Estero"></script>
//-->
<script type="text/javascript">
var state = 'FL';
var area = 'Bonita Springs / Estero';
var idx = '583';
var agent = '1212';
var domain = 'xxx';
function setCommunity(community,communityName) {
var cookieSet = window.state + "::" + window.area + "::" + window.idx + "::" + window.agent + "::" + window.domain + "::" + community + '::' + communityName;
document.cookie='idxCookie=' + cookieSet + '; path=/';
document.location.href = '/featured-communities-info';
}
jQuery(document).ready(function() {
jQuery.ajax({
url:"http://bedstax.com/realtorData/newFeatComm.php?state=" + window.state + "&area=" + window.area + "&idx=" + window.idx,
dataType: 'JSONP', // Notice! JSONP <-- P
success:function(json){
$('.output').html(json);
},
error:function(){
alert("Error");
},
});
});
</script>
<div class="output">
</div>
Removing the custom field enables all javascript, but this piece of code works. Is there something wrong with what I'm doing because it disables all JS on the page.
Any help would be appreciated.
It works if you include jquery, run the code below.
var state = 'FL';
var area = 'Bonita Springs / Estero';
var idx = '583';
var agent = '1212';
var domain = 'xxx';
function setCommunity(community,communityName) {
var cookieSet = window.state + "::" + window.area + "::" + window.idx + "::" + window.agent + "::" + window.domain + "::" + community + '::' + communityName;
document.cookie='idxCookie=' + cookieSet + '; path=/';
document.location.href = '/featured-communities-info';
}
jQuery(document).ready(function() {
jQuery.ajax({
url:"http://bedstax.com/realtorData/newFeatComm.php?state=" + window.state + "&area=" + window.area + "&idx=" + window.idx,
dataType: 'JSONP', // Notice! JSONP <-- P
success:function(json){
$('.output').html(json);
},
error:function(){
alert("Error");
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output">
</div>
I found a solution to this issue by just upgrading jquery version from 1.5.1 to 1.7.1.
i'm using this template for a personal project.
https://github.com/blueimp/Bootstrap-Image-Gallery
and there is this code here that gets photos from flickr. This code uses the method flickr.interestingness.getList which takes tags as an argument as seen here. http://www.flickr.com/services/api/flickr.interestingness.getList.html
I want to pass in tags as an argument, but I can't figure out the syntax for doing so in ajax or w/e the format being used in this code is.
// Load images via flickr for demonstration purposes:
$.ajax({
url: 'http://api.flickr.com/services/rest/',
data: {
format: 'json',
method: 'flickr.interestingness.getList',
api_key: 'API_KEY_abc123'
},
dataType: 'jsonp',
jsonp: 'jsoncallback'
}).done(function (data) {
var gallery = $('#gallery'),
url;
$.each(data.photos.photo, function (index, photo) {
url = 'http://farm' + photo.farm + '.static.flickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret;
$('<a data-gallery="gallery"/>')
.append($('<img>').prop('src', url + '_s.jpg'))
.prop('href', url + '_b.jpg')
.prop('title', photo.title)
.appendTo(gallery);
});
This seems like a better project:
http://petejank.github.io/js-flickr-gallery/
/*
* Bootstrap Image Gallery JS Demo 3.0.0
* https://github.com/blueimp/Bootstrap-Image-Gallery
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
* Plugin was modified by ravindu
*/
(function( $ ) {
$.fn.flickr = function(options) {
var url = 'http://api.flickr.com/services/rest/?jsoncallback=?';
var settings = $.extend( {
'api_key': 'YOUR API',
}, options);
function view_image(event) {
var target = $(event.target);
if(target.is('img')) {
var url = target.attr('data-url');
var cache = new Image();
cache.src = url;
var gallery = target.parents('.flickr-gallery:first').children('div.viewport');
var info = gallery.children('div.image-info');
var image = gallery.children('img');
image.fadeOut('slow', function () {
image.attr('src', url);
image.fadeIn('slow');
info.html(target.attr('data-title') + '<br />' + target.attr('data-tags'));
});
}
}
return this.each(function() {
var gallery = $(this);
gallery.addClass('flickr-gallery');
gallery.append('<h2></h2><h3></h3><div class="viewport"></div><div class="browser"><ul></ul></div><div class="clear"></div>');
$.getJSON(url, {
method: 'flickr.photosets.getInfo',
api_key: settings.api_key,
photoset_id: settings.photoset_id,
format: 'json'
}).success(function(state) {
gallery.children('h3').html(state.photoset.description._content);
gallery.find('.loader').addClass('activate');
$.getJSON(url, {
method: 'flickr.photosets.getPhotos',
api_key: settings.api_key,
media: 'photos',
photoset_id: settings.photoset_id,
format: 'json',
extras: 'url_sq,url_m,url_b,date_taken,tags'
}).success(function(state) {
$('.loader').removeClass('activate');
var list = gallery.find('ul:first');
list.html('');
list.on('click', view_image);
$.each(state.photoset.photo, function(index, photo){
baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret;
list.append('<a href="' + this.url_m + '" title="' + this.title + '" data-gallery="" > <img src="' + this.url_sq + '" title="' + this.title + '" ' +
'data-title="' + this.title + '" ' +
'data-url="' + this.url_m + '" ' +
( this.date_taken ? 'data-date="' + this.date_taken + '" ' : '' ) +
'data-tags="' + this.tags + '" ' +
'/></a>');
});
}).fail(function(state) {
alert("Unable to retrieve photo set");
});
}).fail(function(state) {
alert("Unable to retrieve photo set information");
});
});
};
})( jQuery );
$(document).on('ready', function(){
$('#photos-1').flickr({ photoset_id:'72157640241840746'});
$('#photos-2').flickr({ photoset_id:'72157640251299195'});
$('#photos-3').flickr({ photoset_id:'72157640241840746'});
$('#photos-4').flickr({ photoset_id:'72157640251299195'});
$('#photos-5').flickr({ photoset_id:'72157640241840746'});
});