How to move the elem in javascript - javascript

I know Javascript in the beginning level and I need some help.
left = '-180px';
$sub_menu.show().animate({'left' : left}, 200);
I want to move $sub_menu from the right side to 180pxfrom his default position before animate it, i.e. to make the indent on the right.
!!! EDIT !!!
Here my jsfiddle
For each menu element, on mouseenter, I enlarge the image, and show both sdt_active span and sdt_wrap span. If the element has a sub menu (sdt_box), then I slide it - if the element is the last one in the menu I slide it to the left, otherwise to the right. My problem is the last Menu 6. It must work as other menus only it should slide to the left on the same width.

I think you are searching for this:
$sub_menu.show().animate({ 'left' : '-=180px' }, 200)

use this
$sub_menu.css('left','-180px');
and for animation you can add CSS3 transition code to your CSS3 property

check this http://api.jquery.com/animate/
and you should use this , in your example
$sub_menu.show().animate({ 'left' : '-180px' }, 200);

Related

SlidingPanel Animation

I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.

Jquery animate toggle to shift marginTop - demo attached

I'm having troubles with an open/close tab using jquery. The purpose is for the tab to be clicked to reveal a fullscreen image of a slider sitting below. Technically, the slider itself doesn't change, it just simply alters the marginTop of the panel positioned below it to reveal the fullscreen image of the slider. There is a test link live at: http://www.the3rdobject.com/test-site/index.html - the top tab works perfectly though it is performing a similar function, but cannot get the lower tab to return to it's original position. Any help would be greatly appreciated.
To start, simply click on the lower tab 'Show fullscreen image' - this opens up to reveal the slider below. Just need to get it to close.
Any jquery experts, please help! I'm a jquery newb and going out my mind!
The code below should work:
// gets all the anchor elements inside the elements with a css class 'seefullscreentab'
$(".seefullscreentab a").click(function() {
// the margin to animate will be 0% if the anchor css class is 'opentab' and -15% if not
var margin = $(this).hasClass('opentab') ? '0%' : '-15%';
// animates the element with the css class 'scrollpage-container' to the margin above
$(".scrollpage-container").animate({ marginTop: margin }, 500);
// toggle the visibility of the anchors
// (the current visible anchor turns to hidden, and the hidden one turns to visible)
$(".seefullscreentab a").toggle();
});

Trying to turn fluid width div into 100% wide modal

You can see an example of what I've got now here.
I'm trying to get the div that's 'full' to expand from the middle out, pushing the others out of the way in the process. What I've got now will push them to the left edge and then expand them. I know that this is because I've got position:absolute. Any ideas on how I can acheive this effect?
Here is a working example of what I think you are describing: http://codepen.io/anon/pen/pKfAw
I removed display: table from div and set .min, .min p to width 0px with an overflow hidden and removed height 0%.
The issue why it was jumping is because you set all the min to 0 with the full floating left. That automatically pushed it to the left and then expanded out. Now all the divs are animating to 0 while .full is animating to 100%.
Not sure what you mean by "expand from the middle out". Here is a quick fix for your js:
$('div').on('click', function(){
var $this = $(this);
$this.toggleClass('full');
$this.siblings().toggleClass('min');
});
This only adds full class to the div which was clicked.

Is there a js function that scrolls a site left right up and down?

I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/

error offset().left in null or not an object [duplicate]

I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/

Categories