We Keep Coding

How to format my jQuery

I have managed to setup a background image on hover of another element using this great forum! As I am new to jQuery and javascript, I am struggling to format adding additional effects on hover. e.g. I don't just want to use an append on the background-image I also want to do a background-size:cover; append and a transition: all 0.33s ease. How would I go about adding this to the current syntax?
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', '../img/background-experience.jpg').load(function(){
$('body').append($(this));
});
$('.btn').hover(function() {
$('body').css('background-image', 'url("../img/background-experience.jpg")');
}, function() {
$('body').css('background', '');
});
});
EDIT: FOLLOWING HELP FROM NOEL
Added using custom class which may be a better solution now having issues with the transition this is my scss code.
body {
background: $black;
color: $white;
font-family: $default-font;
font-weight: 600;
transition: all 0.33s ease;
}
.my-custom-class {
background-image:url('https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
background-size:cover;
}

You can just put everything in a css class that you can add to your body on hover of the button. This requires two things: (1) defining the css rule; then (2) adding, removing this on hover.
Below is a sample code to show this in action. Hope this helps!
$('.btn').hover(function() {
$('body').addClass('my-custom-class');
}, function() {
$('body').removeClass('my-custom-class');
});
.my-custom-class {
background-image:url('https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
background-size:cover;
}
body {
background-image:url('https://www.petdrugsonline.co.uk/images/page-headers/cats-master-header');
background-size:cover;
transition: all 0.33s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">My button</button>

Hi you can add more styles as below,
$('body').css({'background-image':'url("../img/background-experience.jpg")','transition':'all 0.33s ease','background-size':'cover'});

First of all you need to add css3 transition property for the image you want to show transition when hover. Then you must add css on hover for setting background size cover.
For more information about transition css3 property w3shools

How to add text to Fancy Box Loader

When clicking on a link I need to load a huge pdf on FancyBox overlay. Until the pdf is loaded I'm displaying a FancyBox loader. The problem is I need to add a text like "Please Wait...etc" in the FancyBox loader. Can any one help?
This is My Code:
<p>
<a class="fancypdf" href="hugepdf.pdf">Click
Here To View The PDF</a>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".fancypdf").click(function(event) {
$.fancybox.open(this.href, {
type : "iframe"
});
$.fancybox.showLoading();
$("iframe.fancybox-iframe").load(function() {
$.fancybox.hideLoading();
content: {
text: 'Loading...',}
});
event.preventDefault();
});
});
</script>
P.S.
You can modify following fiddle.
DEMO

Please have a look at below modifications:
Updated Fiddle Link: http://jsfiddle.net/PudLq/619/
1) added CSS class as:
#fancybox-loading{
background-repeat: no-repeat;
background-position: center -108px;
text-align: center;
}
#fancybox-loading div{
margin: auto;
}
.overrideLoading{
background: none !important;
color: white;
width: 92px !important;
}
2) after showing loading animation; altering the loading div HTML as per our need as follows:
$.fancybox.showLoading();
$('#fancybox-loading').append("<div class='overrideLoading'>Please Wait...</div>");
3) On hiding the animation; As suggested by "rockmandew" there is absolutely no need of reverting our HTML/CSS changes. On calling $.fancybox.showLoading() again directly; default loading animation will be shown to user. I have tested it and added one more link in fiddle to show default loading animation. Please click on "Show Default loading" to see that effect.
I hope this will help you.

I didn't have a chance to tweak the resulting positioning being a little off-center, but this may be a more simple solution:
http://jsfiddle.net/PudLq/621/
Simply add your text to an :after pseudo element with a content: rule and modify the styles of the loading wrapper to accomodate.
here's the CSS I added:
#fancybox-loading {
background: #000;
padding: 5px;
border-radius: 6px;}
#fancybox-loading:after {
content:"Please wait...";
display:inline-block;
color:#fff;}
#fancybox-loading div {margin:auto;}

