I have a Jssor list slider and I would like to make the thumbnail text editable in place with X-Editable:
example
Both functions work on the page together with separate elements, but I cannot find a way of causing the link text to become editable.
There are no errors, the text element simply does not show the pop-up editable box.
I presume this is because the class="t" declaration informs Jssor to control the thumb div interfering with X-editable's attempt to do the same.
X-Editable requires that the editable text be wrapped in an element:
superuser
But this seems to be interfered with by Jssor.
Can anyone point me in the right direction?
------------------UPDATED in response to answer------------------
Thanks for taking the time to help me out :)
I was unable to change the default behaviour from on click to onmousedown in the x-editable library, but I did find a work around to allow activation of the editable element with the click of another element external to the slider container.
In the body:
$(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('#doit').click(function(e){
e.stopPropagation();
$('#username').editable({
send: 'never',
title: 'Enter text',
placement: 'right',
toggle: 'manual',
display: function(value) {
$('#username').text(value);
}
});
$('#username').editable('toggle');
});
});
...and the elements:
<span id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</span>
<a id="doit" href="#">testlink</a>
If the span is outside of the slider container clicking the testlink functions as expected and opens the pop-up editor input field, but once it is placed inside the slider:
<div class="t">
<span id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</span>
</div>
...there is no response.
I looked for the function you highlighted and think I found the one you meant, 'ContentClickEventHandler', but clearing this function did not solve the problem.
Thanks again for you help, and for releasing this wonderful product to the likes of me :D
Please try the following 3 approaches.
I guess X-Editable detects click event to make an element editable. If you can revise the library, please change the event from click to mousedown.
Not sure it would work or not, please have a good try.
Add nodrag="true" for the link element.
Open jssor.slider.js, replace
function SlidesClickEventHandler(event) {
if (_LastDragSucceded) {
$Jssor$.$StopEvent(event);
var checkElement = $Jssor$.$EventSrc(event);
while (checkElement && _SlidesContainer !== checkElement) {
if (checkElement.tagName == "A") {
$Jssor$.$CancelEvent(event);
}
try {
checkElement = checkElement.parentNode;
} catch (e) {
// Firefox sometimes fires events for XUL elements, which throws
// a "permission denied" error. so this is not a child.
break;
}
}
}
}
with
function SlidesClickEventHandler(event) {
}
Related
I wonder if you could help me with an issue.
I am building a content template for an events page, that pulls data through using Advanced Custom Fields.
I have a field in the admin side which will be filled out when adding a new event. The field is called show_info with the ID #acf-editor-46.
On some events however this will be left blank, but the DIV that wraps around the content on the frontend will still show on the template, the DIV has the class .show-info-wrapper.
I would like it so when the show_info field is blank, the DIV .show-info-wrapper does not display on the front end.
I have made some progress from browsing around, you can see the code I have so far here:
HTML (Just a quick testing set up):
<textarea id="acf-editor-46" class="wp-editor-area" aria-hidden="true">1111</textarea>
<div class="show-info-wrapper">CONTENT</div>
JavaScript + jQuery:
$(document).ready(function() {
if($('#acf-editor-46').val() == '' ){$('.show-info-wrapper').hide();}
$('#acf-editor-46').on('change' , function() {
if( this.value != ''){
$('.show-info-wrapper').show();
}
else{
$('.show-info-wrapper').hide();
}
});
});
It works on JSFiddle (http://jsfiddle.net/ha2nedfb/), however, it seems that on my WordPress site as the input and the DIV are not on the same DOM, it does not work.
Could anyone help me with this?
Thank you!
Just change the event of #acf-editor-46 to input.
$(document).ready(function() {
if($('#acf-editor-46').val() == '' ){$('.show-info-wrapper').hide();}
$('#acf-editor-46').on('input' , function() { // Just change event to input
if( this.value != ''){
$('.show-info-wrapper').show();
}
else{
$('.show-info-wrapper').hide();
}
});
});
if (!$("#acf-editor-46").val()) {
// textarea is empty
}
try this to check textarea is empty or not
You can delegate event if textarea is rendered later.
$(document).on('change', '#acf-editor-46', callback);
Links:
https://api.jquery.com/on/
https://learn.jquery.com/events/event-delegation/
Assuming the <textarea> and <div> are really siblings in this very order (your text contradicts the example) & if you're OK with adding a placeholder to the textarea & you only need new-ish browsers, there is a pure CSS solution:
<textarea ... placeholder=" "> </textarea>
.show-info-wrapper {
display: block;
}
.wp-editor-area:placeholder-shown + .show-info-wrapper {
display: none;
}
Here's a pen.
Need advice on this weird bug. I can't really explain it well, but here's an image.
What is supposed to happen is that when the calendar is shown, those stripes denote that the user is unable to add any events unless they fill in the Location and Practitioner fields first.
FullCalendar is able to get the events but I have to resize the page to a smaller width for the events to show up correctly. After you resize the calendar works fine.
The cause of this seems to be because the parent div is hidden initially and after a button is pressed the calendar is shown.
The code looks like this:
HTML:
<button v-on:click="renderCalendar('new')">Show Calendar</button>
<div v-show="calendar_mode !== null">
<FullCalendar ref="fullCalendar" defaultView="timeGridWeek" ....></FullCalendar>
</div>
JS:
renderCalendar(type) {
this.calendar_mode = type;
this.$nextTick(() => {
console.log("rerendering")
let calendarApi = this.$refs.fullCalendar.getApi()
calendarApi.render();
calendarApi.rerenderEvents()
});
},
I've thought of using 'visibility' instead but the parent of this component also uses display:none;
Any help with this would be much appreciated!
I have a button that has been binded to a popover. I would like to hide the popover when someone clicks on one of the smilies in the popover. However, $("#smiley").popover('hide') does not work.
Unfortunately I haven't been able to reproduce this with barebones code - it only happens on the live site, which is https://coinchat.org
Relevant code:
$("#smiley").popover({html: true, trigger: 'click', placement: 'top', content: smileyContent, title: 'Smilies'});
Later in a function..
$("#smiley").popover('hide'); // not working
In https://inputs.io/js/buttons.js the jQuery plugin jQuery.fn.popover is overwritten on a load event of some kind, so $("#smiley").popover("hide") at that point is no longer calling into bootstrap but the plugin provided by inputs.io.
A snippet of the code:
Inputsio.load = function(){
(function(){(function(e){return e.fn.popover=function(t)
The usage of jQuery plugin namespace for application specific code is extremely distasteful indeed.
A temporary fix could be $("#smiley").click()
here is a working fiddle that is "similar" to your code
http://jsfiddle.net/6hkkk/7/
HTML
<div style="margin-top:100px">
<span id="smiley" data-title="smile" data-toggle="clickover">
<i class="icon-comment"></i>
</span>
</div>
javascript
ClosePop = function () {
$('#smiley').popover('hide');
}
var elem = '<button data-toggle="clickover" class="btn" onclick="ClosePop();"><i class="icon-off"></i></button>';
$('#smiley').popover({
animation: true,
content: elem,
html: true
});
Replace
$("#smiley").popover('hide');
with
$("#smiley").click();
Works for me in the console.
try to move id="smiley" from
<span class="btn tenpx smileypopover popover-trigger" id="smiley" data-original-title="" title="">
to
<div class="popover fade top in" style="top: 430px; left: 308.5px; display: block;">
Is something like this out of the question?
$('#smileylist a').click(function(){
if($('.popover').css('display','block')){
$(this).css('display','none');
}
});
$('.smileypopover').click(function(){
if ($('.popover').css('display','none')){
$(this).css('display','block');
}
});
When I click on the smiley face it closes the popover, then I can't open it again until I run the 2nd block of code. It's very close but I'm not sure exactly what I'm missing.
If you have a selector property (e.g., usually required for dynamic HTML content) in your popover options, be sure to use the same selector when calling the 'hide' method.
The following fails to hide popovers (for new content added to the DOM).
//enable popover
$(document).popover({
html: true,
selector: "[data-popover]"
});
//attempt to hide popover
$(document).popover('hide');
Instead, use this:
//enable popover
$(document).popover({
html: true,
selector: "[data-popover]"
});
// hide popover
$('[data-popover]').popover('hide');
Bootstrap cannot reach indepentently popover id's. We have to read aria-describedby attribute related with the element.
Code below is solves your issue:
$("#"+$(relatedElementId).attr("aria-describedby")).remove();
relatedElementId: popover's associated element
In the addSmiley function you could replace the
$("#smiley").popover('hide');
with
$(".popover").hide();
It would work , but don't know if it is ok for you.
This is my code to make the alert appear when i hover over the image;
var special_offers = document.getElementsByClassName("special_offer");
//for each special offer
for(i=0;i<special_offers.length;i++){
var special_offer = special_offers[i];
special_offer.setAttribute("offer_shown", "0");
special_offer.onmouseover = function(){
if( this.getAttribute("offer_shown") == "0" ){
this.setAttribute("offer_shown", "1");
alert('This room has the special offer attached to it, please book soon before you miss out!');
}
}
I wanted to find out how i change this from the bog standard JS alert to a box that i can style, i imagine i'd use some sort of a div.
Any help is much appreciated.
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
This is a good resource for creating your own modal window. You can use your function to fire the modal window you created instead of just using alert() to fire up the standard alert.
Do you want to direct your message to a div?
Create the div
<div id="mySpecialOffer">
Some Text gets updated
</div>
In your js you could then target this id and update with what ever message you would like.
document.getElementById("mySpecialOffer").innerHTML = 'some Text';
You could even hide the div in css and then unhide with the JS.
Or you can create the HTML...
document.getElementById("mySpecialOffer").innerHTML = '<div> Special Offer Div Inserted </div>';
This is even easier with jQuery.
Is this what you had in mind?
What you should do is open a whole new window, like a small webpage with that message. That would be the easiest way to go!Here is a link: http://www.w3schools.com/jsref/met_win_open.asp
You will want to have the window.open() activated when people mouseover an image.you can specify the size and positioning of the window, in this case the center of the screen, and a small window.
Hope that helps!
I'm trying to do something that seems (to me, at least) to be a fairly easy, common thing to do.
Here's the HTML for what I've got on a web page:
<div class="allergiesDiv">
<div>
<span class="editButton">Allergies</span><br />
</div>
<span>Allergies</span>
</div>
</div>
I turn the first <span> into a jQuery button with $('.editButton').button().
(I have many of these pairs on the page.)
What I am trying to do is the following:
When the button is clicked, it loads a jQuery Dialog with the value of the span that follows it loaded into a <textarea>. (BONUS: When the dialog is loaded, I'd like the <textarea> to be focused and all text inside highlighted.)
The user is able to edit the value and then click 'OK'.
When the user clicks 'OK', the Dialog is dismissed and the new value that was entered is used to replace the old value for the span.
Here's the code I'm trying to use (this works OK in IE, but breaks in Mobile Safari and Chrome for PC):
NOTE: I've been chopping the code up some to try to get each problem isolated. I have had this working, at least in IE.
// How I get the button and bind to the click event
$('.editButton')
.button({icons: {primary:'ui-icon-pencil'} })
.click(EditClicked);
// 'Edit' button click handler
function EditClicked() {
var span = $(this).parent().next().children().first();
var text = span[0].innerText;
var dialog = $('<div>').prop('title', 'Edit: ' + $(this).text());
var textArea = $('<textarea>').css('width', '98%').prop('rows', '4').html(text);
textArea.appendTo(dialog);
var windowWidth = $(window).width();
var buttonTop = $(this).button().offset().top;
$(dialog).dialog({
modal: true,
minWidth: windowWidth / 2,
position: ['center',buttonTop],
buttons: {
'Ok' : function () {
OKClicked(span);
},
'Cancel' : function () {
$(this).dialog('close').remove();
}
}
});
textArea.focus().select();
}
// Dialog 'OK' button click handler
function OKClicked(span) {
var text = $(this).find('textarea')[0].innerText;
span.html(text);
$(this).dialog('close').remove();
}
This is currently broken when it gets to var buttonTop..., with the error message of "button is undefined". I haven't yet figured out why that is (I used to have a variable in that method named 'button', but it's gone now. Not sure if that's a caching issue.)
Other than that, can anyone see what's wrong with my process? It seems like I've got some kind of misunderstanding with closure, but I'm not yet good enough with JavaScript to understand how to get the kink out of this code.
what about
var buttonTop = $(this).offset().top;
I am not sure, that $('<div>') is properly syntax for jQuery. Try to use $('div') instead.
When you use $(this).button() - you try to call button method of $(this) object. Seems like a bug.