<div data-video="gPXSs-6qRFc"
data-autoplay="1"
data-loop="1"
id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
If I stick this in the HTML, the div becomes populated with a play button, and the corresponding Youtube video (audio) will start to play. However, if I use Javascript to stick it on the page some time after the page has loaded, the div fails to become populated (I assume this is because the scripts we've added don't run).
Using Javascript (triggered by a user action), how can I put this content onto the page and make these scripts run?
Related
I am running a wordpress where content is being added dynamically using a RSS plugin and I have made some modifications where it adds div block inside the loaded content in which there is a script tag with external javascript, this is for advertisements. So basically it looks something like this -
<ul loaded dynamically with RSS plugin>
<li item from RSS plugin>
</li>
<div placeholder for advertisement>
<script with external src which shows actual advert></script
</div>
<li>
</li>
</ul>
This RSS plugin also adds pagination.
When page is first accessed, it loads just fine, script in div block is executed and shows as expected, but when selecting next page for this RSS plugin, it dynamically loads all the next items in next page (actual page is not reloaded/refreshed, just the plugin content) but the script from div is not being executed/shown, it is just blank so I guess it somehow does not execute, also when selecting the previous page again where it was showing first time, it just does not run again, looks like this RSS plugin kills the script from div block.
Is there a way to somehow reload/re-execute this script whenever I select next page etc?
Thanks in advance!
I want to display to the user an initial page with some loading animation while loading the main page in the background.
Once the main page is loaded, the first page will redirect the browser to the main page.
I've tried putting the animation and the main page content on one page, but it still taking a long time until the user sees the animation itself.
Simple loading example I've tried in JSFiddle. The real page contains much more content.
<div id="preloader">
<div id="loader"></div>
</div>
<div id="map"></div>
Let's say that you have a page with two main sections:
<div id='section_1'>[various content]</div>
<div id='section_2'></div> <!-- an external site will be loaded into this div -->
Through the use of a form in section_1, a user can load the content of some other website into section_2 (i.e. the user enters an external URL, hits a 'submit' button, and the content is loaded). When the user requests that the external site be loaded into section_2, an ajax call is made, the code for the external site is downloaded server-side, and the external site's code is sent to the target div (i.e. section_2). The code for the external site will include scripts, CSS, etc.
Is there a way to confine the effects of the CSS stylesheets of the external site to section_2, and to prevent these stylesheets from having any effect on section_1, and on any other section of the page?
how about using object tag to show external page .
<object type="text/html" data="your_url_here" >
</object>
I have a flash page which takes quite some time to load, but I want to show something to the user the instant index.html is loaded but I want it to appear on top of the flash content, preferably at the top middle/center and remove/unload the script once the flash starts loading. How can I go about doing this?
Thanks
as far as I see, you are not able to create a "dialog/overlay" over a flash on most of the browsers( FIREFOX, IE...). so I suggest that you "hide" the div of the flash when the flash is being loaded, and "show" the div of the flash once it's been loaded. e.g.
<!-- when flash loading -->
<div id="wrapper_of_flash" style="display:none">
... flash element here
</div>
My background image is decently large. When my page loads, the HTML is rendered before the background image is loaded onto the page. I would like for the background image to be the first thing to be loaded on the page and then the HTML. Right now it looks weird because without the background image, the text gets pushed up and when the background image is loaded, it all gets pushed to its regular position (not too professional-looking).
Is there anyway in javascript to accomplish this?
Thanks!
I think pre-loading an image is not a solution to you problem since you want the Images to load Before the HTML document is displayed to the user.
i dont have an exact solution but what i did was show a LOADING image to the user while the page loads up and then hide that loading image when the body and images are completely loaded. to do this
<body onLoad="document.getElementById('mydiv').setAttribute('style','display:none');">
<div id=mydiv style="position:absolute;top:0px;left:0px;width:100%;height:100%>
<center> <img src="loading.png>
</center>
</div>
<!-- Other HTML content here -->
</body>
This is just a rough code, hope this helps
You can write javascript that adds the rest of the page to the DOM once everything is loaded.
It's one of the easiest things you can do with jQuery.
However, I don't see the point. As a user I don't want you to do that to me.