I am trying to get my code working with a small Iframe I made. The site where it has to be used is running on the Enjin network and it doesn't allow PHP so I had to use an Iframe to get the PHP to work. It now displays a loading gif while it is loading the data and that works perfectly fine.
However,
What I want is this loading gif and Slimscroll to work. I can't get these 2 to work together nor can I get Slimscroll to work. I have to use a limited HTML editor which allows the use of scripts (I believe) but following the steps I cannot get it working!
Here's my code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>
<script>
$(function(){
$('#inner-content-div').slimScroll({
height: '250px'
});
});
</script>
<div id="loadImg" style="background-image: url(http://sander.server2.tmg-clan.com/loading.gif);
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
">
<div name="scroll" onload="document.getElementById('inner-content-div');">
<iframe border="0" name="iframe" src="http://sander.server2.tmg-clan.com" onload="document.getElementById('loadImg').style.backgroundImage='none';" scrolling="non></iframe>
</div>
</div>
What am I doing wrong? What do I need to add? the website it is running on is:
The Brothers Production network and my code is the top bar on the right!
Please help me out!
Related
I'm using a code for a GPA Calculator widget to run on my website, it was working fine, but now, it seems that it is changed from the source, and became unresponsive.
I've asked them for a new code with no response from their side.
Now, I'm trying to fix this from my side, and need your help!
Code:
<!-- Calculators.tech Widget -->
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;"><p>GPA Calculator provided by calculators.tech</p></div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js"></script>
Here is how it looks like:
Previously, it was more like this:
I don't want to have this scroll option, I want it to show a complete shape of the calculator.
Is there a way to edit this from my side till I get any response from the calculator developer?
Looks like they have removed height attribute on iframe. Try this script below which tries to modify height on iframe when it finishes loading
<!-- Calculators.tech Widget -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function renderCalc() {
setTimeout(function() {
$('iframe#ifr').css('height', '100%');
}, 3000)
}
</script>
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;">
<p>GPA Calculator provided by calculators.tech</p>
</div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js" onload="renderCalc()"></script>
onload event fires when DOM elements gets loaded but still there is no way to find when the assets get loaded like images etc of the document embedded in . For mitigating that issue the timer of 3 sec is used
I have db query in my page which fetches a lot of data at time and shows it on the page. FYI, I can not use pagination. So I just want to show a loader image till the time the query fetches all the data and show on the UI. I have tried this code for example, but its not working,
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('processing.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="page">
<div class="loader"></div>
<cfquery datasource="dsn_spinlife_prod_new" name="qryGetProdList">
SELECT *
FROM tbl_products;
</cfquery>
</div>
</body>
</html>
But its not working , still firefox show a blank white page while the page loads.I have tried with document.ready also, not working. I want the loader image to be shown , How it can be done, I think i am missing something .
The problem is most likely that the browser doesn't even get your page until all the slow DB work has been done. You could try putting a <cfflush> into the script above after your loader div. That'll cause CF to send back everything generated up to that point back to the browser at that point.
Bear in mind that once you've called <cfflush> you can no longer set cookies or send redirects, so you'll want to examine your code to ensure that there's none of that later on in the code.
The other approach would be to generate a page with nothing but a placeholder in it and use jQuery to load in the results as a separate request:
<script>
$('#results').load('results.cfm',function(){$('.loader').hide()});
</script>
<div class="loader">Loading...</div>
<div id="results"></div>
Where results.cfm runs the query and generates the HTML necessary to complete the page.
I want to show a loading image icon for the links to external sites when the pop-up is opened through a window.open() function.
I thought of an approach, where show the loading image in a 'div' and get the content of the external site in an Ajax call, then re write the content. Since these are external domains, $.get("external-link") won't work (although might work with some workarounds i don't links).
Is there another approach to tackle this, appreciate pointers. Thanks
Yes, you can load the content into an iframe, showing the loading image when the link is clicked, and hiding it when the iframe has loaded:
click me
<br/>
<div id="dummyloader" style="display: none; width: 500px; height: 500px; background-color: gray"><h2>loading</h2></div>
<iframe src="" id="myframe" style="display: none;" width="500px" height="500px"></iframe>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
$('.ilink').click(function(ev){
ev.preventDefault();
$('#dummyloader').show();
$('#myframe').attr('src', $(this).attr('href'));
})
$('#myframe').load(function(){
$('#dummyloader').hide();
$(this).show();
})
})
</script>
live jsfiddle example: http://jsfiddle.net/L01d5t5a/
I want to show a Loading image when the page is not loaded yet. Before loading the page it shows a blank white page to the user. So, i want to remove the white blank space.
The page makes too many database hits, so it loads a bit slowly.
I've checked this post, but that doesn't work.
I've checked by adding <![CDATA[ infront of the script, as it stated in the blogpost.
That doesn't work.
Finally i've landed in Asking a Question, though it is a duplicate.
Here is my script finally.
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(window).load(function () {
$("#divLoading").fadeOut("slow");
});
// ]]>
</script>
and in the body
<body style="background-color: white;">
<div id='divLoading'>
<div class="loading" align="center" id="divImageLoader">
<img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/> Loading
</div>
</div>
</body>
The CSS of loading is:
.loading
{
font-family: Arial;
font-size: 10pt;
padding:20px;
position: fixed;
background-color: #ffffff;
z-index: 99999;
border-radius:5px;
}
What was wrong with my code ? Can someone point out or give working solution.
Cheers !!!
Karthik
I got the solution to this question.
The problem is not with the height of the div element nor the Images/CSS problem.
The problem is with another script that is executed right after the window load completes, the script includes the DOM ready and remaining javascript function(s).
I've removed the next script that is executed after the window.load and placed after end of the body tag.
<body style="background-color: white;">
<div id='divLoading'>
<div class="loading" align="center" id="divImageLoader">
<img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/> Loading
</div>
</div>
</body>
//The following second script is placed here so as to load after the body load is complete.
<script>
includes DOM Ready, and some javascript functions to be called.
</script>
Assumption: I think after the $(window).load(function () { script is done, there should not be any other scripts further running.
Thanks to all the guys who commented.
If my assumption is wrong, please mention what the real problem that stopped the loading image to show up.
I'm trying to figure out how to allow users to click on a Google+ "+1" button from within Flash. From reading through the Google+ docs and examining that their script is doing, I don't see a way and was wondering if anyone's solved this yet.
The problem is that their script creates an iFrame which points at a Google subdomain. So I can't trigger a button click due to cross-domain policy. I can't simply call the same URI that they're calling because it's encoded and their encoding may change. I can't find any documentation on how to programmatically call a +1, etc...
Any ideas?
Google Plus does not have a version of +1 button which can be directly embedded into flash, and the API they have just released is read-only, therefore you can't use methods which normally works for the facebook like button.
What I'd suggest is to have an absolutely positioned DIV tag on top of your flash object which you will invoke when needed, and you can pass the correct URL to "like" using the href parameter. I'm using explicit mode for tag rendering to show how you can dynamically prepare the tag.
Here's some sample code which uses jquery for the animations.
<style type='text/css'>
.gplus-container {
display: none;
position: absolute;
top: 8px;
left: 98px;
}
</style>
<div id="flash-container">
Flash content, click!
</div>
<div class="gplus-container">
<div class="g-plusone" data-href="http://jsfiddle.net" ></div>
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
<script type="text/javascript">
$(function(){
$('#flash-container').click(function(){
$('.gplus-container').fadeIn();
gapi.plusone.go();
});
});
</script>
You can also test this sample code on jsfiddle.