I want to resize an element using jquery-ui. Although this is easily done, however I want a draggable handler in the middle (checkout this jsfiddle)
<div class="wrap">
<div class="resizable resizable1"> ... </div>
<div class="resizable resizable2"> ... </div>
<div id="p" class="ui-resizable-handle ui-resizable-e"></div>
</div>
JS:
$('.resizable1').resizable({
handles: {
'e': '#p'
},
....
The problem is that it is not possible to resize the resizables using the custom handler now. Is there a solution to fix this ? Or should I abandon jquery-ui and find something else
Related
I want use swipe and longtap with Tocca.js in NativeAPP
This:
Tocca.js supports also the inline events!
<div ontap="function(e){})"></div>
<div ondbltap="function(e){})"></div>
<div onlongtap="function(e){})"></div>
<div onswipeleft="function(e){})"></div>
<div onswiperight="function(e){})"></div>
<div onswipeup="function(e){})"></div>
<div onswipedown="function(e){})"></div>
Site: https://gianlucaguarini.com/Tocca.js/
i need a simple div inline code like alert() to understand this :)
Thank you very much for helping
Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/
The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.
Here is the template whose DOM elements I am trying to control:
<template name='libraryTemplate'>
<div class="container-fluid library_container">
<div class="row">
<div class="col-sm-6">
<h1 id='maglens_library_header'>MY LIBRARY</h1>
<div id='library_page_break'></div>
<div id='folders_text'>
Folders:
</div>
</div>
<div class="col-sm-6">
<a class='button-text btn' id='add_new_button'>ADD NEW</a>
</div>
</div>
<div class="row">
<div class="col-sm-3 folders" id='google_drive_thumbnail'></div>
</div>
</div>
</template>
And here is the jQuery Im using to do so. My $('body') selector works fine, and my log statement just inside $(document).ready() behaves correctly, but why can't I target the selector $('.folders')? Upon inspection of the DOM, I can see exactly where the code is, but it's like jQuery thinks it doesnt exist?
$(document).ready(function(){
console.log('document ready');
$('.folders').on('click', function(){
console.log('folders clicked');
})
// $('body').on('click', function(){
// console.log('body clicked');
// })
});
I don't see any selectors named folders.
I do see <div id='folders_text'>.
That's why your body event fires but your other one doesn't.
Secondly, you should be using template events, you're working with Meteor now.
Template.libraryTemplate.events({
'click .folders': function() { console.log('clicked') }
})
I'd definitely recommend using the meteor events as everyone else suggested.
What you had actually works, it is just since the div with the "folders" class has no content, the div is very small (unless you have a height attribute on ".folders" or "#google_drive_thumbnail") and thus very hard to click on. Inspect element on the div and you'll see the size
I am using featherlight lightweight jQuery lightbox plugin but I don't understand how to load lightbox using with click event as I am not good with jQuery codes.
Here is my code work:
HTML:
Load Lightbox
<button id="openbox">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
<h2>Delete Item</h2>
<div class="row">
<div class="twelve columns">
<strong>Are you Sure?</strong>
<br>blubblub?
</div>
</div>
<div class="right"> Close
Yes
</div>
</div>
jQuery:
jQuery(document).on("click", "#openbox", function() {
jQuery('.lightbox').featherlight();
});
JSFiddle: jsfiddle.net/g68bZ/18/
Comment Reply:
But what If I want to display lightbox with logical condition like:
var checkedCount = $('.chkAssets:checked').length; // Getting some counts
if(checkedCount == 1){
// Load lightbox if condition is match
}
I hoping someone guide me proper way.
Thanks.
$.featherlight('#fl1');
Pay attention that the lightbox has id "fl1"
here is the fiddle
http://jsfiddle.net/g68bZ/26/
and here with if else example
http://jsfiddle.net/g68bZ/27/
I am making a desktop-like website, and I want to drag my windows around. I am using jQuery-UI and .draggable(). My current code looks like this:
<div id="window"> <!-- You'll drag this whole div -->
<div id="title">Window name</div> <!-- You drag with this -->
<div id="content"></div> <!-- You cannot drag this -->
</div>
And with my JS I just did this:
$("#window").draggable();
I want this because I need to select text from #content, which is hard to do if it's draggable.
The code I think should be...
$("#content").draggable('disable');
There was a similar question to this here... jquery disable dragging
I guess you need this
$("#window").draggable({ handle: "title" });