Gap above header breaking page in Chrome/Opera - javascript

I have a gap appearing above the header of my page in Chrome and Opera which is breaking the navigation and other parts of the page. Please see here.
I had this exact same problem before rebuilding my site but can't for the life of me remember now what the problem was or what I did to fix it... hopefully it is not something too stupidly simple and obvious, and allow me to apologize in advance if it is, but I'm feeling a bit too mentally drained to even think straight enough to figure it out at the moment, despite my best efforts.
I suspect it may be somehow related to the simple PHP script which randomly loads either index1.html or index2.html from the root directory, since if you go to either URL directly (ie. http://samnorris.co.nz/tesla/index2.html) the problem is no longer apparent... I'm not sure if some kind of invisible error is being spit out or something which is breaking the page?
This is the PHP script which is contained in an index.php in the root dir
<?php
$randNumber = mt_rand(1,3);
if ( $randNumber == 1 )
{
include 'index1.html';
}
else
{
include 'index2.html';
}
?>
I have checked the Web Inspector tools in Chrome but am not overly familiar enough to know how to interpret it properly, there seems to be one small error relating to part of a script in siriwave.js - but I don't think it is related...
I'm at a bit of a loss, so any help at all would be appreciated!

The response of http://samnorris.co.nz/tesla/index2.html and http://samnorris.co.nz/tesla/ are not the same.
http://samnorris.co.nz/tesla/index2.html
http://samnorris.co.nz/tesla/
Due to the presence of <U+FEFF><U+FEFF>
The whole parsed HTML is getting malformed for http://samnorris.co.nz/tesla/
The tags specified within head are appearing within body.
What is injecting these <U+FEFF><U+FEFF>extra characters?

You should try using W3C Validator
<head></head> element is empty. Your meta,link, tags are below your head.

Okay, definitely solved it this time. Seems this was the issue: http://wordpress.org/support/topic/weird-characters-inserted-before-doctype
something to do with incorrectly formatted UTF encoding in the php file... very weird indeed.

Related

Difficulty sending values to input fields (sounds ridiculous)

EDITED: New information: When I inspect the field, and the code is highligted (in the inspector), then the statements all work as they should, but when the field isn't highlighted anymore, the statements do not appear to work. Hopefully this helps diagnose the issue.
I have a wufoo form (a hosted form that you can embedd, send to spefic email on submit etc). I have a field on that form that I am trying to populate with a certain piece of data once I click a button. I believe I have the correct code to make this happen, and it should work:
$('#my-button').click(function() {
$('#Field3').val("something");
});
I have tried many different ways:
$('input[id="Field3"]').val("something");
$('input[name="Field3"]').val("something");
and a few reaches which I didn't really think would work..
$('#Field3').append("something");
$('#Field3').text("something");
There are a few things that confuse me here, and I will post screens below showing what I mean. I can type all of these commands in the console once the page is loaded and nothing will happen to the field (with the id of Field3)...most of the time. But on several occasions, I would reload the page, try a few statements again, yes the same ones, and then it would work. No idea why or how, but it is sort of an intermittent thing. Obviously that's probably not the case, but I am pretty confused as to why this is happening;
Below are three screens of my console. For the first two, the field finally populated after about 10 or more tries in the console, and then continued to work while using commands that didn't work before. The last screen is an attempt that did not work at all:
[![Eventually Works After Last Command][1]][1]
[![Eventually Works After Last Command][2]][2]
[![Did Not Work][3]][3]
[1]: http://i.stack.imgur.com/JKVxY.jpg
[2]: http://i.stack.imgur.com/MLca8.jpg
[3]: http://i.stack.imgur.com/0viRA.jpg
(Apologies for the way I had to post these images, I keep getting formatting errors that will not let me continue to save the post unless I cmd+k them)
I try everything in the console first, but I can not find any patterns here. Any ideas or input would be greatly appreciated, and thank you for your time.
At this point I'm pretty sure the problem has to do with the form-code switching or adding certain classes under certain conditions, so I downloaded the code from my Wufoo account rather than embedding it. Then I only added the code for the view (not css or JS), and it works now.
My original statements (not the reachers) all work fine now when I try them. Thanks for the time everyone.
I know you solved your issue, but figured I'd chime in in case you or others have this issue again in the future. It sounds like your issue was related to execution order. Wufoo's embed scripts are asynchronous, so it's very likely that the input fields in question didn't yet exist on your page at the time your jQuery click handler was evaluated. Changing your original code to jQuery's "on" method instead of "click" would likely have solved your problem, as "on" provides a delegated event listener. At any rate, glad you got everything sorted out!
In the console I assume there is no jQuery loaded.
I usually write:
document.getElementById('Field3').value = "something";
Updated your Jsfiddle. The only thing I changes, I added the reference of the
Jquery. Might be that's the problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Run Javascript/jQuery inside iframe

I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .

Ckeditor issue with malformed html

I'm having a huge issue with a customer. I provided him a CMS that allows you to send mails, can edit them from the ckeditor. Last week, he edited one of them, and left some malformed html there... it was something like:
<a href="mylink.html" _blank">
That small piece of malformed html caused ckeditor to crash the entire page next time he tried to access the edit mail page. Ckeditor is not replacing the textarea also, sounds reasonable.
I'm not getting any error on the script, anywhere in chrome. Just Firefox tells me that the script timed out.
Will appreciate any help, due that I'm stuck with this issue.
Thanks so much in advance!
Try this if you can modify the html
Som Text/image

Adding hyperlinks into xml file

I purchased a script online that's no longer supported and I just need one last functionality to finish off my project. One detail the client needs is to have a line of text link to another page in the site.
I do not know a whole lot about xml, but I understand it doesn't support html to include hyperlinks.
This is a quiz where users must answer specific questions in order to move on to the next step. It's fed into a div by a js file, I think, but I don't understand how it works. I'm not going to post any code just yet as I'm just reaching out for some advice right now and if what I want to do is even possible.
Is there some kind of a workaround? I've Googled plenty of sites with code chunks and have done a lot of experimenting, but I mostly just break the page the xml displays on.
Thanks.
Dont use the actual xml syntax of tags like <a></a>. Better replace these with other symbols like [a][/a]. When you output the code, simply replace [ and ] with < and >
You replace code before you put it into a div could look like this:
xmlAsString.replace(/\[/g,"<").replace(/\]/g,">");
edit:
I totally forgot about CDATA.
Forget my previous answer. Just add the <![CDATA[...]]> Tag around the anchor in your XML:
<![CDATA[link]]>

external javascript in iframe always reloading

I have a div with a <script scr='highcharts.js'> that is embedded in the code of that div.
My application will rewrite the source of that DIV every now and then, and write a bunch of new code. It will also rewrite the tag. Every thing works fine (highcharts is working). But because of some other constraints it is quite difficult to write the tag in the main body of the page. (It will take to long to explain exactly why... I hope my question can be answered without :-) )
The strange thing is: when I look with firebug, I can tell the script is being reloaded everytime I rewrite the source of the DIV! There is even some kind of id added to the URL:
/highcharts.src.js?_=1328861301862
I'm not doing this! I don't recognize the ID as anything in my app... It seems that every browser is doing this, so it is not specific to FF. Why is this happing, and is there any way to prevent this?
If anyone wonders how I solved this: I ended up using require.js. This solved the problem neatly :-)

Categories

Resources