Ok, amateur question here but im really bumping my head.
Using the jQuery below, i would like to add margin-top:-100px; to the height value.
Please help! Thanks :)
$(function () {
function HomePageSize() {
$('#home').css({
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function () {
HomePageSize();
});
HomePageSize();
});
You can just add the css.
$('#home').css('margin-top','-100px');
Here code:
$(function () {
function HomePageSize() {
$('#home').css({
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function () {
HomePageSize();
});
addMargin();
function addMargin() {
$('#home').css({'margin-top':'-100px'});
}
});
If I understand correctly this should do it:
$(function () {
function HomePageSize() {
var winHeight = $(window).height(); // store height in variable
var myMargin = winHeight - 100; // deduct 100 from height
$('#home').css({
width: $(window).width(),
height: winHeight,
marginTop: myMargin // assign calculated value to margin-top
});
}
$(window).resize(function () {
HomePageSize();
});
HomePageSize();
});
If you already have margin-top of -100px assigned to some element like #home, then You can try this
$(function () {
function HomePageSize() {
$('#home').css({
width: $(window).width(),
height: $(window).height() + parseInt($("#home").css("margin-top"))
});
}
$(window).resize(function () {
HomePageSize();
});
HomePageSize();
});
Related
I'm trying to create a div which will get a class only on scrolling and when the value of scroll is 210. I have next code :
$(document).ready(function() {
var pageWidth = $(window).width();
if(pageWidth > 700){
var contentLeft = $('#content-left');
var height = 210;
$(window).scroll(function () {
if ($(window).scrollTop() < height) {
contentLeft.attr('class', 'content-left');
} else {
contentLeft.attr('class', 'content-left leftContentFixed');
}
});
}
});
I try to apply this only on desktops.
Thus, I do not need the class leftContentFixed if it's on a smartphone or tablet.
If I try something like :
$(document).ready(function() {
var pageWidth = $(window).width();
if(pageWidth > 700){
alert("Bigger than 700");
}else{
alert("Smaller than 700");
}
});
Than it works perfect, but with my code it isn't working. The class leftContentFixed is added although the screen is smaller than 700.
Any advice?
You need to check screen size on resize event and check for its value when user scrolls the page. You could create mobile variable and make it true/false depends on screen size, then in scroll callback check for its value and choose correct class.
$(document).ready(function() {
var pageWidth = $(window).width(),
height = 210,
contentLeft = $('.content-left'),
mobile = false;
$(window).on('load resize', function() {
pageWidth = $(this).width();
// Save mobile status
if (pageWidth > 700) {
mobile = false;
} else {
mobile = true
}
})
$(window).on('scroll', function() {
if ($(window).scrollTop() > height) {
// Set default class
var _class = 'content-left leftContentFixed';
// If mobile then modify class
if (mobile) {
_class = 'content-left';
}
contentLeft.attr('class', _class);
} else {
var _class = 'content-left';
contentLeft.attr('class', _class);
}
});
});
html {
height: 2000px
}
.content-left {
background: gold;
width: 50px;
height: 100px;
}
.content-left.leftContentFixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-left"></div>
I have one rectangle, 2 functions that animates different this rectangle at different window widths, and im calling the functions with a click. it Must work when screen resizes as well.
Problems:
1- it seems like when I load one function then the other cant work, only the first.
2- It doesn't work on the first click.
3- I have to write the same code for when the document is ready and when the document resize.
How can I fix this 3 points. thx. code below.
$(document).ready(function () {
function lateralMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
left: "+=50"
}, 500);
})
}
function horizontalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
top: "+=50"
}, 500);
})
}
$(window).resize(function () {
screenWidth = $(this).width()
})
$(".rectangle-1").click(function () {
if (screenWidth > 300) {
lateralMove()
} else if (screenWidth <= 300) {
horizontalMove()
}
})
screenWidth = $(window).width()
if (screenWidth > 300) {
blackMove()
} else if (screenWidth <= 300) {
horizontalMove()
}
})
.rectangle-1 {
position: relative;
background-color: #000;
height: 100px;
width: 100px;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head></head>
<body>
<div>
<div class="rectangle-1"></div>
</div>
</body>
</html>
just cal a different function depending n a screen width:
function do_mobile(){
//do
}
function do_desktop(){
//do
}
$(".rectangle-1").on("click", function(){
if( $(window).width() > 300 ){
do_desktop();
}
else{
do_mobile();
}
})
This was just a matter of cleaning up your code (you had a function call to a function called blackMove() that was undefined) and you also needed to wrap the "assign movement" portion of your code in a function and call it on document ready and on window resize.
Here's the code pen:
http://codepen.io/nhmaggiej/full/azXgqw/
$(document).ready(function () {
function verticalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
left: "+=50"
}, 500);
})
}
function horizontalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
top: "+=50"
}, 500);
})
}
function assignMovement() {
screenWidth = $(this).width()
if (screenWidth > 600) {
verticalMove()
} else if (screenWidth <= 600) {
horizontalMove()
}
};
$(window).resize(function () {
assignMovement();
})
assignMovement();
});
This will move the square onload, onresize and when the square is clicked.
jsFiddle
function lateralMove(elementX) {
elementX.animate({
left: "+=50"
}, 500);
}
function horizontalMove(elementX) {
elementX.animate({
top: "+=50"
}, 500);
}
function elementMove() {
screenWidth = $(window).width();
elementX = $(".rectangle-1");
if (screenWidth > 300) {
lateralMove(elementX);
} else if (screenWidth <= 300) {
horizontalMove(elementX);
}
}
//move on resize
//Use a Timeout to ensure that the resize event is only fired once per change.
$(window).resize(function () {
clearTimeout(this.id);
this.id = setTimeout(elementMove, 500);
});
//move on click
$(".rectangle-1").click(function () {
elementMove();
})
//move on load
elementMove();
I have this function that when you click on the html it checks the width of a number of elements and compares it with the windows width. I can't get it to work with the resize function. I think I'm calling it wrong.
$(document).ready(function() {
$(window).resize(function() {
var conditionWidth = checkWidth()
});
function checkWidth() {
var elementWidth = 1;
$("div>div").each(function() {
if ($(this).width() > $("html").width() / 2) {
elementWidth = 2;
}
});
return elementWidth;
}
var conditionWidth = checkWidth()
$("body").off("click").click(function() {
alert(conditionWidth);
});
})
div div {
position: relative;
height: 100px;
width: 100px;
margin-top: 20px;
}
.rectangle1 {
background-color: black;
width: 100px;
}
.rectangle2 {
background-color: red;
width: 200px;
}
.rectangle3 {
background-color: black;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
</div>
Since you are using var to declare the variable in the resize handler the the variable is local to the resize handler method and the value of the closure scope(dom ready handler) is not updated.
$(document).ready(function () {
var conditionWidth = checkWidth()
$(window).resize(function () {
//when you use var it becomes a local variable
conditionWidth = checkWidth()
});
function checkWidth() {
var elementWidth = 1;
$("div>div").each(function () {
if ($(this).width() > $("html").width() / 2) {
elementWidth = 2;
}
});
return elementWidth;
}
$("body").off("click").click(function () {
alert(conditionWidth);
});
})
I'm adding 50px on every click on my div header, and i want to make my div main has the same height of header when header is bigger than it.
I don't know why its not working.
I have this script
$(function () {
var alturaHeader = $('header').height();
var alturaMain = $('.main').height();
$('button').click(function(){
$('header').height(function(index, height){
return (height + 50);
});
console.log(alturaHeader);
if (alturaMain < alturaHeader) {
alert("test");
$('.main').css({'min-height': alturaHeader });
}
});
});
any suggestions ?
JS Fiddle: http://jsfiddle.net/JWf7u/
Thanks.
There is you fiddle code You should update the height of div everytime it changes.
var alturaHeader = $('header').height();
var alturaMain = $('.main').height();
$('button').click(function(){
$('header').height(function(index, height){
return (height + 50);
});
alturaHeader = $('header').height()
if (alturaMain < alturaHeader) {
$('.main').css({'min-height': alturaHeader });
}
});
why dont u use the css property height:100% for main (child) div..
check the below
$(function () {
var alturaHeader = $('.header').height();
var alturaMain = $('.main').height();
$('button').click(function(){
$('.header').height(function(index, height){
return (height + 50);
});
// below is not required we are using css to handle this
/*
console.log(alturaHeader);
if (alturaMain < alturaHeader) {
alert("test");
$('.main').css({'min-height': alturaHeader });
}
*/
});
});
--CSS--
.header
{
border:1px solid black;
}
.main
{
border:1px solid red;
height:100%;
}
heigth:100% it will do what u want check the below fiddle
http://jsfiddle.net/7fkp9/
remember as we have border right now so they dont have the same height.. it will very by 2 pixel.. for exact same height dont use the border property or set the border-size to zero(0) pixel
I have this animation that makes some buttons on screen 'beat'. It works fine exept one thing, the animation is too 'sharp' and not smooth, how can I smooth it?
function myFunction() {
setInterval(function () {
tstFnc();
}, 1000);
}
var flag = true;
function tstFnc() {
var numM = Math.floor((Math.random() * 10) + 1);
var stringM = '#mgf_main' + numM + ' img';
$(stringM).animate({
width: '80px',
height: '80px'
}, 150, function () {
$(stringM).animate({
width: '68px',
height: '68px'
}, 150, function () {
// nothing
});
});
};
You can set the easing property on the animate options.
http://api.jquery.com/animate/
http://easings.net/
Try this here, animatethis is a function and target element is the id of element and speed is depend on you.. and marginleft is a example, you should try your code.
function animatethis(targetElement, speed) {
$(targetElement).animate({ width: "+=10px", height: "+=10px"},
{
duration: speed,
complete: function () {
targetElement.animate({width: "+=10px", height: "+=10px" },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
}