how to solve buggy scrolling after using removeChild - javascript

So there is this webpage:
<body class="" style="overflow: hidden;">
<div> <!-- stuff --> </div>
<div class="AbCde Zy1XW ">
<!-- unwanted crap -->
</div>
</body>
I want to remove
class="AbCde Zy1XW "
and
style="overflow: hidden;"
from
body
so I used this code:
d=document
e=d.getElementsByClassName("AbCde Zy1XW ")[0];
e.parentNode.removeChild(e);
document.querySelector('body').removeAttribute('style');
It works but the problem is that the scrolling of the webpage is buggy on iOS. You have to zoom in and out before you can scroll normally. But after a while, you can't scroll anymore and need to do the zoom out/zoom in trick again. Any ideas why? Thanks
EDIT:
Using
remove();
also has this same issue...

Related

CSS: How to place a <script> element on the page

I am developing a web application using AngularJS.
I have a problem: in an HTML page I needed to show a table that dynamically show the number of rows based on a user's choice. I achieved this effect using a script and bootstrap rules.
I won't go into details, but I just show you the high-level code and a screenshot of the result:
HTML code:
<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<!-- Code of the element drop down menu.....-->
</ul>
</script>
<div>
<ng-form >
<div class="panel panel-default table-panel noborder">
<div class="table-responsive">
<table ng-table-dynamic="$ctrl.tableParams with $ctrl.cols" class="table" template-pagination="custom/pager">
<!-- Code of the table.......-->
</table>
</div>
</div>
</ng-form>
</div>
The result is something like that:
My problem is that no type of CSS code seems to work to move the dropdown menu position to this position:
I tried to use position (relative, absolute, fixed) and also to encapsulate the <script> element inside <div> or <span> and refer it with CSS rules. But nothing seems to work! The dropdown menu always remains at the bottom and center of the page. I guess it's bootstrap's fault. Can you tell me how I can resolve this issue?
The pagination buttons are working. If the css should also work. You can place the below code into the codepen to see the effect.
Codepen
.table{
position:relative;
}
.ng-table-counts{
position:absolute;
top:0;
right:0;
}

jquery scrolling vertical/horizontal

I'm trying to make an entire website with all events triggered by scrolling. I just need help to achieve this effect :
I have a website with a few divs which fill all the viewport, I want the user to be able to scroll down to a named div and then when he keep scrolling the website stop scrolling vertically but the content of the div scroll horizontally. when it's done the website can scroll vertically again.
<body>
<header> </header>
<div class="scroll-vertical" id="tile1"></div>
<div class="scroll-vertical" id="tile2"></div>
<div class="scroll-vertical" id="tile3"></div>
<div class="scroll-horizontal" id="tile4">
<div class="horizontal" id="tile5"></div>
<div class="horizontal" id="tile5-a"></div>
<div class="horizontal" id="tile5-b"></div>
<div class="horizontal" id="tile5-c"></div>
</div>
<div class="scroll-vertical" id="tile6"></div>
<div class="scroll-vertical" id="tile7"></div>
<footer> </footer>
How to make that the website can only be scrolled from one div to the other ( full page)
I know there is a jquery plugin named fullpage.js which does that pretty well but as a student learning web development using plugins is not the best way to improve my skills.
Thanks for your help!
Cheers Simon
Why would you assume that ?
I doubt it can get much simpler than
$(document).ready(function() {
$('#fullpage').fullpage();
});
The author of the plugin also most likely already encountered, considered and had to solve a number of details and issues, cross-browser and non, that you have not yet had a chance to think about.
Edit :: animating divs:
$( "#bigasshorizontaldiv" ).animate({
left: "-=thewidthofoneviewport",
}, 5000, function() {
// Animation complete.
});

Images loading with wrong width angular

<div class="list" ng-controller="ListController">
<div class="list-item list-item-flex" ng-repeat="collaborator in collaboratorList">
<div class="list-left list-left-flex">
<img ng-src="images/{{collaborator.imgUrl}}" width="190px" height="190px"/>
<div class="padded-text">
<h1 class="collab">{{collaborator.name}}</h1>
<p>{{collaborator.info}}</p>
</div>
</div>
<div class="list-right list-right-flex">
<a class="mail" href="mailto:{{collaborator.email}}"> {{collaborator.email}}</a>
</div>
</div>
This is my template for previewing collaborators with their images and info. Every time I close the browser and start it again, upon loading this template the height is normal, but the width of the images is 50.466px even though I've set the width both inline and in CSS. If I resize the window or refresh it they go back to the desired width of 190px. It would be great if someone can help me figure out why this happens.
Edit: This does not seem to happen in Firefox, it does in chrome and IE.
Edit2: I have finally found the solution. My it was a flex-box issue, I have made the image align to the left and the text to the right and all works fine now.

IE10/Safari Cannot Hide an Object/Flash inside of iFrame

I have a Flash Animation inside of iFrame. And when I try to hide it, IE10 keep it displayed and overlapping other content.
<body style="background-color: #EEE">
Testing IE10
<div id="swfDiv">
<iframe src="swf.html" width="500" height="50"></iframe>
<br />
<button onclick="document.getElementById('swfDiv').style.display='none'">Hide</button>
</div>
<div style="background-color: #DDD">
This try to hide the animation, but it is not working on IE10. <br/> It works fine in others browsers and earlier versions of IE.
</div>
</body>
Update 02/08/2013
I found the same problem in Safari (5.1.7)
Apparently the best solution will be move it off the screen:
.xhide
{
display: block;
position: absolute;
left:-9999px;
}
We can add this class on click to hide it, something like:
document.getElementById('swfDiv').className = "xhide";
Navigating away before closing the iframe solved my problem on a XBAP, I think it will work for flash too
var $iframe = $("#id");
$iframe[0].src = 'about:blank';
$iframe.remove();

Overlay of objects is wrong in chrome, but works in firefox

I have a question about a project i'm working on.
The website is www.AC-photography.net
When opened in Firefox, the "start scrolling" can be clicked on but when opened in chrome it seems that there is something in front of this layer. Can someone assist on how to make this work in chrome. I will post the html concerning
<div id="main">
<header id="top">
<div class="color_bar"></div>
</header>
<div class="title">
<div class="logo">
<img src="images/logo.png" alt="" />
<!-- <p class="intro_text"> Alex Cherkasov | Art Director </p>-->
<p class="sub_intro">Start Scrolling</p>
</div>
</div>
The direct problem seems to be z-index: auto on your .title class - set this higher than 800, and it should be fine in Chrome.
That aside, you could also do with cleaning up syntax - a paragraph inside an anchor (block level inside inline), with the second not actually defined as block, is asking for trouble!
It looks like it's missing a closing </div> tag. That might be the problem.

Categories