First div is a category and the second div contains some photos.
I wanted to do something that when user clicks on an image the first div move 0.7 of the screen width to right and all images in second div disappear, so I wrote:
$(document).ready(function() {
$("img").click(function() {
var my_width = screen.width * 0.7;
$(".second_div").find("img").hide();
$(".first_div").css({
"transform": "translate(" + my_width + "px,0px)",
"-webkit-transform": "translate(" + my_width + "px,0px)",
"-ms-transform": "translate(" + my_width + ",0px)"
});
});
});
.first_div {
transition-duration: 2s;
}
<div class="first_div col-md-1">
//some code
</div>
<div class="second_div col-md-11>
//some codes
</div>
When its full screen it works right, but when I resize the window and try again the first div won't be located at where it supposed to (0.7 Of screen width) What's wrong?
for window width I would use the following:
var my_width = document.documentElement.clientWidth * 0.7;
this is the same (cross-browser compatible) solution used by jQuery's $.width()
For more info on different methods of getting width, see this link.
Try using the window's inner width instead of the screen width, so that it's relative to the size of the viewport. replace
var my_width = screen.width * 0.7 ;
with:
var my_width = window.innerWidth * 0.7 ;
See an example here:
http://codepen.io/anon/pen/jWWEKO
Related
And I want to get the width or distance or pixel that between the div and left side of of window/viewport.
And another width again between the div to the right side of the window.
I will use the width to create a left line and right line.
But I am poor in jQuery, I try offset but seems nothing happen.
So I back to 0 again so I didn't include fiddle here since I got nothing inside.
But I have attached with the image link as below, to explain my question.
Please help me on try to get the width, I can create the line myself.
Thank you.
var of = $(ele).offset(), // this will return the left and top
left = of.left, // this will return left
right = $(window).width() - left - $(ele).width() // you can get right by calculate
Maybe this can help you.
After all, .width() isn't the only answer, like innerWidth() or outerWidth()
There is two options
One is you can use red line as image and you can place the div over the red line.
Second one,
If you want to calculate:
Left div width = parent div width - child div offset;
Right div width = parent div width - child div offset + child div width;
var parentdiv = document.getElementById("ParentDivID");
var parentWidth = parentdiv.offsetWidth;
var childdiv = document.getElementById("childDivID");
var childWidth = childdiv.offsetLeft;
This is easier to do with POJ (plain old javascript). Get the position of the element on the screen. Then evaluate its left property. That will be the width of your left line. Then subtract its right property from the width of the screen. That will be the width of your right line.
var x = document.getElementById('myDiv').getBoundingClientRect();
var myLeftLineWidth = x.left;
var myRightLineWidth = screen.width - x.right;
For more information see this post.
If you want the width of the window instead of the screen, change screen.width to window.innerWidth. If you don't want the scrollbar, etc. to be included in the width, use document.documentElement.clientWidth. (For more info on these, see this.)
We can work out that where the box starts with .offset().
Next, we can work out where the box ends with .offset() + .width().
We now know where our box sits on the x-axis.
Now let's see what we have to the left of our box with .left which can run on our .offset().
We've now worked out how much space there is to the left and how wide our box is.
Finally, we can put what we've worked out together, we can get the page width $(window).width() and minus what there is to the left of our box (stage 2) and the width of our box (stage 1) and that will only leave what is to the right of our box.
That's the theory anyway now let's have a look at some code. You'll see I'm working out all the bits from the theory and then adding some visual representation.
calcSizes = function() {
var boxPos = $(".box").offset(),
toLeft = boxPos.left,
toRight = $(window).width() - ($(".box").width() + toLeft);
$(".left").width(toLeft + "px");
$(".right").width(toRight + "px");
console.log("Right: " + toRight + "px");
console.log("Left: " + toLeft + "px");
console.log("Width: " + $(".box").width() + "px");
console.log(
$(window).width() + "px = " +
toRight + "px + " +
toLeft + "px + " +
$(".box").width() + "px"
);
console.log(" ");
}
calcSizes();
body {
margin: 0
}
.box,
.indicator {
padding: 10px 0;
text-align: center
}
.box {
width: 100px;
background: #FF5722;
margin-left: 60%
}
.indicator {
background: repeating-linear-gradient( 45deg, #F44336, #F44336 10px, #D32F2F 10px, #D32F2F 20px);
overflow: hidden;
transform: translatey(-100%);
opacity: .8
}
.left {
float: left
}
.right {
float: right
}
button {
position: fixed;
top: 55px;
left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">BOX</div>
<div class="left indicator">
LEFT
</div>
<div class="right indicator">
RIGHT
</div>
<button onclick="calcSizes()">
Recalculate
</button>
Hope this makes sense and helps you with your project.
You can do that with JavaScript, no need for jQuery:
var mydiv = document.getElementById('mydiv');
var offset = mydiv.getBoundingClientRect();
var offsetRight = document.documentElement.clientWidth - offset.right;
var offsetLeft = offset.left;
JSFiddle
I got a design in Full HD resolution, it was planned for a presentation in this solution, now they want that it will be a bit responsive. Now I have to change all these parameters: margin, padding, width, height, top, left on the fly, maybe someone got a solution for me.
I tried following and it works for the images with the width and height:
// Set Array for Resize (0 => width of the window, 1 => resize (yes / no)?, 2 => how much per cent do I have to put away
var resize_pool = new Array(parseInt($(window).width()), false, 0);
if(resize_pool[0] < 1920) {
resize_pool[1] = true;
resize_pool[2] = (100 * resize_pool[0]) / 1920;
resize_pool[2] = 100 - Math.floor(resize_pool[2]);
}
// Do I have to resize?
if(resize_pool[1] == true) {
$("#content img").each(function(index, element) {
$(this).css('width', 'calc(' + $(this).width() + 'px - ' + resize_pool[2] + '%)').css('height', 'calc(' + $(this).height() + 'px - ' + resize_pool[2] + '%)');
});
}
This works fine, but is there a better solution, where I can change all my values? margin, padding etc.
Thanks for your help in advance
CSS Media Queries are what you need to use - e.g.
td {
padding:20px; /* Default padding size for 1920px+ wide */
}
#media screen and (max-width: 1919px) {
td {
padding:10px; /* Smaller padding for screens less than 1920px wide;
}
}
I have a div that dynamically scales based on the viewport size.
function zoomSquare() {
var $square = $('.square');
var viewportWidth = $square.parent().width();
var squareWidth = $square.width();
var desiredWidth = Math.round(viewportWidth * 0.95);
var zoom = (desiredWidth / squareWidth);
$square.css('zoom', zoom);
$square.css('-moz-transform', 'scale(' + zoom + ')');
$square.css( '-o-transform', 'scale(' + zoom + ')');
}
// When the browser is resized
$(window).on('resize', function(){ zoomSquare(); });
// When the page first loads
$(document).ready(function(){
zoomSquare();
});
http://jsfiddle.net/sarahwhatsup/YDwds/8/
I want have the parent set to auto to as the div scales, the divs underneath adjust their position. This works in Chrome, IE, Safari but for some reason I can't get this to work in Firefox. Anyone have any idea?
You could change the height of the wrapper div.
$('.wrapper').css('height', squareWidth * zoom);
http://jsfiddle.net/YDwds/22/
I have a box div with this css property: width:400px; height:300px; overflow:hidden;. Inside I have an image.
With Iscroll4 I zoom and move the image inside the box.
Works all fine but with Jquery if I Get the dimension of the zoomed image the function will return always 400px of with dimension and 300px of height dimension.
$('#dimpos').bind("click", function (event, ui) {
var imgzoomed = $('#Container img');
var position = imgzoomed.position(); /* <----------- Work Fine */
var dim_width = imgzoomed.css("width"); /* <----------- Don't Work but return 400px */
var dim_height = imgzoomed.height(); /* <----------- Don't Work but return 300px */
$('#gdp').text("Position (left: " + position.left + ", top: " + position.top + ") - Width: " + dim_width + " Height: " + dim_height);
});
This is the problem:
When I zoom the image the new width and the height is for example width 500px and height 600px but the visible part of the image is the dimension of the div box (width 400px and height 300px) so if I use the Jquery width() or css("width") it will return always 400px.
did u tried parseInt method? this way should return only number;
var dim_width = parseInt($('#Container img').css("width"));
var dim_height = parseInt(imgzoomed.height());
is there an example to show us about with this question?
http://jsfiddle.net/Y8MUF/
It can expand the div when i click on it. How do i make it look nicer by adding a "See More" link then hide it when the div exapands and adjust the row height relative to the See More link?
$(document).ready(function(){
var rowsshown = 2;
var rowheight = 1.2; // line height in 'em'
var ht = (rowsshown * rowheight) - .5; // subtracting the .5 prevents the top of the next line from showing
$('.info')
.css({'overflow':'hidden','line-height' : rowheight + 'em','height': ht + 'em' })
.click(function(){
if ( $(this).css('height') == 'auto') {
$(this).css('height', ht + 'em');
} else {
$(this).css('height','auto');
}
});
})
try :
http://jsfiddle.net/Y8MUF/11/
You could look at the jquery slideup and slidedown
http://api.jquery.com/slideUp/
For a better effect