get and set css style into var - javascript

I am just begginer. I am trying to get font size of the element into variable. After that I would like to set font size of another element using this variable.
I have been looking for the solution for 12 hours and found nothing. I would be grateful for any tips. Thanks in advance.
My code is below.
jQuery(window).scroll(function() {
var OldFont = jQuery('.mhmainnav').find('li').find('a').css("font-size");
var windowTop = jQuery(window).scrollTop();
if (windowTop > 280) {
jQuery('.mh-main-nav').find('li').find('a').css("font-size", "12px");
} else {
jQuery('.mh-main-nav').find('li').find('a').css("font-size", OldFont);
}
});

The only thing I would change is moving the old font to outside your scroll, otherwise when you change the font-size to 12px, OldFont will get overwritten next time you scroll.
Maybe probably cache your anchor selector too for better performance
Also check your mhmainnav selector - you change it to mh-main-nav
var anchors = jQuery('.mhmainnav').find('a'), // if you are reusing this in the scroll, cache it here for better performance
OldFont = anchors.css("font-size"); // set this before the scroll as it shouldn't change once set
jQuery(window).scroll(function() {
var windowTop = jQuery(this).scrollTop();
if (windowTop > 280) {
anchors.css("font-size", "12px");
} else {
anchors.css("font-size", OldFont);
}
});

try this:
$(document).ready(function(){
$(window).scroll(function() {
var OldFont = parseInt($('p').css("font-size"));
alert(OldFont);
});
});
This will alert the font-size, now you cane use it as require.

can you try this following HTML and Jquery snippets
HTML code
<ul class="mhmainav">
<li>
aaa
aaa
aaa
aaa
</li>
</ul>
JQuery
var oldFont= $('.mhmainav li a');
$.each(oldFont, function(index, value){
$(value).css('font-size'); // get font-size value
$(value).css('font-size','20px'); //set font-size value;
});

var size = $(YOUR STYLE PARENT SELECTOR).css('font-size');
Then:-
$(YOUR STYLE Target Selector).css({ 'font-size': size });
Hope this would help you :-)

Related

Replace url (window.location) when div height gets bigger than 50px

Newbie here. I'm trying to change the website's page/url using window.location.replace when div #valor height gets bigger than 50px.
Details:
This div #valor increases its height on each click. But when it achieves at least 50px, I need to redirect the user to another page.
I've tried a lot of different approaches but I know that there's something missing on each one. I'll list them below for reference. I do think that the problem is with the way I structure my code...
var maskHeight = $("#valor").css('height');
if (maskHeight > 50){
window.location.replace("https://google.com");
}
else {
alert("if I'm here it means it didn't work"); //just testing
}
});
And I have a lot of different options that didn't work but they all have this if statement:
if ($('#valor').height() > 40) {
window.location.replace("https://google.com");
}
I've also tried something like this:
var div = $("#valor").height();
var win = 50;
if (div > win ) {
window.location.replace("https://google.com");
}
My first approach, not listed here, didn't work because it compared the value right on the first click. And I just want to make something like: when #valor height gets bigger than/achieves 50px > change url.
Thank you in advance! Any help is very much appreciated.
you compare a string with (for example) 10px with an integer:
var maskHeight = $("#valor").css('height'); // output for example 10px
if (maskHeight > 40){ . //than you compare it if(40px > 40)
window.location.replace("https://google.com");
}
change your var to:
var maskHeight = $("#valor").height();
ok you edited your post:
can you show us your click handler function?
I think this is the right way you have do do it:
var maskHeight = $("#valor").height();
$("#valor").on('click', function()
maskHeight = maskHeight + 10;
if (maskHeight > 40){
window.location.replace("https://google.com");
}
else
{
alert("if I'm here it means it didn't work"); //just testing
}
});

Add/Remove class from specific div based off screen size

