I want to have a div that is on the center of the page (I use 300px now) and when some seconds pass, I want to make visible a second div and make them both to be at the center with 50px difference, this is what I've done now, my first problem is why the opacity change of the second div doesn't apply?
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<meta charset="utf-8" />
<style type="text/css">
#main {
position: absolute;
top: 200px;
left: 300px;
}
div.c {
width: 200px;
height: 200px;
float:left;
position:relative;
left:200px;
-webkit-transition:left 2s;
}
#left {
background-color: palevioletred;
}
#right {
-webkit-transition:opacity 2s;
background-color: ThreeDDarkShadow;
opacity:0;
}
</style>
<script type="text/javascript">
window.onload = function () {
setTimeout("myfunc()", 3000);
}
function myfunc() {
var stupido = document.getElementsByClassName("c");
for (var i in stupido) {
stupido[i].style.left = 0;
}
document.getElementById("right").style.opacity = 1;
}
</script>
</head>
<body>
<div id="main">
<div id="left" class="c">x</div>
<div id="right" class="c">x</div>
</div>
</body>
</html>
As stupido is an HTMLCollection instead of an array, its length property got looped through. stupido[i].style === undefined, generates error, script crashes.
Change for(var i in stupido) to for(i=0; i<stupido.length; i++)
Also, don't use string in setTimeout when possible
Working fiddle
Related
I am expecting the images to shift to the right. Runner increments and prints 1px, 2px, 3px etc. to console, but new margin wont be set. What's the problem?
Together with the code below, what I have written above should be sufficient to understand my problem. But I am, at this point, simply writing to get rid of the prompt to write more text.
<body>
<div class="normal">
<img id="normal" src="whiteboard.jpeg">
</div>
<div class="scaled">
<img id="scaled" src="whiteboard.jpeg">
</div>
</body>
<style>
.normal{
background-image: url('whiteboard.jpeg');
position:absolute;
z-index:-1;
}
.scaled{
transform:scale(120%);
z-index:2;
clip-path: circle(5% at 33% 42%);
}
.normal, .scaled{
width:100vw;
}
div img{
width:100%;
height:auto;
}
</style>
<script>
window.onload=function(){
const normal = document.getElementById('normal');
const scaled = document.getElementById('scaled');
let runner =0;
setInterval(function(){
normal.style.marginRight="-"+runner+"px";
scaled.style.marginRight="-"+runner+"px";
runner++;
console.log("respons - "+runner+"px")
},50);
}
</script>
The marginRight style describes the distance of the div element to its parent's right side. A negative marginRight will not work here - instead try marginLeft. Depending your desired direction of the animation use a positive or negative value.
window.onload = function() {
const normal = document.getElementById('normal');
const scaled = document.getElementById('scaled');
let runner = 0;
setInterval(function() {
normal.style.marginLeft = "-" +runner + "px";
scaled.style.marginLeft = "-" +runner + "px";
runner++;
console.log("respons - "+runner+"px")
}, 50);
}
<body>
<div class="normal">
<img id="normal" src="whiteboard.jpeg">
</div>
<div class="scaled">
<img id="scaled" src="whiteboard.jpeg">
</div>
</body>
<style>
.normal {
background-image: url('whiteboard.jpeg');
position: absolute;
z-index: -1;
background-color: blue;
}
.scaled{
transform: scale(120%);
z-index:2;
clip-path: circle(5% at 33% 42%);
background-color: red;
}
.normal, .scaled{
width: 100vw;
}
div img {
width: 100%;
height: auto;
}
</style>
I'm using snap.svg
I have index.html
<!Doctype>
<html>
<head>
<title>MAP_TEST</title>
<meta charset="utf-8">
<script type = "text/javascript" src = "JS/jquery.js"></script>
<script type = "text/javascript" src = "JS/init.js"></script>
<script type = "text/javascript" src = "JS/snap.svg.js"></script>
</head>
<body>
<div class="comm_cont">
<div id = "svgborder">
<svg id = 'svgmain'></svg>
</div>
</div>
</body>
</html>
And init.js
$( document ).ready(function() {
var s = Snap("#svgmain");
var g = s.group();
Snap.load("SVGFILES/3k1e-test.svg",function(lf)
{
g.append(lf);
//trying to load picture... Scale button in future
$('<img />', {
src: 'PNG/plus.png',
width: '30px',
height: '30px',
id: 'buttoninrk'
}).appendTo($('.comm_cont'));
//this button must be on picture
//but in front of the picture svg element
//And i can't click the button
});
});
I played with z-indexes of #svgborder and #buttoninkr but it didn't help me.
How to put button in front of svg element?
#buttoninkr, #svgborder
{
position: absolute;
}
#svgborder
{
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninkr
{
z-index: 1;
}
Added css code with z-indexes.
There is a reason why i'm not using svg buttons instead jquery image button.
Ok, as you can see #svgmain in front of plus.png
http://jsfiddle.net/3wcq9aad/1/
Any ideas?
Solved
#svgborders
{
position: absolute;
background-color: #535364;
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninrk, #buttondekr, #home_btn
{
position: inherit;
top:0;
margin:10px;
z-index: 1;
}
#buttoninrk
{
right:0px;
}
#buttondekr
{
right:60px
}
EDIT: It wasn't the position of the div that made the difference, but simply adding a width and height. So the original HTML works fine as long as you add a width and height to svgborder in the CSS:
http://jsfiddle.net/3wcq9aad/4/
(Note that sometimes, the position of an element within a document can make a difference to how z-index works.)
If you put the svgborder div before the svg, then z-index will work, but you'll need to know the width and height of your SVG and set it on the svgborder div.
<body>
<div class="comm_cont">
<div id="svgborder"></div>
<svg id='svgmain'></svg>
</div>
</body>
#svgborder
{
z-index: 2;
width:330px;
height:150px;
...
}
Fiddle: http://jsfiddle.net/3wcq9aad/3/
svg does not support z-index
Use element position instead:
$('element').css('position', 'absolute');
Is there a way in jQuery to bring a div to front?
Im trying to use simple jquery offset() and animate to make my div scroll to the desired div when the user clicks on a link.
Basically, when the user clicks blog it will go to test1
user clicks Contact it will move to test2
user clicks Work it will move to test3.
I implemented some code I had used in a previous project (it had worked before) but the scrolls are not working correctly this time and I really don't know the reason why. I tried searching for a solution but web development has been an on and off thing for me and I don't understand some of the explanations :/ Any help would be appreciated.
EditOne: had to update the html, still not working.
The HTML:
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<title>Bryan the Lion</title>
</head>
<body>
<script type="text/javascript">
function go_One(){
var divPosition = $('.test1').offset();
$('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
}
</script>
<script type="text/javascript">
function go_Two(){
var divPosition = $('.test2').offset();
$('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
}
</script>
<script type="text/javascript">
function go_Three(){
var divPosition = $('.test3').offset();
$('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
}
</script>
<div id = "header">
<h1>Title</h1>
</div>
<div id = "main_box">
<div id = "designHex">
</div>
<div id ="nav">
<ul>
<li id = "Blog"></li>
<li id = "Contact"></li>
<li id = "Work"></li>
</ul>
</div>
<div id = "main_wrapper">
<div id ="main">
<div class = "test1">
<p>some div</p>
</div>
<div class = "test2" >
<p>some div2</p>
</div>
<div class = "test3" >
<p>some div3</p>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS: Of most importance here I think are main_wrapper, main, and test(1)(2)(3)
body{
height: 100% ;
background: url(images/gplaypattern.png);
}
#font-face {
font-family: "AlexBrush";
src: url(fonts/AlexBrush-Regular.ttf) format("truetype");
}
#header{
height: 100px ;
margin-bottom: 20px ;
}
#main_box{
margin: 0 auto ;
width: 80% ;
height: 52 0px ;
}
#main_wrapper{
margin-left: 45% ;
width: 67%;
overflow: hidden;
}
#main_wrapper #main{
width: 103%;
height: 500px ;
overflow-y:scroll;
}
.test1{
height: 500px ;
background: yellow;
}
.test2{
height: 500px ;
background: blue;
}
.test3{
height: 500px ;
background: gray;
}
#nav{
float: left;
width: 275px ;
height: 450px ;
margin-left: 3% ;
}
#nav ul li a{
display: block;
width: 100% ;
height: 150px ;
}
#nav ul li a:hover{
cursor: pointer;
}
#nav #Blog{
background: url(images/Blog.png);
}
#nav #Blog:hover{
background: url(images/Blog_hover.png);
}
#nav #Contact{
background: url(images/Contact.png);
}
#nav #Contact:hover{
background: url(images/Contact_hover.png);
}
#nav #Work{
background: url(images/Work.png);
}
#nav #Work:hover{
background: url(images/Work_hover.png);
}
#designHex{
background: rgba(255,255,255, 0.3);
height: 150px ;
width: 150px ;
position: absolute;
top: 50px ;
left: 5% ;
}
You need to take into account the scrollTop AND offset of the parent div:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Uafxz/2/
function scrollTo(selector) {
var offset = $(selector).offset();
var $main = $('#main');
$main.animate({
scrollTop: offset.top - ($main.offset().top - $main.scrollTop())
}, "fast");
}
I changed your code to use a single function (passing the target selector). I removed the second id selector as ids are unique and id lookup is the fastest type of lookup anyway (no point slowing it down with a second search).
Note: I had to hide your designHex element for the JSFiddle as it overlapped the first link.
You actually don't target the good element to animate scrollTop :
$('html,body').animate({scrollTop: divPosition.top}, "fast"); // instead of #main_wrapper #main
And as said in comment, your code contains a lot of errors or non-standard notation. For example, you use 3 script tag and 3 function that do the same job. That could be done with only one.
I really cannot figure it out how can I accomplish this. I need to have a footer partially visible all the time at the bottom. When you hover it shows up entire height of 400px, then get back to the original position.
The problem that I have is with the scroll function. I do not know how to set it properly. The result I am looking for is when you scroll all the way down (without hovering) the footer needs to take the full height, if you scroll up the footer goes back to the original position.
Here is the jsFiddle (I hope it works, this is the first time when I use this).
Below is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() > $('#move').position() -500) {
$('#footer').css('bottom', 0);
}
else {
$('#footer').css('bottom', -300);
}
});
$(document).ready(function () {
$('#footer').bind('mouseenter', function () {
$(this).stop().animate({ bottom: 0 }, 400); // on hover 0 400
}).bind('mouseleave', function () {
$(this).stop().animate({ bottom: -300 }, 400); // on out -300 400
});
});
</script>
<style>
html, body{
}
#footer {
position: fixed;
z-index: 999;
bottom: -300px;
width: 100%;
height: 400px;
background-color: #999;
opacity:0.5;
}
#content {
padding-bottom: 100px;
}
#move {
height:auto;
top: 5000px;
position: relative;
background-color:red;
}
</style>
</head>
<body>
<div id="content">
<h1 id="move"> end content </h1>
</div>
<div id="footer">
this is the footer
</div>
</body>
</html>
Updated fiddle: http://jsfiddle.net/moonspace/ZCger/1/
Add this JS into your '$(window).scroll(function () {}'
if( $(window).scrollTop() + $(window).height() == $(document).height() ) {
$('#footer').css('bottom', 0);
}
I'm working on a popup using a hidden DIV and loading it with window.onload. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.
I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) & have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?
The site is here: http://0034.eu/townapp/
And here's the code:
The JS:
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
<script language="text/javascript">
window.onload = function() {
$('#overlay-back').fadeIn(500);
}
</script>
<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>
The HTML:
<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>
The CSS:
#popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}
Thanks a lot in advance!
You must include jquery for this to work
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
</head>
If you want to try another popup, the following link will help you,
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/