We Keep Coding

how to reset style that changed by using javascript

I am trying to make a full RWD webpage using HTML5, CSS3, and JavaScript.
I have used #media in my CSS stylesheet file to set aside width:0; and hidden overflow, in small devices. I added a button that calls java scripts to minimize article and maximize aside menu, and another button to minimize aside and return article.
The following code is called:
function openaside() {
document.getElementById("article").style.width = "0";
document.getElementById("aside").style.width = "100%";
document.getElementById("showasidebtn").style.width = "0";
document.getElementById("hideasidebtn").style.width = "25pX";
}
function closeaside() {
document.getElementById("article").style.width = "100%";
document.getElementById("aside").style.width = "0";
document.getElementById("showasidebtn").style.width = "25px";
document.getElementById("hideasidebtn").style.width = "0";
}
My page correctly responds to screen size and my scripts work fine. However when I use these scripts to change style and then change screen size, my article and aside width do not dynamically change until I refresh the page.
I have added the following JavaScript code to refresh page when screen is resized:
window.addEventListener("resize", onresize);
function onresize(){
location.reload(false)
}
Thanks every one I Find a way, instead of
function onresize(){
location.reload(false)
}
I use:
function onresize(){
document.getElementById("article").style.width = "";
document.getElementById("aside").style.width = "";
document.getElementById("showasidebtn").style.width = "";
document.getElementById("hideasidebtn").style.width = "";
}
But article minimize when the screen is moved in phones (e.g. scrolling). So now phone users should first scroll then open side menu. Could you help me find a better way? Is there any way to call a script when screen width exceed a certain amount?

I seems in java script we don't have independent event listener for screen size. But I realized we can get screen size, so I use following code:
function onresize() {
window.addEventListener("resize", onresize);
var viewportwidth;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth
}
//then I checked size to reset if nesecery
if (viewportwidth > 600) {
document.getElementById("article").style.width = "";
document.getElementById("aside").style.width = "";
document.getElementById("showasidebtn").style.width = "";
document.getElementById("hideasidebtn").style.width = "";
}
JAVA SCRIPT IS AMAZING.
Thanks all.

Efficiently Find Page Max Dimensions

I am currently running a script on a third-party page to determine the maximum dimensions of the page. At first, this may seem as if I could just use outerWidth() and outerHeight() on my parent wrapper, #base but the problem is that the page wrapper isn't sized from its children. So I might have a parent that is 0x0 and its child is 400x400 and a child inside of that which is 500x500. It seems they just allow overflow. I have tried some CSS tricks in attempt to force the parent #base to size itself correctly, but the children don't seem to drive this change and modifying their CSS causes actual alignment issues on the page. Additionally, there are many hidden items on the page that do not become visible until later or during page interaction so this further prevents me from just grabbing the outer dimensions of #base or something like that.
My current approach is to iterate through every single element on the page. I check to see where it is positioned and what its dimensions are. Based on those, I update my maximum dimensions. I also have to check for horizontal and vertical scrolling elements because those may be on the page too. If a wrapper is 500px wide and the child has a width of 1000px, but is scrolled, I wouldn't want that to affect my maximum dimensions. Anyways, this approach works but it's slow. Sometimes the page may have +15k elements. With these numbers, it takes 10 seconds on my machine. I might be able to optimize some of the conditional statements to use booleans instead of evaluating values, but I don't think this will make a significant difference. I'm hoping there is some process I'm completely overlooking. Below is my current code snippet and a demo showing how the page looks prior to running the code and after the code has been run.
Demo: https://p826ni.axshare.com/#g=1&p=without_code
$('#base *').not('script, style').each(function () {
currentElement = $(this);
// Initialize on first loop.
if (parentElementHorizontal === undefined && parentElementVertical === undefined) {
parentElementHorizontal = currentElement;
parentElementVertical = currentElement;
}
width = currentElement.outerWidth();
height = currentElement.outerHeight();
scrollWidthHidden = currentElement[0].scrollWidth;
scrollHeightHidden = currentElement[0].scrollHeight;
top = currentElement.offset().top;
left = currentElement.offset().left;
// Check if we're still within the parent containing horizontal-scrolling overflow.
if (!$.contains(parentElementHorizontal[0], currentElement[0])) {
hiddenWidth = false;
}
// Check if we're still within the parent containing vertical-scrolling overflow.
if (!$.contains(parentElementVertical[0], currentElement[0])) {
hiddenHeight = false;
}
// Check if we've found an element with horizontal-scrolling content.
if (!hiddenWidth) {
maxWidth = maxWidth < left + width ? left + width : maxWidth;
} else if (currentElement.width() > maxWidth) {
currentElement.addClass('redline-layer');
}
if (scrollWidthHidden > width && !hiddenWidth && width > 0) {
hiddenWidth = true;
parentElementHorizontal = currentElement;
}
// Check if we've found an element with vertical-scrolling content.
if (!hiddenHeight) {
maxHeight = maxHeight < top + height ? top + height : maxHeight;
} else if (currentElement.height() > maxHeight) {
currentElement.addClass('redline-layer');
}
if (scrollHeightHidden > height && !hiddenHeight && height > 0) {
hiddenHeight = true;
parentElementVertical = currentElement;
}
});

