I am a beginner in jQuery and JavaScript. I have the following problem: Every time I try to open an div area it is immediately collapsing. The HTML is:
<ul class="information"><li><a class="opener" href="#">opener</a> <div class="slide-block"> ...
The JavaScript:
jQuery(".information .opener").on("click", function(event){
var opener = jQuery(this);
// Show/hide the content by toggling active class
opener.parent().find(".slide-block").slideToggle("fast",function(){
opener.parent().toggleClass("active");
});
// Return false to subdue the click
return false;
});
In think it has to do with an upgrade of jQuery...
Thanks in advance
Julius
Related
I am using elementor's popup in wordpress to show my CF7 form. My issue is that the popup closes before it can show the after submit confirmation text.
What could I do in such a situation? That text is very important.
You need to reinitialize the form after the opening of the popup.
You can add a html widget in the page where the popup opens (Or in the footer, if opens in any part of the website) and paste the following code:
<script>
window.addEventListener('DOMContentLoaded', function() {
// More information about elementor popup events
// here https://developers.elementor.com/elementor-pro-2-7-popup-events/
jQuery(document).on('elementor/popup/show', () => {
wpcf7.init(jQuery(".wpcf7-form")[0]);
});
});
</script>
Or even modify the functions.php (In the child theme if is necessary):
// Stop Elementor Popup from Closing after CF7 submission with no validation
function elementor_popup_cf7_fix() {
?>
<script type='text/javascript'>
window.addEventListener('DOMContentLoaded', function() {
jQuery(document).on('elementor/popup/show', () => {
for(var i = 0; i < jQuery(".wpcf7-form").length ; i++) {
wpcf7.init(jQuery(".wpcf7-form")[i]);
}
});
});
</script>
<?php
}
add_action( 'wp_footer', 'elementor_popup_cf7_fix' );
Source: https://github.com/elementor/elementor/issues/7798
I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)
Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.
It is opened as the following:
datatable as react components
opens bootsrap modal as react component
initializes tinymce on textareas inside of the modal
loads the code plugin (which itself then is not accepting any kind of input anymore)
My initilization of the editor looks like this:
componentDidMount: function(){
tinymce.init({
selector: '.widget-tinymce'
, height : 200
, resize : true
, plugins : 'code'
})
}
My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.
Does anybody has an idea, what is causing this or how to simply debug it further?
Thx a lot!
if you are using Material UI. disable Material UI Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
What does your html/jsx look like in your component?
My guess is that react might be treating your input as a Controlled Component
If you're setting the value attribute when you render, you'll want to wait, and do that via props or state instead.
Alright, so it turned out that bootstrap modals javascript is somehow highjacking this. In favor of saving some time I decided not to dig realy into this but just to create my own modal js inside of the jsx.
Aparently there is also React Bootstrap, but it looks at the moment to much beta for me in order to take this additional dependency in.
The final code looks like this, in case it becomes handy at some point:
Modal = React.createClass({
show: function() {
appBody.addClass('modal-open');
$(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);
}
, hide: function(e){
if (e) e.stopPropagation();
if (!e || $(e.target).data('close') == true) {
appBody.removeClass('modal-open');
$(this.getDOMNode()).animate({opacity: 0}, 300, function(){
$(this).hide();
});
}
}
, showLoading: function(){
this.refs.loader.show();
}
, hideLoading: function(){
this.refs.loader.hide();
}
, render: function() {
return (
<div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
</div>
<div className="modal-body" id="overlay-body">
{this.props.children}
<AjaxLoader ref="loader"/>
</div>
</div>
</div>
</div>
);
}
})
Best wishes
Andreas
Material UI: disable Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
I am using jQuery 2.1.1, and have been using it to add 'clickable' to rows returned from a database using this:
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
</script>
That has been working fine. I have now added jquery-ias (2.1.2), and only the first page of returned results has clickable rows.
My jquery-ias code is as follows:
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
negativeMargin: 250,
});
});
</script>
Jquery-ias is working fine, the pages are loading as needed, but the resultant rows are not clickable.
Inspecting the page in Chrome shows that the subsequently loaded rows have not had the clickable attribute added.
The relevant row in the php is this:
<tr class='resultsrow item' <?php echo "data-href='carddetail.php?setabbrv={$row['setcode']}&number={$row['number']}&id={$row[1]}'"; ?>>
All works fine if I use either, but how do I get them to play nicely together?
EDIT.....
OK, I have worked around it using the jquery-ias built-in pageChange event.
jQuery.ias().on('pageChange', function(pageNum, scrollOffset, url) {
var delay=1000;
setTimeout(function(){
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
},delay);
});
This way when ias finds a page change, it waits a second for the page structure to load, and then applies the clickable class.
I can't see this working if it's waiting for images though... doesn't have to for this instance, but there's got to be a better way to do this.
Any pointers?
the better way would be to use the rendered event, for example:
jQuery.ias().on('rendered', function(item) {
var $items = jQuery(items);
$items.each(function() {
jQuery('tr[data-href]', $this).addClass('clickable').click(function() {
window.location = $(this).attr('data-href');
});
});
});
I'm struggling with plugging in the correct selector into jquery. When I plug in ".accordionButton" the entire div is clickable and the functionality works great. However, I want to make only the "h3.toggle a" clickable, but plugging that selector in doesn't work. Is there something else in the jquery I need to change here? Any advice is greatly appreciated. Thanks!
The HTML:
<div class="accordionButton">
<div class="case-top">
<div class="case-left"></div>
<div class="case-right">
<h3 class="toggle">Our Strategy and Results</h3>
</div>
</div><!--end case-top-->
</div><!--end button-->
<div class="accordionContent">sliding content here</div>
The JQUERY:
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton h3.toggle a').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
$('.accordionContent').hide();
});
You are using
$(this)
but you change the selector, you need to change all $(this) selectors to
$('.accordionButton')
FIDDLE
Ok, here is where I'm at... the buttons are now working correctly, but on click all the instances of .accordionContent open, not just next one. ( FYI, I removed the mouseover from this code snipped)
Jquery
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.accordionButton').next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON (correct)
$(this).addClass('on');
//OPEN THE SLIDE
$('.accordionButton').next().slideDown('normal');
}
});
I'm guessing the lines:
$('.accordionButton').next().slideDown('normal');
and
if($('.accordionButton').next().is(':hidden') == true) {
are the lines which need editing. I need these two lines to open and close just the "next" .accordionContent instances not all of the instances together.
From http://codemirror.net/doc/manual.html, I only find getRange(),
undo(), redo() etc, and I can't find cut(), copy() and paste API,
and more when I try to run editor.execCommand("cut"), I get the error.
Could you help me? Thanks!
Using clipboard.js, you can define the text() function to grab the value of the CodeMirror's inner document.
Store a reference to the (<textarea>) editor's selector for convenience.
var editorSelector = '#editor' // or '#editor + .CodeMirror';
Instantiate a new ClipBoard object with reference to your button.
new Clipboard('.clip-btn-native', {
text: function(trigger) {
return getCodeMirrorNative(editorSelector).getDoc().getValue();
}
});
Retrieve a CodeMirror Instance via native JavaScript.
function getCodeMirrorNative(target) {
var _target = target;
if (typeof _target === 'string') {
_target = document.querySelector(_target);
}
if (_target === null || !_target.tagName === undefined) {
throw new Error('Element does not reference a CodeMirror instance.');
}
if (_target.className.indexOf('CodeMirror') > -1) {
return _target.CodeMirror;
}
if (_target.tagName === 'TEXTAREA') {
return _target.nextSibling.CodeMirror;
}
return null;
};
Demo
Please see complete; in-depth demo over at JSFiddle.
There are no CodeMirror APIs for cut/copy/paste because browser security restrictions forbid JavaScript from accessing the clipboard programmatically. Paste could be used to steal private data and Cut/Copy can be used as a more elaborate attack vector.
The browser's own native code handles user gestures that access the clipboard (keyboard shortcuts and context menu items), based solely on the currently selected text or focused text field.
This SO thread has a good summary of attempts to work around these restrictions. CodeMirror's approach is the first bullet: it uses a hidden textarea to ensure that user clipboard gestures work, but that still doesn't support programmatic APIs.
But there is a partial workaround: use a small Flash widget (this is the 2nd bullet in the thread above). Flash relaxes the restrictions on Copy/Cut (but not Paste) a bit. It still has to be triggered by some user event, but it could be something like clicking a button in your HTML UI. Wrappers like ZeroClipboard and Clippy make it simple to access to these capabilities without needing to know Flash. You'd need to write a little glue code to pull the appropriate string from CodeMirror when copying, but it shouldn't be too bad.
Add a hidden contenteditable div to your textarea editor wrapper. Contenteditable divs respect new lines and tabs, which we need when copying code.
Here is my CodePen demo
var content = $('.content');
var toCopy = content.find('.copy-this');
// initialize the editor
var editorOptions = {
autoRefresh: true,
firstLineNumber: 1,
lineNumbers: true,
smartIndent: true,
lineWrapping: true,
indentWithTabs: true,
refresh: true,
mode: 'javascript'
};
var editor = CodeMirror.fromTextArea(content.find(".editor")[0], editorOptions);
content[0].editor = editor;
editor.save();
// set editors value from the textarea
var text = content.find('.editor').text();
editor.setValue(text);
// setting with editor.getValue() so that it respects \n and \t
toCopy.text(editor.getValue());
$(document).on('click', '.copy-code', function() {
var content = $(this).closest('.content');
var editor = content[0].editor;
var toCopy = content.find('.copy-this')[0];
var innerText = toCopy.innerText // using innerText here because it preserves newlines
// write the text to the clipboard
navigator.clipboard.writeText(innerText);
});
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.CodeMirror {
height: fit-content !important;
}
.copy-code {
background: #339af0;
width: fit-content;
cursor: pointer;
}
<!-- resources -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css" />
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<!-- button to copy the editor -->
<div class="copy-code" title="copy code">copy</div>
<!-- add contenteditable div as it respects new lines when copying unlike textarea -->
<div class="copy-this" contenteditable style="display: none"></div>
<textarea class="editor" style="display: none;">// here is a comment
// here is another comment
</textarea>
</div>