Move loading div down as ajax content loads - javascript

The form I am creating for a mobile website shows new fields based on previous selections. i.e. - a user selects and option from a dropdown menu (a date) and then a series of times shows up based on the day selected. The times are not showing until the day is selected.
I have a spinning loading div while the times are loaded in the background via ajax. The problem I am having is that the loading div sits at the top of the page when the 'action' is taking place about three-quarters of the way down. This 'action' part is in the viewport (it's a mobile website) and the loading div is at the top of the page - which is far above the users viewport.
How can I bring the loading div down so that it's always in the current viewport? How can I make the loading div follow the place in the form where the user currently is taking into account scrollbars?
I have been trying to use the vertically centred html/CSS model as described here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
But it is not working and the centre of the page doesn't seem to update at each event when a form element is clicked. I think I need to use the focus or blur event for the form field to update this and reassess, but I don't seem to be able to get it working.
Does anyone have any tips on how to move the loading div to the centre of the current viewport area each time the page increases in length?

If your loading div is designed to be inside the document flow - e.g. a new content block inside the form - it's best to use jQuery to insert the loading div inside the content itself. It will be very difficult to position it pixel-perfect otherwise.
If the loading div is to appear as an overlay to the document then you can use fixed CSS positioning with a high z-index. To center it on all screen resolutions use jQuery and the formula (window.height() - div.height())/2 as the top pixel position. The code will be similar to this answer.
Hope that helps

If you do something like this, and put the div inside your <body> tag, it will stay in the middle of the visible area.
div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}
Another solution is to put it at the end of the container content will be loading into. Just make sure to load the content before it. If you give it a margin:auto; it'll stay right in the middle and keep pushing down.
EDIT: It's also worth noting the answer here. This will prevent covering up something important in a way the user can't fix.

Set your loading div's position to fixed, this will of course cause it to escape from its parent in the DOM structure, you will then need to position it where you want it. Fixed positioning is relative to the visible area of the viewport.
<html>
<head>
<style type="text/css">
#loader {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
This will result in the loader div always being centered on the screen, no matter where the user has scrolled, left/right up/down.

Related

Dynamically calculate top property with javascript

I am trying to write a script, so elements on a page scroll slower/faster than their parent div. I have wrote this:
$('#two').css({'top' : 600-($(this).scrollTop() / 1.2)+"px"});
My element is already 600px from the top and if I start scrolling the page from top-everything is fine, since it has these 600px to calculate from, but if I refresh the page right on the element, it jumps top, and console logs that top is calculated from 0, but not from 600px, where it is placed.
I tried to rewrite using offsetHeight and other methods(e.g.offset().top), but nothing seems to work.
Could you, please, give me a hint on how to make it recalculate dynamically, so when refreshing the page from the middle it won't jump up?
Use position fixed property Even when you scroll the element's position remains fixed.
<style>
#two {
position: fixed;
top: 600px;
}
</style>

when a div is not displayed, forget this css rule

I have a situation where I have 3 divs :
- Menu - Header (#rt-top-surround)
- Showcase (#rt-showcase)
- Main Body content (#rt-mainbody-surround)
The Menu is 'sticky' with position: fixed. Therefor I have to move the div that is rendered below it with padding (padding-top: 120px; margin-bottom: -120px;).
The problem that I run into is that on some pages the second DIV is #rt-mainbody-surround. (Than this div is rendered properly.)
But on other pages I have #rt-showcase (that displays some promotional images) as second DIV followed by the main body DIV.
So what I would need to implement is a rule that not adds the padding & margin on the rt-mainbody-surround div when the rt-showcase is displayed. And I'm not wether to do this with Javascript or with PHP and how to accomplish this.
I've made an illustration to show what I exactly mean.
Hope anyone can help me out here! Thanks!
Illustration
If I understand the question correctly you want a margin below a specific div only if another div isn't actively visible. The best way to handle this is to add a bottom margin to the top div and negative margin to the div below it (that can be shown and hidden). The css for that is:
.top {
margin-bottom: 20px;
}
.middle {
margin-top: -20px;
}
Sometimes a picture is worth more than some code though so I created a fiddle here. Enjoy!

Animating divs in a set

I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!
Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.

insert div at top of page without overlaying using javascript

I wonder if anyone can help me please ?
Basically I have a snippet of Javascript that I want to be able to give people. So the following is true :
I can't control wherabouts in the page they decide to put the snippet (for various reasons) - It could be in the middle, the end, wherever.
All the snippet does is put a small DIV at the top of their page. At the moment I am doing the following (this is the snippet):
<div id="mydiv" style="display:none; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 40px; background-color:red; text-align:center; color:white"><br>Message Inside Div</div>
<script>if (Condition) { document.getElementById("mydiv").style.display = "block"; }</script>
Now, that works a treat and when "Condition" is true, it shows the div. However, using this method it overlays the div with it fixed to the top of the page.
However, I also want to do it so that the div is inserted at the top of the page but scrolls with the page as normal and DOESN'T overlay the content at the top (IE: It pushes the content down when it appears).
Any ideas on how I would do that please, remember : I don't have any access to their page (I don't even know what else is on the page) and the snippet I give them could go anywhere on the page.
I guess you can't avoid meddling with the existing code and stylings - but in case you're worried about existing top-margins on body, just check for this value first. ie. get the body top margin value, add your elements height, reapply. Example in jquery syntax (out of simplicity, can do the same in vanilla javascript)
$('body').css('margin-top',$('body').css('margin-top') + yourdiv-height);

Is it possible to get an adjustable "view" of a static image in HTML?

I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.

Categories

Resources