How can I add loading effect on <div>. In this code my members.php is so big file so its take time to load. So I want to show that loading… in my member <div> with effect. my javascript skills are so poor so I don’t know is this a right idea to do this or I have to code in member.php. I am so new and try to learn so please help me. I have tried with some free text javascript effect but I couldn’t find what I looking for. I want some image effect like rounding circle or something like that. Here is my code. I appreciate all answers.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#member').load('members.php').show();
});
</script>
</head>
<body>
<div id member>Loading…</div>
</body>
jQuery
function showLoading()
{
$('<div class="loading"/>').appendTo('#member');
}
showLoading();
$('#member').load('members.php');
CSS
.loading {
background: url('') no-repeat;
padding: 12px;
}
Replace the url with the path to the loading image you want, and the padding should be half the image area size.
Simple fiddle available here
Related
Hi I'm working on a project to show the Earth and I need some buttons to appear alongside it, at the moment I can only get my buttons to show up either below or above the javascript. I've included a screenshot and my html code, I hope someone can help, thanks so much, let me know if there's something missing that you'd need to be able to help.
HTML:
<body>
<div id="webgl"></div>
<script src="js/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/earth.js"></script>
<script type="text/javascript" src="aud.js"></script>
<script type="text/javascript" src="date.js"></script>
<input type="image" id="intro" src="images/icon-intro.png"/>
</body>
</html>
Image:
Here you can see the button outside of the scene, I want it to be placed over it instead.
Give the button an absolute position and, if necessary, some z-index like so
#intro {
position: absolute;
left: 300px; /* X coordinate, adjust as needed */
top: 300px; /* Y coordinate, idem */
z-index: 10; /* This should be needed only if the #webgl container has already some z-index value*/
}
you can use the div overlay to show the buttons over the earth image ..for more information please refer the following link
for that you can set z-index of button greater then the z-index of image ...thus making the button to appear over the image
I am fairly new to web development. I am trying to apply jQuery to my website, such that when the page loads up, the heading is animated. But for some reason I am not able to get it working. Here is the javascript code :
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
Here is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<title> Welcome! </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery_functions.js"></script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
CSS left only works with absolutely positioned elements. If you add position:absolute to your H1 tag, it will work.
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
h1 { position: absolute; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<h1>Hello!</h1>
This is because h1 may have a static position. You may need to set a CSS relative or absolute position to that element like
h1 {position: relative}
and this jQuery code will work
$(document).ready(function () {
$("h1").animate({
left: 250
});
});
See JSFIDDLE
I'm new myself but it appears your animate option is missing an argument.
$('img').animate({left: "-=10px"}, 'fast'); is an example. yours tells it how much to move, but you left off the how.
You can try changing
$("h1").animate({left:'250px'});
to
$("h1").animate({marginLeft:'250px'});
maybe $(doucment).ready()
I think it will be work ))
I can't seem to find a javascript(jQuery or other) effect that works like I want it to. I was hoping someone can help me out.
I am working on a project that has 3 content boxes wrapped within a larger div. I am thinking of adding a "Get A Quote" button that will take the larger surrounding div and drop it when you click on the "Get A Quote" (think scooby doo(pull book out of bookcase and the wall drops)) and have it bounce when it hits like it actually has weight. Then go back up after the user has filled out the "Get A Quote" form.
I hope that makes a marginal bit of sense.
Just ask if you would like clarification or if you would like me to post a sketch of how it works.
This is an already available feature in JQuery UI. http://jqueryui.com/demos/show/.
This is how you do it
<style type="text/css">
#mydiv{
width:300px;
height:300px;
background:red;
display:none;
margin-top:30px;
}
</style>
<button>clickme</button>
<div id="mydiv"></div>
<script type="text/javascript">
$('button').click(function(){
$('#mydiv').toggle('bounce',300)
});
</script>
You can see a working example at http://jsfiddle.net/TUFaw/
I used toggle which means if you click on the button again, the effect will be revered back to hide the box. You can use many of the available effect (blind, clip, drop, explode, fold, highlight, puff, pulsate, shake, slide, size, scale)
If you never worked with jQuery before, make sure you include the required CSS and JS files.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
I've added a flash gallery to my site and the required script is causing the background image to shift.
You can see the page here: http://www.arbitersoflight.net/media/screens.html
The script in question is the "swfobject.js". I've determined this by adding/removing the
<script type="text/javascript" src="/scripts/flashgallery/swfobject.js"></script>
line to my site (which is required to run the gallery). Obviously, due to the layout of my site, I cannot having the background being moved...so this is very annoying. Unfortunately I know next to nothing about coding so I lack the skills to find the problem myself. I would really appreciate any help you guys can give me here.
I'm not sure why this is happening, but if you add the following CSS to the following tags it will fix it:
#header { position:relative; top:15px; }
.scroll-pane { position:relative; top:-15px; }
EDIT:
Another reason this might be happening is from white-space in this script tag:
<script type="text/javascript" id="sourcecode">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
A possible way to fix this would be to save that code to a file and include it as:
<script type="text/javascript" src="/scripts/jscrollpane/jquery.jscrollpane.init.js"></script>
It is possible not to show html page in user browser until some JavaScript(built-in or in separate file) will be loaded and executed(for page DOM manipulation)?
The easiest thing to do is to set the css variable
display: none;
to the whole page.
then when everything is loaded you can set the display to
display: block; // or something else that suits.
If you make sure that piece of CSS is loaded at the very start of your document it will be active before any html is shown.
if you use a javascript library like jQuery you'll have access to the $(document).ready() function, and can implement a switch over like this:
<html>
<head>
<title>test</title>
<style type="text/css">
body > div {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('body > div').css('display', 'block');
});
</head>
<body>
<div>
This will initially be hidden.
</div>
</body>
</html>
Not in the classical way you'd distribute a page. Browsers will (usually) start to display chunks of the base HTML file as it arrives.
Of course, you could simulate this by generating all the HTML on the fly from some included Javascript file. But that doesn't sound like a good plan as it will degrade horribly for people without JS enabled, or if you have a minor bug in your script. A better option might be to style the body tag to display: none and restyle it from the script to make certain parts visible again.
What is it you're actually trying to achieve? It sounds like there's likely to be a better way to do this...
Place the content of HTML page in a DIV, make its diplay none and on load of body diplay it.
<script type="text/javascript">
function showContent() {
var divBody=document.getElementById('divBody');
divBody.style.display= 'block';
}
</script>
<body onload="showContent()">
<div id="divBody" style="display: none;">
<--HTML of the page-->
</div>
</body>
Examples of what you might want to do:
Facebook's "BigPipe": http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
This method allows you to load JS first then ASYNC+inject all DOM content.
GMail
Zimbra (open-source web app similar to MS Outlook/Exchange)
My understanding is that you want to run some javascript code before you load the page. In the js file you write your init function and add the eventlistener to the window on "load" event. This will ensure that the init code gets executed first and then you can start displaying the HTML content.
var Yourdomain = {};
YourDomain.initPage = function(){
/* Your init code goes here*/
}
window.addEventListener("load", YourDomain.initPage, false);
All You really need to do is give your element an ID or CLASS and use the dislay: none; property. When your ready to show it just delete it.
CSS:
#div_1 {
display: none;
}
HTML:
<div id="div_1">
<p>This will be the hidden DIV element until you choose to display it.</p>
<p id="js_1"></p>
<script>
var x = "Some Test ";
var y = "Javascript";
document.getElementById("js_1").innerHTML = x + y;
</script>
</div>