Add/Remove class from specific div based off screen size - javascript

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");

Related

get and set css style into var

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 :-)

sticky sidebars in several div

i got for each div an sidebar and i wanted do get all the sidebars by scrolling down fixed.
you can find it here
var tmpWindow = $(window),
sidebar = $('.sidebar'),
sidebarHeight = sidebar.height(),
offsetBottom = $('.content').outerHeight();
$(window).scroll(function() {
if ($(window).scrollTop() >= sidebarHeight) {
$('.sidebar').addClass('fixed');
alert(sidebarHeight);
} else {
$('.sidebar').addClass('fixed');
}
});
http://jsfiddle.net/dLdvv6um/
if i use the js it will disappear...
You're adding a class called "fixed", yet you don't have a class with that name specified in your css. Use .css() if you want to add straight css properties instead: .css({"position": "fixed"});.

Is it possible to hide one div and show another div after scrolling 50% or more?

i have one section inside 2 DIV's where the div's name 1st div and 2nd div . By Default 2nd div will be hidden, after scrolling 50% or more 1st div will be hidden and 2nd div will be displayed. How do i do that?
I used:
var heightDivid = $(window).height() / 2;
$(window).on('scroll', function(e){
$('.sections-class').each(function(){
if(this.getBoundingClientRect().top <= heightDivid ){
$(this).removeClass('heightDivids') ;
}
else{
$(this).addClass('heightDivids') ;
}
})
})
Perhaps you can alter something along these lines to do what you're attempting to do.
Utilize jQuery's scrollTop to identify where you want the change to occur.
Set a limit for when you want to hide the one div and show the two div.
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 10) {
$('.two').show();
$('.one').hide();
}
});
Example: http://jsfiddle.net/xv2m4qn6/
If you want the effect to reverse simply add a second conditional:
Example: http://jsfiddle.net/xv2m4qn6/1/
At Last I did :) and it's work for me .... Thank you all for your help :)
var shadowEdgePoint = $(window).height() / 2;
$(window).on('scroll', function(e){
$('.section-class').each(function(){
if(this.getBoundingClientRect().top <= shadowEdgePoint){
$('.two').show();
$('.one').hide();
}
else{
$('.two').hide();
$('.one').show();
}
})
});

How to remove class with Javascript

Another Newbie Question:
I am attempting to completely remove a class from the DOM when the screen.width is smaller than or equal to 320 px.
Attempting this without specifying a screen width works just fine. The class is removed from the page, but when I attempt to specify the conditional screen width it does not.
Can anyone help me out here?
This is what I have:
<div class="poison">Poison Text</div>
<script>
var p = document.getElementsByClassName('poison');
var cstr = "poison";
var poison = screen.width;
if (poison <= 320) {
(var i = p.length; --i >= 0;) {
var n = p[i];
while (n.className.split(" ").indexOf(cstr) == -1) {
n = n.parentNode;
}
n.parentNode.removeChild(n);
}
}
</script>
You should use media queries instead of JS for this. Add this line to your stylesheet
#media (min-width:320px){
}
and put the class/classes you wish to use at sizes above 320px inside.
You can use max-width and multiple conditions as well.

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