My code was validating perfectly and looked great, until I added a vertical text scroller script to the left most floating div in a 3 column css layout. Adding the script causes content below the script to repeat - both text and backgrounds - in several modern browsers (IE 6.0 - 7.0 - 8.0, Opera 8 - 9- 10). Safari and Firefox are OK.
The script is JavaScript, and you add it by placing this code where you want the scroller to appear on the page, in my case inside the 3rd floated div:
<script language="javascript" src="myvsbody.js" type="text/javascript">
</script>
There is also an onload property that goes in the body tag:
<body onload="vsscrollstart();">
and a parameters script in the head area that formats the scroller box:
<script language="javascript" src="myvsparmsg.js" type="text/javascript">
The script is supposed to be cross browser compatible.
Here is the web page online and links to the code:
http://www.jillknobloch.com/new/
../new/main.css
../new/myvsbody.js
../new/myvsparmsg.js
I thought I had hold of a bad script, so I tried another one and the same layout problem reoccurred!! So I think it's my XHTML/CSS. Also because the script does work across all browsers when used in this template, which I got from template world and loaded on my site:
www.jillknobloch.com/test5/
I HAVE SPENT ABOUT 48 HOURS STARRING AT THE TEMPLATE WORLD PAGE TRYING TO FIND THE DIFFERENCE BETWEEN THAT CODE AND MINE AND I CANNOT FIGURE OUT WHY THE TEXT SCROLL SCRIPT WORKS ON THAT PAGE AND NOT ON MINE.
I am a new Javascipt programmer, and any help would be greatly appreciated!
Thank you
Jill Knobloch
I couldn't find anything wrong in the problematic browsers you mentioned, but the HTML validation error is caused by the language attribute on the script tags. It is not needed. Try this instead:
<script src="myvsbody.js" type="text/javascript"></script>
Related
At the moment, I am working on a website that works with Wordpress and Elementor (latest versions). I'm trying to implement an iframe using an html widget in the Elementor editor. The iframe works via an external website link (of a client) and I would like the iframe to automatically adjust in height to the content of the iframe. However, I am currently not getting this to work with the code below. In the Elementor editor itself it looks good, but on the website itself it is barely visible (due to the limited height) and it does not work. I have tried the following codes as well: height="auto", height="100%", but they didn't work either.
Does anyone know how I can fix this, please? I did try some solutions on other topics, but these didn't work either (and I'm not that good at coding). That's why I created a new topic.
The code used:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script><script
type="text/javascript">iFrameResize({ inPageLinks: true },
'#externallinkname')</script><iframe id="externallinkname"
src="https:// externallink.com/"
width="100%" scrolling="no"></iframe>
- Note: The names of the following codes are changed, due clients privacy: #externallinkname, id="externallinkname", src="https:// externallink.com/"
I am using a banner ad from an ad service provider, similar to google adsense.
Instruction from their site state clearly and simply that all we need to do is to copy the below code to the body of our webpage
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript"><!--
hsoub_adplace = [my account id];
hsoub_adplace_size = '728x90';
//--></script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
I have copied and pasted into my rails app, inside a body of a view file but the banner is not getting displayed and I can see javascript error (with browser inspect source)
TypeError: document.getElementById(...) is null
ps: On old browsers the banner is getting displayed but never on recent versions of browsers.
ps2: The support of hsoub confirmed multiple times, there is no problem from their side (their code is fine and working on thousands of websites, and my account is active with no issues). And it must be a problem from my code.. I am thinking the way Rails handles javascript...
Can you please help me solve this error and get the banner displayed.
ps3: I am using rails 6.0.1 and turbolinks 5.2.0
you can check the error/source code online at https://tafqit.com/
The problem is caused by Rocket Loader feature of CloudFlare cdn service
Rocket Loader improves paint times for pages that include Javascript.
Visitors will have a better experience by seeing content load faster
and speed is also a factor in some search rankings.
Rocket Loader improves paint times by asynchronously loading your
Javascripts, including third party scripts, so that they do not block
rendering the content of your pages.
I disabled it and banner is appearing now.
I am going to guess that this is a script positioning issue. It looks like the script is possibly looking for elements that are not rendered yet, i.e. the document and document body is not ready. Move the scripts to the end of the page i.e. after the body tags and see if that helps. Otherwise please add the exact error and perhaps show a condensed view of your page and the scripts relative to the other elements.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Hello world</h1>
</body>
<script type="text/javascript">
hsoub_adplace = 12345;
hsoub_adplace_size = '728x90';
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
</html>
I managed to get the iframe to load by moving the scripts
Scripts are (still) inside the body tags.
I put together a script that works a charm in Chrome and that, for some reason, refuses to work properly in Internet Explorer 9. The page simply hangs/freezes forever ... and then loads. Likewise, when the user does anything on the page after it has loaded (in this instance loading highcharts by selecting items on dropdown boxes) it will hang/freeze ... and eventually work.
I have tried to debug the page but the freezing makes it very difficult and agonizing. I have had no success identifying the source of the issue. My code loads three libraries and uses one custom script that I put together myself.
Here are the three libraries:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="../Highstocks/js/highstock.js"></script>
<script src="../Highstocks/js/highcharts-more.js"></script>
What I do know from my debugging efforts:
(1) The page refuses to load properly in IE whether I include my custom code or not.
(2) I have tried to remove my libraries one by one. When I remove jquery-ui.min.js the page loads normally. Obviously can't do much with it at that point though ... :-) I have tried loading different versions of jQuery and jQuery UI with no success.
Does anybody have a clue as to what I can do to overcome this bottleneck?
I am using EmbeddedWB (A TWebbrowser extension) to do like a "live preview" of some dynamically generated content.
I am trying to add jQuery into the mix, so I can get some fancy effects going on, however since IE9 always asks "Allow blocked content" for each and every damn page, a dynamically generated one (Webbrowser.LoadFromString) certainly wont be allowed to have fun. To put it simple: It wont allow Javascript execution.
I tried adding a SecurityManager to my TEmbeddedWB, however that did not do it either. I tested my dynamic code in Firefox, and in IE9, and it works (of course, in IE9 I have to allow first, which was how I found it was a security issue).
Is there a painless way to get around this, without having to manually go into IE and tweak something? Or am I completely wrong about the cause of the issue?
EDIT: After trying this article's method, IE does not ask if it should allow stuff anymore, however my script is still not being executed within my TEmbeddedWB/TWebbrowser..
EDIT 2: Okay, by removing the jQuery code, and displaying a plain Alert, I am forced to conclude that JS is now being executed, however jQuery is not.
EDIT 3: Here is the (stripped down) HTML code that my app generates, where jQuery is not working in my EmbeddedWB/TWebbrowser control - however, it works in Internet Explorer 9 itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="file://C:\jQuery.js"></script>
</head>
<body>
<center>
<p>
Some stuff here!
</p>
</center>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('I Am jQuery!!!!');
});
</script>
</body>
</html>
EDIT4: I have also tried switching the src to a Google Hosted jQuery, and that did not work either. Removing the Metatag did not fix it either. Just letting you know of stuff I tried before you waste time on suggesting it :)
EDIT5: By navigating to a site that uses jQuery (Webbrowser.Navigate) the site was working as expected. However when doing it from my local test.html, or by doing .LoadFromString();, it will not work.
Will not work = jQuery code not executing.
It seems to work if you use correct URL for the jquery.js file:
<script type="text/javascript" src="file://C:/jQuery.js"></script>
<script type="text/javascript" src="file:///jQuery.js"></script>
or a relative path, you can also omit the file:// protocol:
<script type="text/javascript" src="../../jQuery.js"></script>
The above works when you load the HTML from a file. The question is however, if content from memory and javascript from file system is not considered crossing a security context boundary and rejected for that reason by the embedded browser. In that case, embedding jquery directly in the HTML content (using the <script> tag) should work.
EDIT: Corrected the site header IE7 code in my original post. Have tried that and inserting X-UA-Compatible: IE=EmulateIE7 into the header without any success. Both of these steps are suggested by Microsoft here:
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
I'm working on a Wordpress blog (URL: www.nxtbot.com) and have encountered some problems with how the blog renders in IE8. The site uses Wordpress 2.8+ and the Mandigo Wordpress theme.
The primary design of the page has one central content window, with two sidebars on the right side of the page that use and display widget elements.
The site loads and displays perfectly when viewed with Chrome, Firefox, and Safari, but breaks when viewed with IE8: Both sidebars disappear, and only the main content window is visible.
I've tried inserting this into the site header...
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
...to force IE7 compatibility, but that didn't seem to help.
Anyone else encountered this problem, or have a fix/workaround?
Your use of to position the content and the sidebar is a really bad idea, but that is not the problem with IE8.
the real problem is that you have an unclosed object tag in post 228 and that eats the rest of the page. As your sidebars are after the content then they disappear.
What you should do (except fixing the broken markup, of course) is to stop using tables and instead draw the sidebars in divs that are right floated, and put them before the content in the HTML. The result would be properly positioned sidebars that are rendered before the content and will not disappear if your content breaks the markup.
" is misssing after content attribute, if that isn't tying mistake.