I'm trying to create an ACF that has image, title, excerpt, and content.
I'd like to have it function like this page http://ashmitar.sg-host.com/our-team/
I'd like to pull data from ACF so my client can update. The text excerpt should be 50 words and the click the 'read more'(hide show less) and show full content (appended to excerpt)and show a less button to close back to just the excerpt with a link 'show less'(hide show more).
I can do it with javascript but it's not something that can be updated easily because the button ID has to be different for each team member, etc.
Using ACF, I'd have:
Image field
Title field
excerpt field
'show more' link to open all content
full content field appended to excerpt
'show less' link to close content
excerpt field - 'show less' hidden
Anybody ever try doing anything like this?
After lots of research, I came up with this solution. Hope it can help others:
<h2 class="team-member-name"><?php the_field('team_member_name'); ?> </h2>
<div class="post">
<div class="excerpt"><?php echo wp_trim_words( get_field('bio_excerpt'), 50 ); ?></div>
<div class="whole-post"><?php echo wp_trim_words( get_field('bio_full'), 250 ); ?></div>
Read More
</div>
Here's the jQuery
$('a.read').click(function () {
$(this).siblings('.whole-post').is(':visible') ? $(this).html('Read More') : $(this).html('Read Less');
$(this).siblings('.excerpt').slideToggle(200);
$(this).siblings('.whole-post').slideToggle(200);
});
Related
I am using a protractor to get the text in the second Div within #myDiv. Can someone please advise how can I get a text from the second Div (complete Text) which is 'This is a sample text'. I tried getting text in #myDiv but it adds spaces before the phrase. I want to exactly get the text from the 2nd child element of the after #myDiv.
<div id='myDiv'>
<span> (this is second div)
<a name="aTag"></a>
<madcap:concept term="DoSomething">
This
<span class="myClass">
is a
</span>
sample text
</madcap:concept></h1>
</span>
</div>
please try with following-sibling xpath as below :
element(by.xpath("//*[following-sibling::div[#id='myDiv']]"))
Hope this works!
let text = await element(by.xpath('//div[#id="myDiv"]//span[1]')).getText();
console.log(text)
worked fine for me
I added your html in component html and checked it.
I want to change button text which is generated by "Send to Messenger" plugin using javascript facebook SDK.
Fortunately, you can change the button texts! Unfortunately, you can't use arbitrary text. You can only choose from the pre-defined button texts by facebook.
Here's the list of button texts that you can use
GET_THIS_IN_MESSENGER
RECEIVE_THIS_IN_MESSENGER
SEND_THIS_TO_ME
GET_CUSTOMER_ASSISTANCE
GET_CUSTOMER_SERVICE
GET_SUPPORT
LET_US_CHAT
SEND_ME_MESSAGES
ALERT_ME_IN_MESSENGER
SEND_ME_UPDATES
MESSAGE_ME
LET_ME_KNOW
KEEP_ME_UPDATED
TELL_ME_MORE
SUBSCRIBE_IN_MESSENGER
SUBSCRIBE_TO_UPDATES
GET_MESSAGES
SUBSCRIBE
GET_STARTED_IN_MESSENGER
LEARN_MORE_IN_MESSENGER
GET_STARTED
You can change the text by setting cta_text attribute to one of the preceding
options. In this example, I used KEEP_ME_UPDATED option:
<div class="fb-send-to-messenger"
cta_text="KEEP_ME_UPDATED"
messenger_app_id="<APP_ID>"
page_id="PAGE_ID"
data-ref="<PASS_THROUGH_PARAM>"
color="<blue | white>"
size="<standard | large | xlarge>">
</div>
The easiest way I know to do it is by placing the send-to-messenger div inside another div & formatting the parent div & a sibling div.
The trick is to pass the click event through an element.
This requires position first div as absolute.
Here's my code
<div style='height: 32px;width: 148px;display: inline-block;overflow: hidden;color: #fff;'>
<div style='background-color: #5ac7ec;pointer-events:none;position:absolute;width:148px;z-index:2;line-height:36px;>
CONNECT
</div>
<div class="fb-send-to-messenger"
messenger_app_id="123456789"
page_id="987654321"
data-ref="some_data"
color="blue"
size="large">
</div>
You can use the cta_text option but you cannot write anything there, only couple of predefined texts.
Read more here
I'm having a hard time trying to connect SUI modal with SilverStripe to generate them dynamically.
I want to achieve something like this:
I have button (attach events) to trigger modal with some content. I wanted to loop that elements (GridField) to generate everything dynamically. But the only thing I can achieve is multiple modals with the same "trigger class" and it doesn't matter which button I have clicked (first, last or whatever). I only have one modal (the last in hierarchy). Without SUI the solution is easy - put "this" to fetch the closest element and I can have as many different modals as I want, but SUI seems to complicate things.
I think the best solution will be to generate a class/id with SilverStripe and pass it to the JavaScript to use with modal or use one class for every modal and to "somehow inform" that this button triggers this modal.
Basically I need one code snippet to handle many modals, not many snippets to handle many modals. I hope it's clear enough what the the problem is.
Here is my code:
HTML/SS
(without specific SilverStripe tags)
<% loop SomeName %>
<div class="job-offers">
<a class="ui right floated button job-application">Click here</a>
</div>
<div class="ui basic modal job-application">
<div class="job-application-sheet">
(...)
<div class="job-application-sheet-content">
<div class="ui grid">
(...)
<div class="ui center aligned container job-application-action">
<p>Lorem ipsum</p>
<button class="ui primary button">Click here</button>
</div>
</div>
</div>
</div>
</div>
<% end_loop %>
JavaScript
$('.ui.basic.modal.job-application')
.modal({
autofocus : false,
observeChanges: true
})
.modal('attach events', '.job-application', 'show');
As you can see "job-application" class is a trigger for modal, so is this possible to change it to "(this)" so I don't have to write "specific" class for each button/modal. Or maybe there is a different/easier solution?
first i generated a data-type attribute for each of my elements that are going to display a modal when they are clicked, and in send as a local the same index to the modal this way:
<% #relateds_array.each.with_index do |related,i| %>
<div class="card custom" data-id="<%=i%>">
<%= render partial: 'my_modal', locals: {index: i} %>
</div>
<% end %>
the i put the modal in the partial that i called my_modal for this example and used the index that i sent as a local to create an unique id for each my modals, like this:
<div class="ui modal" id="modal-<%=index%>">
<p>blabla things inside this modal.</p>
</div>
and then with javascript, simply get the data-id of the element clicked and select the element that contain the id for that data-id, like this:
$('.element_that_you_want_to_open_moda_on_click').click(function(event){
var card_clicked = $(this).attr('data-id');
$('#modal-' + card_clicked).modal('show');
});
Hope this was useful for you.
Note that i used Ruby on Rails for this example, but the behaviour that you should use should be something similar to this, no matter what framework you use.
Answer based on Sebastian's solution. I did some minor tweaks to meet my needs, like I've used ID variable to automatically get DataObject ID which is generated dynamically.
Basically to dynamically add Semantic UI (SUI) modal in SilverStripe, first you should add "data-id" in a modal trigger, for example:
Template.ss
<a class="ui button custom-trigger" data-id="my-item-$ID">Click here</a>
then inside modal container add an "id" tag, for example:
<div id="modal-my-item-$ID" class="ui basic modal">
(...)
</div>
Finally in JavaScript file:
$('.custom-trigger').click(function(event){
var triggerItem = $(this).attr('data-id');
$('#modal-' + triggerItem).modal('show');
});
I meet problem with SUI autofocus, so after a modal opens, screen went to the bottom and button placed there was highlighted.
I tweaked original snippet adding SUI settings:
$('.custom-trigger').click(function(event){
var triggerItem = $(this).attr('data-id');
$('.ui.modal')
.modal({
autofocus: false,
observeChanges: true
})
$('#modal-' + triggerItem).modal('show');
});
If someone wants to write "data-id trigger" manually using fields in CMS, then change $ID to $SomeField variable. Then normally add that field in .php file and in Page Controller add something like this:
public function init() {
parent::init();
Requirements::javascriptTemplate($this->ThemeDir().'/js/script.js', array(
'SomeField' => $this->SomeField
));
}
Hope this helps someone.
I have a problem with pagination.
In my website , I have a function productList which generates a paginated list of products.
The code for the paginate function is shown below:
$this->paginate = array('conditions'=>array($otherconditions,$statuscondition,$active_condition,$catcondition),'order' => $order, 'limit' => 10);
In the view file,
the paginator helper is used as follows:
<div class="paginator">
<span class="info">
<?php echo $this->Paginator->counter(array('format' => __('Page <strong>{:page}</strong> of <strong>{:pages}</strong>')), array('escape'=>false));
?>
</span>
<ul>
<?php echo $this->Paginator->numbers(array('separator' => '', 'tag'=>'li'));?>
</ul>
</div>
Suppose, there are 150 products, so with a limit of 10, there will be 15 pages.
The problem is that the page numbers are not displayed in the end pages like page 15 i.e when I click on the page number 15, the products are displayed but the paginator counter and paginator number links are not displayed.
I have looked all over the net for a solution but could not find one. Please guide me.
PS: the paginate variable depends on my parameters like the category selected , and other conditions.
I dont think its a problem with the paginate syntax because the pagination works for small number of pages like 2 or 3.
The problem is with paginator helper I think.
Thanks in advance.
I have found the following line when I inspected the HTML. the page number and counter where commented automatically inside the following comments.
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
< ...</p></div>
then after this I have the html for the page counter , page number links and also the script files. what is happening. I looked for its meaning and I found that mso 9 is microsoft office 9 or something. Which is not very reasonable. please guid me.
I solved this by putting a comment before the closing p tag and div tag.
So the comment tag <!--[if gte mso 9] > closes before </p></div>.
I also used the php function strip_tags to strip the body of text of all tags.
This is a duct tape method. But the problem I found lies in the mce editor.When a user copy pastes a paragraph from a word document to a mce editor thats running in firefox browser, the above mentioned conditional comment is added to the text. So, when displaying the user text, the conditional comment comments out rest of the html after the text.
IT is better to work with the mce editor callback to remove the conditional comment which i will be working on now.
Hope this helps someone...
This has driven me really bananas. It's so simple and easy and yet I can't figure out what's wrong with it.
I want to get my checkbox value populated in my controller (for testing purposes).
Here is my form.
<a href='#' name='submitForm'>submit the form</a>
//I have jquery attached to this tag and will submit the form when user clicks it
echo form_open('test/show');
echo form_checkbox('checkbox[]','value1');
echo form_checkbox('checkbox[]','value2');
echo form_checkbox('checkbox[]','value3');
echo form_checkbox('checkbox[]','value4');
echo "<input type='text' name='text1' value='ddd'>";
echo form_close();
//My controller test
public function show(){
$data1=$this->input->post('text1');
//I can get text1 value from input box
$data2=$this->input->post('checkbox');
//it keeps giving me undefined index 'checkbox'
$data3=$_POST['checkbox'];
//same error message
//WTH is going on here!!!!!
}
Please help. This thing drives me nuts! Thanks.
UPDATE:
Thanks for the help. To be more precisely, my submit button is a <a> tag and outside of form tag. It appear that I have to include <a> tag inside my form tag to make them works. Is that true?
A checkbox will not submit any data if it is unchecked as they're not considered successful (as per the w3c specification here)
If you actually tick the box and submit, it'll work - in fact it does, I've just tested it.
You need to wrap calls to $_POST in the isset() function.
if( isset( $_POST['checkbox'] ) ) {}
Calling $this->input->post('checkbox') shouldn't give you an undefined index error as the method deals with this eventuality. the Input::post() method returns false or the value of the checkbox.
Edit --
In response to your amendment to your question, you must use an element of type input with the type attribute set to submit in order to submit your form data without the use of Javascript etc. This button must be INSIDE the <form></form> which you are intending to submit.
<input type="submit" value="Submit">
The type="submit" causes the browser to send the data as submit event occurs. If you wish to use another element insider or outside of the form to do this you need to use Javascript. This however can be disabled on a per browser/user basis and isn't reliable as a result.
// Standard Javascript
<form name="myform"...
<a onclick="javascript:document.myform.submit();" href="javascript:void(0)">Submit</a>
// jQuery
$('#my-a-tag-submit-button').live( 'click', function() {
$('#my-form').submit();
}