I use this code below on my site to open some div's. It works almost perfectly. But when i open a second div I want the other div to close. How can i do this?
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal1').hide();
jQuery('.rv_button1').click(function(e){
e.preventDefault();jQuery("#reveal1").slideToggle();
jQuery('.rv_button1').toggleClass('opened closed');
});
});
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal2').hide();
jQuery('.rv_button2').click(function(e){
e.preventDefault();jQuery("#reveal2").slideToggle();
jQuery('.rv_button2').toggleClass('opened closed');
});
});
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal3').hide();
jQuery('.rv_button3').click(function(e){
e.preventDefault();jQuery("#reveal3").slideToggle();
jQuery('.rv_button3').toggleClass('opened closed');
});
});
</script>
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 new here and after learning js i create this monster:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#guzik").click(function () {
$("#red").attr('id', ($("#red").attr('id') === 'blue' ? 'red' : 'blue'));
});
});//]]>
</script>
guzik is my button that I want it to change another div with id #red to #blue (toggling) Where are my mistakes? :)
Better way is changing class instead of ID
$("#guzik").click(function () {
$("#div").toggleClass('red blue');
});
.red {background:red}
.blue {background:blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
GUZIK
<div id="div" class="blue">CONTENT</div>
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');
});
});
});
Is there an example on how to implement Drag and Drop with Ember.js ? I have tried using jQuery UI, but the integration seems to be somewhat complex.
I've seen this jsFiddle: http://jsfiddle.net/oskbor/Wu2cu/1/ but haven't been able to implement this successfully in my own app.
What are the options for a rather simple drag&drop implementation using Ember.js ?
I took a look at the post by Remy Sharp and implemented a basic example in Ember.js, see http://jsfiddle.net/pangratz666/DYnNH/.
Handlebars:
<script type="text/x-handlebars" >
Drag and drop the green and red box onto the blue one ...
{{view App.Box class="box green"}}
{{view App.Box class="box red"}}
{{view App.DropTarget class="box blue"}}
</script>
JavaScript:
DragNDrop = Ember.Namespace.create();
DragNDrop.cancel = function(event) {
event.preventDefault();
return false;
};
DragNDrop.Dragable = Ember.Mixin.create({
attributeBindings: 'draggable',
draggable: 'true',
dragStart: function(event) {
var dataTransfer = event.originalEvent.dataTransfer;
dataTransfer.setData('Text', this.get('elementId'));
}
});
DragNDrop.Droppable = Ember.Mixin.create({
dragEnter: DragNDrop.cancel,
dragOver: DragNDrop.cancel,
drop: function(event) {
var viewId = event.originalEvent.dataTransfer.getData('Text');
Ember.View.views[viewId].destroy();
event.preventDefault();
return false;
}
});
App.Box = Ember.View.extend(DragNDrop.Dragable);
App.DropTarget = Ember.View.extend(DragNDrop.Droppable);
I'm new to mediaelements.js
at the end of my video, I wish that the user is redirected to another page
I have tried something like
<script>
$(function(){
$('audio,video').mediaelementplayer({
success: function(player, node) {
window.location = "http://google.com";
});
}
});
});
</script>
but I have not been successfull at all, maybe someone would have an idea
This worked for me. 'player1' is the id of the video
<script>
new MediaElement('player1', {
success: function (mediaElement, domObject) {
// add event listener
mediaElement.addEventListener('ended', function(e) {
//Do Stuff here
//alert("sometext");
window.location = "http://google.com";
}, false);
},
});
</script>
The code I posted was for the media element player. I looks like you're using the video.js player in the link you posted. I'm not sure how that would work but I did find this... help.videojs.com/discussions/questions/26-redirect-to-url-once-video-has-ended