Ask your WordPress questions! Pay money and get answers fast! (more info)

Select Menu Options Customized With Dropkick.js ...Jump To URL? WordPress

  • SOLVED

Hi Guys,

I'm combining these two tutorials:

1: http://css-tricks.com/unobtrusive-page-changer/
2: http://jamielottering.github.com/DropKick/

But I don't know how to make it function in such a way, that when you choose an option from the list it will jump to the associated url from the selected option.

Because the dropkick.js set up requires some type of callback.

I really have no idea what that means or how that needs to be implemented.

Here is some more info on that:
http://www.paulund.co.uk/how-create-nice-looking-dropdowns-using-dropkick-js

But I'm getting stuck with this unfortunately.

I've attached a .zip file with the menu code ready to go, only thing that is missing in functionality, is that the user will be directed to the chosen url.

File: http://dl.dropbox.com/u/99552696/styledjumpmenu.zip

Thanks in advance for your input.

Answers (3)

2012-08-24

Arnav Joy answers:

delete your js function



$('.change').dropkick({
change: function (value, label) {
alert('You picked: ' + label + ':' + value);
}
});


and write following before </body> tag

<script type="text/javascript" charset="utf-8">


$('.modropmenu').dropkick({
change: function (value, label) {
location.href = value;
}
});


</script>


Edwin comments:

That doesn't work, could you download the .zip file and apply it in the code and check if you can get it to work?


Arnav Joy comments:

clear your browser cache and then test


Arnav Joy comments:

USE THIS JS INSTEAD


<script type="text/javascript" charset="utf-8">
$(function () {
$('.modropmenu').dropkick({
theme: 'modrop',
change: function (value, label) {
location.href = value;
}

});
});
</script>


Edwin comments:

Tried it, but unfortunately it doesn't work.

Have you tried downloading the .zip file and testing the code directly?


Arnav Joy comments:

yes i have tried it and downloaded your zip files , it worked on my end , here is the full code of index.php
<?php
if (isset($_POST['nav'])) {
header("Location: $_POST[nav]");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Unobtrusive Page Changer</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/pagechanger.js"></script>

<link rel="stylesheet" href="dropkick.css" type="text/css">
<link rel="stylesheet" href="mo-drop-menu.css" type="text/css">

<script src="jquery.dropkick-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.modropmenu').dropkick({
theme: 'modrop',
change: function (value, label) {
location.href = value;
}

});
});
</script>
</head>

<body>


<div id="page-wrap">

<form id="page-changer" action="" method="post">
<select name="nav" class="modropmenu" style="width:282px;">
<option value="">Go to page...</option>
<option value="http://css-tricks.com/">CSS-Tricks</option>
<option value="http://digwp.com/">Digging Into WordPress</option>
<option value="http://quotesondesign.com/">Quotes on Design</option>
</select>
<input type="submit" value="Go" id="submit" />
</form>


</div>


</body>

</html>


Edwin comments:

Thanks Arnov! - I must have made a typo somewhere.
I used the code you pasted above and works great!

Thanks!

2012-08-24

paul de wouters answers:

Hi

take a look at this code:
https://gist.github.com/2870358

you can add this js to the select element
<div class="wrap"><form><select class="default" id="prim-selector" name="URL" onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value">%3$s</select></form></div>


Edwin comments:

Sorry Paul, That doesn't seem to work in this case.
I added it to the code, but it did not kick in the redirect to the chosen url.

2012-08-24

Gabriel Reguly answers:

Hi,

-- Edit --

Forget it. The code already does that correctly.

(function ($, window, document) {
.....
.....
})(jQuery, window, document)

--

Why not try to use jQuery instead of $ ?


<script type="text/javascript" charset="utf-8">
jQuery(function () {
jQuery('.modropmenu').dropkick({theme: 'modrop'});
});
</script>


Regards,
Gabriel


Edwin comments:

Hi Gabriel, tried it just now, no positive result.