Jquery Touchwipe - jquery-plugins

I used resources learned on Stack Overflow to find sample script here: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library.
If I use the following, the swipe function fails on android and the user control arrows won't work on android or a pc (I don't have an iphone to test with):
<script type="text/javascript">
$(document).ready(function() {
$('#imagegallery').cycle({
fx: 'fade'
});
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery").cycle("next");
},
wipeRight: function() {
$("#imagegallery").cycle("prev");
}
});
});
</script>
If I use this, then the user control arrows work on a pc and android, but the swipe function still won't work:
<script type="text/javascript">
$(document).ready(function() {
$('#imagegallery').cycle({
fx: 'fade',
prev: '#prev',
next: '#next',
speed: 300
});
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery").cycle("next").alert("left");
},
wipeRight: function() {
$("#imagegallery").cycle("prev").alert("right");
}
});
});
var swipeOptions = {
swipe : swipe,
threshold : 75
}
</script>
I tried everything I could think of to do my own learning and experimenting, but at this point I could really use a push in the right direction. I am using a test page on my son's website: http://zachmcdonald.net/testgallery.php.
Your thoughts are appreciated!
Thanks,
Julie

I found it simpler to do the following
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery .Next").click(); // selector for you 'next' btn
},
wipeRight: function() {
$("#imagegallery .Previous").click() // selector for your 'prev' btn;
}
});

Related

How to improve speed of ajax page loading?

I am using the following code for ajax page loading
<script type="text/javascript">
jQuery('.filter-menu a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#gallery-ajax').fadeIn(200, function() {
jQuery('#gallery-ajax').animate({ opacity:0.1 }, 500);
}).load(link + ' #gallery-ajax', function(){
jQuery('#gallery-ajax').fadeIn(200, function() {
jQuery('#gallery-ajax').animate({opacity:1});
});
});
});
</script>
This is working fine but loads newer contents with very low speed. Can anyone please tell me how to improve its speed of loading newer contents or provide me some alternate jQuery AJAX.
You could try to take away some of the additional fade functions:
<script type="text/javascript">
jQuery('.filter-menu a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#gallery-ajax').hide().load(link + ' #gallery-ajax', function(){
jQuery('#gallery-ajax').fadeIn(200);
});
});
</script>
Of course this is not exactly the same behaviour but it will surely appear faster.

Google map not showing in partial view

i am working on an asp.net mvc3 application.
I am trying to load a google map inside a partial view but it is not working:
My partial view _Map.cshtml
<style type="text/css">
#map_canvas
{
position:absolute;
top:40px;
left:12px;
width:576px;
height: 450px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="sTitle">Name</div>
<div id="map_canvas"></div>
<script type="text/javascript">
var map;
$(document).ready(function () {
var map;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
The map is loaded Via an AJAX Call:
$.ajax({
type: 'GET',
url: '#Url.Action("GetMapById", "Map")',
data: { 'id': sId },
success: function (html) {
$("#content").html(html);
},
complete: function () {
},
error: function () {
alert("There was an error opening the Map. Please try again or contact an administrator");
}
});
The partial is loaded in a div named Content
And in the controller I just return the Partial View
return PartialView("_Map");
The View is loading but the map is not visible.
I used Firebug to track the problem and I got this error:
“google is not defined”
Any idea about the problem?
Thanks a lot
I solved this by putting this
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
in the Layout page nad not in the subview
You have to load google map in this way:
<script type="text/javascript">
var map;
google.load("maps", "3", { other_params:"sensor=false" });
$(document).ready(function () {
And you reinitialize "var map" two times.
I didn't want to load the maps in a Layout page... Doing that would mean that if the script was taking long to load, it would slow the whole page and besides, if it is not needed there, then why make the browser download it?
To get around that, I found that you can load the maps API in your partial view like this:
$.getScript('http://maps.googleapis.com/maps/api/js',function (){
google.maps.event.addDomListener(window, 'load', initialize);
});

jQuery Mobile SimpleDialog with two Inputs?

I am using the jQuery Mobile SimpleDialog (http://dev.jtsage.com/jQM-SimpleDialog/) on a mobile site and I don't quite understand how I could go about implementing it with multiple inputs.
Currently I have this:
<script type="text/javascript">
$(function() {
// $('#createlocation').remove();
});
$(document).delegate('#searchdialog', 'click', function() {
$('<div>').simpledialog2({
mode: 'button',
headerText: 'Route Search',
headerClose: true,
buttonPrompt: 'Enter your search:',
buttonInput: true,
buttons : {
'OK': {
click: function () {
alert($.mobile.sdLastInput);
}
},
}
})
});
</script>
Which is just called from a button click as follows:
<a href="#page1" id="searchdialog" data-theme="" data-icon="search">
Search Routes
</a>
So instead of having just one input, how could I have two?
Regards
Instead of mode:'button' use mode:'blank'
Then you can put whatever you like into blankcontent - as many inputs as you want.

squeezebox ajax mootools

I use the modal window a fair bit in joomla and just found out that it doesn't work with ajax added links. What is the code I need to have the modal window work with those links?
I'm better at jquery than moo tools ...
Thanks,
Mat
I found this code but can't get it to work.
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({
ajaxOptions: {
evalScripts: true
}
});
//SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
window.addEvent('domready', function() {
window.addEvent('load', function(){
//alert('clicked!');
SqueezeBox.fromElement($('a.modal'));
});
});
</script>
I use Rokbox (Mootools) from Rockettheme available for free here : http://www.rockettheme.com/extensions-downloads/club/1005-rokbox
A must have :)

JQuery not working after AJAX Pagination

I have a JQuery function/script that I'm using for posts on a blog that upon hover of the post image shows the post title, excerpt, and link.
Additionally, I have an AJAX Fade Out/Fade In pagination script running and when I go to the next set of posts in the pagination, the first JQuery script doesn't run any longer. I know I need to be using the .live function somehow for jQuery, however I can't seem to figure it out. Here are the two scripts.
<script type="text/javascript">
$(function() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
});
</script>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#postPagination a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#page-wrap').fadeIn(500); });
});
});
</script>
Thanks for your help.
you could put the capslide command into a function and call it after each ajax load:
function addCappslide() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
}
$(function() {
addCappslide(); // call it once the page has loaded
$('#postPagination a').live('click', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){
jQuery('#page-wrap').fadeIn(500, addCappslide() ); // call it after each ajax load again after it faded in
});
});
});

Resources