I am no web designer pro so please be gentle
Situation:
I am currently building a website to be able to share my DJ mixes and studio production work, a preview is available on http://davidloran.com/test-03/index.html .
The site is composed of:
index.html
-> contains:
1- A css3 menu (including list of mixes currently being correctly played in the player)
2- A jquery plugin audio player (http://codecanyon.net/item/fullwidth...-plugin/841563)
3- An IFRAME where the other pages are loaded into
tracks.html
-> contains a list of the production tracks to be selected by the user and then (eventually!) played into the player placed on the index page
facebook.html
-> contains FB comments box
background.html
Problem found:
As you probably noticed from my description text above, the production tracks cannot be played in the audio-player because they are placed in another page (track.html) called into the IFRAME.
Question:
Are there any ways the audio-player .js code (I'll post the code in next) can be modified so that it handles play requests initialised from pages within the iframe?
Any other suggestions come to minds? (remote window? other?)
Thank you!
this what I've got on the index.html page head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dj David Loran</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/nblack.css" rel="stylesheet" type="text/css" />
<link href="css/Iframe.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
<script src="js/jquery.fullwidthAudioPlayer.js" type="text/javascript"></script>
<script type="text/javascript">
//set here the swf folder
soundManager.url = 'swf/';
//need to be flash player 9
soundManager.flashVersion = 9;
//prefer HTML5 audio rather than flash
soundManager.useHTML5Audio = true;
$(document).ready(function(){
$('#fap').fullwidthAudioPlayer({autoPlay: 'true', wrapperPosition:'bottom', wrapperColor:'#3f3f3f'});
});
function changeContent() {
document.getElementById('tracks').innerHTML="";
}
</script>
</head>
where, from the same page, links like this one play correctly in the player:
<ul class="fap-my-playlist">
<li>Lounge session - Bar</li>
The question is: How do I get the same types of links work from a different page opening within an IFRAME?!?
You can indeed make something happen in one frame when something happens in another frame using JavaScript. Use the parent object from within the frame. Look here for some examples: http://www.pageresource.com/jscript/jframe1.htm
Also, you mentioned in passing that you might want to do it from another window, as well. This can be accomplished using window.opener.
Related
I'm having some serious issues with my History.js/Ajaxify script. The main problem is that after a page has been loaded with history.js (by clicking a link), the other javascript in the <header> tag aren't loaded, in fact it's as if they've been unloaded.
To fix this problem I decided to load the scripts with statechangecomplete which I realised after some time, only caused more problems. Because not only does it load the scripts every time I click a link, but after a few page changes Chrome reaches 100% CPU usage.
$(window).on('statechangecomplete', function() {
$.getScript(document.location.origin + "/js/myscript1.js");
$.getScript(document.location.origin + "/js/myscript2.js");
$.getScript(document.location.origin + "/js/myscript3.js");
});
Meanwhile my <head> consists of this:
<head>
<title>Example</title>
<meta charset="utf-8" />
<meta NAME="ROBOTS" CONTENT="NOODP">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//balupton.github.io/jquery-scrollto/lib/jquery-scrollto.js"></script>
<script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<script src="/js/ajaxify-html5.js"></script>
<script src="/js/uikit.min.js"></script>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="/js/myscript1.js"></script>
<script src="/js/myscript2.js"></script>
<script src="/js/myscript3.js"></script>
</head>
The weirdest part about this is that both uikit.min.js and mithril.js works after a page change. After looking through their code and comparing it to mine, I'm starting to suspect the reason to why my code isn't working as it should is because they all contain $(document).ready(function({}); while the mithril and uikit do not.
In the end I'm wondering why it causes my scripts to not load after a page change/history pushstate?
I found the issue, for anyone having the same issue as me, what I did was to delete
var result = String(html)
.replace(/<\!DOCTYPE[^>]*>/i, '')
.replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
.replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
;
return $.trim(result);
From ajaxify-html5.js. This will make it so it doesn't remove the script tags etc.
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??
I am trying to create a webpage including an iframe where the iframe has customizable content. Its an API project.
My main issue is not how to manage appending content to an iframe using jQuery, but in this case I have an empty iframe where I want to insert a full webpage into it. The code for the webpage going into the iframe is received using a .post function where I in return get the full webpage in the data variable.
I can't manage to insert the full code, which include local javascript with important javascript libraries. It is as if it doesn't execute the code inside the iframe. The code is inserted but all the main html/body etc tags are deleted from the code passed in data variable, which prevents various javascript code from working.
I have of course checked that the page received in data variable is ALL of the code. It is correct. The missing tags are missing when displayed in the iframe.
(parent page, domain unknown to me as a API provider)
<body>
<iframe id="EMSNLframe" srcdoc="" seamless></iframe>
<script>
$("#EMSNLframe").load(function(){
$.post("https://api.educationalmedia.se/API_displayNTNewsLetterMenu",
{
ResUID:"[secret code]",
MenuLanguage:"English",
PDFLanguage:"" // Blank for all languages, or state a language
},
function(data,status){
$("#EMSNLframe").contents().find("html").html(data); //<---- this is the line I need a solution for! If there is any.
});
$("#EMSNLframe").contents().find("head").append($("<style> #EMSNLmenu{font-family:'Arial',sans-serif;font-size:12px} </style>"));
});
</script>
</body>
Webpage received in data variable:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta charset="utf-8">
<link href="https://data.educationalmedia.se/styles/kendo.common.min.css" rel="stylesheet" type="text/css" >
<link href="https://data.educationalmedia.se/styles/kendo.default.min.css" rel="stylesheet" type="text/css" >
<script src="https://data.educationalmedia.se/js/jquery.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.core.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.popup.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.menu.min.js"></script>
</head>
<body>
<div class="EMSNLmenu">
<!--#4DHTML HTMLmenu_t--> Don't mind this line of code. It is server side tags for data
</div>
<script>
$("#EMSNLmenu").kendoMenu({
animation: { open: { effects: "fadeIn" } },
orientation: "vertical",
closeOnClick: true,
openOnClick: true,
direction: "bottom right"
});
</script>
</body>
</html>
I'm completely stuck as to how to fix this. When I test it offline it works great. When I upload it and run it live none the images on my site load unless you click on the link for the page a second time. And on the press page it loads for a second and then its the same as the other pages but a second click on the link doesn't fix it. I've checked out this problem in firefox and safari.
P.S. I know my Menu's still are having issues if anyone has any suggestions for that I'd be super thankful. Mainly how can I get the hidden menu to stay centered.
Thanks!!!!!
http://www.tracyashaw.com/e2studio/index.html
http://www.tracyashaw.com/e2studio/press.hmtl
This on on the top of each page
<link rel="stylesheet" href="e2studio.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jMyCarousel.js"></script>
<!-- Optional -->
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
$(".jMyCarousel").jMyCarousel({
visible: '100%'
});
});
</script>
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
//Enter path of images to be preloaded inside parenthesis. Extend list as desired.
preloadimages("images/home_1.jpg","images/newport.jpg","images/newport_life.jpg","images/RI_monthly.jpg","images/unique_homes.jpg","images/ri_monthly_cover.jpg","images/so_ri_press_cover.jpg","images/grace_ormonde_cover.jpg")
</script>
The jQuery mousewheel plug-in you are using clearly states in the header comments that jQuery 1.2.2+ is required, likely due to the dependency on the special property of jQuery's event object. You have linked to jQuery 1.2.1. Also some image requests are coming back with a 404 response code. You'll have to address these two items.
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??