How to show loading gif while iframe is loading up a website? - javascript

I have inc/content.php file which contains iframe with src= to my domain.
On my index.php page I have button <button id="nextButton" onClick="viewNext();return false;">New</button> which when clicked calls following JavaScript function:
<script type="text/javascript">
function viewNext()
{
$('#content').load('inc/content.php');
}
</script>
Function loads iframe from inc/content.php file into index.php page <div id="content"></div>
How can I show loading.gif image while inc/content.php file gets loaded into index file?

You can display the loading image before loading the page, and hide it when done (use the second parameter for adding a callback which is called when the request has completed):
$("#loading").show();
$("#content").load("inc/content.php", function () {
$("#loading").hide();
});
Obviously, you need an element in your document with the ID loading, like:
<img id="loading" src="loading.gif" alt="Loading">

<script type="text/javascript">
function viewNext()
{
show_loading()
$('#content').load('inc/content.php' , hide_loading );
}
function show_loading(){ $('.loading').show() }
function hide_loading(){ $('.loading').hide() }
</script>
While "loading" is the classname of the div that contains loading.gif.
For the loading.gif image, you should put it into a div which can "float" at the center of your page like this :
HTMLCODE:
<div style="position:absolute; top:100px; left:50%;" class="loading">
<img src="/img/loading.gif" />
</div>
You can change the appearing position of the loading image by changing the inline style "top:... ; left:....;". If you want to posiion the loading bases on screen, instead of the page's position, then replace position:absolute; by: position:fixed; (although this won't work with IE)

If you want it to look nice, here is solution i use at job which puts a modal in the screen and a loading gif in the middle.
<script type="text/javascript">
function viewNext()
{
$('#loading').attr( 'src', 'some_path/loading.gif' );
$('#container').block( { message: $( '#loading' ) } );
$('#content').load('inc/content.php' , function(){ $('#container').unblock(); } );
}
</script>
it uses jquery.blockUI.js which allows me to block certain container, may be a div or the whole screen.
The html you need is this
<img id="loading" style="display: none;" src="" />

Related

How to add a click function on an image

I am trying to write a function so that when I click on an image it loads external content.
<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg"></img>
</section>
$(document).ready(function(){
$("#lifeofpi").click(function(){
$("#lifeofpi").load("lifeofpi.txt #p1");
});
});
When I click on the image I want it to load this external content from a text document. But when I click on the image nothing happens.
You are trying to load content into the image. You need to add it to an element that can actually have children.
<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg">
<div id="lifeofpi_details"></div>
</section>
$(document).ready(function(){
$("#lifeofpi").on("click", function () {
$("#lifeofpi_details").load("lifeofpi.txt #p1");
});
});
$("#lifeofpi").on("click","#p1 lifeofpi.txt",function (e) {
e.preventDefault();
alert(this.id);
});
Read about event-delegation

Load HTML Elements Only When Button Is Clicked

I have this code and since it will contain many images, I wanted to prevent these images from loading when the page loads to decrease page loading time. My idea was to prevent this code from running unless the user asks to do so by clicking a button. Thus loading the images only when the user wants to see them.
<div style="margin-top:40px;">
<h3><a href='{parse url="showuser={$member['member_id']}&tab=jawards" seotitle="{$member['members_seo_name']}" template="showuser" base="public"}'>{$this->lang->words['awards_title_post']}</a></h3>
<div class="row2" style="padding:7px;">
<foreach loop="profileawards:$awards as $a">
<img class="tooltip" src='{$this->settings['upload_url']}/jawards/{$a['icon']}'
<if test="size:|:$a['width']">
width='{$a['width']}' height='{$a['height']}'
</if>
<if test="toolTip:|:$a['toolTip']">
title='{$a['toolTip']}'
</if>
/>
<if test="awardCount:|:$a['count'] > 1">
<span class='JLogicaAwardsCount'>{$a['count']}</span>
</if>
{$a['hook']['settings']['padding']}
</foreach>
</div>
</div>
You can try following js
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><<<< this goes in the header
</script>
<script>
$(document).ready(function(){
$(".button").click(function(){
$(".hiddendiv").slideToggle();
});
});
</script>
</head>
<body>
<input type="button" class="button" >123</button>
<div class="hiddendiv">
your data to show
</div>
</div>
</body>
<style>
.hiddendiv {
display:none;
}
</style>
Whatever data that you want to show only when user clicks the button, collect it in a javascript variable.
var myHeavHtml = ""; \\all data with images.
Say there is button on the page id btnLoadImages
var isImagesLoaded = false;
$('#btnLoadImage').on('click', function(e)
{
if(!isImagesLoaded)
{
$('#imgContainer').html(myHeavyHtml);
isImagesLoaded = true;
}
else
{
$('#imgContainer').toggle();
}
});
On the page load, declare a variable isImagesLoaded set to false, means you have not loaded the images. So when it is false, add the html to container div.All other times, just toggle the hide & show.
In this way, the images will not be loaded when the page is loading, it will inserted only when you click the button.
Hope this suffice your requirements.

