I have a problem. I am working on a CMS, its name is Dolphin. In few words I have created a block that contains an heavy code (jQuery, javascript, php, HTML, images...etc..).
What I want to do is to show a loading image until the content of this block is fully loaded. So even if it could seem strange, I need a preload function for a DIV. I need to do it because if I do not use it I can see the div composing slowly, and that's terrible. Do you know a good jQuery or javascript function that can help me with this? Just a loading image in the center of the DIV until its content is fully loaded. As soon as it is loaded then it will be shown.. Thank you!
The trick is setting the real div hidden by default and above it put the "Please wait" div.. in the end of the heavy coding add a line hiding the "Please wait" div and showing the real one.
Sample code for the required HTML:
<div id="pnlPleaseWait">
Loading please wait...
<div>
<div id="pnlMain" style="display: none;">
....heavy stuff going on here...
....heavy stuff going on here...
....heavy stuff going on here...
</div>
And the jQuery lines in the end of heavy processing:
$("#pnlPleaseWait").hide();
$("#pnlMain").show();
Check others questions:
How to show loading spinner in jQuery?
How do I display an animated image during Page Load using jQuery
and so on
Related
I don't even know whether this is possible, however, I am hoping that JavaScript could provide a solution to this problem. I have a DIV, that shows the title for each page within a WordPress template that I am working on.
<div class="grid-block" id="page">
<div id="page-info">
<h3>#<?php is_home() ? bloginfo('description') : wp_title("",true); ?></h3>
</div><!-- #page-info -->
</div><!-- .grid-block #page -->
The text that is called into the DIV comes in at various lengths, and sometimes over-exceeds the DIV. When the text exceeds the DIV, it wraps, just as it should, however, I am attempting to adjust the 'height' of this DIV, after a word is wrapped. I do not know if I could add some type of eventListener or something, however, pure HTML and/or CSS does not seem to have the components I need to solve this problem.
In addition, I understand that I 'could' use #media (media queries) to sort of emulate this effect, however, as far as I know, this can only be done in relation to the width of the Window, and I want the DIV to re-size 'only' when a string exceeds the width of this DIV. A demo of what I am attempting to do can be found at http://jsfiddle.net/justinbyrne001/SP3Q2/4/. I appreciate any comments, recommendations, and advice that anyone has regarding this matter. Thanks in advance.
Do you need the fix height on #page-info? If you just use padding:10, the div#page-info would automatically wrap around the text.
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I have a product gallery in which the product images will be retreived from the server and shown. It takes sometime for all the images to be retrieved and displayed. I want to show a loading image until the image is rendered from the server.
I have tried as below, by giving an if condition to display a loading image until the image tag gets its source. But its not working, as it just shows a blank space until the image get retrieved from the server.
if($image)
{?>
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="<?echo $image;?>"><?
}
else
{?>
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
<?
}
Please tell me how can i make it work as expected
Well, you'd have to use JavaScript to update the DOM as you'd like to, as PHP will only process the page once. Doing so would mean switching to AJAX to retrieve the images, though, and that feels a bit like overkill for your scenario. Instead, why not give each image its own container, and then give that container a class with a loading image as its background? Then. once the image has loaded, it displays over the previous loader.
You can not do that on the server side alone. One would need to first load simple "snake" images on the php side:
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
and then through javascript (ajax requets) update all the images like so:
// populate imageList
$.ajax({
url: 'your_server_script',
data: imageList,
success: function(response) {
// update teh src property for the images here usign your server response
}
})
As #ranksrejoined pointed out, however, you might be better off using css to give images a container with widht/height and background image. Then that one gets overridden by the image itself.
I think this is what you need: http://jqueryfordesigners.com/image-loading/.
I think you're suggesting an asynchronous load of the image - you may want to use JavaScript for that. Something you may like to try as alternative, is to apply a background image to a container for each child image.
<div style="background-image: ;">
<img />
</div>
Since lowsrc is deprecated, my best next choice would be Lazy Loading.
That means you only load images that can be seen on the screen right now, and not the images that the browser chooses to load, which can be down the page.
If you use JQuery, then take a look at the nice LazyLoad plugin. Definitely going forwards this time :)
Suggested implementation
you would load the jquery plugin, and write your images like this :
<img data-original="<?php echo $image; ?>" src="media/images/snake.gif">
and let the plugin do the hard work
Hope it helps !
I am using the following code for displaying the products of an e-commerce website. While the products are being loaded, the images will slowly fade out and then will come again normal. I want to show an loading image (like this) when the new products are being loaded. What code should I include in the below code to get this done?
function displayProducts(){
$('#product_show').fadeOut('slow', function() {
// Animation complete
setProducts();
$('#product_show').fadeIn('slow');
});
}
I'm not sure what you're #product_show element is, but assuming it is some sort of container, you can just append that image to it (maybe absolutely positioned in the middle). and when it compeletes, remove the image.
Something Like:
$('#product_show').append('<img src="..." class="progress"/>').fadeOut('slow', function() {
// Animation complete
setProducts();
$('#product_show').remove('img.progress').fadeIn('slow');
});
I find it's best to have a loading gif div always present, and just hide/make transparent once load is complete.
Fade out existing, loading gif becomes visible.
Waiting on callback from loading of the new product (ajax call or what are you doing there?)
When you get the callback, then you fade in the new product. Loading gif hidden.
Nice loading gif generator: http://www.ajaxload.info/
my problem is "simple" , i have a div with a onmouseout property with an alert("1"), that div have 2 images inside, everytime i select a image that alert show up.
example.
<div onmouseout="alert(1)">
<img src="imgs/image1.png" onmouseover="loadimg(this)" id=image1>
<img src="imgs/image2.png" onmouseover="loadimg(this)" id=image2>
</div>
i want to show that alert only if my mouse get out of all div , this div should include images too.
Thanks you.
Your best bet would be .mouseleave() in jQuery. Here's a demo of it in jsfiddle.
If you want to avoid using jQuery, have a look at this discussion on comp.lang.javascript on a similar subject.