FYI, ShadowBox is a javscript media viewer/lightbox. http://www.shadowbox-js.com/
Running into an issue when trying to dynamically load SWFs into my ShadowBox.
My script outputs the following HTML:
<div id="LightBoxItemList">
<a href="Images/large01.jpg" rel="shadowbox[Mixed];" class="First" />
<a href="Images/Hydro_Sample.swf" rel="shadowbox[Mixed];width: 800;height: 600;" />
<a href="Images/large01.jpg" rel="shadowbox[Mixed];" />
</div>
After this HTML is created and inserted into my page, I run the following script:
Shadowbox.clearCache();
Shadowbox.setup("#LightBoxItemList a");
Everything loads correct except the SWF. The SWF loads with a width and height of 300x300. I'm not sure what I'm doing wrong, but any advice would be awesome. Also, I'm running init() with skipSetup.
I would also note that if I put in the HTML into the sample statically (not through an AJAX call), it works correctly after my Shadowbox.Init() (with skipSetup taken out).
So it looks like setup() isn't doing what it should be doing. Or I'm doing it wrong.
Any suggestions would be greatly appreciated!
You need to use = after width and height. Not :.
shadowbox[Mixed];width=600;height=200;
Are you sure the HTML you get back from your AJAX is the same as the code that you are using when you put it in statically. You may be having some escaping issues. I'd use Firebug's NET panel and check that out first.
It is a quirk in ShadowBox.
Related
I used this method before.
<iframe data-src="https://youtube.com/...?autoplay=1"></iframe>
On event with javascript I turned the data-src to src and the video started to play.
I had browser caching problems with that, videos autoplaying in background (I load a thumbnail in place for the actual iframe) when going back in the browser. Because of that I switched to a method where I just load the iframe inside a comment
<!--<iframe src="https://youtube.com/...?autoplay=1"></iframe>-->
and then remove the comment on click. I saw Google using this exact method on Google plus. Problem is caching again now, this time server side. I think very likely cloudflairs auto minify is removing HTML comments.
A quick search showed my its probably not possible to mark comments to they wont removed with cloudfliar. On top if this its a wordpress plugin so the issue is still relevant to all kinds of caching plugins that remove HTML comments.
So now my question is. Is there better method lazyloading iframes without HTML comments? I like to still somehow store the iframe in place ... well just as I am writing this I may be able to store the data to build a iframe in some random tag json encoded or something and then build the iframe on click.
Just came across this.
So this the <script> tag could be a good solution, no modification of data needed, but prevents the browser from doing anything with it.
HTML
<script type="text/html" class="arve-lazyload">
<iframe src="https://youtube.com/...?autoplay=1"></iframe>
</script>
jQuery
var lazyloaded_iframe = $('.arve-lazyload');
$( lazyloaded_iframe.html() ).insertAfter( lazyloaded_iframe );
The other method putting it into script was actually again causing W3Tc surround with with [CDATA] messing with my code.
This is my new and hopefully final method. I really like it. The data() gives me the attributes as it comes in. Little big on the HTML but I think finally I am save from caching plugins.
HTML
<div class="arve-lazyload" data-allowfullscreen="" data-class="arve-iframe fitvidsignore" data-frameborder="0" data-name="" data-sandbox="allow-scripts allow-same-origin" data-scrolling="no" data-src="https://www.youtube-nocookie.com/embed/w68VZ8C1Q24?iv_load_policy=3&modestbranding=1&rel=0&autohide=1&playsinline=1&autoplay=1"></div>
jQuery
lazyload = wrap.find('.arve-lazyload');
if ( lazyload.length ) {
$('<iframe></iframe>').attr( lazyload.data() ).insertAfter( lazyload );
}
My task at hand is to download a file through vba. The problem is, that the page is mostly generated via JavaScript. Sorry that i cannot just share the page with you, because I dont own it, but I will try to make things as clear as possible.
The HTML from the IE source viewer looks similar to this:
<head>
css stuff
jscript link
more jscript links
more css stuff
</head>
<body>
divs and links and so on
<div magic inside that div that shows on browser but not in source code></div>
</body>
I very much believe that the java script generates an iframe and fills it with html code.
Do you think that it is possible to retrieve the finished iframe from the java script? Because I can literally see the HTML code when i use the chrome DOM explorer, but I cannot fetch the HMTL data in vba. It drives me crazy that I dont understand this :D
Thank you for your time
What you have described looks like a typical DHTML that could be generated by JS after XHR request. So open the web page e. g. in Chrome, check the Network tab. After the target content has been generated on the page, you will see all requests on the tab, examine them, usually all the data you need to retrieve are shown there (note that some conversion of the data may be necessary). If you find it then you may just do a XHR with the same parameters to retrieve result. Or another way, you can retrieve the generated HTML content accessing DOM, if the iframe is same origin, as it was mentioned above.
This is going to be very hard for me to explain, but I'll give it my best shot.
I am writing a sort of portable book system, using HTML, CSS, and JavaScript. It's essentially a website; you can throw the package up online and it can function like a full website, or keep it local on the machine to read it as if it were a website.
This means I cannot use things like PHP or MySQL; this is all using browser functionality, as anyone who is reading it on their own computer likely wouldn't have WAMP or the like installed to run it.
I'm having a problem trying to make it so that in my main .htm file's <div id="content"> tag always loads external .htm file, even when those external .htm files have <a> links of their own.
I have tried using jQuery to run load(), but when the new content rendered and I clicked on those links inside that new content, it completely drew away from my main page and loaded the full external .htm file into my browser.
And I think I understand why. When I use the $('a') after loading, it only renders that function to the index.htm's own links, and not the new ones I load into the <div>.
I don't want this effect. I want each and every single link loaded each and every single time to always draw content from the linked .htm file into the index.htm's <div>.
I have looked around and found several related answers here, but they either don't work or give me the same result. One was a plugin called "PJAX", which looked like it worked in the library example, but when I loaded it into my own project it wasn't running. I have tried using the ajax() calls I saw in another answer that addressed the url cache and success parameters, and that didn't work.
What am I doing wrong? I didn't think something as simple as loading an external .htm file and repeating the load inside its <a> wouldn't be so intricate as whatever is cutting me off from fixing this. I thought the load() function did the job up until I clicked the other <a> links.
Code Examples to help clarify what I'm talking about. Not full files or perfect, but a model.
index.htm
<body> <!-- book interface -->
<div id="content"></div>
</body>
page2.htm
<body> <!-- a sample page read on the book, fed in the #content -->
test link <!-- link inside the page -->
<!-- ^^^ That link is supposed to open the page1 inside the #content tag of index.htm instead of on its own. -->
</body>
renderpage.js
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
return false;
});
});
When page2's link loads inside index's <div>, and you click the link inside it, it doesn't change the <div> to page1's content. It reloads the entirety of page1 into the browser.
Turns out Chad's answer was correct. If anyone feels like chiming in, I'd like to learn how this works as it did.
$(document).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').load(ahref);
return false;
});
});
Surprisingly I cannot find anyone else having this issue, which means I am doing something wrong. From what I understand, PHP is read first, by the browser, correct?
I am using jQuery UI to display a tabbed view, like so:
<script>
$(function() {
$("#tabs").tabs();
});
</script>
Very simple...
Inside of the tabbed view I have a lengthy bit of PHP code that grabs the system status information from a server and displays this information inside of one of the tabs, called 'system status', like so:
<div id="tabs">
<ul>
<li>System Status</li>
</ul>
<div id="tabs-1">
<?php //Lengthy PHP script ?>
</div>
Normally PHP loads so fast that you cannot tell that the PHP is being loaded before the jQuery UI tab is being loaded. In this case, you will see some text being displayed as the browser loads the PHP script and fetches server-side info before the UI is loaded and it causes my GUI to look really nasty.
I have googled this issue and cannot figure out how to simply force the jQuery to code to execute BEFORE the PHP code, so that you will see my nice tabbed UI first while the PHP code executes within it. Any help or point in the right direction would be great. Oh, and I am also great at getting schooled and slapped in the face with hard computer science if I am completely missing something important here. Thank you.
You can give your tabs content a class e.g content and in css make it display:none
<div id="tabs-1" class="content">
So the text being displayed as the browser loads the PHP script will not be visible and when the tabs will be loaded you will see the content of current tab by default
FIDDLE
Jquery Ui tabs, support the calls with Ajax.
So, you need another page or controller with the data that you want to show.
In the official page is better explained.
http://jqueryui.com/tabs/#ajax
Believe, is more easier than you think.
Is there in HTML (javascript) or other static html tech
can:
Stop page loading (if browser does not download yet)
Stop page rendering (from where the code placed)
Stop javascript executed (from where the code placed)
Simply put, is there a code like
<script>window.StopWhateverBelow()</script>
To let browser totally ignore whatever below the code.
UPDATE
I understand the browser may already download the whole thing. What I want is, from the code, page should stopped, for example: if I put the code just after <body> visitor should see blank page, if I put the code in middle of the page, page should be just half like you pressed ESC
ANSWER
As bukko suggested, comments done the trick. But not full, just half
If you put <!-- in html page, the rest will be ignored. And in Javascript
document.write('<!--');
Done the trick.
For about make sense:
Here is how this code make sense: when you page load some offpage script, the script is dynamic. When the script code found something wrong (or match some condition), you have one more option to stop the page from rendering, loading, download...
You could do window.stop(); for most browsers besides Internet Explorer. For IE, I had to use document.execCommand('Stop');
If you already have html comments on your page, #bukko's solution doesn't fully work. Stuff after the html comment will get rendered normally.
Something else to try is:
document.write('<script type="text/undefined">')
The rest of the document gets interpreted as part of the script tag, and because the script isn't text/javascript, it gets ignored.
Worked for me, thought I'd share it.
Edit
I've seen the script trick not work in Chrome.
This does work, but I have not done extensive browser testing:
document.write('<style type="text/undefined">')
window.stop(); //works in all browsers but IE
if ($.browser.msie) {document.execCommand("Stop");}; //works in IE,
document.execCommand works in IE, however it does stop some of FF, NS and some other browsers' functions. Like displaying GIF's animation for example. Using "if browser is IE" makes these two codes work perfectly in all browsers.
Well, there is:
<!--
terminated by
-->
for HTML, but scripts will ignore this.
What you are asking makes no logical sense. Simply for two reasons:
Data is ALREADY sent to the user (HTML / JS) so even tho if you COULD hide content, the data would sitll be there for a user to see (if they view source for instance).
Why would you stop 'execution' of a page? It loads simple html structure and reults in a visual display, you should focus on the server site (php for instance) to hide or not send the content in the first place.
If you want to visually hide elements tho, you could use CSS styles (hide divs or the like) with simply adding style="display:none;" to a div like so:
<div style="display:none;">
This text will be downloaded by the user, but hidden from view due to CSS inline style
</div>
If you want to add commenting (thats just for your reference), then use comment formatting:
<!-- this is a comment and will not show up to a user -->
Reference for comments: http://htmlhelp.com/reference/wilbur/misc/comment.html
put window.Stop() wherever you want to stop the page from getting renderred
You could also hide the body like that:
var style = document.createElement("style");
style.innerHTML="body { display:none !important; }";
document.getElementsByTagName("HEAD")[0].appendChild(style);
HTML is static content so the server reads whatever you have written in the file unless you comment it out. For a dynamic file like what you are asking for you need to use php which can do this type of thing.
Just not much related to the question, but I thought it may be useful for some persons. If you want to jump to other page during page loading use window.location = "somepage.html"; or you can redirect users to the previous page: window.history.go(-1); Useful in JavaScript conditional statements
If you are using ASP or PHP, HTTP protocol automatically stops but HTTPS protocol don't stop automatically.
To stop it use:
In ASP:
dim r= accept.secure.protocol
r.onload=window.callback('c')
//to firefox,opera,safari
new clientObject(r).access()
// to chrome,ie
forEachElement(a==null);
PHP code:
$a.window ;
All this scripts sends the browserstring "elementcast" by post method
The stop methods can break things that have already started to load.
If you want to load everything above a certain point and skip everything below a certain point:
<p>Everything works above this point.</p>
<pre style="display: none !important;">
<p>As long as the PRE tag remains open,
nothing works below this point</p>
<script>document.write('Nope');