We Keep Coding

JQuery and PHP - change background image

I am trying to get a background image to change on the click of a link. In the page, there is a php function that gets all of the files (just images) from a directory and writes the following for each item:
print("
$(\"#photo" . "$curimage\").click(function(e){
e.preventDefault();
$(\"#galleryPhoto\").css(\"background-image\", \"url(images/ints/$file)\");
});
");
The entire code (for just one item) ends up looking like this:
<script type="text/javascript">
$(function(){
$("#photo1").click(function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});
return false;
});
</script>
In the body of the page, there is another php section that does the same thing, but this time it provides the link:
print("<a id=\"photo" . "$curimage\" href=\"#\" >Change</a>");
This, of course, gives a completed link of:
<a id="photo1" href="#" >Change</a>
In addition, there is a div with the id of galleryPhoto, with the following settings in the css:
<div id='galleryPhoto'>
Main photo here
</div>
#galleryPhoto {
position: relative;
height: 300px;
width: 600px;
background-color: black;
background-image: url(../images/ints/blank.jpg);
background-size: contain;
background-repeat: no-repeat;
margin: 20px;
}
But when the link is clicked, the background image does not change. I am clueless on what I am doing wrong. I have tried so many different things that the code is probably all messed up now, but I don't know why (JQuery newbie, sorry).
Can someone please point me in the right direction?

Since your html is being generated dynamically through PHP ensure that you are using the .on function. So anytime that your html is being generated dynamically it's best to use the .on function.
So instead of using this:
$("#photo1").click(function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});
You would use this:
$(document).on('click', '#photo1', function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});

You have to set the height and width of your #galleryPhoto div because Background image base its height and width on it's container. Unlike <img> takes the image height and width if not defined

JS launches before CSS

This is currently happening in chrome, in firefox I haven't had this issue (yet).
Here is a VERY simplified version of my problem.
HTML:
<div class="thumbnail">
Click me!
</div>
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
}
a {
position: absolute;
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
Javascript:
$(document).ready(function () {
var $parent = $('#clickMe').parent();
function resize() {
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
$(window).on('resize', resize);
resize();
});
The problem:
So what does this give when I resize (without dragging)? Well javascript launches first and sets the position of the <a></a> , then CSS applies the height change if we are < 992 px.
Logically the button is now visually at the outside of the div and not on the border like I had originally defined it to be.
Temporary solution proposed in this post.
jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?
var doit;
$(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); });
Temporary solution is not what I'm looking for:
However, in my situation I don't really need to only call 'resize' when the resizing event is actually done. I just want my javascript to run after the css is finished loading/ or finished with it's changes. And it just feels super slow using that function to 'randomely' run the JS when the css might be finished.
The question:
Is there a solution to this? Anyone know of a technique in js to wait till css is completely done applying the modifications during a resize?
Additional Information:
Testing this in jsfiddle will most likely not give you the same outcome as I. My css file has many lines, and I'am using Twitter Bootstrap. These two take up a lot of ressources, slowing down the css application (I think, tell me if I'm wrong).
Miljan Puzović - proposed a solution by loading css files via js, and then apply js changes when the js event on css ends.

I think that these simple three steps will achieve the intended behavior (please read it carefully: I also suggest to read more about the mentioned attributes to deeply understand how it works):
Responsive and fluid layout issues should always be primarily (if not scrictly) resolved with CSS.
So, remove all of your JavaScript code.
You have positioned the inner a#clickMe element absolutely.
This means that it will be positioned within its closest relatively positioned element. By the style provided, it will be positioned within the body element, since there is no position: relative; in any other element (the default position value is static). By the script provided, it seems that it should be positioned within its direct parent container. To do so, add position: relative; to the div.thumbnail element.
By the script you provided, it seems that you need to place the a#clickMe at the bottom of div.thumbnail.
Now that we are sure that the styles added to a#clickMe is relative to div.thumbnail, just add bottom: 0px; to the a#clickMe element and it will be positioned accordingly, independently of the height that its parent has. Note that this will automatically rearrange when the window is resized (with no script needed).
The final code will be like this (see fiddle here):
JS:
/* No script needed. */
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
position: relative; //added
}
a {
position: absolute;
bottom: 0px; //added
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
If you still insist on media query change detection, see these links:
http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/
http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/
http://tylergaw.com/articles/reacting-to-media-queries-in-javascript
http://davidwalsh.name/device-state-detection-css-media-queries-javascript
Twitter Bootstrap - how to detect when media queries starts
Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

I like your temporary solution (I did that for a similar problem before, I don't think half a second is too long for a user to wait but perhaps it is for your needs...).
Here's an alternative that you most likely have thought of but I don't see it mentioned so here it is. Why not do it all through javascript and remove your #media (max-width.... from your css?
function resize() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width<992){
$("div").each(function(e,obj){$(obj).height(200);});
}
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}

In the html page, put the link to css file in head section; next, put the link to js file just before the /body tag and see what happens. In this way css will load always before js.
Hope this help you.

Did you try to bind the resize handler not to the window but to the object you want to listen to the resize ?
Instead of
$(window).on('resize', resize);
You can try
$("#clickMe").on('resize', resize);
Or maybe
$("#clickMe").parent().on('resize', resize);

var didResize = false;
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if (didResize) {
didResize = false;
console.log('resize');
}
}, 250);

