Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$55
a selector in jquery
In this "box" i need 5 links (4 flags and the word "all")
-french (fr)
-english (en)
-chinese (zh)
-japonese (ja)
-all
In my page, I have several custom fields (magic fields plugin).
For a field "company", label and field are in a div.mf-field-company
For a field "fr_company", label and field are in a div.mf-field-fr_company
For a field "en_company", label and field are in a div.mf-field-en_company
For a field "zh_company", label and field are in a div.mf-field-zh_company
For a field "ja_company", label and field are in a div.mf-field-ja_company
what i want ?
1---
I want this box in the header of the backoffice.
2---
When i click on the french flag, div with a class containing mf-field-en, mf-field-zh or mf-field-ja are hidden.
When i click on the english flag, div with a class containing mf-field-fr, mf-field-zh or mf-field-ja are hidden.
When i click on the chinese flag, div with a class containing mf-field-fr, mf-field-en or mf-field-ja are hidden.
When i click on the japonese flag, div with a class containing mf-field-fr, mf-field-en or mf-field-zh are hidden.
When i click on the japonese flag, div with a class containing mf-field-fr, mf-field-en or mf-field-zh are hidden.
When i click on "all", div with a class containing mf-field-fr, mf-field-en, mf-field-ja or mf-field-zh are visible.
3---
the setting is saved. If i hide div with a class containing mf-field-en, mf-field-zh or mf-field-ja, and if i open another page, the setting is avalaible in this another page.
If you have questions, i am here.
This question has been answered.
Sébastien | French WordpressDesigner | 07/27/12 at 10:44am
Edit
Previous versions of this question:
07/29/12 at 5:49pm
(4) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-
Last edited:
07/27/12
10:51amsabby says:Hi,
This all above stuff can be done by viewing your code, so you probably need to hire some one to do this job,
if you give me your pm access then it would be easier to do.Previous versions of this answer: 07/27/12 at 10:54am
- 07/27/12 11:05am
Sébastien | French WordpressDesigner says:it's not a big job, it's just a function.
To try your function, yu need just to have 4 div in your BO :
div.mf-field-fr_company
div.mf-field-en_foo
div.mf-field-zh_example
div.mf-field-ja_whatelse
- 07/27/12 11:05am
-
Last edited:
07/27/12
11:21amDaniel Yoen says:1. I want this box in the header of the backoffice.
If you mean is Admin Backend, your code should be like this :
function jsfuntion()
{
wp_enqueue_script('javascript', get_template_directory_uri() . '/js/javascript.js');
}
add_action( 'admin_head', 'jsfuntion' );
2. Sample code
<script type="text/javascript">
$(document).ready(function(){
$('div.mf-field-fr_company').click(function(){
$("div.mf-field-en_company").hide();
$("div.mf-field-zh_company").hide();
$("div.mf-field-ja_company").hide();
});
});
</script>
3. I am not undestand :DPrevious versions of this answer: 07/27/12 at 11:21am
- 07/28/12 6:28am
Sébastien | French WordpressDesigner says:Hi Daniel,
thanks for your message :-)
I explain the point 3 :
I want that the setting is saved for the current page and for the others page (like a cookie for example)
Is it clear ?
- 07/28/12 6:28am
-
Last edited:
07/27/12
12:02pmHai Bui says:I can do 2 and 3, but I don't understand where you want to put the box. Where is "the header of the backoffice", exactly?
- 07/28/12 6:29am
Sébastien | French WordpressDesigner says:the box ( = the selector) is at the top of the backend, or like a metabox in the edition of each page and post. As you want.
- 07/29/12 8:13am
Hai Bui says:Please try this: (I used cookies to save the language settings)
<?php
/* Define the language box */
add_action( 'add_meta_boxes', 'mflang_add_custom_box' );
/* Adds the language box to the main column on the Post and Page edit screens */
function mflang_add_custom_box() {
wp_enqueue_script("jquery-cookie");
add_meta_box(
'mflang_id',
'Languages',
'mflang_box',
'post',
'normal',
'high'
);
add_meta_box(
'myplugin_sectionid',
'Languages',
'mflang_box',
'page',
'normal',
'high'
);
}
/* Prints the language box content */
function mflang_box( $post ) {
?>
<div id="mf-lang-bar">
<a id="mf-field-fr" href="#">fr</a>
<a id="mf-field-en" href="#">en</a>
<a id="mf-field-zh" href="#">zh</a>
<a id="mf-field-ja" href="#">ja</a>
<a id="mf-field-all" href="#">all</a>
</div>
<script>
jQuery(document).ready(function($) {
allfields = $('div[class*="mf-field-en"],div[class*="mf-field-fr"],div[class*="mf-field-zh"],div[class*="mf-field-ja"]');
$("#mf-lang-bar a").click(function() {
if ($(this).attr("id") != 'mf-field-all') {
activefields = $('div[class*="' + $(this).attr('id') + '"]');
allfields.not(activefields).hide();
activefields.show();
}
else allfields.show();
setCookie("mf-lang",$(this).attr("id"),365);
return false;
});
savedLang = getCookie("mf-lang");
if (savedLang!="") {
alert(savedLang+"");
$("#"+savedLang).click();
}
});
function setCookie(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) {
return unescape(y);
}
}
}
</script>
<?php
}
?>
You still have to style the links (to make them flags), though. Let me know if there are any problems. - 07/29/12 9:04am
Sébastien | French WordpressDesigner says:hey ! that seems perfect ! that works !
i make some tests now - 07/29/12 9:08am
Sébastien | French WordpressDesigner says:just comment, please, tle line adding an alert
and add please a class "current" in the flag
:-)) thanks - 07/29/12 9:17am
Sébastien | French WordpressDesigner says:is it possible to have only english fields visible as default settings ?
i can increase the fee to 55$
is it ok for you ? - 07/29/12 10:42am
Hai Bui says:Sorry about the alert line, I forgot to delete it. Below is the update code following your instructions. If you can increase the prize to $55, that would be great.
<?php
/* Define the language box */
add_action( 'add_meta_boxes', 'mflang_add_custom_box' );
/* Adds the language box to the main column on the Post and Page edit screens */
function mflang_add_custom_box() {
wp_enqueue_script("jquery-cookie");
add_meta_box(
'mflang_id',
'Languages',
'mflang_box',
'post',
'normal',
'high'
);
add_meta_box(
'mflang_id',
'Languages',
'mflang_box',
'page',
'normal',
'high'
);
}
/* Prints the language box content */
function mflang_box( $post ) {
?>
<div id="mf-lang-bar">
<a id="mf-field-fr" href="#">fr</a>
<a id="mf-field-en" href="#">en</a>
<a id="mf-field-zh" href="#">zh</a>
<a id="mf-field-ja" href="#">ja</a>
<a id="mf-field-all" href="#">all</a>
</div>
<script>
jQuery(document).ready(function($) {
allfields = $('div[class*="mf-field-en"],div[class*="mf-field-fr"],div[class*="mf-field-zh"],div[class*="mf-field-ja"]');
$("#mf-lang-bar a").click(function() {
$("#mf-lang-bar a").removeClass("current");
$(this).addClass("current");
if ($(this).attr("id") != 'mf-field-all') {
activefields = $('div[class*="' + $(this).attr('id') + '"]');
allfields.not(activefields).hide();
activefields.show();
}
else allfields.show();
setCookie("mf-lang",$(this).attr("id"),365);
return false;
});
savedLang = getCookie("mf-lang");
if (!savedLang) savedLang = "mf-field-en";
$("#"+savedLang).click();
});
function setCookie(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) {
return unescape(y);
}
}
}
</script>
<?php
}
?>
- 07/29/12 11:22am
Sébastien | French WordpressDesigner says:that doesn't work, it seems.
I clear my cookies but the setting by default seems to be "all" - 07/29/12 11:26am
Sébastien | French WordpressDesigner says:i have this problem in FF not in chrome
- 07/29/12 11:41am
Hai Bui says:Weird... it works for me in all browsers. Are you sure you cleared the cookies?
- 07/29/12 11:50am
Sébastien | French WordpressDesigner says:it's ok now !
- 07/28/12 6:29am
-
Last edited:
07/28/12
1:50amChristianto says:Hi Sébastien,
I want this box in the header of the backoffice.
Did you mean add this box in backend? on post/page editor page?
3.the setting is saved. If i hide div with a class containing mf-field-en, mf-field-zh or mf-field-ja, and if i open another page, the setting is avalaible in this another page.
It looks like the setting is same from one page/post to another or different..?
I think you need to save it on custom fields if different or on wp_option if same,
you can do it by ajax so once user click the box, the hidden class value saved.
the javascript code look like this
jQuery(document).ready(function($){
// get the id of the post/page
var postID = $('#post_ID').val();
// add html language box
var htmlbox = '<div class="lang-bar"><div class="mf-field-fr_company-box">French</div><div class="mf-field-en_company-box">English</div><div class="mf-field-zh_company-box">Chinese</div><div class="mf-field-ja_company-box">Japanese</div><div class="all-lang-box">All Language</div></div>';
$('#wpwrap').append(htmlbox);
// add click event to the html language box
$('.lang-bar > div').click(function(){
// remove the "-box" since we use the element class plus -box to each box..
var selector_id = $(this).attr('class').replace(/-box$/,'');
// hide all element first
$('div.mf-field-fr_company, div.mf-field-en_company,div.mf-field-zh_company,div.mf-field-ja_company').hide();
// show selected element or if all element selected
if($(this).hasClass('all-lang-box')){
$('div.mf-field-fr_company, div.mf-field-en_company,div.mf-field-zh_company,div.mf-field-ja_company').show();
} else {
$('div.'+selector_id).show();
}
// saved selected element class to post_meta field..
var save_data = {
action: 'lang_field_element',
doing : 'save_value',
post_id : postID,
selector : selector_id
};
$.post(ajaxurl, save_data, function(data){
// saved callback if required..
});
});
// retrieve saved hidden element so we can hide/show it when page load..
var get_data = {
action: 'lang_field_element',
doing : 'get_value',
post_id : postID
};
$.post(ajaxurl, get_data, function(response) {
// show class based on saved meta value
if(response != 'all-lang') {
$('div.mf-field-fr_company, div.mf-field-en_company,div.mf-field-zh_company,div.mf-field-ja_company').hide();
$('.'+response).show();
}
});
});
The wp_ajax function look like this..
add_action('wp_ajax_lang_field_element', 'lang_field_element_function');
function lang_field_element_function() {
$lang_class = 'all-lang';
if($_POST['doing'] == 'get_value'){
$lang_class = get_option( '_hidden_lang_box');
// use custom field if setting is different from one post to another
// $lang_class = get_post_meta($_POST['post_id'], '_hidden_lang_box', true);
} else if($_POST['doing'] == 'save_value'){
update_option( '_hidden_lang_box', $_POST['selector'] );
// use custom field if setting is different from one post to another
// update_post_meta($_POST['post_id'], '_hidden_lang_box', $_POST['selector'] );
}
echo $lang_class;
die();
}
you can style/positoned the language box (var htmlbox) by css like you want
.lang-bar{
position: absolute;
/* style goes here */
}
.lang-bar>div{
/* style goes here */
}
hope this help.. :DPrevious versions of this answer: 07/29/12 at 3:45am | 07/29/12 at 3:45am
- 07/28/12 6:35am
Sébastien | French WordpressDesigner says:Hi Christianto,
thanks for this answer :-)
yes, this selector, this box, could be on post/page editor page.
"The setting is saved" -> it's like a cookie for example.
example : i have two posts : post1 and post2
i am in the editor of post1, i click on french flag ->japanese div, english div, chinese div are hidden.
if i open the editor of post 2, this fields are hidden too.
Could you post the complete code please ?
Thanks - 07/29/12 3:43am
Christianto says:Please download the zip, and put the css/js folder on your theme directory..
and put the code on lang_php.php on your functions.php
You can style/adding flag on the button by editing the css file if you want..
Let me know if you have a problem..
- 07/29/12 3:55am
Christianto says:It looks like the attachment not appear.. :)
please download it on dropbox here - 07/29/12 5:51am
Sébastien | French WordpressDesigner says:Hi Christianto
i tested your code :-)
1-no box appears. Did you added the code to create the box ?
2-in your code it seems that you target div with a class with this name : mf-field-[LANG INITIALS]_company
but you must target all divs having a class with this structure
mf-field-[LANG INITIALS]_[NAME OF THE FIELD] - 07/29/12 8:00am
Christianto says:Yes, Of course
I add the box, please check the screenshot..
http://postimage.org/image/ib1nsyg4v
Could it be conflicted since I add it using jQuery? is it the site online, let me check it if it online..
For the class, sorry I thought only one field that has the class that are hidden..
Replace the js code on lang_script.js to
jQuery(document).ready(function($){
// get the id of the post/page
var postID = $('#post_ID').val();
// add html language box
var htmlbox = '<div id="lang-bar" class="clearfix"><div class="lang-bar"><div id="mf-field-fr-box">French</div><div id="mf-field-en-box">English</div><div id="mf-field-zh-box">Chinese</div><div id="mf-field-ja-box">Japanese</div><div id="all-lang-box">All Language</div></div></div>';
$('#wpcontent').prepend(htmlbox);
// add click event to the html language box
$('.lang-bar > div').click(function(){
// remove/add class active
$('.lang-bar>div').removeClass('active');
$(this).addClass('active');
// remove the "-box" since we use the element class plus -box to each box..
var selector_id = $(this).attr('id').replace(/-box$/,'');
// hide all element first
$('div[class*="mf-field-fr_"], div[class*="mf-field-en_"], div[class*="mf-field-zh_"], div[class*="mf-field-ja_"]').hide();
//console.log('hide');
// show selected element or if all element selected
if(selector_id == 'all-lang'){
$('div[class*="mf-field-fr_"], div[class*="mf-field-en_"], div[class*="mf-field-zh_"], div[class*="mf-field-ja_"]').show();
//console.log('all');
} else {
$('div.'+selector_id).show();
$('div[class*="'+selector_id+'_"]').show();
//console.log(selector_id);
}
// saved selected element class to post_meta field..
var save_data = {
action: 'lang_field_element',
doing : 'save_value',
post_id : postID,
selector : selector_id
};
$.post(ajaxurl, save_data, function(data){
// saved callback if required..
});
});
// retrieve saved hidden element so we can hide/show it when page load..
var get_data = {
action: 'lang_field_element',
doing : 'get_value',
post_id : postID
};
$.post(ajaxurl, get_data, function(response) {
// show class based on saved meta value
if(response != 'all-lang') {
$('div[class*="mf-field-fr_"], div[class*="mf-field-en_"], div[class*="mf-field-zh_"], div[class*="mf-field-ja_"]').hide();
$('div[class*="'+response+'_"]').show();
$('#'+response+'-box').addClass('active');
} else {
$('div[class*="mf-field-fr_"], div[class*="mf-field-en_"], div[class*="mf-field-zh_"], div[class*="mf-field-ja_"]').show();
$('#'+response+'-box').addClass('active');
}
});
});
- 07/29/12 8:43am
Sébastien | French WordpressDesigner says:ok i see the buttons. But they seems not be clicable
- 07/29/12 9:03am
Christianto says:Any error on console log?
- 07/29/12 9:22am
Sébastien | French WordpressDesigner says:no i don't think
i test the code of Hai Bui now
- 07/28/12 6:35am
This question has expired.
Gabriel Reguly, Sébastien | French WordpressDesigner, Arnav Joy, Manoj Raj, Martin Pham voted on this question.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.