I am trying to convert the 'list pages' function in Wordpress into a dynamic select menu navigation (like the first example here: http://lab.artlung.com/dropdown/). I have tried converting wp_list_pages using js with this code:
$(function() {
$('ul.selectdropdown').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
});
This works converting it, but doesn't allow me to insert the required:
onchange="window.open(this.options[this.selectedIndex].value,'_top')"
Am I able to drop this into the above function, or is there a better way of going about this?
Any help would be great.
<-- edit --> the below function works correctly:
$("ul.selectdropdown").show();
$(function() {
$('ul.selectdropdown').each(function() {
var $select = $('');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
$select.change(function() { window.open($select.find(':selected').val(), '_top'); });
});
$(this).replaceWith($select);
});
});
Why don't you use $select.change(function() { window.open($select.find(':selected').val(), '_top'); });?
Related
I'm outputting several divs using php - each div has a different country name for the class.
I'm also outputting a variable using jquery which checks if content of a div has changed. That variable will also be a country name.
If the jquery variable matches a div class, I want that div to .show(), how can I do that?
This is my (horrible) attempt:
(function($) {
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
message = $("#block1").html();
regiondiv = '.';
fullregion = regiondiv + message;
alert(fullregion);
if ($('.region-logos').hasClass(message)) {
$(fullregion).show();
} else {
$(fullregion).hide();
}
});
});
})(jQuery);
If I click on Canada for instance, it will show the .Canada div, but if I click on Spain after it, it's shows the .Spain div as well as the .Canada div. I.e once you click on more than one it just continues to show them all. It doesn't hide the divs if you haven't click on it.
var class = 'no-class';
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
var regiondiv = '.';
var fullregion = regiondiv + class ;
$(".fullregion").hide();
class = $("#block1").html();
fullregion = regiondiv + class ;
$(".fullregion").show();
});
});
Not sure if I followed the question correctly. I assume you want to display a div if class of that div matches a variable in javascript. If so the you can try this:
(function($) {
$(document).ready(function () {
$("body").bind("DOMSubtreeModified", function() {
// Not sure how are you generating this jquery variable
var yourJqueryVariable;
// Check if class name exists
if ($(".yourJqueryVariable")[0]){
$(".yourJqueryVariable").show(); //or even $(".yourJqueryVariable").css('display','block');
}
});
});
})(jQuery);
(function($) {
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
var message = $("#block1").html();
//ok so you have the variable to check
if($('.'+message).length > )) { //is there 1 or more of these classes in the DOM?
$('.'+message).each(function() { //there is, loop and show them all
$(this).show();
});
}
});
});
})(jQuery);
EDIT
Ok looking at your updated answer, assuming there are multiple .region-logos you need to perform your if else within a loop of those:
$('.region-logos').each(function() {
if($(this).hasClass(message)) {
$(fullregion).show();
}else {
$(fullregion).hide();
}
});
I have a form using Janko At Warpseeds Form to Wizard Plugin alongside the ImagePicker plugin and I would like to make sure all the images are selected before being able to click Next.
I am currently using Bassassistance validation plugin.
Does anyone have any idea how I could implement this?
JSFiddle showing current working code and all javascript here http://jsfiddle.net/4Hkxy/
$(function () {
jQuery(function($){
var $signupForm = $( '#multipage' );
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: false,
validateBeforeNext: function() {
var selectedCount = $('.thumbnails.image_picker_selector:visible .selected').length;
var totalCount = $('.thumbnails.image_picker_selector:visible').length;
if(selectedCount != totalCount) {
alert('please select an image per selection');
}
}
});
});
$("select.image-picker").imagepicker({
hide_select: true,
show_label: true,
});
$("select.image-picker.show-labels").imagepicker({
hide_select: true,
show_label: true,
});
var container = $("select.image-picker.masonry").next("ul.thumbnails");
container.imagesLoaded(function () {
container.masonry({
itemSelector: "li",
});
});
Any help would be appreciated.
Try this:
//inside "next.onclick" handler
var selectedCount = $('.thumbnails.image_picker_selector:visible .selected').length;
var totalCount = $('.thumbnails.image_picker_selector:visible').length;
if(selectedCount != totalCount) {
alert('please select an image per selection');
}
I have a link that opens a modal when clicked, however that element also has a data-id="#id here" attribute that I need to grab so I can pass it to my php script for processing. How can I accomplish this?
My JS code:
$(document).ready(function() {
$('#edit_general').click(editModal);
});
function editModal(event)
{
var modal = $('#editModal');
modal.modal({
show: true
});
}
My html:
<li><a id="edit_general" href="#editModal" data-uid="<?php echo $u->id; ?>">Edit General</a></li>
I tried using the this keyword but it didn't work.
How can I accomplish this?
Try this: Demo http://jsfiddle.net/szS2J/1/ or http://jsfiddle.net/ug7ze/
$(this).data('uid')
Hope it fits the cause :)
like this:
$('#edit_general').click(editModal);
$(this).data('uid')
full
$(document).ready(function() {
$('#edit_general').click(editModal);
});
function editModal(event) {
alert($(this).data('uid'));
var modal = $('#editModal');
modal.modal({
show: true
});
}
You can get the value using the attr method: $(this).attr('data-uid')
Like this stored in data_id.
$(document).ready(function() {
$('#edit_general').click(function() {
var data_id = $(this).data('uid');
var modal = $('#editModal');
modal.modal({
show: true
});
});
});
I am a learner in Jquery coding, My task is to show/hide TABLE elements on clicking SPAN element. I tried with below mentioned Jquery code which is not working..
HTML code is:
foreach($array as $key => $arrValue) {
<span id="link<?=$count?>">$key</span>
<table id="tbl<?=$count?>">
foreach($arrValueas $key => $value) {
<tr><td>$value</td></tr>
}
</table>
}
My Jquery code is:
$(function(){
// To open/close field's group div
$("span").each(function (i){
i++;
$('#link' + i).click(function (i) {
$('#tbl' + i).toggle(800);
});
});
});
Pls avoid PHP open close tags issues in HTML code..
$("span").each(function (){
$(this).click(function () {
$(this).next('table').toggle(800);
});
});
try this
$(function(){
$("span").each(function (i){
(function(i) {
$('#link' + i).click(function() {
$('#tbl' + i).toggle(800);
});
}(i));
});
});
you don't need to increment the variable with i++ oyherwise you won't set the handler on the expected link element. Each() is already incrementing the variable i
Try this way to match two different element groups:
Here is jsFiddle.
var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');
thumbs.click(function() {
var target = $(this).index();
bigImg.each(function(i){
if( i != target){
$(this).fadeOut(300);
}else{
$(this).fadeIn(300);
}
});
});
using the following code I can create unlimited number of rows with a dropdown select and a text input field in it. The problem is I want to populate the drop down select with data from my database but I don't know how to do it when I am creating the dropdown select inside javascript tag. I tried to use codeigniter's default drop_down select instead of the usual type of "drop down select" but when I click the add button to create a new row , it does nothing at all.
Would you please kindly help me to solve the problem? Just for your information I am using Codeigniter.
Thanks in Advance :)
Here's my javascript::
<script type="text/javascript">
$(function() {
$("input[type=button][value=Add]").click(function(e) {
e.preventDefault();
var newDiv = $("<div>").appendTo("#div");
$("<select>").attr("name", "fee_type[]").attr("class", "required").appendTo(newDiv).append(
$("<option>").val("0").text("Option 1"),
$("<option>").val("1").text("Option 2"));
$("<input>").attr("name", "fee_amount[]").attr('class', 'small required').appendTo(newDiv);
$("<button>").text("Remove").appendTo(newDiv).click(function (e) {
e.preventDefault();
newDiv.remove();
});
});
});
</script>
I am using the following code to fetch the information I want populate within the dropdown select:
function fee_types() {
$this->db->select('fee_type,id');
$records=$this->db->get('fee_types');
$data=array();
$data[''] = 'Select';
foreach ($records->result() as $row)
{
$data[$row->id] = $row->fee_type;
}
return ($data);
}
Here's my Controller:
$this->load->model('dropdown_fee_types');
$data['records']= $this->dropdown_fee_types->fee_types();
$data['main_content']='view_studentfee';
$this->load->view('includes/template',$data);
<script type="text/javascript"> $(function() {
$("input[type=button][value=Add]").click(function(e) {
e.preventDefault();
var newDiv = $("<div>").appendTo("#div");
$("<select>").attr("name", "fee_type[]").attr("class", "required").appendTo(newDiv).append(
<?
foreach($data['records'] as $key=>$value){
print '$("<option>").val("'.$key.'").text("'.$value.'"),';
}
?>
$("<input>").attr("name", "fee_amount[]").attr('class', 'small required').appendTo(newDiv);
$("<button>").text("Remove").appendTo(newDiv).click(function (e) {
e.preventDefault();
newDiv.remove();
});
});
});
Never workt with codeigniter so not sure where the data is exactly put in...but the basics are also explained in the documentation