I have this code:
$("#result").html('<div class="loading">Loading results...</div>');
$("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'));
It shows the loading div until the load is done. What I want to do here, I want the loading div exactly in the center of the page/document?
That's extra but could be nice - can I also fade the document until the load is done so that the loading div stands out?
Any jquery/css suggestions are welcome.
Thank you :)
If understand you question correctly: You need to figure out how to center the loading div both horizontally and vertically? If so, I would take a look at the answers to this question: Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7.
Have you looked at jQueryUI? You could use a modal dialog for this. jQueryUi automatically centers the modal dialog and you can make the dialog disappear after it's finished loading. There is a way to remove the title bar from the dialog:
http://www.comanswer.com/question/jquery-ui-dialog-how-to-initialize-without-a-title-bar
I don't know if this is what you're looking for, but it might avoid some headaches for you later down the road (and it's pretty and you can have custom themes).
you could put a center div around your loading...
$("#result").html('<div align="center" style="width:100%"><div class="loading">Loading results...</div></div>');
.loading {
width:200px;
height:50px;
background:#CCC;
position:absolute;
top:50%;
left:50%;
margin:-25px 0 0 -100px; /* Half of height and width */
}
If you don't know width/height or it is dynamic, you can use .width() and .height() functions to get values, which should be divided by 2.
This might be a bit over-kill but the jQuery UI dialog plugin could achieve those effects (you would just not be using it for a dialog...). Check out the modal option and example. If you are using jQuery ui already, might be worth it...
Related
I am working on a small VA project and I am attempting to pull stats from another website. The only way I have been able to find out how to do this, is by using an iFrame with the clip function.
Website is: NWGlobalVA.com
Now the Issue I am having is if you go to the main page and re-size the browser in anyway it pushes behind the map element. I have tried everything in my knowledge and research to make it re-size with the container.
Below is the code I use with the iFrame and CSS to do the clipping. Any help would be much more appreciated then you will understand. I have been trying to do this for a couple days now. Ideally I would rather just get the information once every 15 minutes and pass it to my database. However on the website none of the tables are defined and I would know how to go about that.
<style>
.iframeb {
position: absolute;
left:-384px;
right:0px;
top: -145px;
clip: rect(190px, 625px, 350px, 400px);
}</style>
<iframe width="890" height="1900" src="http://fscloud-infotool.de/index.php?page=vasystem&subpage=vadetails&id=10277" class="iframeb" scrolling="no" frameborder="0"></iframe>
The way I deal with iframe size is with javascript (jquery):
I calculated the original iframe aspect ratio by taking the width/height. So in your case: 890/1900.
<script>
function size_iFrame()
{
// If the width and height of the iframe are set
// as attributes (<iframe width='890' height='1900'>),
// you can have the js calculate it for you.
// aspect= $('iframe').attr('width') / $('iframe').attr('height');
aspect= 0.47;
$('iframe').css('width', '100%');
$('iframe').css('height', $('iframe').width() / aspect);
}
$(document).ready(function()
{
size_iFrame();
$(window).resize(function()
{
size_iFrame();
});
}
</script>
This will fit the iframe to the width of its container and give it the same aspect ratio as it initially had.
Edit: To answer your question, i'd call it from the ready callback and setup and window resize callback to call every time the screen size changes. I edited my code above to show this.
Edit2: As #mugé points out, you'll also need to remove your iframe css styling for my method to work.
In responsive design, I assign the iframe a container sized inside the CSS. For example,
CSS
.iframe_container {
display: inline;
float: left;
width: 89%; //whatever width you want
}
You will need to eliminate your .iframeb absolute, right, left positionings, because the container will take care of it all, unless you are talking about the 'List' parameters on top of the map, I would try to use #media to arrange clean lists according to screen sizes for the .iframeb class.
I am creating a small html file for myself just to try some new things. so far, I have a header, a background, and a center area for content. it is in the center and the position is set as fixed.
I want to make it so when someone scrolls down, the center area will move up. So there wont be large white-space at the top. Also, when they scroll up, so the center is near the top, it wont go over the header.
I"m sure this can be done with JavaScript. But, I'm not too sure how.
I'm sorry if this is unclear.
I recommend using jquery to accomplish this.
You can bind an event listener to the scroll event, the handler is passed an event object with all the information you need to achieve your desired result (scrolltop, pageX, pageY, etc....)
Once you have captured the scroll event, you can tell where the user scrolled to (how far down), and position your div accordingly.
http://api.jquery.com/scroll/
This could be achieved using javascript or Jquery (Jquery being the easiest of the two).
1.) Use arbitrary pixels to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > 120px)
{
....perform div transition...
}
}
OR
2.) Use the position of the target div to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > $("#TargetDiv").offset().top;)
{
....perform div transition...
}
}
If you use the second solution, be sure that you call Jquery and this script after the DOM is loaded i.e. after </body>. Otherwise it won't be able to define the #TargetDiv.
This can be done without use of jquery or javascript, if you are looking to do what I think you are.
http://jsfiddle.net/wN8c8/
by setting your content to a fixed size and setting the content to overflow:auto;
likewise, you could also set your page background-attachment to fixed, and create the illusion that the text is 'appearing' without the page moving. You can certainly go more in-depth with it using scripting, but it really depends on your intention.
z-index will also allow you to build your page in layers, so that you can determine what shows and what is hidden behind other page elements.
body {
background-color:yellow;
}
#header{
position:fixed;
width: 100%;
height:20px;
background-color:red;
z-index:2;
}
#content{
position:fixed;
width:80%;
height:60%;
background-color:#ddd;
overflow:auto;
margin:0px 10%;
z-index:1;
}
<div id="header"></div>
<div id="content">
This is some content.<br/>
This is some content.<br/>
This is some content.<br/>
</div>
I have a site that I've been working on the the past couple of weeks. I have a very nice footer on it, problem is, it doesn't stay at the bottom. I've come up with a simple solution.
If the page isn't completely filled (i.e. the content only goes half way down), absolute position the footer to the bottom.
If the page is overflowing (vertically), leave the footer as just another element.
Problem is, I don't know how to check if my content is overfilled. Is there a way to check if the document fills up all the space vertically? The only thing I can think of is to check to see if the vertical scroll-bar is enabled, however, I don't know how to check for that either.
I'm using jQuery, answers with it are fine. Thanks!
EDIT
OK, my question was apparently misunderstood. Sorry guys, I don't need solutions on how to keep my footer at the bottom. I need ways of determining if data overflows on the y-axis. I happened to mention my reason why I needed to know this. Don't make me regret this guys :p
I've used this successfully many times over: http://cssstickyfooter.com. No JavaScript needed at all.
Using jQuery, $(window).height() is how you get the height of the viewport. You can check this value against your content's height:
if($("#content").height() > $(window).height()) {
// absolute position my footer
}
Use the Sticky Footer technique like Matt posted.
The basic idea of it is that you set a static height for your footer. Make your webpage take up the full height of the browser. Push the footer off the screen from the #content div, and then move the footer back onto the page with a negative margin value.
It's hard to answer without seeing your HTML, but if you are using jquery just use outerHeight to get the vertical size of the elements on your page and compare it to window.height
You could apply the css clearfix trick. As stated it is hard with out seeing your code. Even still this could work.
Example:
<html>
<style>
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<body>
<div id="content" class="clearfix">
</div>
<div id="footer">
</div>
</body>
</html>
This helps to keep content from overflowing and should keep your footer at the bottom or below your content.
Can we have an image which spans over multiple columns which is created using CSS3 multicolumn property in an Html page. Here is my column layout style
div#column {
margin-left:20px;
-moz-column-width: 250px;
-moz-column-gap: 20px;
-webkit-column-width: 250px;
-webkit-column-gap: 20px;
height: 850px;
}
I need to place an image within this column layout which spans over atleast 2 or 3 columns.
Theoretically there is column-span, however it doesn't seem to be supported by any browser currently.
You could try with position:absolute as Simon suggests, but I doubt you will can satisfactory results and I don't think there is any other reasonable workaround.
Maybe there are JavaScript libraries that can do it...
Add a width on your div and add this style
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
See reference: >>
I asked #Krishna to post this question since our other SO question/answer session Increase font size with JavaScript around fixed floated images in CSS columns was getting off-topic, i.e. it was solved and this image spanning multiple columns warranted a new question.
So, my thoughts so far...
column-span is working in Webkit (Chrome12) for me. Check out the quirksmode demo page. However, the bad news is that it doesn't help solve this problem as the image that needs to span multiple columns still gets clipped at the column-width, so I don't think it is the solution.
For now I think the only solution is to do the columns yourself in JavaScript, or maybe try and use/modify the jQuery columnizer plugin.
Oh and I just found this other question CSS3 Columns and Images which basically agrees that it is impossible without JavaScript.
There is already have a lot of JavaScript for your font increase/decrease (different question, see my fiddle) so it would have been great if CSS supported this natively. All we want is big Yoda to spill over into the second column :-)
So I think that the only solution currently is:
For each image that is greater then the width of a column, work out how much into the next column it would be (including the column-gap)
Add a spacer floating <div> in the next where the image needs to overlap to, so that the words correctly continue to flow around and below the image
Absolutely position a copy of the image over the top.
I just hope you don't want images that span more than 2 columns otherwise it's going to complicate an already complex solution!
Use position:absolute, like this:
#image {
position:absolute;
top:300px; //distance from top
left:200px; //distance from left
width:600px; //image width
height:400px; //image height
}
Let's say if I have wrapper div which includes some links and images,
is there any way I can deactivate it at once with CSS only?
After review of answers:
I dropped the idea that can make it with CSS only.
jQuery blockUI plug in works like charm.
There is a CSS rule for that, but it's not widely used because of old browsers support
pointer-events: none;
These days you can just position a pseudo-element over the content.
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
http://jsfiddle.net/HE5wR/27/
I think this one works too:
CSS
pointer-events: none;
if you are going to use jQuery, you can easily accomplish this with the blockUI plugin. ...or to answer your question with CSS, you'll have to absolutely position the div over the content you wish to block. just make sure the absolutely positioned div comes after the content to be blocked for z-indexing purposes.
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
Content to be blocked.
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
sorry for all the inline css. you'll have to make some nice classes. Also, this has only been tested in firefox and IE7.
Cover it up with another un-clickable element. You may need to use JavaScript to toggle this "cover" on and off. You can do something clever like make it semi-transparent or something as well.
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>
You should consider to apply the event.preventDefault function of jQuery.
Here you can find an example:
http://api.jquery.com/event.preventDefault/
TL;DR-version:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
BAM!
If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never really been possible.
You can use the jQuery BlockUI plugin or the CSS rule pointer-events: none; but that doesn't really prevent people from copying your text or images.
At worst I can always wget your content, and at best both css and js methods are easily circumvented using plugins like:
"Allow right click" on firefox or chrome
"Absolute enable right click and copy" on firefox or chrome
"Don't fuck with paste" on firefox or chrome
Further to the point, unless you have a really good and legitimate excuse for breaking basic browser behavior, usability, accessibility, translation functionality, password managers, screenshot tools, container tools, or any number of various browser plugins functionality in the users right click context menu, please, just, stop, doing, this.