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)
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!
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.
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.