Javascript floating box in IE 9 not displayed properly - javascript

I have an issue with one floating box on my website, this floating box was created with JavaScript (I did not code it myself). The code of this floating box looks like this:
<!-- START - popup-box -->
<script type="text/javascript">
var infobox_open = true;
function slide_infobox(){
if(infobox_open){
$("#infobox").animate({left:-180},500);
infobox_open = false;
}else{
$("#infobox").animate({left:0},500);
infobox_open = true;
}
}
</script>
<div id="infobox" class="infobox_container">
<div class="infobox_content">
<float-title>MY TITLE</float-title>
<div>
<script type="text/javascript" src="//app.example.com/data/webforms/191361/j171g722op1.js?v12"></script>
</div>
<div>
<a class="povprasevanje" href="http://www.example.com/link/">Pošljite povpraševanje</a>
</div>
</div>
<div class="infobox_button" id="infobox_button">
<img src="http://www.example.com/infobox_button.png" />
</div>
<div class="clear"></div>
</div>
<!-- END - popup-box -->
In the FF, Opera, Chrome browsers it's displayed properly (see the example here), but in IE browsers (currently viewing IE 9), that's not the case, as it floats too high. Please see this image to see the difference. It works properly in Microsoft Edge browser, though.
I guess the question is: How can I fix this issue, is there anything that should be done with JavaScript code itself in order to IE 9 displaying it properly?

This seems as a CSS issue and not JS.
So in your CSS code add this:
#infobox {
position: absolute; // It should be positioned absolute
top: 200px; // Or the pixels from top or from relative parent you want
}
And it should work. If not please update your code and add your CSS code.

Related

Skrollr won't allow to scroll on mobile for Wordpress, what is the quickest way to resolve this?

