Lets say i have two divs in my code:
div1 - position(100,100)
div2 - position(100,200)
I am doing a javascript animation and I am wondering if there is any way to give them the same target position on the screen without giving them two different positions?
Ask if you want more information! Thanks
Not quiet sure if I understand your question.
Something like this? http://plnkr.co/edit/WKXV5amtwrQLefidmuAk?p=preview
$(document).ready(function () {
$('.movediv').animate({
top:'400',
left:'400'
},5000,function(){
});
});
the CSS:
div1{
width:100px;
height:100px;
background-color:red;
position: absolute;
top:100px;
left:100px;
}
.div2{
width:100px;
height:100px;
background-color:blue;
position: absolute;
top:100px;
left:200px;
}
and the HTML:
<body>
<div class="movediv div1"></div>
<div class="movediv div2"></div>
</body>
Related
I want to make a "full screen" progress bar : a 100% x 100% border who just fill in. Not easy to explain so i've made a quick draw.
http://hpics.li/998ef2e
Thanks a lot for ure ideas !
I crafted a solution using four divs, which approximates closely enough I think:
https://jsfiddle.net/svArtist/jexb9egm/
var i=0;
var myVar=setInterval(function () {myTimer()}, 10);
function myTimer() {
i++;
if(i<=100){
$("#top").css("width", i+"%");
}else if(i<=200){
$("#right").css("height", (i-100)+"%");
}else if(i<=300){
$("#bottom").css("width", (i-200)+"%");
}else if(i<=400){
$("#left").css("height", (i-300)+"%");
}else{
clearInterval(myVar);
}
}
#main, html, body{
height:100%;
width:100%;
position:relative;
margin:0;
overflow:hidden;
}
.loadbar{
background-color:#f00;
position:absolute;
}
#top, #bottom{
height:20px;
}
#left, #right{
width:20px;
}
#top{
top:0;
left:0;
}
#right{
top:0;
right:0;
}
#bottom{
bottom:0;
right:0;
}
#left{
bottom:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="loader">
<div id="top" class="loadbar">
</div>
<div id="right" class="loadbar">
</div>
<div id="bottom" class="loadbar">
</div>
<div id="left" class="loadbar">
</div>
</div>
</div>
(just incrementing from 0 to 400 here, use your progress percent*4 instead)
Although I've never seen this done, you could probably create this effect using Divs that disappear as the page loads. Basically, put a solid color as the background, and use a white div across each side (top left to top right, top right to bottom right, bottom right to bottom left, bottom left to top left) that shrinks as loading completes. This is the same effect as if the colored bar 'loaded' across the screen.
This may be a lot of work for a purely cosmetic effect.
Here I have a jsFiddle
you can See there are 3 images of Players now What I want is Whenever I click on the image it should show the pop-up below the players.
Player can be In any position it will not be in a grid
so My question is What is the best way perform this.
I have something in my probably the wast it is like..
-- whether onclick of an Image I should change the position of the position of the popup image as well as span tag's text.
-- I should provide a popup to the every Player and just hide and show them
or something else you can suggest.It will help me a lot.
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
margin-left:50px;
}
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' id='p3'/>
<div id='player-popup'>
<span>Player1</span>
</div>
</div>
Thank you for spending time for me in advance Thank you.
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/>
<div id='player-popup' style="display:none">
<span>Player1</span>
</div>
</div>
Script:
$("img").click(function(){
var top = $(this).offset().top + $(this).width() + 2;
var left = $(this).offset().left - $(this).height() / 2;
$("#player-popup span").text("Player "+$(this).data("playerid"));
$("#player-popup").css({ top: top, left: left }).show();
});
css:
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
position:absolute;
}
Demo: https://jsfiddle.net/astm1o3p/21/
Here make chqnges in the css for popup set
position:absolute;
i'm really new to all this coding things etc. (1 month :P) and actually i try some things with jQuery.
I used the search function but actually it's quite hard for me to understand everything :P
My goal is:
When i hover over an image another image which sits on top of it slides up and another slides down.
They're all images - i don't want to publish the Website and only want to use it on my Computer for testing ^^
Also the picture on the top should be hidden at first. (I know how to do it but i actually don't know if it will be shown when using slideDown)
HTML:
<div class="newschange">
<div class="News wow fadeInDown animated"><img src="images/News.png" /></div>
<div class="newstext wow fadeInUp animated"><img src="images/newstext.png" /></div>
<div class="newshover"><img src="images/alt/newstext.png" /></div>
</div>
My jQuery Script: (it's actually in the header of the HTML)
<script>
$(function() {
$('.News').mouseover(function (){
$(.'newstext').slideUp(300);
$(.'newshover').delay(400),slideDown(300);
});
})
</script>
CSS (i don't know if this is necesarry for this :P)
.newshover {
position: absolute;
left: 802px;
top: 455px;
width: 359px;
height: 35px;
}
.newstext {
position: absolute;
left: 781px;
top: 456px;
width: 446px;
height: 32px;
}
.News {
position: absolute;
left: 377px;
top: 276px;
width: 854px;
height: 318px;
}
The problem is just that nothing happens when i hover over it :)
Here is a Screenshot:
http://i.stack.imgur.com/dzyFH.png
The 1. image is the whole thing with at the top "News" the image and the rounded rectangle.
NEWS SECTION! is the one i want to show AFTER i hover over the first image.
The red Text behind it is the one i want to hide when i hover over the first image. :)
//solved Code
<script>
$( document ).ready(function() {
$(".News").on('mouseenter',function () {
$(".newshover").delay(600).slideToggle(500);
$(".newstext").slideToggle(500);
});
$(".News").on('mouseleave', function(){
$(".newshover").slideToggle(500);
$(".newstext").delay(600).slideToggle(500);
})
});
</script>
<script>
$(function(){
$(".newshover").hide(0);
})
</script>
If I understood well your question this piece of code should work: https://jsfiddle.net/5naaq121/
HTML:
<div class="newschange">
<div class="News"><img src="http://maalaeasurfresort.com/wp-content/uploads/2014/09/beach_cy.jpg" /></div>
<div class="newstext"><img src="http://www.honduras.com/wp-content/uploads/2012/05/white-sandy-beach2-300x200.jpg" /></div>
<div class="newshover"><img src="http://www.lakecountyparks.com/_images/whihala_beach/wb_beach.jpg" /></div>
</div>
JS:
$(function(){
$('.newschange').mouseenter(function (){
$('.newshover').slideUp(300);
$('.newstext').delay(400).slideUp(300);
})
});
CSS:
.newschange {
display:block;
width:300px;
height:200px;
position:relative;
overflow:hidden;
}
.newshover {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
.newstext {
position: absolute;
left:0;
bottom:0;
width:300px;
height:200px;
}
.News {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
I'm feel very irritated with div alignment problems on window resize. I would like to wrap elements inside div so that they won't come out of their exact positions after window resize.Is there a way possible to wrap elements inside parent <div> using Javascript. Also suggest any best ways possible to overcome this using javascript like handling resize() & zoom() events. If not suggest solutions possible by using Jquery.
HTML:
<div id ="top-left"></div>
<div id ="top-right"></div>
<div id ="bottom-left"></div>
<div id ="bottom-right"></div>
css:
div{
width:50px;
height:50px;
background-color:red;
position:absolute;
}
#top-left{
top:0;
left:0;
}
#top-right{
top:0;
right:0;
}
#bottom-left{
bottom:0;
left:0;
}
#bottom-right{
bottom:0;
right:0;
}
div#container{
position:relative;
border: 2px solid blue;
width:300px;
height:300px;
background:green;
}
jQuery:
$(document).ready( function(){
$('body').append('<div id="container"></div>');
$('body div').not('#container').each(function() {
var html = $(this);
$('#container').append(html);
});
});
Demo:
http://jsfiddle.net/x8Wnw/
I have seen several solutions which determine when an element is visible in the viewport whilst scrolling the page, but I haven't seen any which do this for elements that are contained in a scrolling container div as in the example here.
How would I detect the items as they scroll into view via the scrolling div? And by contrast how would I detect them if they fell out of view. In all cases the overflow elements are not hidden at the outset.
HTML
<div id="mainContainer" class="main">
<div id="scrollContainer"class="scroller">
<div id="picturesContainer"class="holder">
<div id="pictureContainer1" class="picture position1">
pictureContainer1</div>
<div id="pictureContainer2" class="picture position2">
pictureContainer2</div>
<div id="pictureContainer3" class="picture position3">
pictureContainer3</div>
<div id="pictureContainer4" class="picture position4">
pictureContainer4</div>
<div id="pictureContainer5" class="picture position5">
pictureContainer5</div>
<div id="pictureContainer6" class="picture position6">
pictureContainer6</div>
<div id="pictureContainer7" class="picture position7">
pictureContainer7</div>
<div id="pictureContainer8" class="picture position8">
pictureContainer8</div>
<div id="pictureContainer9" class="picture position9">
pictureContainer9</div>
</div>
</div>
</div>
CSS
.main{
position:absolute;
top:0px;
left:0px;
height: 200px;
width:200px;
background-color: grey;
border: 1px solid black;
}
.scroller{
position:absolute;
top:0px;
left:0px;
height: 250px;
width:250px;
background-color: lightblue;
border: 1px solid black;
overflow: scroll;
}
.picture{
position:absolute;
height: 200px;
width: 200px;
background-color: lightyellow;
border: 1px solid black;
}
.position1{
top:0px;
left:0px;
}
.position2{
top:0px;
left:200px;
}
.position3{
top:0px;
left:400px;
}
.position4{
top:200px;
left:0px;
}
.position5{
top:200px;
left:200px;
}
.position6{
top:200px;
left:400px;
}
.position7{
top:400px;
left:0px;
}
.position8{
top:400px;
left:200px;
}
.position9{
top:400px;
left:400px;
}
.holder{
position:absolute;
top:0px;
left:0px;
width:600px;
height:600px;
background-color:lightgreen;
}
include jQuery library on page first.
function getObjDims(obj){
if (!obj) return false;
var off = $(obj).offset();
var t = {
top:off.top,
left:off.left,
width:$(obj).width(),
height:$(obj).height()
};
return {x1:t.left, y1:t.top, x2:t.left+t.width,y2:t.top+t.height}
};
function testInside(pic,box){
var d=getObjDims(pic);
return (box.x1<=d.x1 && box.y1<=d.y1 && box.x2>=d.x2 && box.y2>=d.y2)?1:-1;
};
$(document).ready(function(){
var inside={};
var port=$('#scrollContainer');
var box=getObjDims(port);
$(window).resize(function(){
box=getObjDims(port);
});
$(port).scroll(function(){
var str=[];
$('.picture').each(function(i){
var oldState = inside[this.id]!=undefined?inside[this.id]:0;
var newState = testInside(this,box);
inside[this.id]=newState;
if (oldState!=newState)
switch (newState){
case 1:str.push(this.id);break;// go IN
case -1: break;// go OUT
}
});
$('#picStatus').text(str.join(', '));
});
});
Add in HTML for results output:
<div style='margin-top:280px;'>Pictures in window (numbers):</div>
<div id='picStatus'></div>
It is code based on object's coords, witch are recalculated on scroll event. There are some things to know. IE and, seems to be, Opera takes into consideration width and height of scrollbars themselves, that demands curtain code tuning. I just have suggested solution direction and did not spent much time for debugging this.
And yet, maybe will be useful following (from jquery api about offset):
Note: jQuery does not support getting
the offset coordinates of hidden
elements or accounting for borders,
margins, or padding set on the body
element.
http://www.quirksmode.org/mobile/viewports.html discusses the issues around viewports, determining their dimensions, and calculating element bounds relative to a viewport's coordinate frame. Part 2 of that blog post then goes into the implicit viewports in mobile browsers. He doesn't give code that answers your question exactly, but it's definitely relevant and worth a read.