I have an s:div ajax in jsp page:
<s:div
theme="ajax"
delay="10000"
loadingText="Please Wait"
errorText="Problem in loading"
href="%{yearlyrequestedQuantity}">
</s:div>
In this i want to load an image instead of the "please wait" text.
To display a "wait until the page loads" image
you will need to:
Every time your page loads a init() function will load.
<body onLoad="init()">
Define a div named loading right after section.
<div id="loading" style="position:absolute; width:100%; text-align:center;
top:300px;">
<img src="loading.gif" border=0></div>
The loading.gif image should be an animated gif that suggests that the page is still loading.
Place this javascript code right after you define the div.
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Related
I just followed w3school tutorial for this bootstrap modal image. I have two image cards in my page. So I need to popup that two images. But it's working with one image only.
Link to w3school article
<!-- Trigger the Modal -->
<img id="myImg" src="http://d14dsi4x2zx6ql.cloudfront.net/files/styles/welcome_image/public/VCW_TI_5_BayLoop_Hero_Manley_1280x642_sized.jpg?itok=EaARDZt8" alt="">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
I insert "myImg" id in my other image, but it didn't work. First image popup worked as I expect. What will be missing here?
You can't give two elements the same id
if you want to do the same action for both you can give them class
<img class="myImg" src="http://placehold.it/850x450" alt="image1" width="200">
<img class="myImg" src="http://placehold.it/700x400/f00" alt="image2" width="200">
and js will be:
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
//iterate over img to add click event for each one,, jquery will make it much easier
for(var i=0;i< img.length;i++){
img[i].onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
//jquery option
/*$('.myImg').on('click', function(){
modal.style.display = "block";
modalImg.src = $(this).attr('src');
captionText.innerHTML = $(this).attr('alt');
})*/
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
Demo
Id must be unique, See an example here. https://fiddle.jshell.net/wg5p60g7/
I'm using the jQuery plugin Masonry and I'm having an issue that happens when I make an ajax call to another page to load in images for a gallery. The ajax call works and the images load in but when the call is made, something happens that removes one of the classes that Masonry appends too one of my divs.
Here is how my html looks on the first page. Everything is fine here and shows the class masonry-brick, which I need to render out the appropriate css to make everything look nice and it also renders out the inline css.
<a href="/system/images/series_uploads/15/original/berkshire_25585_walnut_famousdaves03.jpg?1330115640" rel="lightbox['gallery']">
**<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">**<img alt="" src="/system/images/series_uploads/15/gallery/berkshire_25585_walnut_famousdaves03.jpg?1330115640" title="Berkshire" />
<div class="gallery-text">
<h3>Berkshire</h3>
<p>HDP – High Definition Porcelain</p>
</div>
</div>
</a>
When I click on the link to make the ajax call, the images load in fine and it works on all the links but the class masonry-brick is removed and the images lose their css.
jQuery("#project-galleries-navigation li.load-category a").on("click", function(){
var href = jQuery(this).attr("href");
jQuery("#gallery").fadeOut(300).remove("img").load(href).fadeIn(2300);
return false;
});
This is the code i'm using for masonry.
var $container = jQuery('#copy-wrapper-gallery');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true
});
});
This is what ends up happening to my html when the page loads in the new data. The class masonry-brick is no longer present and the inline css disappears as well.
<a href="/system/images/series_uploads/7/original/ashton_23931_smokey_beige_.jpg?1330114250" rel="lightbox['gallery']">
**<div class="item">**<img alt="" src="/system/images/series_uploads/7/gallery/ashton_23931_smokey_beige_.jpg?1330114250" title="Ashton" />
<div class="gallery-text">
<h3>Ashton</h3>
<p>Porcelain</p>
</div>
</div>
</a>
Has anyone had this problem or knows a way to fix this issue?
I was able to get it to work by modifying this jquery and putting in a callback function for it.
jQuery("#gallery").fadeOut(300).remove("img").load(href, function(){
jQuery("#gallery").masonry("reload");
}).fadeIn(2300);
e.preventDefault();
});
So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.
How do I make this div invisible until the image is clicked?
Preview of page when the div is visible:
So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.
I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.
Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.
Something like (without animations):
<div id="cart" style="display:none">
</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
Worked it out. Had to use jQuery.
In the < head> :
<script>
$(document).ready(function(){
$(".addtocart").click(function(){
$(".addedcartbg").fadeIn(500);
$(".addedcartbg").delay(1000);
$(".addedcartbg").fadeOut(500);
});
});
</script>
In the < body> :
<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
css
.hide{
display:none;
}
html
<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>
js
$(function(){
$('.hide-show').bind('click',function(){
$('.hide').fadeIn(500).delay(2000).fadeOut(500);
});
});
I can successfully load a local page into a modal preview:
$('.preview-button').click(function () {
$('#dialog').dialog('open');
$('#dialog').load("#Url.Action("Index", "LatestNews", new {area = "Home"})");
});
But I cannot load a remote webpage, say "http://www.example.com/home/php".
Moreover, when links in the embedded contents of modal page are click, the user leaves the modal altogether.
How can I embed a remote web page in an mvc (jquery modal)?
How can I keep the user in the modal when they click the links in the embedded remote page in the modal?
Thank You.
<script>
$('.preview-button').click(function () {
$('#dialog').dialog('open').html('<iframe id="modalIframeId" width="100%" height="100%" marginWidth="0"
marginHeight="0" frameBorder="0" scrolling="auto" />');
$("#modalIframeId").attr("src","http://www.blahblahblah.com/default.asp");
return false;
});
});
</script>
<div id="dialog" title="Dialog Title" />
I have implemented a modal popup using an IFrame. I use some javascript to hide the main content (Popup2_Panel1) and display a loading message (Popup2_Panel2) while the IFrame is loading. When the IFrame has finished loading (iframe's onload event) I hide the loading message and unhide the main content (with IFrame). This works in IE/Safari/Chrome/Opera, but in FF the IFrame content is blank after the main content is made visible.
How I can make this work in FireFox? If I leave out the hide/show code then the IFrame is visible in FireFox, but I don't really want to show the content before the iframe has loaded new content, otherwise we see the old content momentarily.
Here is my code:
<script type="text/javascript">
function ShowPopup(srcUrl, titleCaption, width, height) {
var frame = document.getElementById("Popup2_Frame");
// This code causes the IFrame to be blank in FireFox
document.getElementById("Popup2_Panel1").style.display = "none";
document.getElementById("Popup2_Panel2").style.display = "";
frame.width = width + "px";
frame.height = height + "px";
var title = document.getElementById('Popup2_Caption');
if (title) {
title.innerHTML = titleCaption;
}
frame.src = srcUrl;
var mpe = $find('Popup2_MPE');
if (mpe) {
mpe.show();
}
}
function PopupLoaded(frame) {
// This code causes the IFrame to be blank in FireFox
document.getElementById("Popup2_Panel1").style.display = "";
document.getElementById("Popup2_Panel2").style.display = "none";
var mpe = $find('Popup2_MPE');
if (mpe) {
mpe._layout();
}
}
</script>
<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="ImgButton13" PopupControlID="Popup2_Window" BackgroundCssClass="popupModalBackground" OkControlID="Popup2_OK" CancelControlID="Popup2_Cancel" Drag="True" PopupDragHandleControlID="Popup2_Titlebar" BehaviorID="Popup2_MPE">
</asp:ModalPopupExtender>
<div id="Popup2_Window" class="popupWindow" style="display: none;">
<div id="Popup2_Panel1">
<div id="Popup2_Titlebar" class="popupTitlebar">
<span id="Popup2_Caption">Caption</span>
<img id="Popup2_ImgClose" runat="server" style="float: right; cursor: pointer;" src="~/Masters/_default/img/delete.png" alt="Close" onclick="javascript:document.getElementById('MainContent_Popup2_Cancel').click()" />
</div>
<div class="popupContent">
<iframe id="Popup2_Frame" class="popupFrame" frameborder="0" onload="PopupLoaded(this)"></iframe>
</div>
<div class="tasks">
<Exhibitor:ImgButton ID="Popup2_OK" runat="server" CssClass="icon" Text="OK" ImgSrc="~/Masters/_default/img/action-yes.png" />
<Exhibitor:ImgButton ID="Popup2_Cancel" runat="server" CssClass="icon" Text="Cancel" ImgSrc="~/Masters/_default/img/action-no.png" />
</div>
</div>
<div id="Popup2_Panel2" class="popupLoading">
<center>
Loading...<br />
<br />
<asp:Image ID="Popup2_ImgLoading" runat="server" ImageUrl="~/Masters/_default/img/loading.gif" />
</center>
</div>
</div>
The solution is to use:
frame.style.visibility = "hidden";
...
frame.style.visibility = "visible";
instead of
frame.style.display = "none";
...
frame.style.display = "";
It appears FireFox will not display the IFRAME contents at all after setting display="none" and then trying to set display="", even though it appears to be loading the URL in the background. If we set visibility to hidden the element is hidden but still takes up space so we have to do some additional juggling to give it a zero size while loading.