JS: Removing class from section

I use parallax effect on my site, but when the screen is smaller the background images starts to be cut off a bit. I decided to have parallax effect only on desktops and to remove this from other smaller devices.
For example I have 3 sections:
<section class="bg1 parallax"></section>
<section class="bg2 parallax"></section>
<section class="bg3 parallax"></section>
Parallax class is not described in CSS, it is added just to let the JavaScript know to which section parallax should be included.
My question:
Has someone got a script which can remove class "parallax" if screen width is smaller than for example : 1280px ?
If width is bigger than 1280px
<section class="bg1 parallax"></section>
Otherwise
<section class="bg1"></section>

I haven't tested it, but this should put you in the right direction...
window.onresize = function(){ // may not be the window object
if (screen.width < 1280) { // many ways of detecting screen width
var sections = document.querySelectorAll("section"); // create array of all section elements
for (var i = 0; i <= sections.length-1; i++) { // loop through them
sections[i].classList.remove("parallax"); // remove their parallax class
};
};
};

It seems a bit hacky, but you could do something like:
// closure so we don't pollute global scope. This should be run at the bottom of the page so that it can find all of the parallax elements on the page
(function(){
var previous_width = 0;
var cutoff = 1280;
var $parallax_elements = $('.parallax');
function check_width() {
var current_width = document.body.clientWidth;
// if the document has gone from narrow to wide, re-enable parallax
if (current_width > cutoff && previous_width <= cutoff) {
$parallax_elements.addClass('parallax');
}
// if the document has gone from wide to narrow, disable parallax
else if (current_width <= cutoff && previous_width > cutoff) {
$parallax_elements.removeClass('parallax');
}
// store the current width for the next check
previous_width = current_width;
}
// run it every time the window resizes
$(window).resize(check_width);
// run it once to initialize
check_width();
})();

Tried this in console and seems to work.
if(window.innerWidth < 1280){
var parallaxes = document.getElementsByClassName('parallax');
while(parallaxes[0]){
parallaxes[0].classList.remove('parallax');
}
}

Jquery .css() disabling height changes made with media queries?

I'm having a trouble debugging a site that's not acting very responsively. I have media queries like so:
#media (min-width: 768px) and (max-width: 992px)
{
.radio-page {
height: 1470px;
}
}
#media (min-width: 993px) and (max-width: 1199px)
{
.radio-page {
height: 1525px;
}
}
(There are a few more breaks at larger screen dimensions but I don't think they are relevant)
I haven't specified a height for this class at dimensions less than 768, instead opting for the following javascript/jquery:
function confirmer() {
if ($(window).innerWidth() < 767) {
var inHeight = $('.iright-4 p').offset().top +
$('.iright-4 p').height() - $('.inner-radio').offset().top;
var outHeight = inHeight + $('.inner-radio').offset().top - 42;
$('.inner-radio').css('height', inHeight + 20);
$('.radio-page').css('height', outHeight + 50);
}
// debug code to report element height
console.log('radio-page is ' + $('.radio-page').css('height'));
}
$(document).ready(function() {
confirmer();
$(window).resize(confirmer);
});
All is well when it loads. The problem occurs specifically when the window is resized from below 767px into something higher. For some reason the media queries no longer change the height value of the .radio-page element, despite the javascript changed being isolated to < 767px. .radio-page stays at exactly whatever height it was when the resize passed the threshold.
Also, I have a suspicion that the confirmer function is being disabled altogether when the window is > 767px, because I'm losing console updates. All is well when I re re-size to < 767px (the jquery operates as intended).
Any help is most appreciated,

SOLUTION
function confirmer() {
if ($(window).innerWidth() < 767) {
...
} else {
$('.inner-radio').css('height', '');
$('.radio-page').css('height', '');
}
...

When the javascript code sets your elements to have a specific height at < 767px, it is changing the style attribute of those elements. When you resize to 767 px or above, your CSS is trying to take over for the javascript, but that style attribute defining the height is still there. One possible solution is to clear it in your code:
function confirmer() {
if ($(window).innerWidth() < 767) {
var inHeight = $('.iright-4 p').offset().top +
$('.iright-4 p').height() - $('.inner-radio').offset().top;
var outHeight = inHeight + $('.inner-radio').offset().top - 42;
$('.inner-radio').css('height', inHeight + 20);
$('.radio-page').css('height', outHeight + 50);
}else{
$('.inner-radio').css('height', '');
$('.radio-page').css('height', '');
}
// debug code to report element height
console.log('radio-page is ' + $('.radio-page').css('height'));
}
$(document).ready(function() {
confirmer();
$(window).resize(confirmer);
});
As per the jQuery docs on $.css():
Setting the value of a style property to an empty string — e.g. $(
"#mydiv" ).css( "color", "" ) — removes that property from an element
if it has already been directly applied, whether in the HTML style
attribute, through jQuery's .css() method, or through direct DOM
manipulation of the style property. It does not, however, remove a
style that has been applied with a CSS rule in a stylesheet or
element.
In regards to losing console updates, I cannot answer that part of the question. Perhaps you are getting updates, but because the height value is the same, your browser recognizes them as identical messages and collapses them into one? Check if there is a small number next to your message. Here's an example from Chrome:

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.