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
Related
I have embeded the following code onto my sharepoint online site. The image appears in the bottom right hand corner and once clicked it takes me to the top of the page, as coded; however the Jquery javascript code doesn't appear to work... The image just stays visible regardless of how many pixels are scrolled.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"><\script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top"><img style="border: none; height: 37.5px; width:50.5px" src="backtotop-1.png" ></a>
</div>
The above code encompasses both suggested solutions and still doesn't appear to work! The image is visible regardless of how much the page is scrolled, yet once clicked the image disappears. The code appears to work completely fine in a plain .html file.
Please help! Thank you very much in advance.
Current Console Error:
Check the jsfiddle link of your code. It works perfectly well. You just need to check the below line if the jquery 1.6.4.min.js:
<script type="text/javascript" src="http://code.jquery.com/jquery 1.6.4.min.js"></script>
This should be the right one: http://code.jquery.com/jquery-3.3.1.js
yeah, its your jquery source. have u seen a "space" in jquery src line, also you forget to close the tag. and for future dont forget to check the browser console for errors.
you can use the following fixed code in your source file.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<style>
body{
border: 1px dotted red;
min-height: 1000px;
}
</style>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top">
<img style="border:1px solid red; height: 37px; width:50px" src="https://i.imgur.com/WkCCy7L.jpg" >
</a>
</div>
let me know if this fixes your error now.
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'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck
I am relatively proficient in html and css, but am not with javascript and jquery. I am trying to get a div to move diagonally, however its not working.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
});
</script>
<div id="box1"></div>
</body>
</html>
I know its probably something really stupid, but does anybody know what the problem is?
Thanks!
You have to first make it position: absolute or relative in CSS.
#box{
position: absolute;
}
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Oh yeah, do this:
$("div#box1") //correct
instead of:
$("#box1 div") //incorrect
DEMO: http://jsfiddle.net/DerekL/bwg8R/
To animate something using left and top the element needs to be positioned. either relative or absolute, otherwise left and top don't do anything to the element.
See my example here: http://jsbin.com/ayafup/edit#html,live
And target your #box1 element directly as $(#box1), not all child div's inside it as you're doing, $(#box1 div)
Also move your scripts down to the bottom before </body> for better performance and better practice in general.
Give your div some position because left and top are used after position is set
<div id="box1" style="position:absolute;">s</div>
And in javascript
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
Should be
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Because the previos one was selecting child of #box1
Here is the best solution I find for animations effects.. I you don't have any constraint to support older version of browser than animation of you will be like eating a cake..
Try this http://daneden.me/animate/
Cheers...!!!
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