Here is a forked version of your Fiddle.
I've basically span with the text "Please Wait". Then I've applied some CSS to that to position it as you did with #fancybox-loading .
Here is the new javascript code -
$(".on").click(function () {
var target = $('#target');
var overlay = $('#overlay');
overlay.width(target.width()).height(target.height()).css({
'left': target.position().left,
'top': target.position().top
}).fadeIn(200);
$.fancybox.showLoading();
$('#fancybox-loading').css({
'left': (target.width() - $('#fancybox-loading').width()) / 2,
'top': (target.height() - $('#fancybox-loading').height()) / 2,
'margin': 0
});
var labelWidth = 80;
$('body').append($('<span>', {
'class': 'waitText'
}).text("Please Wait").css({
'width': labelWidth,
'left': (target.width() - labelWidth) / 2,
'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
}));
});
$(".off").click(function () {
$('#overlay').fadeOut(200);
$.fancybox.hideLoading();
$('.waitText').remove();
});
And my new CSS -
.waitText {
position: fixed;
margin: auto;
color: white;
text-align: center;
}

Following vijayP's answers:
JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
I modified his CSS class of "overrideLoading":
.overrideLoading{
background: none !important;
color: white;
position: absolute;
top: 42px;
}
As you can see I added a "position:absolute" and a "top" position - you can modify this to however you need it to appear.
Next I altered his jQuery, which I modified to actually append a new element:
$('#fancybox-loading div').append("<div class='overrideLoading'>Please Wait...</div>");
As you can see, that reduced your required jQuery to one line.
Finally, I removed the last part of the function, which was removing the class. Since this is no longer required, you can just keep the FancyBox "hideLoading" call.
For learning purposes, I removed the following from the last function:
$('#fancybox-loading div').removeClass("overrideLoading");
$('#fancybox-loading div').text("");
Again, here is the JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
First Update:
I saw that the first user to answer, updated his answer and while works, I would suggest shying away from "!important" tags as much as possible. I too refined my answer and developed a solution that didn't use any !important tags.
What was originally: $('#fancybox-loading div').append("Please Wait..."); was now changed to:
$('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
I noticed an earlier comment from you, which specified that you wanted to target specific loading overlays - what this function does is it: Selects every '#overlay' element that is preceded by a '#target' element - you can insert whatever target you want.
I removed all instances of the "!important" tag - this is just best/standard practice.
.overrideLoading{
color: white;
position: absolute;
top: 86px;
left: 16px;
}
Updated JsFiddle: https://jsfiddle.net/rockmandew/kmfeppec/7/

CSS Transition don't work (height and margin)

I really don't know why this doesn't work: fiddle
When I click on the red box, I want it to move down 50px and change the height to 200px.
Any Idea?

Well this is how CSS work sadly, IDs take higher priority as a selector than a class would read this article for more info.
On click i added a class with the size/marign changes you wanted.
.box {
background-color: red;
height: 100px;
margin-top: 0px;
width: 100px;
display: block;
transition: all .5s ease-in-out;
}
.box-active {
height: 200px;
margin-top: 50px;
}
The JS
$('.box').click(function(){
$(this).addClass("box-active");
});
Here's a fiddle with the working solution.
Fiddle

You could use this instead:
jsFiddle example
$('#box').click(function(){
$(this).css('margin-top','50px');
$(this).css('height','200px');
});
I also added in the -webkit-/-moz- vendors/prefixes.

function changeprop(id)
{
$(id).css({'margin-top', '50px'});
$(id).css({'height', '200px'});
}
SyntaxError: missing : after property id
$(id).css({'margin-top', '50px'});
use : between property name and value not ,
function changeprop(id)
{
$(id).css({'margin-top': '50px'});
$(id).css({'height': '200px'});
}
this will work fine
maybe you can write your code in local html file and watch the console message throw firebug or other develop tool
thus can suffer less from error

Change how fast "title" attribute's tooltip appears

Is there a way to change how fast the tooltip from an element's "title" attribute? I'd like it if the tooltip appeared immediately, but it seems to take a few seconds to appear.

No, there's no way. The title attribute is implemented in a browser dependent fashion. For example I remember differences between IE and FF when using \r\n inside it.
Mozilla's docs explain the limits and functionality well.
If you want customization you may take a look at third party plugins such as qTip2 which mimic it using divs and stuff and provide you full control.

You could use jqueryUI as suggested. An example of controlling the duration on the show property:
$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });

