I am facing a problem while dragging the elements from different iframe to the fancy TREE node?
function test(){
$("#tetsingDIV1").draggable({ revert: true, cursor: "move", cursorAt: { top: -5, left: -5 }, connectToFancytree: true });
}
HTML part
<body onload="test()">
<a id="tetsingDIV1" style="cursor:move;text-decoration: none !important;" href="_param=dfasdfdsadasdasdasdasdasdas"> <img src='../common/images/iconDragDrop.png'</a> </body>
I want to drag the above HTML element on the fancy tree node
Any solution for this? I have tried this: ON the external iframe for a DIV; I have added draggable event too.so that fancytree can accept it.
Related
IziModal is beautiful but Jquery selectors cannot see or find the modal elements it hides. So this code: var nextmodal = $(this).next('.izra'); $(nextmodal).iziModal('open'); , which can see any div hidden by display:none, can find any element EXCEPT divs hidden by Izimodal.
https://jsfiddle.net/zmbth7u9/4/ (Stack code snippet below)
Izimodal can find its own hidden div with class .izra but no Jquery selector can?
I've tried everything including div: $(this).next($(":hidden:first"));
console.log($(hiddenstuff))
The above code SKIPS OVER the Izimodal hidden div and finds the second!
I need to activate modals with generic classes repeated throughout documents for footnotes, saving code, markup and time.
Any idea how I can get Jquery selectors to find the div with the .izra class so I can act on it?
Since we cannot find siblings because IziModal hides them beyond reach, perhaps modal divs should begin without the .izra class (set to display:none by css) and dynamically add the .izra modal class upon hitting the click trigger? We could find the divs first with next(), then add the izra class, or would that put us back at square one?
Thank you!
https://jsfiddle.net/zmbth7u9/4/ The modal and finding divs in this fiddle works, and shows the lines that inexplicably don't work.
//How things should Work generically
$('.generictrigger').click(function () {
var nextmodal = $(this).next('.genericmodal');
$(nextmodal).modal('show');
});
//IziModal Initialize and fire on open
$(function () {
$(".izra").iziModal();
$('.izra').iziModal('open'); // This works!
});
//Proof hidden divs easily found when NOT hidden by IziModal
$(".trigger2").click(function () {
var hiddenstuff = $(this).next($(":hidden:first")); // This works!
console.log($(hiddenstuff))
});
//Proof IziModal divs cannot be found by Jquery selectors
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
// $('.izra').iziModal('open'); // THIS WORKS!
var nextmodal = $(this).next('.izra'); // Should work but does not
console.log($(nextmodal));
$(nextmodal).modal('open'); // Should work but does not <<<<<<
});
.hidden { display: none; }
.c1 { background-color:#33ccff; }
.c2 { background-color:#ffff99; }
.c3 { background-color:#80ff80; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>
<!-- Finding divs hidden by IziModal Begin -->
<!-- How things should generically work calling Next() -->
<div class="containerdivforchildren">
<div class="c1 generictrigger">Click for Generic Modal FOUND by NEXT Selector </div>
<div class="genericmodal modal fade modal-body modal-content"><a title="Close"><i data-dismiss="modal" class="glyphicon glyphicon-remove icon-arrow-right pull-left"></i></a>Generic Bootstrap Modal</div>
</div>
<!-- This section proves any div can be found EXCEPT divs touched by IziModal -->
<div class="modaltriggercontainer">
<div class="trigger2 c3">Click to Log var hiddenstuff = $(this).next($(":hidden:first"));to console</div>
<div class="trigger c2">Click to Open Izra (will fail but logs results of $(this).next() to console</div>
<div class="izra">Unretrievable modal div when hidden by IziModal class</div>
<!--Above DIV IS SKIPPED AND CANNOT BE FOUND!-->
<div id="incognito" class="c1 oddlynamed hidden">hidden by style but found using $(this).next()</div>
</div>
<!-- Above div is the first div found by any selector looking for the .next()-->
I've encountered an issue where the browser's vertical scrollbar will, if visible, move along with a fancybox slide during the slide event. If you run the code snippet, adjust the height so that the vertical scrollbar becomes visible, and then click on the next/previous fancybox buttons to observe the sliding scrollbar behavior.
$(".fancybox").fancybox({
type: "inline",
speed: 2000
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</head>
<body>
<a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 1</a><br>
<a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 2</a>
<div id="modal" style="display: none; padding: 50px 5vw; max-width: 800px;text-align: center;">
<h3>Login to Join The Community</h3>
<p>This is a sample login form, but you may put any HTML here.</p>
</div>
</body>
</html>
Is this a bug? Any idea on a workaround? I tried hiding/showing the scrollbar before and after the slide transition, but this didn't work:
$(".fancybox").fancybox({
type: "inline",
speed: 2000,
beforeMove: function (instance, slide) {
document.body.style.overflow = "hidden";
},
afterMove: function (instance, slide) {
document.body.style.overflow = "";
}
});
After a bit of tweaking I managed to find this solution, though I'm not sure of a better one, which involves accessing the actual slide's (and previous slide's) elements and hiding/showing their scrollbars via CSS overflow:
$(".fancybox").fancybox({
type: "inline",
beforeMove: function (instance, slide) {
// Hide scrollbar for fancybox bug fix
instance.slides[instance.prevIndex].$slide.css("overflow", "hidden");
slide.$slide.css("overflow", "hidden");
},
afterMove: function (instance, slide) {
// Restore scrollbar for fancybox bug fix
instance.slides[instance.prevIndex].$slide.css("overflow", "");
slide.$slide.css("overflow", "");
}
});
I'm using JSSOR for a slideshow which consists of slides which are using several HTML elements including an image element with CSS translate and scale styling. These CSS properties are necessary because the user can move the images around on another page.
The slider works as it should be while you drag/slide the slides. But on autoplay with the standard Fade transition something weird happens. On Internet Explorer and on Firefox when the fade starts it somehow disables the Transform CSS of the elements. When the fade is done the Transform CSS is back again.
This cause the images to move/scale while being faded. On Chrome nothing happens and the fade works as it should be.
I use fairly basic slides like these:
<div class="slide" idle="10000">
<div class="image-slide">
<div class="image-container" style="transform: translate(66px, 108px) scale(1.61742);">
<img src="/someimage.jpg">
</div>
<div class="svg-elements">
</div>
<div class="textArea" id="text1"
<span>Lorem ipsum dolor</span>
</div>
</div>
With this as settings for JSSOR:
var _SlideshowTransitions = [ { $Duration: 1200, $Opacity: 2 } ];
var options = {
$AutoPlay: true,
$AutoPlayInterval: 4000,
$PauseOnHover: 0,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
Update
I've added a fiddle with the same results
This is a bug, I have just fixed it and updated. Please download the latest.
i've been using Bootstrap 3 for a new project and it's being great so far.
The only issue i'm getting is that i need to make a few panels stick to the top of the browser when scrolling down.
I'm trying to use the Sticky-kit but it's not working for me.
HTML
<div class="row" data-sticky_parent>
<div class="col-sm-5" data-sticky_column>content 1...<div>
<div class="col-sm-7">content 2...<div>
</div>
Javascript
$(".col-sm-5").stick_in_parent();
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.sticky-kit.min.js"></script>
Does anybody know why is the script not working?
Cheers,
Thales Ribeiro
in Bootstrap 3 you can use the build in Affix plugin (http://getbootstrap.com/javascript/#affix) to stick any content you want.
Here an example http://bootply.com/103035.
You have to tell js which div (ex.:#alert) you want to stick, and the footer div (ex.:#footer).
$( document ).ready(function() {
$('#alert').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('#footer').outerHeight(true))
}
}
})
});
And create a custom css to .affix, which is the state when the div is sticked.
I have the following code:
<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />
As it is now, it shows the logo.png under the picture.jpg image. How can I make it to be shown above the .jpg image?
Thanks.
You must use 2 images to do that. The img must be with position absolute (The one that you want to be over the other). Don't forget that the container must have position:relative in order to contain the absoluted png.
Here is the example:
http://jsfiddle.net/jNpaH/
The html tags:
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png"
class="png-over" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png"
/> </div>
The styles:
.image{position:relative}
.png-over{position:absolute; top:0; left:0}
The problem with that technique is that your code becomes spammed with the image tags.
One way of solving it with jQuery is to find each div container with the class 'images' and prepend to each one the image tag.
Here is the example:
http://jsfiddle.net/jNpaH/2/
According to your code I assume that you prefer to have a short html code. But it is impossible to have an image_tag with a background covering it.
The cleanest way is to use jQuery:
This is the final code:
http://jsfiddle.net/QyMkh/
First put a div that will contain all your images. The div must have a class, the images don't require it necessarily.
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
</div>
Then add this jQuery block in the html before the closing </body>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// store in a variable the url of the image that will be used as background
var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';
// select every image_tag that is children of the div with the class 'image'
jQuery('.image img').each(function() {
// every child image will be wrapped inside generated divs with a class 'img-wrap'
$(this).wrap('<div class="img-wrap"></div>');
});
// After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
$('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>
Finally add those style declarations to get the desired effect.
<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>
This code will keep your html documents with no unnecesary markup when you try to edit next time.
An advantage of using an image_tag as a background, is that with css you can resize its width and height. Try adding this new rule of stylesheet:
.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}
To end this, if you want more flexibility, for example you don't want the image_tags be container in a div, do this actions: replace this line of the jQuery block:
jQuery('.image img').each(function() {
with this
jQuery('.image').each(function() {
and add a class="image" to each
<img class="image">