We Keep Coding

Jquery mobile change window.location.href to mobile.changePage

I have a short question to JQuery mobile
I Have the following script and want to have a data transition=slide but it is not working with window.location.href. So i want to change it to $.mobile.changePage. But I don't get it.
Here is the script;
var category_data;
$(document).ready(function () {
$('#search_category_form').bind('submit', function(){
var form = $('#search_category_form');
var data = form.serialize();
$.post('index.html', data, function(){
category_data = data;
window.location.href = 'index.html#search_general';
});
return false;
});
Thank you for your help

$.mobile.changePage() is now deprecated, however you can change your code to:
// [deprecated] $.mobile.changePage("index.html#search_general", {transition: "slide"});
$.mobile.pageContainer.pagecontainer("change", "index.html#search_general", {transition: "slide"});

jquery load function not working in combination with other js code

I have a problem regarding the combination of two parts of the code. This code alone is working fine:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.panelslider.min.js"></script>
<script>
$('#left-panel-link').panelslider();
$('#close-panel-bt').click(function() {
$.panelslider.close();
});
But when I add this one below, the second function (panelslider.close) is not working anymore. Moreover, the load function of the second part of the code is not working neither.
$(document).ready(function() {
$('#content').load('content/index.php');
$('ul#menuslider li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.php');
});
});
I probably missed something important? Any help is welcome, as I don't know which keyword to use in order to look for a solution. I already tried "combine ajax and jquery", "load not working" and others, but without success.
Thanks in advance! Jonas

Something like this:
<script>
(function($){
$('#left-panel-link').panelslider();
var content = $('#content');
content.load('content/index.php');
$(document)
.on('click', '#close-panel-bt', function() {
console.log("about to close the panel");
$.panelslider.close();
})
.on('click', 'ul#menuslider li a', function() {
var page = $(this).attr('href');
console.log("about to reload content");
content.load('content/' + page + '.php');
});
}(jQuery));
</script>

random li (list) with jQuery before page get loaded

how I can random a list with jQuery before page get loaded?
i found this example on the web: http://whatanswered.com/websites-javascript/random-elements-using-jquery.php
(you must scroll down a bit to see)
but it works only after mouse press the button. *this is my problem, i need it to work atomatically before the page is getting loaded.
Any ideas?
I copied the code in this FIDDLE, if anyone would like to help, it might be usefull!
$(function() {
$('button').click(function() {
$("div.list").randomize("div.cat");
});
});
(function($) {
$.fn.randomize = function(childElem) {
return this.each(function() {
var $this = $(this);
var elems = $this.children(childElem);
elems.sort(function() { return (Math.round(Math.random())-0.8); });
$this.remove(childElem);
for(var i=0; i < elems.length; i++)
$this.append(elems[i]);
});
}
})(jQuery);

You can just call the randomize plugin when the page loads - be aware though the plugin needs to have been loaded before hand:
$(function() {
$("div.list").randomize("div.cat");
});
Updated fiddle: http://jsfiddle.net/yNChm/1/

The easiest way is to call the randomize() function after the document.ready event has fired:
$(document).ready(function() {
$("div.list").randomize("div.cat");
});

You should be able to accomplish this by doing a $(window).ready, or something along those lines:
$(function() {
console.log('Yo');
$("div.list").randomize("div.cat");
});
Make sure you register the plugin first!

mootools fx.reveal

I'm trying to do a simple show/hide transition for a message div using fx.reveal in mootools 1.4. The effect works the first time, but not on subsequent clicks.
Any hints as to where I'm going wrong?
http://jsfiddle.net/MYgH6/1/
var mytween = new Fx.Reveal(document.getElementById('mydiv'), {duration: 2500});
$('myclick').addEvent('click', function(){
mymessage();
});
function mymessage(){
var mymessage = document.getElementById('mydiv');
mymessage.set('html','YO!');
mytween.reveal();
mytween.dissolve();
}

var mytween = new Fx.Reveal(document.getElementById('mydiv'), {
duration: 1000,
onComplete:function(){
this.element.dissolve();
}
});
$('myclick').addEvent('click', function(){
mymessage();
});
function mymessage(){
var mymessage = document.getElementById('mydiv');
mymessage.set('html','YO!');
mytween.reveal();
}

I know it's not best answer, as you specified using Fx.Reveal, but I'd use wink command
http://mootools.net/docs/more/Fx/Fx.Reveal#Element:wink
Like here: http://jsfiddle.net/zalun/MYgH6/5/
var msg = document.getElementById('mydiv').hide();
$('myclick').addEvent('click', function() {
msg.wink();
});
You can certainly specify the message within the function as you did before.

How to get image id using jQuery?

I have written code like this. <img id='test_img' src='../../..' />
I want to get the id of this image on image load like,
$(img).load(function() {
// Here I want to get image id i.e. test_img
});
Can you please help me?
Thanks.

$(img).load(function() {
var id = $(this).attr("id");
//etc
});
good luck!!
edit:
//suggested by the others (most efficient)
var id = this.id;
//or if you want to keep using the object
var $img = $(this);
var id = $img.attr("id")

Don't use $(this).attr('id'), it's taking the long, inefficient route. Just this.id is necessary and it avoids re-wrapping the element with jQuery and the execution of the attr() function (which maps to the property anyway!).
$(img).load(function() {
alert(this.id);
});

$(function() {
$('img#test_img').bind('load', function() {
console.log(this.id); //console.log($(this).attr('id'));
});
});

$(img).load(function() {
alert($(this).attr('id'));
});