I'm looking to replace a select dropdown with images.
My current code for the drop down is
<div class="app_services_dropdown_select">
<select name="app_select_services" class="app_select_services">
<option value="1" selected="selected">Class IV MOT (Up to 3,000KG)</option>
<option value="2">Class VII MOT (3,000KG - 3,500KG)</option></select>
<input type="button" class="app_services_button" value="Show available times">
</div>
Which is generated by this code:
$s .= '<div class="app_services">';
$s .= '<div class="app_services_dropdown">';
$s .= '<div class="app_services_dropdown_title">';
$s .= $select;
$s .= '</div>';
$s .= '<div class="app_services_dropdown_select">';
$s .= '<select name="app_select_services" class="app_select_services">';
if ( $services ) {
foreach ( $services as $service ) {
$service_description = '';
// Check if this is the first service, so it would be displayed by default
if ( $service->ID == $appointments->service ) {
$d = '';
$sel = ' selected="selected"';
}
else {
$d = ' style="display:none"';
$sel = '';
}
// Add options
$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
}
}
$s .= '</select>';
$s .= '<input type="button" class="app_services_button" value="'.$show.'">';
$s .= '</div>';
$s .= '</div>';
And I really want an image of a car as value 1 and a van as value 2, plus I really want it to submit on click rather than having the button.
Is it possible to replace the dropdown with images instead or would I need to use a radio button, then style it using an image?
You can see my current dropdown in use here
There are various plugins are available which help you to achieve your target. I have googled and found few you can try them
ddslick
Ms Dropdown
Have a link that trigger the apparition of a div with Javascript.
This div will contains the two links images, with the links you want the user to go.
This div also need to be placed relatively with the initial link that trigger it.
If you don't want to program the Dropdown by yourself, you can use libraries like bootstrap or jquery-ui
Related
I am trying to achieve as shown below in the image.
I want to create a image carousel slider in which I have 4 items having 4 slides each.
This images act like a radio button selection I am getting the list from the database, so I want to highlight which radio button is selected by highlighting the slide which comes as selected.
So whenever the carousel loads it should highlight the slide which is selected as radio input
Simple Carousel
Here is the link of it : https://bootsnipp.com/snippets/featured/simple-carousel
Here is my Code :
<div class="carousel-inner">
<?php
$result = '';
foreach ($template_data as $key => $value) {
if ($key == 0) {
$result .= '<div class="item active">';
}
elseif ($key !=0 && ($key % 4 == 0)) {
//to avoid first empty "active"
$result .= "</div>";
$result .= '<div class="item">';
}
$result .= '<div class="col-md-3"><img src="http://placehold.it/250x250" alt="#" title="#"></div>';
}
$result .= '</div>';
echo $result;
?>
</div>
Your basic premise looks good to me, though an example on jsFiddle or the like highlighting the problem would be much better. For future questions, consider that.
Meanwhile, I might consider reorganizing your code such that there is never ambiguity of when you write the opening and closing element tags. If you open a tag, close it. Always:
<?php
$result = '';
foreach ($template_data as $key => $value) {
$cssClass = 'item';
if ( /* Your test to determine 'active'; you currently have $key == 0 */ ) {
$cssClass .= ' active';
}
$result .= "<div class='$cssClass'><div class='col-md-3'><a href='#'><img src='http://placehold.it/250x250' alt='#' title='#'></a></div></div>";
}
echo $result;
?>
The only if-check necessary should be to determine if the item is active. If so, modify it accordingly. Otherwise, the loop is the same for every item. Much easier to write, read, and reason about later.
Is it possible to have a php array sorted by clicking on a button?(Alphabetically or by year)
I am using fullpage.js and Columnizer jQuery plugin. Unfortunately, the problem is that I have to make a new table for each new slide. (Maybe someone knows a better solution?)
Or is it more useful javascript / jquery to use?
here is the Code:
// get table data from Plugin TablePress
$table = TablePress::$model_table->load( $atts['table-id'], true, true );
//only get the important data
$data = $table['data'];
$output = '<div id="tablecontest-slider">';
$output .= '<div class="section" id="section0">';
array_shift($data);
$counter = 1;
foreach ($data as $value) {
if ($counter == 1) {
$output .= '<div class="slide">';
$output .= '<div class="columnize">';
$output .= '<table>';
}
$output .= '<tr>';
$output .= '<td>' . $value[0] . '</td>';
$output .= '<td>' . $value[1] . '</td>';
$output .= '<td>' . $value[2] . '</td>';
$output .= '</tr>';
$counter++;
if ($counter == 21) {
$counter = 1;
$output .= '</table>';
$output .= '</div>';
$output .= '</div>';
}
}
$output .= '</div>';
$output .= '</div>';
return $output;
I dont know how to sort the array by click on a button..
Thank you for ideas and suggestions
No, you can't. PHP is running on your server and delivers the page. So there is no PHP-Array anymore once you render the site in your browser.
If you would get your data via an AJAX-call you COULD implement sorting and filtering on the server.
You can't directly sort anything on PHP from JS. BUT you can send an Ajax query on the button click, and respond with the PHP array sorted.
I have this code
<select id="menu" name="department">
<?php
//Get the departments and create the select menu dynamically
include 'connect.php';
$query = "SELECT* FROM department;";
$result = mysqli_query($link,$query);
$html = "";
if($result){
while ($obj = mysqli_fetch_object($result)) {
$html.='<option value="'.$obj->dept_name.'">'.$obj->dept_name.'</option>';
}
} else {$html.='<p style="color:red;text-align:center">Θεμελιώδες λάθος κατά την ανάκτηση των τμημάτων</p>';}
print $html;
mysqli_close($link);
?>
</select>
<?php
if (isset($_POST['menu']))
print '<script type="text/javascript">document.getElementById("menu").value = "'.$_POST['menu'].'";</script>';
?>
which is nested in a form tag that creates dynamically a select menu and I want to keep the selected value after the submission. It doesn't work. Any ideas why?
Where you are creating options dynamically add code to retain post value for select,something like,
$html .= '<option value="'.$obj->dept_name.'"';
if(isset($_POST['department']) && $_POST['department'] == $obj->dept_name){
$html .= ' selected ';
}
$html .= '>'.$obj->dept_name.'</option>';
So i have a function that i have build for some kind of repeatable text boxes that i can add and remove with click on a button.
But my problem is that now when i want to have 2 separated repeatable boxes on same page i can't separate click on button event.
This is output i use for repeatable options box.
$output .= '<div class="option">';
$output .= '<div class="vf-sortable-holder">';
$output .= '<div class="vf-sortable vf-repeat-text empty-sortable hidden"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>';
$output .= '<input id="' . esc_attr( $value['id'] ) . '" class="vf-input" data-rel="' . esc_attr( $option_name . '[' . $value['id'] . ']' ) . '" type="text" value="' . esc_attr( $value['std'] ) . '" />';
$output .= '<a class="vf-delete-sortable button" href="#">'. __('Remove') .'</a>';
$output .= '</div>';
$output .= '</div>';
$output .= '<a class="vf-new-sortable button" href="#">Add new</a>';
$output .= '</div>';
And this is js function that i use to add a new text box
//Add new field for repeatable option
$('.vf-new-sortable').click( function(event) {
//Get parent element
var loop = $(this).closest('.option');
// Count all repeat group div's
var count = loop.find('.vf-sortable').not('.empty-sortable').length;
//Add new slide
var new_slide = loop.find('.empty-sortable').clone(true).removeClass('empty-sortable hidden').insertBefore('.empty-sortable');
var input = new_slide.find('input');
var input_name = input.attr('data-rel');
input.attr('name', input_name + '[' + ( count ) + ']');
return false;
});
What this should do is when page is loaded to have one vf-sortable div hidden and when i click on button it should clone it and make another vf-sortable field.
And this works. But problem is when i output 2 or more option div's with sortable boxes on button click it add new vf-sortable box on every option. how do i make event only to work on specific option div where add button is clicked?
you need to change your .insertBefore() to insert before the actual loop.find('.empty-sortable') like this
$('.vf-new-sortable').click( function(event) {
//Get parent element
var loop = $(this).closest('.option');
// Count all repeat group div's
var count = loop.find('.vf-sortable').not('.empty-sortable').length;
//Add new slide
var emptysortable=loop.find('.empty-sortable');//get the element to clone
var new_slide = emptysortable.clone(true).
removeClass('empty-sortable hidden').
insertBefore(emptysortable);//insert only in this .option
var input = new_slide.find('input');
var input_name = input.attr('data-rel');
input.attr('name', input_name + '[' + ( count ) + ']');
return false;
});
http://jsfiddle.net/BCRt3/
"how do i make event only to work on specific option div where add button is clicked?"
Perhaps something like adding an id to each option and then tying the button click to that specific option id.
I'm generating a custom field on the Wordpress admin panel. I want to add 2 buttons:
1. Add another
2. Remove field
The add button should generate the same field. I need help coding the javascript that generates the fields.
Here is my code:
$html = '';
$html .= '<div class="pyre_metabox_field">';
$html .= '<label for="pyre_' . $id . '">';
$html .= $label;
$html .= '</label>';
$html .= '<div class="field">';
$html .= '<input type="text" id="pyre_' . $id . '" name="pyre_' . $id . '" value="' . get_post_meta($post->ID, 'pyre_' . $id, true) . '" />';
if($desc) {
$html .= '<p>' . $desc . '</p>';
}
$html .= '<p style="margin-bottom:15px; padding-top:5px;clear:both;">Add Remove</p>';
$html .= '</div>';
$html .= '</div>';
Have you tried : Advanced Custom Fields ?
This plugin is really simple to use, and I'm pretty sure it can do what you're trying to do. It may save you a lot of work :)