I agree with falsarella on that you should try to use only CSS to do what you are trying to do.
Anyway, if you want to do something with JS after the CSS is applied, I think you can use requestAnimationFrame, but I couldn't test it myself because I wasn't able to reproduce the behavior you explain.
From the MDN doc:
The window.requestAnimationFrame() method tells the browser that you
wish to perform an animation and requests that the browser call a
specified function to update an animation before the next repaint. The
method takes as an argument a callback to be invoked before the
repaint.
I would try something like this:
var $parent = $('#clickMe').parent();
function resize(){
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
window.onresize = function(e){
window.requestAnimationFrame(resize);
}
window.requestAnimationFrame(resize);

Anyone know of a technique to wait till css is completely done loading?
what about $(window).load(function() { /* ... */ } ?
(it executes the function only when the page is fully loaded, so after css loaded)

Execute Fade-In as Page initially loads?

I am working on some jQuery code to apply page transitions. What i want the jQuery code to do is basically apply a fade in effect of the page as follows:
$("body").css("display", "none");
$("body")().fadeIn(400);
Once the page loads the page reloads and then does the instructed fade in effect, but what I want to happen is a fade in effect for the whole webpage right from the start and tried:
$(document).load(function() {
However, this does not work. I also tried this code to no avail:
$("body").load().css("display", "none");
$("body").load().fadeIn(400);
Are there any visible error in my code blocks that can be rectified to apply the desired behavior or can the community please direct me to a guide that demonstrates the correct implementation of what I am aiming to do?

You could place this in a .css file -
body { display:none; }
Or even place it inline like so -
<body style="display:none;" >
And then in a $(document).ready() callback fade it in using this -
$(document).ready(function(){
$("body").fadeIn(400);
});
The browser will render the HTML according to your css file first. So when the browser comes to render the <body> tag, it'll see a css rule saying that its display property must be set to none. Only after all the HMTL is loaded and jQuery is ready ($(document).ready()) then you can call your fadeIn();

You could use CSS to set the whole page to invisible or hidden:
body {
display: none;
}
Or:
body {
visibility: hidden;
}
You can set this as inline CSS inside the <head>. Then inside jQuery you can make it fade in once loaded.

// $("body")().fadeIn(400); // this is incorrect, try with:
$('body').fadeIn(400);
That means:
$("body").css("display", "none");
$(window).load(function(){ // use "window"
$('body').fadeIn(400);
});
Or you may try to set display:none; directly from your CSS (depends on your needs)
body{
display:none;
}

You should use the load on window and not on DOM.
Try :
$(window).load(function(){
$("body").css("display", "none");
$("body").fadeIn(400);
})
And for further explination try Here

html page loading message

My html page loads a bit slowly because of the jquery that's in it. I want an image that tells the user that it's loading, until the entire page get loaded. How should I go about doing this?
Many thanks in advance.
<script type="text/javascript">
$(document).ready(function(){
//my jquery here....
});
</script>

Design the page with the loading message already included so that when the page loads from the server, the message is already showing.
Then, using jQuery, you can hide the message as soon as the page is ready:
$(document).ready(function(){
$('#loadingMessage').hide();
});

http://www.jsfiddle.net/dactivo/m4Bxe/
window.onload = function () {
$("#loading").hide();
};
window.onload will wait the whole loading of the page. ready() waits the DOM to be ready which is practically inmediate.
You can read this in these jquery docs
"While JavaScript provides the load
event for executing code when a page
is rendered, this event does not get
triggered until all assets such as
images have been completely received.
In most cases, the script can be run
as soon as the DOM hierarchy has been
fully constructed. The handler passed
to .ready() is guaranteed to be
executed after the DOM is ready,"

Justin's method will do the trick.
make sure you are optimizing the way resources are loaded, for example putting your scripts at the bottom of the page so they don't block HTML rendering
http://developer.yahoo.com/performance/rules.html

Hm, you can load an image that says "loading", then load the rest of the document's scripts by either doing something like:
var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript();
Alternatively, you can just load the image, and then submit Ajax requests to load the rest of the page. You can also try even doing an animated gif or another image at the top of the page, and once the document has loaded (and your script activates), remove that image.

have a background-image set through css to the body, and remove the element in document.ready

I know this a fairly old thread, but the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)

how to disable whole body other than a div

I have a div which is creating through ajax, i would like to disable the whole body once the div is popup and until, unless the div is closed.Is this possible in jquery. Please let me know your suggestion
Thanks,Praveen Jayapal

You want to REMOVE, or hide the body? Technically this shouldn't be possible because you need to append the div to the body in order to see it. What you could do is create a 'mask' layer that covers the WHOLE body, then use z-index for your div to display it on top of the body.
Something like:
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
might help!
To completely hide the page all you would need to do is change line 21:
$('#mask').fadeTo("slow",0.8);
in the javascript to:
$('#mask').fadeTo("slow",1);
and the color of the mask on line 7 of the CSS can be changed to whatever you want too:
background-color: #000;

That should do the trick..
HTML:
<body>
<div id="overlay">
this is above the body!
</div>
<!--...rest...-->
</body>
CSS:
#overlay {
background-color: #ccc; /*or semitransparent image*/
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#ajax-div {
z-index: 200; /*important, that it is above the overlay*/
}
Javascript:
<script type="text/javascript">
$(document).ready(function() {
//your ajax-call
$.ajax({
//on success
success: function() {
//your logic your showing the ajax-div
$('#overlay').show(); //or fadeIn()
}
})
//use live to catch the close-click of the later added ajax-div
$('#ajax-div a#close').live('click', function() {
//close the ajax-div
$(this).parent().hide();
//close the overlay
$('#overlay').hide(); //or, again, fadeOut()
});
});
</script>

What it sounds like you want is something known as a modal dialog box.
There are a number of JQuery scripts to achieve this quite easily. Here are some links for you:
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://plugins.jquery.com/project/modaldialog
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Hope that helps.

OK ... best idea is use jquey.ui if you use jquery.
http://jqueryui.com/demos/dialog/#modal
You can choose theme and download only components you like..
Then just include js and css a place img folder and call dialog. It is quiet easy...