Jquery UI tooltip is extremely simple and customizable: Just download or include jquery UI in your page.
If you want all the tooltips of your page to show immediately at hover, just use this:
$(document).tooltip({show: null});
Note that this applies to all elements that have a 'title' attribute.
You can modify the selector to affect only a class, and set custom speed or effect:
$('.yourClass').tooltip({show: {effect:"none", delay:0}});

Unfortunately, there is no way to do this yet,
so I am using the following methods to help. (No dependencies required)
<style>
[title] {
position: relative;
}
[title]:after {
content: attr(title);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
}
[title]:hover:after {
opacity: 1;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>
If you don't want the title to conflict with it, you can use data-* w3school.data-* help you, for example.
<style>
[data-tooltip] {
position: relative;
}
[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out;
}
[data-tooltip]:hover:after {
opacity: 1;
}
div[data-tooltip]:after {
left: 5px!important;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>
below link may help you too.
fade in and out on simple css tooltip

It isn't possible to change how fast default browser's tooltip appear, but you can use one of the tooltip plugins (here is few: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ ) where you can customise lot's of things, including delay.

TippyJS has a billion customization options.
https://atomiks.github.io/tippyjs
https://github.com/atomiks/tippyjs

Use External CSS instead of inline CSS for blockUI

I am using blockUI in multiple places and they all have the same properties so i keep on repeating the same css values in all the place I use. is there a way to put it into a CSS file.
currently i use:
$.blockUI({
message: $('#Something'),
css: {
border: '5px solid #F4712',
backgroundColor: '#6F4712',
width: '300px'
}
});
can i use like:
$.blockUI({
message: $('#Something'),
css: {
class:"alertBox"
}
});
thanks

according to the documentation - you can't.
but you to do that :
the class $(".blockPage").addClass("myClass")
p.s. be sure not to give any styles in the code as you wrote .
and update to something like this :
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
$(".blockPage").addClass("myClass");
}
});

I was half way through modifying my copy of the blockUI plugin to add this functionality and found there was already a config option for blockMsgClass, setting this to your css class adds your class to the block.
$.blockUI(
{
blockMsgClass: 'alertBox',
message: 'Hello styled popup'
});
One thing to note though is that the plugin code uses inline css so you need to mark as !important for fields such as text-align, color, border, background-color and cursor: wait.
.alertBox
{
border:none !important;
background-color: #437DD4 !important;
color: #fff !important;
cursor: default !important;
}

For dynamic class adding the first answer worked, but some flicker occured, because the class was added too late.
So I added my custom class before the blockUI to the body and changed my css a bit and for me it works great:
JS:
$('body').removeClass().addClass('myCustomClass');
$.blockUI();
CSS:
div.blockPage{// default layout
width: 30%;
top: 40%;
left: 35%;
text-align:center;
}
body.myCustomClass > div.blockPage{
width: 90%;
left: 5%;
top: 3%;
text-align:left;
}

this maybe an old question but here is the answer for anyone needs it
http://malsup.com/jquery/block/stylesheet.html
basicly you will disable the default css by this line
$.blockUI.defaults.css = {};
and then add your css style inside a separate file or so .

You can define a style for your message box outside the javascript and omit the css block. In your case it could be:
<style type="text/css">
div.blockMsg {
border: '5px solid #F4712';
backgroundColor: '#6F4712';
width: '300px';
}
</style>
Look at this (v2) for further infos.

I know this is a old question but now days you can use $.blockUI.defaults.css = {}; as stated in the documentation