Javascript DIV Not Displaying After Changing CSS - javascript

I have a DIV for spinner:
<div id="spinner" style="display:none;z-index:100;position:absolute;top:50%;left:50%;margin-top:-50px; margin-left:-50px;">
<img src="..\spinner.gif" alt="Loading" />
</div>
The code document.getElementById("spinner").style.display = "block" changes the style of the spinner to block but the spinner div not showing:
document.getElementById("spinner").style.display = "block";
getAllStudents(); //this function gets data from MySQL tables and populate a table on the page
document.getElementById("spinner").style.display = "none";

Instead of adding display: none; after the function call,
try adding the code just before you start populating the table on page.
document.getElementById("spinner").style.display = "none";

Two Ideas:
If the image src is incorrect, I've sometimes found it doesn't display anything, even with an alt = "Loading" tag. You might want to test the link it's displaying the image from to verify it works. (Don't just test the src link).
Assuming the image src is correct, you could remove the image from <div id="spinner"/> and add it separately as <img id="spinner" src="..\spinner.gif" alt="Loading" /> and then you could have your <div show what you want.
EDIT: (3 ideas now)
Change your src attribute so all of the \ characters are replaced with /. I tried an image in my own script with src = "..\spinner.png" and it wouldn't even run, but doing src = "../spinner.png" did. Hopefully this solves your problem.

Related

Getting the title of an image and display it as HTML using JQuery