I need to add the class .full-page when the screen size is >= 769px and remove the same class when screen size is <=768. The div I need the class to be applied to has an ID of #here I have tried quite a few things and this is where I left off...
<script>
var windowSize = window.innerWidth;
if (windowSize >= 769) {
console.log('Greater than 768');
document.getElementById('here').addClass = 'full-page';}
else (windowSize <= 768) {
console.log('Less than 768');
document.getElementById('here').removeClass = 'full-page';}
</script>
Anyone have a tip? Thanks in advance!
You can use window#matchMedia to detect width changes, and see if it matches a certain criteria. Use classList to add and remove classes.
You can see an example here. Change the width of the bottom right rectangle by dragging the border.
Code:
var classList = document.getElementById('here').classList;
var minWidth769 = window.matchMedia("(min-width: 769px)");
function match() {
minWidth769.matches ? classList.add('full-page') : classList.remove('full-page');
}
minWidth769.addListener(match);
match();
There is no method add|remove Class in JavaScript, if you want to change class for an element, you can use
document.getElementById('here').className = 'full-page'
OR
document.getElementById('here').setAttribute('class', 'full-page')
I think you need to use jQuery if you want to use 'addClass', after link the jQuery file,
Try
$("#here").addClass("full-page");
and
$("#here").removeClass ("full-page");

JQuery Add Class when bottom of div reaches top

I am trying to add a class when the bottom of a div reaches the top of the window, but am not sure of how to do it.
I have managed to add the class when the top of the div gets to the top of the window, but am not having much luck with the bottom of the div.
Code I am using:
$(document).ready(function() {
var menuLinksTop = $('.container').offset().top;
var menuLinks = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > menuLinksTop) {
$('header').addClass('black-links');
} else {
$('header').removeClass('black-links');
}
};
menuLinks();
$(window).scroll(function() {
menuLinks();
});
Any help is appreciated.
You should use javascript's getBoundingClientRect() method, watch $(window).scroll event, and look at element's rectangle, its bottom value will give you what you need (if it's negative, your element is all the way up)
$(window).scroll(function() {
console.log($("div.watch")[0].getBoundingClientRect());
if ($("div.watch")[0].getBoundingClientRect().bottom < 0)
alert ("i'm out :3");
});
see jsFiddle http://jsfiddle.net/ja5nnbwr/2/
Add the height of the div. Assuming it is the .container :
var menuLinksTop = $('.container').offset().top + $('.container').height();

Div scrollTop with jQuery issues

I'm using jQuery scrollTop to toggle a div class. Please see the below code
$(".div-two").scroll(function() {
var useFixedDiv = $(".div-two").scrollTop(100);
$('.div-two').toggleClass('div-two-fixed', useFixedDiv);
});
This doesn't seems to work. Also i change the line
var useFixedDiv = $(".div-two").scrollTop(100);
to
var useFixedDiv = $(".div-two").scrollTop() > 100;
Still no results. Any advice will be appreciated.

Resizing font based on screen width

Can someone help me with JavaScript code that resizes a font in a div if the screen width is lower than 1100px
if (window.screen.width <= 1100) {
var item = document.getElementById("div1");
item.style.fontSize = "25px";
item.innerHTML = "String";
}
This is what I have so far. Can someone help me with what to do next?
Your code works for me in JS Fiddle. Perhaps you are not specifying the correct id for your div or something like that.
http://jsfiddle.net/trott/GqFPY/
If you are hoping the code will be triggered on a browser resize, you will need to bind it to an event. (See Michael's answer.)
You will need to bind the action to the window.onresize event:
var resizeFonts = function() {
var item = document.getElementById("div1");
if (window.screen.width <= 1100) {
item.style.fontSize = "25px";
item.innerHTML = "String";
}
// Otherwise set a larger font
else item.style.fontSize = "30px";
};
window.onload = resizeFonts;
window.onresize = resizeFonts;
I have an OLD blog in which I posted about changing the font size, but it was made to show how to use jQueryUI slider. Maybe you can use some of the logic there to create your own solution:
http://weblogs.asp.net/thiagosantos/archive/2009/03/21/my-first-time-with-jquery-ui.aspx

Categories