I'm still newer to integrating Skrollr on Wordpress, and while I liked it at first I'm questioning if it is outdated to use. Regardless, I've looked up several articles on this but so far I've either done them wrong, or they don't work for some reason. I'll describe more below.
First, I use Elementor with a child theme derived from Hello Elementor. I have two sections with simple HTML plugins where I have scrolling panels fly in and out, the two sections I just have flipped panels. It works perfectly up until I try to use anything on a real life phone (as in not just an emulated one which worked fine) or tablet. Obviously since I've never used Skrollr before on a live site, I was not anticipating this type of hangup.
I'm brining in two instances, so for example here is one:
<div class="panels-container-1a">
<div
class="panel1-1a"
data-anchor-target="#panels-section--trigger-1a"
data-center-top="opacity: 0; top: 100%;"
data-400-top="opacity: 1; top[sqrt]: 60%;"
data-center="top: 50%"
data--400-bottom="opacity: 1; top[sqrt]: 40%;"
data-center-bottom="opacity: 0; top: -0%;"
></div>
<div
class="panel2-1a"
data-anchor-target="#panels-section--trigger-1a"
data-center-top="opacity: 0; top: 0%;"
data-400-top="opacity: 1; top[sqrt]: 40%;"
data-center="top: 50%"
data--400-bottom="opacity: 1; top[sqrt]: 60%;"
data-center-bottom="opacity: 0; top: 100%;"
>
<h2>Upcoming Events</h2>
<p>See the latest action, suspense, and champions live!</p>
<a class="button-shine--link2" href="#">
<div class="button-shine--button2">START WATCHING</div>
</a>
</div>
</div>
</section>
<script
type="text/javascript"
src="/wp-content/themes/rmpw/js/skrollr.min.js"
></script>
<script type="text/javascript">
0;
var s = skrollr.init();
</script>
I've tried creating the id="skrollr-body" by both wrapping the HTML above in a body tag, and I've also tried adding it to <body id="skrollr-body" <?php body_class(); ?>> within the header.php of the parent theme to the entire site. Once I do this, it seems to scroll fine on mobile until it reaches the HTML section, then stops. (I should mention though, that I have a sticky header as well so I'm not sure if that was the issue)
I've also tried putting the following code into the actual skrollr.js file at the bottom within the main function to just simply destroy it after it reached a certain width, then minified it after:
var _skrollr = skrollr.get(); // get() returns the skrollr instance or undefined
var windowWidth = $(window).width();
if ( windowWidth <= 767 && _skrollr !== undefined ) {
_skrollr.destroy();
}
And still to no avail. So what exactly am I doing wrong here? Any help would be appreciated, as I have two sites that currently use this and it would really suck to try to reinvent the wheel so late into release.
Edit: I've tried updating removing the full body ID and adding the id just to the main section for the homepage, and it still seems to not work.
var x = document.getElementsByClassName('elementor-18')[0];
x.id="skrollr-body"
I just simply stopped it from being called at all in the first place and it seems to do the trick, just use static images in place.
if (windowWidth > 767){
skrollr.init()
}

how to solve buggy scrolling after using removeChild

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...

nav going below content on browser resize

I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");

Element Incorrectly Positioned on Page Until Window Resized

I have a webpage containing several Divs which contain individual 'pages'. I have defined the following CSS styles:
#charset "utf-8";
/* CSS Document */
.hideDiv{
display:none;
}
.showDiv{
display: inline;
}
Everything worked fine and for a long while we had no problems either viewing our pages in Safari on our Macs or in IE6 (which our client uses).
We then updated Safari from 4.0.5 and we suddenly had page elements initially appearing incorrectly positioned. The first page is OK but when you click 'Next' an image positioned to the right of the layout appears initially offset considerably to the right mostly outside its containing Div clipping most of the image. However as soon as I resize the window the image jumps into it's correct position. If you click from say page 2 to page 3 and then click back again to page 2, so the image has been cached, it displays correctly.
We painfully downgraded Safari on some Macs and soldiered on with others hoping an update would fix it. Curiously everything works well on my new Mac Pro running Safari 6. The pages always display fine in IE6. My MacBook Pro running Safari 5.1.7 always offsets the images.
I don't believe it is a Browser issue but an area of my code which isn't very robust and some Browsers don't interpret the code as we would want it.
I created fresh html files which are identical to the multi-div page but contain only one 'page'. The layout is solid every time I display it in Safari 5.1.7 so I don't think it is my html/CSS which defines the position of the element. Here is a typical Div containing a single 'page':
<!-- Page 1 -->
<div class="showDiv clear" id="page1">
<div id="bgPic-components">
<!-- Sub-Heading -->
<h1>Sub-Heading</span></h1>
<!-- Page Content Area -->
<div class="contentTextArea fullWidth">
<div style="position:absolute; width:280px; z-index:2;">
<p>Some body text here.</p>
</div>
<table style="position:absolute; right:40px; bottom:40px; z-index:0;">
<tr><td>
<img src="../../medialibrary/3DI/3DI0315.02.01.jpg" style="display:block; position:relative; height:440px;"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
<table style="position:absolute; bottom:24px; z-index:0;">
<tr><td>
<img src="../../medialibrary/photographs/P0825.01.01.jpg" alt="" style="display:block; position:relative; height:300px"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
</div>
</div>
</div>
I would be very grateful for any suggestions to help me narrow down and find the problem.
Regards
Chris

incorporating scrolling feed twitter style

I'm trying to make a twitter like system that scrolls through info slowly and then repeats.
I have it down(kinda) thanks to this tutorial. I have it working on its own and I added my own content but when I try adding it to my webpage it takes a c*** on me and throws all of my content all together at the top of the page. Any suggestions?
<div class="header">
<h2><span>Resteruant Consulting</span></h2>
<h1>Tasty Solutions</h1>
</div>
<div class="content">
<DIV align=center style="background:#fff">
<DIV id="tempholder"></DIV>
<SCRIPT language=JavaScript
src="dhtmllib.js"></SCRIPT>
<SCRIPT language=JavaScript
src="scroller.js"></SCRIPT>
<SCRIPT language=JavaScript
src="mydata.js"></SCRIPT>
<SCRIPT language=JavaScript>
//SET SCROLLER APPEARANCE AND MESSAGES
function runmikescroll() {
var layer;
var mikex, mikey;
// Locate placeholder layer so we can use it to position the scrollers.
layer = getLayer("placeholder");
mikex = getPageLeft(layer);
mikey = getPageTop(layer);
// Create the first scroller and position it.
myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(200);
myScroller1.show();
}
window.onload=runmikescroll
</SCRIPT>
<center><DIV id='placeholder'></DIV></div></DIV></center>
</div>
I have all the other javascript in the same directory. I have javascript enabled in my web browser, and it works on its on its just when I incorporate it into my index.html it gets screwy.
each headline has a "position:absolute", perhaps if you put those headlines in a div with
position:relative;
so the headlines at least will stay just in that div.
if I'm wrong pardon me, if I'm right let me know.

Categories