I have a img which is displaying fine, however I now want to hide the image (display: none) and get the value of its title and display that in its parent div instead, using JQuery. I'm sure it's relatively simple, I'm just drawing a massive mind blank at the moment.
<div class="cardBrand image">
<img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>
You can insert the title after the image like
$('.cardBrand.image img').after(function() {
return this.title;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cardBrand image">
<img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>
var image_title=$('.card-logo').attr('title'); // get title of image
$('.card-logo').hide(); // hide image
$('.cardBrand').text(image_title); // set title in parent div
You can get the title of the image using $('#img-id').attr('title'); and then use it to set the html using $('#div-id').html($('#img-id').attr('title'));
Note : You can use the class also. But, it will change all the div with the same class. It is recommended that you use an id for the div for these purposes
var imgTitle="<span>" + $(".card-logo").attr("title") + "</span>";
$(imgTitle).insertAfter($(".card-logo"));
$(".card-logo").hide();

I am not able to see background image of div in print preview

In this html There is div which contains a background image. and inside it there is a mark img. working good on browser but at the time of print background image not coming still mark is coming
<div id="picx" style="background:url(img/large_eyeball.png);">
<img id="picx" src="img/cross.png">
</div>
I have also checked option of background color and image option in print preview settings. Please explain me what is going wrong.
I am using Google chrome. following function to print page.
<script>
function myFunction() {
window.print();
}
</script>
Try background-image instead of background
<div id="picx" style="background-image:url(img/large_eyeball.png);">
<img id="picx" src="img/cross.png">
</div>

Load more on clicking without loading all images first

I have created an "overview" container with 100 images. on visit the page will only show one image.
When you click "load more" you will see 1 more, etc.. etc..
<div class="overview">
<div class="block">
<img src="http://oi50.tinypic.com/4kyccw.jpg" alt="image_name_01" />
</div>
<div class="block">
<img src="http://oi46.tinypic.com/2n208j7.jpg" alt="image_name_02" />
</div>
<div class="block">
<img src="http://oi50.tinypic.com/120me85.jpg" alt="image_name_03" />
</div>
</div>
<div id="loadMore">Load More</div>
What I don't want is to load all the 100 images on visit.
but only 1 at the time.
(saving bandwidth if you're on a phone or a tablet) without the use of a database.
I used the "load more" from this question:
jQuery load first 3 elements, click "load more" to display next 5 elements
Example: http://jsfiddle.net/2qjt9/
Any ideas?
jsFiddle Demo
The image will only be loaded when it is set to the source of an image. This can be done with new Image().src="url" or in css. However, if you just have an array of strings, then none of the urls will be loaded. For example
var imgs = [
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg"
];
So I would store your image urls in an array like that and then use them when the time was right. Something I have taken to recently is using html templates. This would mean defining a set of html to populate
<div class="picTemplate">
<img />
</div>
And then removing it right at the beginning
var template = $('.picTemplate').remove();
So that you can later clone it in your event for re-use
$("#loadMore").click(function(){
var index = $('.picDisplay .picTemplate').length;
if( index >= imgs.length ){
$(this).remove();
return;
}
var next = template.clone();
var img = next.find('img')[0];
img.src = imgs[index];
img.alt = "some name";
$('.picDisplay').append(next);
});
Using jQuery, you could make clicking the button create the new div rather than just showing it using the .append() feature.
http://api.jquery.com/append/
Of course writing html in your javascript might get messy. But luckily you already have it prewritten and working, just copy and paste.
Using .attr() you could also give the image in each div a src only on click, saving the load bandwidth as well.
http://api.jquery.com/attr/

How to print Html page with image using Javascript

Hi,
My application is in asp.net MVC3 coded in C#.Net, I have a certain view with the requirement to print the complete Html of a particular div in that view.
Suppose
<div id="Printable_Div" >
<div>
<img id="First_Image" src="Source of my Image">
</div>
<table>My table data
</table>
</div>
Following are the things i tried
var w = window.open();
w.document.write($("#Printable_Div").html());
w.print();
w.close();
Also i have tried using the jquery printElement.js
$("#Printable_Div").printElement();
And Also
window.print();
I have also tried setting the Image as the background of the
<div style="background-image:My Image"></div>
There is not any issue in printing the Html page, but the issue is, image is not getting displayed in all the three methods tried above. I want to print the entire HTML that is available in the Div with the ID=Printable_Div
Is there any way to display the image in the print as well. The image tag is shown in the print preview but not the image.
Updated
Also i have tried printing the entire page by using the below code.
<div id="Printable_Div" onclick="Print_Function()">
</div>
Javascript function
<script type="text/javascript">
function Print_Function() {
window.print();
}
</script>
Try This way,
<button onclick="window.print();printDiv(document.getElementById('Printable_Div'));">Save as PNG Image</button>

How to display main image when clicked on its thumbnail using jQuery

My DOM looks like this...
<div id="leftPan">
<div id="leftmemberPan">
<img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/>
</div>
<div id="thumbnailPan">
<c:forEach items="${article.images}" var="image">
<img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/>
</c:forEach>
</div>
</div>
leftmemberPan is showing the main image and thumbnailPan is showing list of thumbnails
<c:forEach items="${article.images}" var="image"> is just a JSTL tag which holds array of thumbnail images.
Please note that I am new to jQuery and using it for the fist time.
You can save a list of the main image src's within the alt tags of the thumbnails and then modify your leftmemberPan src to show the primary image.
Ex:
<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
$(".thumbnail").click(function()
{
var class_array = $(this).attr("class").split(' ');
var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
$("#leftmemberPan").attr('src', newsrc);
});
</script>
Keep in mind this is just one way to do it. You can store the primary image in many other ways as well.
Hope this helps!
EDIT: Updated the code example to utilize the class attribute
I would put the path of your image into the data-path tag of each thumbnail, then when you click the thumb, grab that path from data-path and make the src of the main image that path.
Cheers!
Revising previous posts / answers (using jQuery 1.7) ...
<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
var mainImage = $("img","#leftmemberPan")[0];
$("#thumbnailPan").on("click", ".thumbnail", function(event){
mainImage.src = $(this).data("file");
});
</script>
Use a data attribute for the main file image path.
Do one (-time) DOM lookup after page load to reference the main image
element.
Just set the src attribute of the image element using the data attribute of the thumbnail.

Categories