I have a div draggable using YUI3 code:
dd1 = new Y.DD.Drag({
node: '#dd-demo-rep'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#container'
});
I need to be able to interact with other links within the node "dd-demo-rep" when it is not being dragged.
I want to be able to disable the DD code and then re-enable it when I am ready. This may happen different times so it needs to be able to toggle as needed.
I tried using the destroy() event {dd1.destory()}, and that works to stop it, but I was not able to get it working again. Is there a better way to do this ? Appreciate any help or advice.
You need to set the lock attribute of dd1 to true:
dd1.set('lock', true);
Setting lock to true stops the element from being draggable. Here's a runnable example:
<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<button id="toggleLock">Toggle Lock</button>
<div id="container" style="height: 200px; width: 200px; border-style: solid;">
<span id="drag" style="border-style: dotted;">Draggable</span>
</div>
<script type="text/javascript">
YUI().use('dd-drag', 'dd-constrain', function(Y) {
var dd = new Y.DD.Drag({
node: '#drag'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#container'
});
Y.one('#toggleLock').on('click', function(event) {
dd.set('lock', !dd.get('lock'));
});
});
</script>
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 am running E2E on my angular application using Protractor. How to write script for toggle button.
<span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 41px;">ON</span>
<span class="bootstrap-switch-label" style="width: 41px;"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 41px;">OFF</span>
I can't guess the DOM of your page. Firstly, I'd rather not use xpath. IMHO in protractor by should be lowercase.
I assume that after clicking the element class of span changes.
maybe try sth like that:
const button = element(by.css('span.bootstrap-switch-primary'));
button.getAttribute('class').then((classes) => {
if (classes.indexOf('bootstrap-switch-handle-on') === -1) {
return button.click();
}
}
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 a .mouseover() event triggered on all elements of class 'node'. It works fine, and is also triggered when user hovers over any child of .node. This works well for me, however, I do not want this event triggered if the user mouse overs a specific child, namely, an image.
Why is the selector $('.node :not(img)') not working?
Oddly enough, it does work when I try it out at http://www.woods.iki.fi/interactive-jquery-tester.html, but not in my actual implementation.
My html:
<div id="container">
<div class="node" id="abc">
<h2>Node Title</h2>
<div class="nodeChildren">
<h3 id="a1">Some text</h3>
<h3 id="a2">Some text</h3>
<h3 id="a3">Some text</h3>
</div>
<img src="diagonal-left.gif" />
</div>
</div>
My jquery:
//start with third tier not visible
$('.nodeChildren').hide();
$('.node :not(img)').mouseover(function(){
$(this).children('div').show();
});
$('.node').mouseout(function() {
$('.nodeChildren').hide();
});
});
My failed attempts
$('.node :not(img)') //no mouseover is triggered
//for the following selectors, the mouseover event is still triggered on img
$('.node').not('img')
$('.node').not($('.node').children('img'))
Thanks for any help :)
The problem is the event is "bubbling" up to the parents which triggers the mouse over. You need to add a mouseover to the img to stop this.
$(".node img").bind("mouseover", function(event) {
event.stopPropagation();
});
in the callback function of bind, you can check the target. in your case, Something like this
$(".node").bind('mouseover',function(e){
if(e.target.nodeName != 'IMG'){
$(this).children('div').show();
}
});
okay as I said in the title I already got a working fake progressbar.
<html>
<head>
<style type="text/css">
#progress-bar-wrapper
{
width: 500px;
height: 2px;
}
#progress-bar
{
background-color: #a1cee8;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() { animateProgressBar() });
function animateProgressBar()
{
$("#progress-bar")
.css("width", "0%")
.animate(
{
width: "100%"
},
1550, //Speed of loading bar
animateProgressBar);
}
</script>
</head>
<body>
<div id="progress-bar-wrapper">
<div id="progress-bar"></div>
</div>
</body>
</html>
This progressbar is being put in a pre-loader-site and what I want it to do is that once it reaches 100%, it must stop and then reload/redirect the user to the next site..
I have this idea in mind, but I guess it has to be changed a bit in order to be applied:
Progressbar loads, reaches 100% (this happens succesfully with the code provided above), however, it must stop at 100%. AND when it does, it must load an immediate redirection to the next site.
Hope everything is clear, thank you very much!
Chris
Okay, figured this out with the support of a friend:
<script type="text/javascript">
var x=0;
//var y=5;
window.onload=progress();
function progress(){
var timer;
if(x<100){
x+=1;
document.getElementById('progressbar').style.width=x+'%';
timer=setTimeout('progress()',-40);
}else{
clearTimeout(timer);
location.href='http://siteexample.com/index.html';
}
}
</script>
The variable x has a default value of 0. windows.onload launches the progress, the bar fills itself according to the if-statement that it's <100 with x+=1 (this allowed me to imitate the smooth JQuery-animateProgressBar effect). The next two lines are just about the bar itself (getElementById looks for the CSS ID called 'progressbar' and setTimeout is just the time in ms between one call and the other)
Then, when it's bigger than 100 (else, x<100) the timer is cleared and a new location is loaded location.href='http://siteexample.com/index.html.
Hope it's useful to someone else, too.
Chris
(the commented var y=5 is still for testing; i'm trying to create a slowing-down effect on the progressbar.)