Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Someone can give me a source code on jsfiddle when width jquery can set the css by change the window size?
My englist not so good i tryo to search on the net but not found.
I think this is what you are looking for:
If your element has the class element
$(window).resize(function () {
$(".element").css("width", window.innerWidth;);
});
Then you could do something like window.innerWidth/2 or window.innerWidth - 50.
Javascript example: JSFiddle Demo
Change element CSS on resize:
If the viewport width is less than 800, then it will change the width of the #test div
HTML
<h1 id="width"></h1>
<div id="test"></div>
CSS
#test { width:200px; height:50px; background:red; }
Javascript
// set the initial width
var viewportWidth = document.documentElement.clientWidth;
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";
// on resize
window.addEventListener('resize', function(event){
var viewportWidth = document.documentElement.clientWidth;
var test = document.getElementById("test");
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";
if(viewportWidth < 800){
test.style.width = "500px";
}
});
Related
This question already has answers here:
Setting Element Width Based on Height Via CSS
(10 answers)
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 6 months ago.
How to make width equaled to height into CSS rule using pure JS? May be, there is a solution in CSS.
CSS
#animation-2 > div.line {
height: 10%;
background: red;
}
JS
let line = document.querySelector('.line');
let height = line.offsetHeight;
document.querySelector('.line').style.width = height;
It doesn't work. I want value in pixels. May I forget to add something?
THanks
You forgot the "px" suffix:
let line = document.querySelector('.line');
let height = line.offsetHeight;
document.querySelector('.line').style.width = height + 'px';
https://jsfiddle.net/yr5eu2gn/
The value stored in line.offsetHeight is a number counting pixels, while elem.style.width expects a string with unit.
Thus, you must write
document.querySelector('.line').style.width = height + 'px';
offsetHeight does not get the size in percentage. It gets it in pixels. So, you need to get the parent height as well to figure out the size in percentage.
Also, you need to add what unit you want to use as well as Javascript only saves the number.
EDIT: Well... just saw your edit that you want it in pixels and not in percentage. Hope this helps someone.
let line = document.querySelector('.line');
let height = line.offsetHeight;
let parentHeight = line.offsetParent.offsetHeight;
let percentHeight = Math.round(100 * height / parentHeight);
line.style.width = percentHeight+"%";
line.innerHTML = percentHeight;
#animation-2{
height: 100vh;
}
#animation-2 > div.line {
height: 10%;
background: red;
}
<div id="animation-2">
<div class="line"></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Trying to replicate this awesome "Mouse over Escape" effect from the link below using simple jQuery: http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445
Any pointers or tips? See "Mouse over Escape" section in link above.
Here's a simple jQuery code I wrote:
// jQuery explode text by Aziz Natour
// CC BY 4.0 License
// http://creativecommons.org/licenses/by/4.0/
$('.explodeMe').each(function() {
var text = $(this).text();
$(this).html(text.replace(/./g, "<span>$&</span>"));
});
$('.explodeMe span').each(function() {
var min = -10, max = 10,
min2 = -30, max2 = 30,
random = Math.floor(Math.random() * (max - min + 1)) + min,
random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2,
css = "top:"+random+"px; left:"+random2+"px",
el = $(this);
el.on({
mouseenter: function () {
el.attr("style", css);
},
mouseleave: function () {
setTimeout(function() {
el.removeAttr("style");
}, 300);
}
});
});
.explodeMe span {
position: relative;
transition: 0.3s .1s;
top:0;left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="explodeMe">I get nervous around cursors.</span>
Codepen demo: http://codepen.io/azizn/full/redbRa
The logic:
Wrap each textual character inside a <span> tag
Make the new span tags relatively positioned to manipulate their location without affecting layout flow.
Apply randomized CSS style to each span separately (for dynamic movement) on hover
Remove the style after a delay
The position change is animated using the CSS transition property.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How can I calculate when scroll is near bottom by this function:
$(window).bind( "scroll", function(){
console.log($(window).height());//window heigth
console.log($(window).scrollTop()); //returns scroll position from top of
});
Do I need something else?
Something like this should do, no?
$(window).bind( "scroll", function(){
var windowHt = $(window).height();
var myPos = $(window).scrollTop();
if (myPos > (windowHt - 100)) { // adjust offset to suit
do stuff;
}
});
Here you can see an example when getting to the bottom...
$(window).scroll(function() {
if( ($(window).scrollTop() + $(window).height()) >= $(document).height()-200) {
alert("bottom!");
}
});
http://jsfiddle.net/gWD66/2631/
This will alert you when you have 200px or more to the bottom...
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML5 Canvas resize to fit window
I'm developing HTML5 game for mobile phone.
I want to stretch the canvas to take the full phone width and hieght.
I'm using this code but it not very accurate:
ourCanvas = document.getElementById('gameCanvas');
context = ourGameCanvas.getContext( '2d' );
ourCanvas.width = $(window).width();
ourCanvas.height = $(window).height();
Any suggestions?
Looks like your canvas doesn't refresh it's width and height on window resize or orientationchange event:
$(window).on("resize", fitCanvas);
fitCanvas();
function fitCanvas() {
var ourCanvas = document.getElementById('gameCanvas');
context = ourGameCanvas.getContext( '2d' );
ourCanvas.width = $(window).width();
ourCanvas.height = $(window).height();
}
.outerWidth()
.outerHeight()
?
And did you reset your layout? Like:
body, html, p, whatever { padding:0; margin:0; }
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am interested in the way this site has the speakers scrolling at a certain interval.
I am unsure if this is a jQuery plugin but would be keen to know/understand how this functionality is done.
Create a container element that is set to the dimensions you want to display. Then set its overflow property to hidden and give it a child that is much taller. Then use a setInterval to animate the offset from the child to the parent:
HTML --
<div id="container">
<div id="child"></div>
</div>
CSS --
#container {
position : relative;
width : 500px;
height : 300px;
overflow : hidden;
}
#child {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 900px;
}
JS --
$(function () {
var $child = $('#child'),
timer = setInterval(function () {
$child.animate({ top : '-=300' }, 500);
}, 1500);
});
Update
You can then detect if the #child element should be animated back to the beginning once its entire height has been shown:
$(function () {
var $child = $('#child'),
height = $child.height(),
interval = 300,
current = 0,
timer = setInterval(function () {
current++;
if ((current * interval) >= height) {
current = 0;
$child.stop().animate({ top : 0 }, 1000);
} else {
$child.stop().animate({ top : (current * interval * -1) }, 500);
}
}, 1500);
});
Here is a demo: http://jsfiddle.net/BH5gK/2/