I've found a few similar posts through searches but none of their fixes seem to work for me.
I'm trying to change pages on swipe with jquery. The page url is getting updated on swipe, however it isn't bringing me to the new page. Instead it remains on the same page and only the url gets updated.
If anyone can take a quick look and suggest some possible fixes it'd be a huge help.
here's my code:
$(function(){
$( "div.sw_box" ).on( "swipe", swipeHandler );
function swipeHandler( event ){
$.mobile.navigate("/test2.php");
}
});
thank you!
There's an official example of swipe-to-navigate here: http://demos.jquerymobile.com/1.3.0/docs/examples/swipe/swipe-page.html
You should try $.mobile.changePage instead of $.mobile.navigate; that seems like the most significant difference between the docs and your code
$mobile.changepage is deprecated and will be removed by JQuery mobile 1.5.
This should work fine:
function swipeHandler( event ){
$(':mobile-pagecontainer').pagecontainer('change', 'page.html', {
transition: 'flip',
changeHash: false,
showLoadMsg: true
});
}
in your case you'll need to change 'page.html' to 'test2.php' or you can use '#pageID' if pages are in the same document.
Related
I am using tabify http://unwrongest.com/projects/tabify to show tabs.
I am struggling to figure out how to change the tab programmatically.
Here is one working example: http://jsfiddle.net/S78Bt/
$(document).ready(function(){
$('#menu').tabify();
});
Although I know that using JQuery UI tabs I can acheive this behavior, but due to some unavoidable circumstances I need to use tabify.
The project you are using seems dead, it hasn't received updates lately, it does not have documentation.
I've taken a look at the source code, there is no API to access tabs for you directly.
The only solution is to hack indirectly by seeing how the library expects the tabs to change:
function changeTab(name) {
location.hash = name + '-tab';
}
This works on my example.
I'm not sure if it's the best way, but it works at least.
If we look at source code of tabify plugin you will see:
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
You may use similar approach: jsfiddle
this may get complicated so I will try to explain my situation as best as I can.
I am using this jquery plugin http://www.infinite-scroll.com/ along with masonry: http://masonry.desandro.com/
Everything is working fine.
However, I'm trying to make some info relating to each post appear when you hover over a post. Here is my code:
$(".main").hover(function(){
$(this).next(".info").slideToggle("fast");
});
This only works on the first page content and not the extra content that is loaded by the infinite scroll.
So I tried adding the function to the callback of my masonry code:
// trigger Masonry as a callback
function(newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({opacity: 0});
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({opacity: 1});
$container.masonry('appended', $newElems, true);
});
$(".main").hover(function(){
$(this).next(".info").slideToggle("fast");
});
});
(Excuse me if I'm doing this completely wrong, I have never worked with Ajax before and am merely experimenting)
This made the hover function work on the new extra content loaded by Infinite scroll, however it then conflicted with the original content.
So, what is the best way to implement my hover function so it will work properly for all posts loaded before and after the Ajax call?
Thanks.
EDIT:
Solved the problem by changing my method to this:
$(document).on("click",".main",function(){
$(this).next(".info").slideToggle("fast");
});
http://api.jquery.com/on/
I will leave the original question here incase someone with a similar problem finds it useful.
$(document).on("click",".main",function(){
$(this).next(".info").slideToggle("fast");
});
For latest version of http://www.infinite-scroll.com/ along with masonry: http://masonry.desandro.com/ following code worked for me:
$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
$(this).next(".info").slideToggle("fast");
// OR your code you want to load after infinite scroll loads
});
Check for more here https://infinite-scroll.com/events.html#append
I am using organictabs plugin, which I initiate in every page load in this form:
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
The tabs work fine in all browsers, and then I perform an ajax call which regenerates the tabs with the following code:
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText,'page-wrap');
$(function() {
$("#example-two").organicTabs({
"speed": 200
});
});
}
Again, the tabs are regenerated properly and everything works fine in all browsers EXCEPT in IE, when I try to switch tabs it doesn't work. I am initiating the jquery code onreadystate change, and i really can't figure out what can the problem be with IE?
Any help will be greatly appreciated.
All the best
The problem was with how IE handles the ("a.sample_class").attr("href") attribute. In Chrome/FF the relative path is returned(in this case just the anchor #tag), whereas in IE, after I was calling an ajax page, the absolute path was being returned(http://www.mysite.com/#tag), hence trying to find the entire anchor(string) in the current page.
More information regarding this issue you can read in this article: http://www.glennjones.net/2006/02/getattribute-href-bug/
Hope this is of help to someone, as it really took a few days of my time
I am using Colorbox 1.3.6 with jQuery 1.4.2. Somehow the folowing code did not work for me:
$(document).ready(function() {
$.colorbox({href: "something.htm", open: true});
});
which won't show up automatically, but this one works:
$(document).ready(function() {
$("#some_element").colorbox({href: "something.htm", open: true});
});
I tried attaching to $("head") which also works! And then I checked the generated elements, it seems that colorbox just added class="cboxElement" to head element and other things all in the body.
But I do not sure if this is a good way to do it (auto popup when the page is loaded) and I can't figure out why $.colorbox did not work!
Please help!
The problem is that the documentation you're seeing is for a newer version, not 1.3.6 that you're using. To do what you want with 1.3.6, try this instead this:
$(function() {
$.fn.colorbox({href: "something.htm", open: true});
});
If you look at version 1.3.6, you'll see this in the source:
cboxPublic = $.fn.colorbox = function (options, callback) {
It's not until this commit for 1.3.7 that $.colorbox shows up:
cboxPublic = $.fn.colorbox = $.colorbox = function (options, callback) {
So $.colorbox() does work...but only for version 1.3.7+, as of the time of this answer the current version is 1.3.9, so if you want to use $.colorbox() instead of $.fn.colorbox() just upgrade :)
To be honest, I have used ColorBox before in the same method with successful results. I'm unsure why it wouldn't work as you have it set up.
Since jQuery was updated from 1.4.1 to 1.4.2, apparently a lot of different plugins have had issues with it. I do not know if ColorBox has been proven to work perfectly with 1.4.2. You could always try to download 1.4.1 to give a try. That could be the problem.
This my javascript :-
<script type ="text/javascript">
$(function()
{
$("#tabs").tabs({ cache: true ,fx: { opacity: 'toggle' }});
});
</script>
And this is my html which loads php file using ajax :-
<ul>
<li>General</li>
<li>Messages</li>
<li>Pics</li>
<li>Facilities</li>
</ul>
The question i want to know is when Messages.php is loaded does the javascript onload event fire? I want to know because i want to take my textarea and convert it into editor. However i am not able to capture window.onload event :-
window.onload = function(){
alert('hello');
}
and further if i write something in :-
$(function(){
}
It works in Opera and IE but sometimes doesn't work sometimes. To sum, how do i capture window.onload in the above situation?
EDIT
Looks like $(function(){ } seems to be working, the problem is with fx: { opacity: 'toggle' }. When i remove effect, it works fine.
Thanks in advance :)
The window.onload event will not fire, in the document you're loading into it already fired earlier.
You should be able to use document.ready, e.g. $(function() { }); in the page you're fetching and it work, provided you're on at least jQuery 1.4.2+. Several issues were fixed with events in the 1.4.2 release, including one around this being inconsistent, if you're using 1.4.1 or below, I can't promise it being 100% consistent.
Alternatively, you can have the code in the main page instead of inside Messages.php and run the code in the load event of the tabs, like this:
$("#tabs").bind("tabsload", function(event, ui) {
$('.myEditorClass', ui.panel).myEditorPlugin();
});
I've noticed in some browsers that if you use display:none it won't render anything inside that tag, it just ignores whatever's in there because it's not being displayed. I'm not sure if that fx setting is using .hide(), but that could part of the issue.
Also why not set up a function on the loaded pages called "init", then have ajax do a callback to trigger it?