I am trying to add a couple of buttons using a [button] shortcode. What I want to achieve is that the first button BUTTON-01 shows to all users, while the other button BUTTON-02 only shows to "author" user role.
Here is my code:
function shortcode_button() {
global $current_user;
get_currentuserinfo();
// Show this button to ALL
return '<a class="button" href="http://example.com/01">FOR ALL</a>';
// Show button to AUTHORS ONLY
if ( user_can( $current_user, "author" ) ) {
return '<a class="button" href="http://example.com/02">FOR AUTHORS ONLY</a>';
}
}
add_shortcode( 'button', 'shortcode_button' );
When logged in as AUTHOR, I can see the first button, but the second just doesn't show up.
Am I missing something? Should there be endif; statement maybe?
Related
I have a header in a react app that is using semantic-ui react. I want to route my login button to a backend express route (/auth/login). I tried the composition method by passing in {Link} from react-router-dom, but this is not routing to the express route, rather looking at the React routing.. in hindsight, this is of course how it should work..
This leaves me with the question though, how can I pass in a link to the backend api's for this button component? If I pass in 'a' and a path, this renders as a hyperlink but the path isn't passed in.
What is the prop I need to pass in to make this work as I can't see one that makes sense in the semantic-ui docs on buttons.. Or am I doing this the completely wrong way (this has happened before surprisingly)?
My login component is below..
import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';
export default class LoginButtonNav extends Component {
render() {
return (
<Button primary animated="vertical" as='a' path='/auth/login'>
<Button.Content visible>Login</Button.Content>
<Button.Content hidden>
<Icon name="cloud" />
</Button.Content>
</Button>
);
}
}
Okay, rubber ducked this one myself, passing in a value for href solved it!
Correct component:
import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';
export default class LoginButtonNav extends Component {
render() {
return (
<Button primary animated="vertical" as='a' href='/auth/login'>
<Button.Content visible>Login</Button.Content>
<Button.Content hidden>
<Icon name="cloud" />
</Button.Content>
</Button>
);
}
}
Still interested if there's a better way to do this..
I want to share my mistake and thank OP for posting the answer. Below is what I did and you should NOT do it like this:
<Button>
<Link to="/yourURL/">Nav Button</Link>
</Button>
This works technically but creates a unique problem where user MUST click on the text directly ("Nav Button" in this case) because the button itself is not rendered as a hyperlink. So if you click within the button but not the text itself, it won't navigate. It would even create an odd behavior where if you have another button next to it. Say, you have a "Submit" and a "Cancel" button where the Cancel button navigates user to the previous URL, if you click within the Cancel button but not the "Cancel" text, it would trigger the Submit button action instead. Hope this helps someone learning React!
I have a "Subscribe" modal form that opens when the users clicks on "Inscription"
and I wish that the data typed in it by the user disappears or the modal 'resets' the value when it's closed.
I tried multiple options but nothing worked.
Here is a link to a fiddle:
http://jsfiddle.net/0tekp47g/3/
solution:
http://jsfiddle.net/0tekp47g/29/
This should do the trick:
$('.modal').on('hidden.bs.modal', function () {
$(".modal input").val("");
$('.modal select').val("");
});
Try it on JSFiddle.
I am opening a Modal in ionic2, to search the values from a list. After search, I want to get the selected values back in my parent screen.
searchRooms(){
let modal = this.modalCtrl.create(RoomSearch);
modal.present();
}
This opens my search Modal and there I have list of available rooms. If user click on any room then I want to return back the value to parent page. I am not sure how to do this.
From documentation I feel NavConroller.pop can be used to pass back the values but I don't know how to use that.
Thanks in advance.
You can use onDidDismiss method explained in the Modal Controller.
In the page that opens your modal you can do :
let modal = this.modalCtrl.create(RoomSearch);
modal.onDidDismiss(data => {
// Do things with data coming from modal, for instance :
console.log(data);
});
modal.present();
And this in your modal controller, to close the modal :
this.viewCtrl.dismiss({"foo" : "bar"});
I am currently working within SharePoint 2013 and was wondering if there was a way to create a button on a home page that when pressed, opens a list form in a modal window? (or in a non modal window).
I understand the method of using "Embed code" to code a button; however, it doesn't seem to allow me to link it to a list form, or edit what the button actually does.
Example:
1. An employee lands on the home page and wants to initiate a Purchase Request through the company.
2. The employee clicks on a button labeled "Click here to submit a Purchase Request".
3. After clicking, the Purchase Request form opens from the Purchase Request list (pre-created).
Thank you for your assistance!
You can use something like this in a CEWP to redirect to the new item form:
<button onclick="formRedirect(); return false;">New Form</button>
<script>
function formRedirect() {
window.location = "/test/Lists/LinkList/NewForm.aspx"
}
</script>
To display it in Modal form you will need to use the NewItem2 JS function:
<button onclick="NewItem2(event, "https://Your.SP.Site/_layouts/15/listform.aspx?PageType=8&ListId=%7B59E6FE0C%2D02C6%2D4B00%2D9B6A%2D87116A2DF594%7D&RootFolder="); return false;">New Form</button>
To get this to work you will need the list web part on the page where the button is located, though it can be hidden from view by setting th chrome to none and minimizing it. You can copy the function from the new item button in the list you wish to display, it is stored as an 'OnClick' property.
I know I am late to this but I just figured how to do this for the "Upload Document" for a document library. It took me a while but I stumbled upon it through trial and error using F12. I will provide both script for a "LIST and LIBRARY" form.
FOR A LIST:
<a href="#" onclick="openDialog('YourSiteURL/Lists/YourListName/NewForm.aspx');">
<img src="YourSiteImageURL" alt="NameofYourImage">
</a>
<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'NameofYourForm', /* Enter the name you want for your form */
allowMaximize: false,
showClose: true,
width: 1225, /* Modify for your needs */
height: 800 /* Modify for your needs */
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
FOR A LIBRARY:
This is for use with a button:
<a class="ms-addnew" id="idHomePageNewDocument" onclick='NewItem2(event, "YourSiteURL/_layouts/15/Upload.aspx?List={YourListID}&RootFolder="); return false;' href="YourSiteURL/_layouts/15/Upload.aspx?List={SameListID}&RootFolder=" target="_self" data-viewctr="702">
<img src="URLforYourButtonImage" alt="NameofYourButton">
</a>
This is for use with text:
<a class="ms-addnew" id="idHomePageNewDocument" onclick='NewItem2(event, "YourSiteURL/_layouts/15/Upload.aspx?List={YourListID}&RootFolder="); return false;' href="YourSiteURL/_layouts/15/Upload.aspx?List={SameListID}&RootFolder=" target="_self" data-viewctr="702">Add document
</a>
I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.