I have the following code :
<script type="text/javascript">
jQuery(function($) {
var main_content = $('#container'),
position_top = $('#j_idt7\\:idA').position().top,
position_left = $('#j_idt7\\:idA').position().left,
position_width = $('#j_idt7\\:idA').width(),
position_height = $('#j_idt7\\:idA').height(),
gen_box = null,
i = 1;
console.log( 'Top Image: ' + position_top + 'px');
console.log( 'Left Image: ' + position_left + 'px');
console.log( 'Width Image : ' + position_width + 'px');
console.log( 'Height Image : ' + position_height + 'px');
main_content.selectable({
start: function(e) {
x_begin = e.pageX,
y_begin = e.pageY;
},
stop: function(e) {
x_end = e.pageX,
y_end = e.pageY;
if(x_end > position_left + position_width )
return;
if( x_end - x_begin >= 1 ) {
width = x_end - x_begin,
height = y_end - y_begin;
} else {
width = x_begin - x_end,
height = y_end - y_begin;
var drag_left = true;
}
if(width==0 & height==0)
{return;}
$(this).append('<div class="gen_box_' + i + '">Test</div>');
gen_box = $('.gen_box_' + i);
$(gen_box).css({
'background' : '#006600',
'width' : width,
'height' : height,
'position' : 'absolute',
'left' : x_begin,
'text-align' : 'center',
'vertical-align': 'middle',
'Opacity' : '0.3',
'top' : y_begin
})
.draggable({ grid: [1, 1] })
.resizable({
start: function( event, ui ){
var x = event.clientX;
var y = event.clientY;
if(x!=13)
console.log('Test');
}
});
drag_left ? $(gen_box).offset({ left: x_end, top: y_begin }) : false;
i++;
}});
});
</script>
Once I put "==" or "!=" in the part :
if(x!=13)
console.log('Test');
It works without any problem, once I change it by "<" or ">" I got an error in the console saying :
Uncaught SyntaxError: Unexpected token ;
This is really weird !! Any help please ?
You can find escape html code here.
escape html
Use an editor that is designed for writing code.
It looks like the one you're using (which is it?) is ill-suited to writing code: it seems to be HTML encoding your tokens: & is becoming & throughout, and so on.
Likely the same is happening with < and >: they are being HTML-encoded to < and > respectively, and the semicolon in that replacement is causing your syntax error.
Related
I have the following div element in jquery:
this.$flipPages.find( '.box' ).on( 'click.flips', function( event ) {
var $box = $(this),
$boxClose = $( '<span class="box-close">close</span>' ),
transitionProp = {
speed : 450,
timingfunction : 'linear'
},
$overlay = $( '<div class="overlay">close</div>' ).css( {
'z-index' : 9998,
'-webkit-transition' : 'opacity ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction,
'-moz-transition' : 'opacity ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
} ).prependTo( $( 'body' ) ),
prop = {
width : $box.outerWidth(true),
height : $box.outerHeight(true),
left : $box.offset().left,
top : $box.offset().top
},
$placeholder = $box.clone().css( {
'position' : 'absolute',
'width' : prop.width,
'height' : prop.height,
'left' : prop.left,
'top' : prop.top,
'zIndex' : 9999,
'overflow-y' : 'auto',
'-webkit-transition': 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction,
'-moz-transition': 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
} )
.insertAfter( $overlay )
.end()
.append( $boxClose.on( 'click.flips', function( event ) {
$overlay.css( 'opacity', 0 );
$placeholder.children().hide().end().removeClass( 'box-expanded' ).css( {
width : _self.windowProp.width,
height : _self.windowProp.height,
'overflow-y' : 'hidden'
} );
setTimeout( function() {
$placeholder.css( {
left : prop.left,
top : prop.top,
width : prop.width,
height : prop.height,
'-webkit-transition' : 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction,
'-moz-transition' : 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
});
}, 0 );
}) ).children().hide().end()
.on( 'webkitTransitionEnd.flips transitionend.flips OTransitionEnd.flips', function( event ) {
if( $( event.target ).hasClass( 'box-expanded' ) ) { // expanding
$(this).css( {
width : '100%',
height : '100%',
'-webkit-transition' : 'none',
'-moz-transition' : 'none'
} ).children().fadeIn();
}
else { // collapsing
$overlay.remove();
$(this).remove();
}
});
setTimeout( function() {
$overlay.css( {
opacity : 1
} );
$placeholder.addClass( 'box-expanded' ).css( {
left : 0,
top : 0,
width : _self.windowProp.width,
height : _self.windowProp.height
});
}, 0 );
} );
this .box is a div that has content and it is clickable, although this works in desktop and laptop version of chrome it does not in the mobile chrome version. It works on safari android version. I use Kinetic and i heard there are some tweaks i have to do when using it to make it work on chrome for mobile.
Is there any reason this doesnt work on chrome mobile?
EDIT:
I have added a alert inside this function and when i am using chrome for desktop it prints, if i am using chrome mobile it never alerts anything. it is not being called.
what you are searching for is a tap event for mobiles and click event for desktops
this will probably work:
this.$flipPages.find( '.box' ).on( 'touchend click.flips', function( event ) {
...
});
This piece of code may make it work in mobile . this is a mocking the mouse event in mobile
if(BrowserDetect.browser.indexOf("Chrome") != -1) {
var fireOnThis = document.getElementById("idofelementtobeclicked");
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window, 0, 0, 345, 7, 220, false, false, true, false, 0, null);
fireOnThis.dispatchEvent(evObj);
return true;
}
Hope it helps
I am building a Titanium iOS app. I am receiving JSON data from a server and populating a table. I have an image in each row that I swap out when the image is selected, then I show an alert to confirm their selection. My problem is displaying the SELECTED rows data in the alert. Here is my code:
//Create the row
var xhr = Ti.Network.createHTTPClient({
onload : function() {
Ti.API.debug(this.responseText);
var json = JSON.parse(this.responseText);
for ( i = 0; i < json.matches.length; i++) {
match = json.matches[i];
row = Ti.UI.createTableViewRow({
backgroundImage : 'images/matchesrowbackground.png',
selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE,
width : '90%',
height : '180px'
});
var acceptmatchView = Ti.UI.createView({
left : '0px',
top : '0px',
width : '60px',
height : '60px'
});
var acceptmatch = Ti.UI.createImageView({
image : 'images/nomatch.png',
left : '0px',
top : '0px',
width : '60px',
height : '60px'
});
//Add some more stuff to the row and add the rows to the table then do my tableview.EventListener
tableview.addEventListener('click', function(e) {
var imageView = e.row.children[0].children[0];
if (imageView.image == 'images/nomatch.png') {
imageView.image = 'images/match.png';
var alertWindow = Titanium.UI.createAlertDialog({
title : 'Accept This Match?',
message : 'Are you sure you want to accept this match? ' + '\n' + match.matchtype + '\n' + 'Time: ' + match.datetime + '\n' + 'At: ' + match.cname,
cancel : 1,
buttonNames : ['Yes', 'Cancel']
});
How do I get the selected rows data to show in the alert?
For that, you need to change the code like following
//Create the row
var xhr = Ti.Network.createHTTPClient({
onload : function() {
Ti.API.debug(this.responseText);
var json = JSON.parse(this.responseText);
for ( i = 0; i < json.matches.length; i++) {
match = json.matches[i];
row = Ti.UI.createTableViewRow({
backgroundImage : 'images/matchesrowbackground.png',
selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE,
width : '90%',
height : '180px',
rowId : i //custom property
});
//Add some more stuff to the row and add the rows to the table
tableview.addEventListener('click', function(e) {
var imageView = e.row.children[0].children[0];
if (imageView.image == 'images/nomatch.png')
{
imageView.image = 'images/match.png';
var matchSelected = json.matches[e.rowData.rowId];
var alertWindow = Titanium.UI.createAlertDialog({
title : 'Accept This Match?',
message : 'Are you sure you want to accept this match? ' + '\n' + matchSelected.matchtype + '\n' + 'Time: ' + matchSelected.datetime + '\n' + 'At: ' + matchSelected.cname,
cancel : 1,
buttonNames : ['Yes', 'Cancel']
});
}
});
I'm using a custom property rowId for identifying the selected row.
I'm using jQuery Blinds Slideshow as image slider. I want to redirect the first sliding image to http://google.com when I click on it. I use a html tag like this:
<div class="slideshow">
<ul>
<li><img src="lemons/1.jpg" alt="lemon" /></li>
<li><img src="lemons/2.jpg" alt="lemon tea" /></li>
</ul>
</div>
1
2
but it doesn't work.
My question is how can I redirect the first sliding image to google.com when I click on it ?
Thanks in advance.
Here is something quick and dirty I cooked up modifying the original jquery-blinds.
Put it in a new JS file and call it jquery.blinds-0.9-with-hyperlinks.js or something and include it in place of the current jquery-blinds code.
It should work with the HTML you posted above. It simply checks if any of the images are wrapped in an '' tag and if it is, makes the image redirect to that link on click.
/*!
* jQuery Blinds
* http://www.littlewebthings.com/projects/blinds
*
* Copyright 2010, Vassilis Dourdounis
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
* Modified by Thomas Antony ( http://www.thomasantony.net ) on 06-Apr-2012
* Added image hyperlinking functionality
*
*/
(function($){
$.fn.blinds = function (options) {
$(this).find('li').hide();
$(this).addClass('blinds_slideshow');
settings = {};
settings.tile_orchestration = this.tile_orchestration;
settings.h_res = 12;
settings.v_res = 1;
settings.width = $(this).find('li:first').width();
settings.height = $(this).find('li:first').height();
jQuery.extend(settings, options);
tiles_width = settings.width / settings.h_res;
tiles_height = settings.height / settings.v_res;
// Get image list
blinds_images = [];
blinds_links = [];
$(this).find('img').each(function (i, e) {
blinds_images[blinds_images.length] = {'title': e.alt, 'src': e.src}
// Code added to allow for linking functionality -- Thomas
if( $(e).parent().is('a') && $(e).parent().attr('href') != undefined)
{
blinds_links[i] = $(e).parent().attr('href');
}else{
blinds_links[i] = "";
}
});
// Create blinds_container
$(this).append('<div class="blinds_container"></div>');
blinds_container = $(this).find('.blinds_container');
blinds_container.css({
'position' : 'relative',
'display' : 'block',
'width' : settings.width,
'height' : settings.height,
// 'border' : '1px solid red', // debuging
'background': 'transparent url("' + blinds_images[1]['src'] + '") 0px 0px no-repeat'
} );
// Setup tiles
for (i = 0; i < settings.h_res; i++)
{
for (j = 0; j < settings.v_res; j++)
{
if (tile = $(this).find('.tile_' + i + '_' + j))
{
h = '<div class="outer_tile_' + i + '_' + j + '"><div class="tile_' + i + '_' + j + '"></div></div>';
blinds_container.append(h);
outer_tile = $(this).find('.outer_tile_' + i + '_' + j);
outer_tile.css({
'position' : 'absolute',
'width' : tiles_width,
'height' : tiles_height,
'left' : i * tiles_width,
'top' : j * tiles_height
})
tile = $(this).find('.tile_' + i + '_' + j);
tile.css({
'position' : 'absolute',
'width' : tiles_width,
'height' : tiles_height,
'left' : 0,
'top' : 0,
// 'border' : '1px solid red', // debuging
'background': 'transparent url("' + blinds_images[0]['src'] + '") -' + (i * tiles_width) + 'px -' + (j * tiles_height) + 'px no-repeat'
})
jQuery.data($(tile)[0], 'blinds_position', {'i': i, 'j': j});
}
}
}
jQuery.data(this[0], 'blinds_config', {
'h_res': settings.h_res,
'v_res': settings.v_res,
'tiles_width': tiles_width,
'tiles_height': tiles_height,
'images': blinds_images,
'img_index': 0,
'change_buffer': 0,
'tile_orchestration': settings.tile_orchestration
});
// Add redirection code for the links -- Thomas
var container = this[0]; // Need this to get config data within click handler
jQuery.data(this[0], 'blinds_links', blinds_links);
blinds_container.click(function(){
var config = jQuery.data(container, 'blinds_config');
if(blinds_links[config.img_index] != "")
{
window.location.href = blinds_links[config.img_index]
}
});
$(this).update_cursor(); // Set correct cursor for first image -- Thomas
// Modified code ends
}
$.fn.blinds_change = function (img_index) {
// reset all sprites
config = jQuery.data($(this)[0], 'blinds_config');
for (i = 0; i < config.h_res; i++)
{
for (j = 0; j < config.v_res; j++) {
$(this).find('.tile_' + i + '_' + j).show().css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat');
}
}
$(this).children('.blinds_container').css('background', 'transparent url("' + blinds_images[img_index]['src'] + '") 0px 0px no-repeat' );
config.img_index = img_index;
jQuery.data($(this)[0], 'blinds_config', config);
for (i = 0; i < config.h_res; i++)
{
for (j = 0; j < config.v_res; j++) {
t = config.tile_orchestration(i, j, config.h_res, config.v_res);
config = jQuery.data($(this)[0], 'blinds_config');
config.change_buffer = config.change_buffer + 1;
jQuery.data(this[0], 'blinds_config', config);
$(this).find('.tile_' + i + '_' + j).fadeOut(t, function() {
blinds_pos = jQuery.data($(this)[0], 'blinds_position');
config = jQuery.data($(this).parents('.blinds_slideshow')[0], 'blinds_config');
$(this).css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (blinds_pos.i * config.tiles_width) + 'px -' + (blinds_pos.j * config.tiles_height) + 'px no-repeat');
config.change_buffer = config.change_buffer - 1;
jQuery.data($(this).parents('.blinds_slideshow')[0], 'blinds_config', config);
if (config.change_buffer == 0) {
// $(this).parent().parent().children().children().css('width', config.tiles_width);
$(this).parent().parent().children().children().show();
}
});
}
}
$(this).update_cursor();
}
$.fn.tile_orchestration = function (i, j, total_x, total_y) {
return (Math.abs(i-total_x/2)+Math.abs(j-total_y/2))*100;
}
// Function to update cursor to a "hand" if image is linked -- Thomas
$.fn.update_cursor = function()
{
// Change cursor if image is hyperlinked
var config = jQuery.data($(this)[0], 'blinds_config');
var blinds_links = jQuery.data($(this)[0], 'blinds_links'); // get links from saved data
console.log(config.img_index);
if(blinds_links[config.img_index] != "")
{
$(this).find('.blinds_container').css('cursor','pointer');
}else{
$(this).find('.blinds_container').css('cursor','auto');
}
}
})(jQuery);
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a:first').click(function(){
window.location.href = 'http://google.com/';
});
});
</script>
Or
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.slideshow img:first').click(function(){
window.location.href = 'http://google.com/';
});
});
I can't figure out why this script isn't working in IE7 and 8. It works fine in all other browsers, but for some reason, in IE7 and 8 this script is only firing the // thumbs hover bit, and not the // loading images bit (which is actually more important). Everything seems to be fine, does anyone have any ideas?
function featuredJS() {
$("[title]").attr("title", function(i, title) {
$(this).data("title", title).removeAttr("title");
});
// loading images
var last = "featured/01.jpg";
$("#thumbs a").click(function(event) {
event.preventDefault();
var position = $(this).attr("class");
var graphic = $(this).attr("href");
var title = $(this).attr("alt");
var description = $(this).data("title");
var currentMargin = $("#full-wrapper #full").css("marginLeft");
var currentWidth = $("#full-wrapper #full").css("width");
var transitionTest = currentMargin.replace("px", "") * 1;
if(last != graphic && ((transitionTest % 938) == 0 || transitionTest == 0)) {
$("#placeholder").before( "<div class='featured'><div class='description " + position + "'>" + "<h3>" + title + "</h3>" + "<p>" + description + "</p>" + "</div><img src=\"" + graphic + "\" /><div style='clear:both;'></div></div>" );
$("#full-wrapper #full").animate({
marginLeft: "-=938px"
}, 500);
$("#full-wrapper #full").css("width","+=938px");
last = graphic;
};
});
// thumbs hover
$("#thumbs .thumb").hover(
function () {
$(this).find(".red-bar").animate({height:"72px"},{queue:false,duration:500});
},
function () {
$(this).find(".red-bar").animate({height:"3px"},{queue:false,duration:500});
}
);
};
Demo page at http://www.weblinxinc.com/beta/welex/demo/
Your problem is caused by not having a margin set to begin with. transitionTest then becomes NaN because the style is auto, not 0px like you're expecting. Consider trying this instead:
var transitionTest = parseInt("0"+currentMargin,10);
This will trim off the "px" for you, as well as handle the case where the margin is a keyword.
THE FUNCTION
The SelectMultiple function comes up with a pop-up div with checkboxes in it.
The checkboxes are built equally to select options and added click event to build up
an array.
Beacuse there are many select menus on the page there is built a filterstack object to make the distinction per select menu name.
THE AIM AND THE PROBLEM
When a checkbox clicked the innerHTML (not the option value) text of option will be shown in the very first option field of referred select menu with comma separation, so far works.
On checkbox un-check should the text removed by javascripts replace function, but it not works.
NOTE 1:
Checkbox events building at this moment a string. Before this I've tried an array and did not worked too.
NOTE 2:
Tested on Firefox.
var filterstack = {};
var objSelected = {};
function SelectMultiple(field, isAction, paneId) {
//the first paramater might be "this" or the field id.
if (typeof field == "string")
field = $(field);
field.onchange = function () {};
objSelected["" + field.name + ""] = new Array();
var popdiv = document.createElement('DIV');
$(popdiv).setStyle({
backgroundColor: '#fff',
'z-index': '999999999991',
'margin': '-24px -2px',
'width': field.parentNode.offsetWidth + 'px',
'height': field.options.length * 20 + 31 + 'px',
'position': 'absolute',
'display': 'block'
});
popdiv.id = "" + field.name + "";
var selArr = new Array();
var selinnerHTML = "";
for (var i = 0; i < field.options.length; i++) {
var innerdiv = document.createElement('DIV');
$(innerdiv).setStyle({
'width': 'auto',
'position': 'relative'
});
var optionlabel = document.createElement('LABEL');
optionlabel.innerHTML = field.options[i].innerHTML;
$(optionlabel).setStyle({
'width': field.offsetWidth - 25 + 'px'
});
innerdiv.appendChild(optionlabel);
var optionfield = document.createElement('INPUT');
var fieldName = field.name + '[' + field.options[i].value + ']';
optionfield.type = 'checkbox';
optionfield.id = fieldName; //p.vendors_id[0]
optionfield.name = fieldName;
optionfield.toreplace = field.options[i].innerHTML.toString();
if (filterstack["" + fieldName + ""] &&
objSelected["" + field.name + ""]) {
optionfield.checked = true;
selArr.push(field.options[i].value);
if (!(selinnerHTML.match('/' + optionfield.toreplace + '/gi')))
selinnerHTML += optionfield.toreplace + ', ';
} else {
optionfield.checked = false;
selinnerHTML.replace('/' + optionfield.toreplace + '/gi', '');
}
optionfield.value = field.options[i].value;
$(optionfield).setStyle({
'width': '10px',
'display': 'inline'
});
optionfield.onclick = function (e) {
var el = (e) ? e.target : ((window.event.srcElement) ? window.event.srcElement : null);
var selArr = objSelected["" + field.name + ""];
if (el.checked) {
selArr.push(el.value);
filterstack["" + field.name + ""] = selArr;
if (!(selinnerHTML.match('/' + el.toreplace + '/gi')))
selinnerHTML += el.toreplace + ', ';
} else {
// .replace DOES NOT WORK
if ((selinnerHTML.match('/' + el.toreplace + '/gi')))
selinnerHTML.replace('/' + el.toreplace + '/gi', '');
field.options[field.selectedIndex].innerHTML = selinnerHTML;
for (var i = 0; i < selArr.length; i++) {
if (!selArr[i].checked && selArr[i] == el.value) {
selArr.splice(i, 1);
break;
}
}
filterstack["" + field.name + ""] = selArr;
}
}; //optionfield.onclick
//ignore empty values
if (optionfield.value != "")
innerdiv.appendChild(optionfield);
popdiv.appendChild(innerdiv);
} //for
field.options[0].innerHTML = selinnerHTML;
objSelected["" + field.name + ""] = selArr;
filterstack["" + field.name + ""] = selArr;
var ok = document.createElement('INPUT');
ok.type = 'button';
ok.value = 'OK';
$(ok).setStyle({
'width': '55px',
'margin': '5px 0px 0px 7px',
'text-align': 'center'
});
ok.onclick = function (el) {
postFilter(null, null, isAction + '/', field.name + '/', filterstack["" + field.name + ""] + '/', paneId);
field.parentNode.removeChild(popdiv);
};
var cancel = document.createElement('INPUT');
cancel.type = 'button';
cancel.value = 'Cancel';
$(cancel).setStyle({
'width': '55px',
'margin': '0',
'text-align': 'center',
'display': 'inline'
});
cancel.onclick = function (el) {
field.parentNode.removeChild(popdiv);
};
popdiv.appendChild(ok);
popdiv.appendChild(cancel);
field.parentNode.appendChild(popdiv);
}
Using innerHTML is not the way to go for <option> elements. Use the option's text property instead.