I have two elements whose position and size I am trying to exchange on click of the second element only
<div id="card-1" class="1">
Some Content for 1
</div>
<div id="card-2" class="2">
Some Content for 2
</div>
using jquery path js
$(document).on('click', '.2', function(){
var path_1 = {
start: {
x: 0,
y: 0,
angle: -120
},
end: {
x:0,
y:360,
angle: -120,
length: 0.25
}
}
var path_2 = {
start: {
x: 0,
y: 0,
angle: -180
},
end: {
x:0,
y:-360,
angle: -60,
length: 0.25
}
}
$(".1").animate({
width: "-=50%",
path : new $.path.bezier(path_1)
}, 2500);
$(".2").animate({
width: "+=100%",
path : new $.path.bezier(path_2)
}, 2500);
var x = $('.2').attr('id');
var y = $('.1').attr('id');
$('#'+ x +',#'+ y +'').toggleClass('2 1');
});
Then I exchange the classes as you can see in the last 3 lines of code to get the same effect.
The first time when i click on #card-2 (class 2), the position and size gets exchanged, and also the classes are toggled for the divs but, the when I click on #card-1 (class 2), I do not get the same effect. How do get the same effect again?
This is how my page looks at first
I want #div1 to shrink and go to where #div2 is currently and #div2 to grow and reach where #div1 is currently on click of #div2. Something like this
This is happening. but thin I want the divs to get back to their original position on click of #div1. Something like this.
But this is not happening.
I have used classes for the animation and so after first step, I am exchanging the classes. But instead I am getting this type of result
Related
I am a creating a fully scalable application on QML, what I need to know is how do I handle screen changes, for example this elements animation works for 1920x1080:
EventLog{
id: eventlog
x: 0
y: 1000
z: 10
NumberAnimation{id: showeventPanel; target: eventlog; properties: "y"; to: 710; duration: 500}
}
But I cannot anchor this element otherwise the animation will not take place, so for other resolutions this element will not be correctly placed, I realise that I can set the the anchor to anchors: undefined but how can I accurately set the x and y to move too the correct position on the screen?
The solution I found, though not elegant, works to a certain degree. I anchored the element as so and set it to a dummy rect(centreRect) that I anchored to the correct x and y position:
CameraControlPanel{
id: control_Panel
// x: 1916
// y: 270
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
}
anchors.rightMargin: -635
NumberAnimation{id: showPanel; target: control_Panel; properties: "x"; to: centreRect.x; duration: 500}
z: 10
}
Then when I needed to start the 'showPanel' animation I set the the anchors to undefined as so:
control_Panel.anchors.verticalCenter = undefined
control_Panel.anchors.right = undefined
When I needed to return the element to the correct position, I reset the anchors that were there previously.
I use OpenSeadragon 1.2.1.
I want to show wide image(4096 x 2160),
and change first view position.
x: 640px;
y: 320px;
width: 1024px;
height:768px;
crip(320px, 1664px, 1088px, 640px);
HTML code
<div id="mycanvas" style="width:1024px;height:768px;"></div>
<script src="./openseadragon.min.js"></script>
<script>
var viewer = OpenSeadragon(
{
id: "mycanvas",
prefixUrl: "./images/",
tileSources: "./dzc_output_images/datas.xml"
});
viewer.addHandler('open', function()
{
// I want to change first view position.
// viewer.???
// viewer.viewport.applyConstraints();
}
</script>
Use "Class:Rect / Class:DisplayRect" or other Classes ?
https://openseadragon.github.io/docs/OpenSeadragon.Rect.html
https://openseadragon.github.io/docs/OpenSeadragon.DisplayRect.html
How to use these Classes ?
Your best bet is to figure out the location you want to feature, as a rectangle in viewport coordinates (where 0 is the left side of the image and 1 is the right side). For instance (inside the "open" handler you've written):
var box = new OpenSeadragon.Rect(0.25, 0.25, 0.5, 0.5);
viewer.viewport.fitBounds(box, true);
i need help
Actually in my work i need to implement spin.js and block UI in a jqgrid. This is ok when i put the code in the same file and function, but i want to call a method from other JS file, and hear is where my problem. The spin.js and block UI start, then block UI stop with unblock but the spin.js still running.
Here is my code:
In BeforeRequest() in jqgrid i call one method
$.pui.common.loaderAnimationON("pane-content");
this method have this code
loaderAnimationON: function (div) {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent in px
left: '50%' // Left position relative to parent in px
};
var target = document.getElementById(div);
var spinner = new Spinner(opts).spin(target);
$.blockUI({
blockMsgClass: "gridProjectsLoader",
message: null
});
return spinner;
},
in gridComplete() i call other method
$.pui.common.loaderAnimationOFF("pane-content");
this method have this code
loaderAnimationOFF: function (div) {
var target = document.getElementById(div);
var spinner = $.pui.common.loaderAnimationON();
spinner.stop(target);
$.unblockUI();
}
Anyone can help me?
Thanks guys
You should use the same object to start and stop it. You can use global variables anywhere (just another .js)
Check this jsFiddle. It's stop spinner after 3 secs.
http://jsfiddle.net/YX7dy/8/
spinner=loaderAnimationON('Spin');
setInterval(function(){spinner.stop();},3000);
Is there a way to hook into the MooTools Slider class, so the starting position of the knob is at the bottom (step 0) of the bar and you drag the knob up to get to the top of the bar (step 100).
This is what I have so far:
var slider1 = new Slider('#bar', '#knob', {
offset: 6,
steps: 100,
mode: 'vertical'
});
And what I need:
slider1.startingPosition = 'bottom';
Or something to that affect.
Since steps is defined to 100, your max value is 100, which is what you want to set as initialStep (the slider starting point).
For your specific CSS I would remove (or add it womewhere else) the margin on the element of the slider, so it wont shift the slider.
This worked for me:
var slider = $('bar');
var slider1 = new Slider(slider, slider.getElement('.knob'), {
offset: 6,
steps: 100,
initialStep: 100,
mode: 'vertical',
onChange: function (step) {
console.log(step);
}
});
And changed also margin top here to 0px: margin: 0px 0 0 -7px;
Fiddle
Hello guys,
I am new at JavaScript and after tons of research on the Internet and failed attempts on implementing a spinner I decided to ask you.
I am using Spin.js ( http://fgnass.github.com/spin.js/#v1.2.6 ). It seems to be an great tool, but I simply cannot make it work. My question is what I doing wrong? I cannot really figure it out. Any help will be much appreciated. Thank you so much.
Here is my piece of code:
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
function spinnerInit() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto', // Left position relative to parent in px
visibility: true
};
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts).spin(target);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnPerformSave').click(function () {
spinnerInit();
});
});
</script>
<div id="spinnerContainer" class="spinner" style="width: 100%; height: 150%;
position: absolute; z-index: 100; background-color: Gray;
left: 0; top: 0; bottom: 0;right: 0">
</div>
Try replacing
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
with
$('#spinnerContainer').after(new Spinner(opts).spin().el);
You need to append the html element the spin method creates to the dom
Here is an example to get you started http://jsfiddle.net/5CQJP/1/
I am not sure if this question ever got answered, but for those who are still looking for an answer:
I found out that I needed to move the javascript underneath the spinnerContainer div. I believe this would also work if you put the javascript in an onload event. Here is what I did:
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray;">
</div>
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
</script>
Here is my answer. Works great.
//Declare Script
<script src="Scripts/spin.js" type="text/javascript"></script>
<button id="btnSearchClick">Search</button>
//Displays Loading Spinner
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script type="text/javascript">
//On button click load spinner and go to another page
$("#btnSearchClick").click(function () {
//Loads Spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
//Go another page.
window.location.href = "http://www.example.com/";
});
</script>
Try this:
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts);
If you use jQuery:
$(target).html(spinner.el);
If not, as in the documentation:
target.innerHtml = '';
target.appendChild(spinner.el);
I didn't try this but it should work. If a problem occurs, just let me know.
I know this is way late but I am curious if you ever got this to work. I'll tell you one dumb thing I was doing for a bit and didn't realize it. I was making the spinner the same color as the background it would be showing up against and that's why I couldn't see it. Also I used JQuery as seen here https://gist.github.com/its-florida/1290439
Worked like a charm