Maybe some of you have already some experience with using head.js.
I'm a first-time user and I'm having some problems: as soon as I try to load multiple javascript files my <html> tag get a style="margin-left: -32767px;" applied.
<script type="text/javascript">
var path = "<?php bloginfo('template_directory'); ?>";
head.js( path + "/js/jquery-1.5.min.js", path + "/js/css3-mediaqueries.js",
path + "/js/jquery-cookie.js", path + "/js/scripts.js", function() { });
</script>
Any idea why that happens? When I get rid of that weird style attribute in my html with Firebug all javascript libraries work just fine. However when the page loads the content flickers and as soon as this negative margin gets applied absolutely nothing is visible on my page.
The negative margin is coming from css3-mediaqueries.js
the code is:
var _57 = document.documentElement;
_57.style.marginLeft = "-32767px";
setTimeout(function () {
_57.style.marginTop = "";
}, 20000);
I don't know what purpose this has but you could probably delete this without a problem, if you don't want to do that then I would apply a style on the html tag
style="margin-left:0 !important;"
or with JS:
document.getElementsByTagName("HTML")[0].style.margin = "0"
Related
Hi I'm trying to load an element from a webpage via ID.
My code reads the url from the 'href' attribute of the tag and then loads the page. I'm stripping the document anchor.
This script works but won't discard the surround elements and loads the entire page.
<script type="text/javascript">
$(function() {
var a_href = $('#pycom').attr('href').split('#');
$('div#pop-up').load(a_href[0] + '#synopsis');
});
</script>
<body>
<a id="pycom" href="content/documentation/CommandsPython/ls.html#hFlags">ls</a>
</body>
http://help.autodesk.com/cloudhelp/2015/ENU/Maya-Tech-Docs/CommandsPython/ls.html
The above link exists locally on my server (XAMPP) as per the 'html' code above.
Below is the element I would like to extract.
<p id="synopsis">
<code>
xform([objects...],
[absolute=<i>boolean</i>],
[boundingBox=<i>boolean</i>],
.....
.....
</code>
Thanks
Jamie
At first get your page, and then inside the
content find your element with id named 'synopsis' as below:
var a_href = $('#pycom').attr('href').split('#');
$("div#pop-up").load(a_href[0] + " #synopsis" );
It should work, but before that check whether your browser supports mixed content. If your url contains http inside https then browser may not support, In that case you have to disallow the checking in the browser.
Thanks.
OK solved. I was using jQuery 2.4.1 which apparently has a bug that is supposed to be fixed.. but appears to be not?? see here http://bugs.jquery.com/ticket/14773
I am instead using jQuery 1.11.3
below is my final code:
<script type="text/javascript" src="content/scripts/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function() {
var moveLeft = -10;
var moveDown = 10;
$('a#pycom').hover(function(e) {
var a_href = $(this).attr('href').split('#');
$('#pop-up').load(a_href[0] + ' #synopsis');
$('div#pop-up').show().css('top', e.pageY + moveDown).css('left', ((e.width/100)*1) + moveLeft);
}, function() {
$('div#pop-up').hide();
});
});
</script>
The following method using .get also works exactly the same except gives the benefit of being able to process the returned string in the callback.. in this case the trailing section of the requested selected element... very nice stuff.
$('a#pycom').hover(function(e) {
var a_href = $(this).attr('href').split('#');
$.get(a_href[0], function(response) {
$('#pop-up').html($(response).filter('#synopsis').html().split('<br>')[0]);
});
});
Now owning jQuery like a BOSS!!
Thank you to all those who helped out.
Chur!
J
You should not give any space in the URL. There is a space before ' #synopsis'.
$('div#pop-up').load(a_href[0] + '#synopsis');
I have a captcha image for form validation and a javascript to refresh the image if it is unreadable for the user. The script works fine in Chrome, but in Firefox it only works the first time and, after that, though the script runs, the image does not refresh. the image src includes:
<?php echo "?rand=" . rand(); ?>
But despite the fact that the php is working just fine, the refresh is still inoperable.
I've checked this, and this, and have tried many of the suggestions - for example adding and removing no cache meta tags, changing the body and head tags to h:body and h:head.
Many of the suggestions (eg the one here) describe code situations different from mine (in my case I am using a php-generated image.
Any help will be very appreciated.
<script type="text/javascript">
function refresh_captcha()
{
var img = document.getElementById('captchaimg');
img.src = 'captcha_code_file.php?rand=<?php echo(rand()); ?>';
document.getElementById ("captchaimg").src = img.src;
//alert("some alert.");
}
The page is here
Try to use this, random not php, but JS.
function refresh_captcha()
{
var img = document.getElementById('captchaimg');
img.src = 'captcha_code_file.php?rand=' + Math.random();
document.getElementById ("captchaimg").src = img.src;
//alert("some alert.");
}
im going crazy here. i found a script here that was supposedly going to work on chrome as well but i just cant get it to work
here is the script in my header
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.document.body.offsetHeight;
}
</script>
and the iframe
<iframe onload="resizeFrame()" id="mainContent" src="swwbookpg1.php" scrolling=auto frameborder=0
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>
it works in firefox and IE but not in chrome.
if anyone can help that would be amazing!
here it is in use: https://www.whalewatchingsydney.com.au/payment_sww/
thanks =)
Google seem to be living up to their strapline "do no evil". While Chrome is capable of dynamic iframe height adjustment Google do not make it very easy. After two days of struggling with the problem and trying tons of javascript snippets which worked perfectly in every other Browser but Chrome I finally managed to get something that would work. I will share this to hopefully save other website developers the 48 hours pain I had to go through.
Inside external SetiFrameHeight.js file which can then be added to any iframe child document with html.
<script type="text/javascript" src="SetiFrameHeigh.js"></script>
setIframeHeight.js
window.onload=setIframeHeight(window.top.document.getElementById('iFrame_ID'));
//note this code only runs serverside when using Google Chrome, very helpful
function setIframeHeight(ifrm){
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
var RestHeight=ifrm.style.height; //Capture original height see why below.
ifrm.style.visibility = "hidden";
ifrm.style.height = "10px"; //Necessary to work properly in some browser eg IE
var NewHeight = getDocHeight( doc ) + 10;
if (NewHeight>20){
ifrm.style.height=NewHeight + "px";
} else { //if dom returns silly height value put back old height see above.
ifrm.style.height=RestHeight + "px";
}
ifrm.style.visibility = "visible";
}
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight,
html.scrollHeight, html.offsetHeight );
return height;
}
The real magic of this code snippet is the function getDocHeight which basically tries every conceivable dom combination and selects the one that gives the maximum height. I cannot take credit for this got it from http://www.christersvensson.com/html-tool/iframe.htm.
Chrome:
I found that when I create an iFrame with document.createElement and assign it a name ("myIframe"), the new iFrame does not load content when I set its location. But if I assign a url to the element's src, it worked fine. Now then, when instead I manually inserted the iframe tags in the html text (static -- as opposed to using document.createElement) it would load the document when setting its location (and also the tag's src). Strange.
Assuming you are intending to display the iframe's content directly, I wonder why? I like to use iframes but really only to dynamically load content to a container in my top window. The last part of the html loaded into the iframe includes a script that moves the output into the desired location of the top frame.
Example of a php script that loads new content via an iFrame.
// top Frame calls the php script like this:
<div id="myContainerDiv">
<p>old content - please replace me with fresh content</p>
</div>
<iframe name="hiddenFrame" style="display:none;"></iframe>
<script>
hiddenFrame.location = 'index.php?getNewContent=125';
</script>
// the following script would be at the top of index.php
<?php //
if( isset($_GET['getNewContent']) ):
echo '<div id="myIframeHtml">';
// the html that I want to load to the top frame..
echo '</div>';
?>
<script>
newContent = document.getElementById('myIframeHtml').innerHTML; // from this iFrame
topContainer = top.document.getElementById('myContainerDiv'); // in top frame
topContainer.innerHTML = newContent; // no fuss-no muss --> no encoding or parsing
</script>
<?php
exit;
endif;
im trying to use html and javascript to create a rotating logo on my site.
I want it to rotate on page load, and load them randomly.
Ive tried SO MANY THINGS! that i found on google, and i cant seem to get it to work. Im trying to avoid using php to do it.
i want to be able to have the random image in a tag like below, (if possible)
<img src="" />
So, just to sum it up.
I want to use "html" and "javascript" to create a script that everytime a page is refreshed, it loads a new logo from a directory on my server.
EDIT: what i have tried
<script type="javascript>
Array.prototype.random = function () {
return this[ parseInt( Math.random() * this.length ) ];
}
var myImage=[
"logo1.png",
"logo1.png",
"logo1.png",
"logo1.png"
].random()
document.wite(myImage)
</script>
You should avoid using document.write. Instead put an id attribute on the img tag, and retrieve it using document.getElementById. You can make it refresh at intervals using the setInterval method:
<img id="logo" />
<script type="text/javascript">
var logos = ["logo1.png", "logo2.png", "logo3.png"];
var currentLogoIndex = 0;
function updateLogo() {
document.getElementById('logo').src = logos[currentLogoIndex];
currentLogoIndex++;
currentLogoIndex %= logos.length;
}
window.setInterval(updateLogo, 1000);
updateLogo();
</script>
you can store the pathes in an array and select them by using random index.
$(document).ready(function() {
var src = ['path1.jpg', 'path2.jpg', 'path3.jpg', 'path4.jpg', 'path5.jpg', 'path6.jpg', 'path7.jpg', 'path8.jpg', 'path9.jpg'];
$('img').attr('src', src[Math.floor(Math.random()*10)]) // it returns a number between 0 and 10
});
You know, there is a jQuery plugin for this which utilizes CSS transformations.
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html
I am Resorting to php guys.
<img src="/images/logo/<?php $random = rand(1,3); echo $random; ?>.png" alt="LOGO!!!!" />
works perfectly :)
<html>
<body>
<h1>Random logo From List</h1>
<script type="javascript>
Array.prototype.random = function () {
return this[ parseInt( Math.random() * this.length ) ];
}
var myImage=[
"logo1.png",
"logo1.png",
"logo1.png",
"logo1.png"
].random()
document.wite("<img src='" + myImage + "' />)
</script>
<h2>Hoo just got a random logo</h2>
</body>
</html>
Looks like this was what you tried for:
For a bit of explanation using document.write and document.getElement:
When you write inline code like above you can use document.write, it will just add the texts just after </h1> like a normal "print" operation.
Once you use it after document is loaded, it clears everything and overwrites whole thing.
If you want to change the document after it is loaded, you have to edit the DOM, the document is represented as DOM after its loaded. In that case you should use different DOM manipulation functions like
document.getElementById('logo-image').src = myImage;
I have an issue where the JavaScript source file is loading in popup for IE6, Chrome, Firefox, Safari and Opera. But the same source file is not loading up in IE8.
As a result of this the HTML is not being replaced in the Popup and I am getting an error in IE8 popup saying tinyMCE is not defined
I have referred to Formatting this JavaScript Line and solved issue on all browsers except IE8.
The JavaScript function is as follows:
function openSupportPage() {
var features="width=700,height=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes";
var winId=window.open('','',features);
winId.document.open();
winId.document.write('<html><head><title>' + document.title + '</title><link rel="stylesheet" href="../css/default.css" type="text/css">\n');
var winDoc = winId.document;
var sEl = winDoc.createElement("script");
sEl.src = "../js/tiny_mce/tiny_mce.js";/*TinyMCE source file*/
sEl.type="text/javascript";
winDoc.getElementsByTagName("head")[0].appendChild(sEl);
winId.document.write('<script type="text/javascript">\n');
winId.document.write('function inittextarea() {\n');
winId.document.write('tinyMCE.init({ \n');
winId.document.write('elements : "content",\n');
winId.document.write('theme : "advanced",\n');
winId.document.write('readonly : true,\n');
winId.document.write('mode : "exact",\n');
winId.document.write('theme : "advanced",\n');
winId.document.write('readonly : true,\n');
winId.document.write('setup : function(ed) {\n');
winId.document.write('ed.onInit.add(function() {\n');
winId.document.write('tinyMCE.activeEditor.execCommand("mceToggleVisualAid");\n');
winId.document.write('});\n');
winId.document.write('}\n');
winId.document.write('});}</script>\n');
window.setTimeout(function () {/*using setTimeout to wait for the JS source file to load*/
winId.document.write('</head><body onload="inittextarea()">\n');
winId.document.write(' \n');
var hiddenFrameHTML = document.getElementById("HiddenFrame").innerHTML;
hiddenFrameHTML = hiddenFrameHTML.replace(/&/gi, "&");
hiddenFrameHTML = hiddenFrameHTML.replace(/</gi, "<");
hiddenFrameHTML = hiddenFrameHTML.replace(/>/gi, ">");
winId.document.write(hiddenFrameHTML);
winId.document.write('<textarea id="content" rows="10" style="width:100%">\n');
winId.document.write(document.getElementById(top.document.forms[0].id + ":supportStuff").innerHTML);
winId.document.write('</textArea>\n');
var hiddenFrameHTML2 = document.getElementById("HiddenFrame2").innerHTML;
hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&/gi, "&");
hiddenFrameHTML2 = hiddenFrameHTML2.replace(/</gi, "<");
hiddenFrameHTML2 = hiddenFrameHTML2.replace(/>/gi, ">");
winId.document.write(hiddenFrameHTML2);
winId.document.write('</body></html>\n');
winId.document.close();
}, 300);
}
Additional Information:
Screen shot of the page
Rendered HTML
Original JSPF
please help me with this one.
Why are you using actual DOM functions to add the <script> tag that includes tinymce.js but everything else is using document.write?
I think that's also where your problem lies, as <head> is within <html>, which is not yet closed where you want to append said <script> tag.
Otherwise, you could use the existing <script> tag in the popup to add the code that includes the required external javascript file. If that makes any sense.
So, basically I'm saying, try it the same way as everything else is in your script, using document.write.
(quick addition) I'm not saying this is the 'best' way to do this, I would recommend creating an actual page instead of dynamically creating one in the popup. But in this scenario, I think what I wrote earlier might solve the problem you are having.