I have a mobile website. It's ajax based and when clicking a row from a table in the main screen, a div is populated with ajax data and then fades in, occupying the whole window, in fixed position. Then the user can navigate the div like if it's a separate window but can back out to the main table (fading out the fixed div). So, when the user navigate the fixed div, in reality there is also the main page body in the background. Would disabling/hiding the background main page make the website more lightweight for a mobile or not? The structure is similar to:
<html>
<head>
<script>
function navigateIn(url){
$.get(url,function(data){ //get data from url
$('#navigate').html(data); //put data into div
$('#navigate').fadeIn(200,function(){ //fade in div
//Now, after div is faded in, hide the background:
$('#main').css('overflow','hidden'); //Is this helpful?
$('#main').css('visibility','hidden'); //Is this helpful?
$('#main').css('display','none'); //Is this helpful? This void the scrolltop of the body, so it's not my greatest choice
});
});
}
function navigateOut(){
//Display the main page before back out!
$('#main').css('overflow','');
$('#main').css('visibility','');
$('#main').css('display','');
$('#navigate').fadeOut(200);
}
</script>
<style>
#navigate {
position: fixed;
height: 100%;
width: 100%;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
</style>
</head>
<body>
<div id="main">
<button onclick="navigateIn('http://www.test.com');">Navigate In!</button>
</div>
<div id="navigate"></div>
</body>
</html>
Here's a jsfiddle which is showing what I'm talking about: jsfiddle
But the effect is a bit different because it's not full screen view.
I don't actually know how to test by myself if it's helpful or not (or even worse) to hide the content. So I ask to you.
PS: I know it's not a beautiful effect when fading in, but in reality I made a slideIn from right extension, so it's much better...
Related
I am making a webpage. Code can be found here: https://jsfiddle.net/saTfR/50/
I would like to insert a menu on the left side which will scroll down to different sections of the webpage which I will later add. I want the background map image to always stay in the same position when scrolling. I would like to make a section in the menu called "Portfolio" which will scroll down to different PNG images which I will insert. I would like for the user to be able to click on a PNG image and a new tab will open so that the user can better see the image.
I would also like my logo.png image to be displayed on the top-right hand corner of the page and be visible whenever the user scrolls up and down. (The logo cannot be currently displayed in the link because it is saved in my computer).
HTML:
<p class="text">text</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">text</p>
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
.text{
color:white;
z-index:999;
position:fixed;
bottom: 10px;
right: 5px;
left:60%;
font-size:25px;}
</style>
JavaScript:
$(".text").hide().fadeIn(2000);
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
You can easily apply your image as background image and fix it.
Example CSS:
body {
background-image: url('your_image.jpg');
background-attachment: fixed;
}
It will stay fixed but the page's contents will scroll like normal above that background image.
To put the logo in the top right corner and make it stay, you need to give it a position: fixed and the place it in the corner (with html or top/left/margins in css). You may also want to give it a higher z-index to ensure it stays on top. I would provide code example but I'm on my mobile right now.
Now that I'm back, here is some sample code to get you started.
#logo {
position: fixed;
right: 0;
top: 0;
z-index: 10;
}
Please see #Mischback's answer for CSS background-image.
Please see the very useful fancyBox.js utility with regard to your image inquery.
The fancyBox jQuery pluggin makes image manipulation and viewing Super Easy.
I will let someone else anwer how to fix/lock a logo to the top of the screen when scrolling.
I agree with Mischback but I would actually put the image in its own instead of the body.
HTML
<div id="image"></div>
CSS
#image {
background-image: url('image.jpg');
background-attachment: fixed;
}
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);
Lately I have come into a dead end. I'm trying to expand the footer (#footernotes) and that works, it's basically a div behind the body (done with z-index) and when you click on a button it moves down. The scroll bar goes with it too, meaning that the page is now longer.
But what I'm trying to do is to make the viewport move with the expanded div. What happens now is that when I press the button (.secret) the div (#footernotes) comes in but it is still out of the viewport UNLESS you manually scroll to view the longer page.
So to some it up, how do you make the viewport automatically scroll down after you expanded the page? In other words, how do you make the viewport stay at the bottom of the page.
Here is my code:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
return false;
});
});
</script>
<div id="footer">
</div>
<div id="footernotes">
</div>
</div> <!-- end #footer -->
And the CSS for #footernotes
#footernotes {
background-color: red;
width: 100%;
position: relative;
top: -80px;
height: 150px;
z-index: -400;
}
EDIT: While typing up the question I figure out the answer, you have to use the scrollTop. I have added the line code in the example below:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
$('body,html').animate({scrollTop: "210px"},1000);
return false;
});
});
</script>
You can still answer this if you think there is a better way, I just thought I'll leave this question posted in case other people have the same question.
document.getElementById('divID').scrollIntoView();
try and see if that would do the job.
It can be done using Jquery method .focus(). just need to add
$(divname / .class / #id).focus();
and it would be done.
I once came across a script or article about the following issue:
Imagine a page which is scrollable with multiple elements inside that are also scrollable. When scrolling down the page, the cursor will come across elements that are scrollable, and they will take focus. Resulting in having to either remove your cursor from that element, or scrolling down that element before you're able to scroll the entire page again.
The demo I saw fixed that issue by only focussing on the scrollable elements after cursor movement or some sort of interruption of the scrolling. So when you would scroll down the page you could keep scrolling (floating over the scrollable elements) without interruptions.
Does anyone know what script I'm talking about?
If I understood ok otherwise let me know: if you want to detect scroll event then you have to use scroll() from jquery page.
try this example:
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
p { color:green; }
span { color:red; display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
<script>
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
$("span").css("display", "inline").fadeOut("slow");
});
</script>
</body>
</html>
See here the demo: http://jsfiddle.net/4M7XK/ (minimize the height of the bottom right block)
I am sorry, but I do not now the original article you are referring to, but here is idea, how I would make it work.
Once the users starts scrolling. (e.g. $(window).scroll(function(){...}) from jQuery ), I would place a empty div to cover the whole page from top to bottom. This element would be above all other possibly scrollable divs, preventing them every catching the scroll event. It element has to be removed with a few miliseconds timeout.
$(window).scroll(function(){
var $cover = $('<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: '+ $(document).height() + 'px; z-index: 100000">asdasd</div>')
$cover.appendTo($("body"));
setTimeout(function(){
$cover.remove();
},200);
});
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.