Link not working on image?

I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});
img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.
here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});
I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.

Unable to re-change the value of a Javascript attribute

I have two images which I'm toggling and a zoom on those images is supposed to be displayed according to the selected image. On the first page load everything works fine (image appears, zoom appears). After I click the image, the image swaps and the zoom works fine as well. However, if I click again, I'm getting the image toggled correctly, but the zoom image does not refresh even for further clicks (keep displaying the zoom for the 2nd loaded image).
I'm trying to change the attributes of data-zoom-image but no luck. Any suggestions?
function pageLoad(sender, args) {
zooming();
}
function chngimg(x) {
if ($("#zoom_mw").attr("src") == x) {
var rimage;
rimage = $("#zoom_mw").attr('rearimage');
$("#zoom_mw").attr("src", rimage);
$("#zoom_mw").removeAttr("data-zoom-image");
$("#zoom_mw").attr("data-zoom-image", rimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
} else {
var fimage;
fimage = $("#zoom_mw").attr('frontimage');
$("#zoom_mw").attr("src", fimage);
$("#zoom_mw").attr("data-zoom-image", fimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
}
}
<img style="border:1px solid #e8e8e6;" id="zoom_mw"
onclick="chngimg('<%= Session("ImagePathFront")%>')"
frontimage='<%= Session("ImagePathFront")%>'
rearimage='<%= Session("ImagePathRear")%>'
src='<%= Session("ImagePathFront")%>'
width="500" height="250" />
I assume that you are using this library. Is this the case?
In my demo i copied your code and currently
it toggles the images.
Your function pageLoad() calls a function zooming() but the code you provided does not execute pageLoad and the function zooming() is missing.
The call to elevateZoom is not working for me. Are you missing a reference?
If you are using elevateZoom than you have to provide the URL for the larger Image
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
Their exsample Gallery & Lightbox seems to me that it comes close what you are looking for:
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
<div id="gal1">
<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img id="img_01" src="thumb/image1.jpg" />
</a>
<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img id="img_01" src="thumb/image2.jpg" />
</a>
</div>
And the matching javascript
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01',
cursor: 'pointer', galleryActiveClass: 'active'
, imageCrossfade: true
, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
Please ask additional questions or comment if i misunderstood you.

Element height after page is complete

I have an absolute div, and a parent div. How I can define the height of the parent based on the absolute div, knowing I have images which take some time to load?
CSS:
#parent {
overflow:hidden;
width:100%;
}
.absolute {
overflow:hidden;
width:100%;
height:100%;
}
HTML:
<div id="parent" style="height:[HEIGHT OF CHILDREN]">
<div id="absolute1" class="absolute">
[LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
</div>
<div id="absolute2" class="absolute">
[LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
</div>
</div>
SAMPLE LINK 1
SAMPLE LINK 2
JS:
jQuery(document).ready(function($) {
$('a').bind('click', function(e) {
var target = $(this).attr('href');
if($(target).html() !== undefined ) {
$('#parent').css({
'height': $('#parent').find(target ).height(),
})
}
e.preventDefault();
});
// The problem: height is not correct until image is loaded/in cache
$('a[href="#absolute1"]').trigger('click');
});
instead of running your code inside $(document).ready(...) use:
$(window).load(function(){
// Your code here
});
This will ensure the assets of the page have loaded, including images.

Categories

Resources