I know there are various solutions out there, including JQuery solutions, that will do this, but I was trying to write my own simple version...
I want to hide a <div> but sliding it off the left or right of the screen.
For some reason I'm unable to read and set the .style.left value of my div though.
This fiddle shows the problem: http://jsfiddle.net/47MNX/3/
Seems to work fine if you set the position property, e.g. position:absolute; (or relative) to #myLeftMenu. You never set the position, so while the JavaScript was running it had no way to make the change.
jsFiddle example
Related
I want to have one image above another one that is being revealed on scroll.
I am thinking of a similar effect as on this page: https://affinity.serif.com/de/photo/ (live-filters section, called "fixed-scroll" here).
Preferrably a native CSS solution or with as little JS as possible.
So far, I've found this example https://tympanus.net/Blueprints/ScrollingLayout/
It's almost what I want but I can't think of a way to make the background-attachment fixed to the element's parent rather than the whole viewport.
It only works when it's fullscreen and there's nothing above this effect.
I've also thought about a solution using translate-y but can't find a way to slide the top image up revealing the image underneath instead of sliding the lower image upon the first one.
Can you help me out here or point me in the right direction, how this may be achieved? Thanks!
As far as I know using background-attachment: fixed might be the only way to achieve this particular effect using only CSS, but it looks like that doesn't quite solve your problem.
I would try a simple parallax scrolling library such as parallax.js. This uses javascript to achieve the desired effect but you can apply all the code via CSS data attributes, like so:
<div id="mydiv" data-parallax="scroll" data-speed="0" data-image-src="/path/to/image.jpg"></div>
With data-speed="0" the image inside the div will be stationary as you scroll past.
I am trying to set up a simple example with Bootstrap's affix.js.
However, the problem is that the item which I am trying to have sticky jumps off the screen with a negative top as soon as it switches from affix-top to affix. And it never recovers from there.
I set up a small jsfiddle, which illustrates the issue: https://jsfiddle.net/mjg12uep/6/
I have done it successfully on another project, but can't for the heck of it figure out what is going on here.
When playing around a little bit more, I realized that it works when I add position: relative to .affix-top. I suppose without that, the javascript was not sure where to "anchor" the element, and pushed it off screen. I have updated the fiddle accordingly.
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
I need to make a dynamic jQuery menu for showing products.
There will be one main picture with text and hyperlink on it, taking 60% of the screen, and on the right of it I need three small pictures (one above the other, horizontally) with 20% width of screen (but all together taking same height as the main one).
I need help for the animation. The animation will be next:
the three pictures on the right are sliding up, and the top most disappears, and a new one is appended to the bottom (at the same time as the top most is disapearing). Now, the one that dissapeared becomes the main one.
I've made an easy solution with .slideUp function, but that doesn't actually made the div go up, instead it is just losing it's height until it becomes invisible. It is not the solution I wanted.
Thanks.
EDIT:
I've managed to get some solution with jQuery.sliedUp function, but still I didn't get the effect that the client was asking for.
Now with a little bit more search, I've found that the jQuery UI hide function extension can do the effect I am looking for.
Here's an example: http://jsfiddle.net/WMPRJ/
My problem now is if you click on the top div, while it is sliding up, the bottom div does not follow it up and take its place. I need to do that. Please provide me with a solution.
Append the current main to the bottom of your thumbnails, slide up the top one and remove() it. Take its src attribute and set it to the main image.
Here's some (sorry, not a self-contained example) code that should get you where you're going. If you actually take the time to read it you'll see it does exactly what I described in the first two sentences.
$('.thumb').first().slideUp(function(){
$('#main').attr('src', $(this).attr('src'));
$(this).remove();
});
if this a homework please append homework tag.
I can't provide you with full HTML and javascript, but an idea. You have two blocks. Float the right block;
Left Block - 60%.
Right Block - 20% (float:right)
Define height for Right & Left block and give overflow:hidden for Right Block.
Now define a click function like this.
var nextAnimateImageId = 1;
$("#my_button").click(function{
jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId = nextAnimateImageId + 1;
});
My idea is, if you have 5 images, only 3 will be shown becaue of defined height and overflow:hidden property. When you animate the first image to height=0 (which is what toggle does), the 4th image will come up due to the space freed up, giving you a nice scroll up animation.
I am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img on it and a bar will appear. When you click there the bar is not precise. Its several pixels off.
this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?
-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question
position:relative;
The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.
Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.
The style can also be used to fix positioning and scrolling bugs in Internet Explorer.
It maybe too late for this issue but my experience can be useful here.
I had the same problem, i was getting 0, when i called getOffsetLeft() method.
you must add your widgets into container first and then call getOffsetLeft() method.