I use Swatch template by woothemes. I have modified the logo component, and I want to add this following script to my logo. I copied this script in the header.php.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function coba() {
// set opacity to nill on page load
$("#logo a span").css("opacity","0");
// on mouse over
$("#logo a span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function coba() {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>
but, when I run it, the other script was disabled. All of them, js for slider,prettyphoto,comments,etc. How can I activate all off them at once? Thanks
Looks like you could have an issue with a recursive call tying up your browser thread ina busy loop. The following code works but without requiring a recursive call.
<script type="text/javascript">
$(document).ready(function() {
// set opacity to nill on page load
$("#logo a span").css("opacity","0");
$("#logo a span").hover(
function () {
// on mouse over
$(this).stop().animate({
opacity: 1
}, 'slow');
},
function () {
// on mouse out
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>
Related
I'm currently using CKEditor in a webapp that I am building. I'd like to have the Inline Toolbar fade in when the text box is focused and fade out when unfocused. I'd normally just add a transition for this but the toolbar seems to be shown/hidden with the Visibility attribute added via a JS file which causes problems.
Does anyone have a good solution for fading the toolbar in and out?
EDIT Adding startup code as requested:
In my HTML I have a div which looks like the following:
<div id="editor" contenteditable="true"></div>
And then in mu .JS file I run the following code:
$(document).ready(function () {
CKEDITOR.disableAutoInline = true;
//More Code
CKEDITOR.inline('editor');
//More Code
}
EDIT 2: Got it half working
So I've managed to get it fading in by using the 'focus' event trigger like so:
var editor = CKEDITOR.instances.editor;
$('#cke_editor').css({ 'opacity': '0' });
editor.on('focus', function () {
$('#cke_editor').css({ 'opacity': '0', "transition": "opacity 0.2s linear" });
setTimeout(function () { $('#cke_editor').css({ 'opacity': '1' }) }, 200);
});
However I cannot seem to get it to fade out again as as soon as the Editor is 'blurred' it gets "Display: none" applied to it programmatically.
Glad it works Conor, here is the full anwswer:
By dynamically adding a styleclass on the blur event, e.g. "always-display", the display: none; is overwritten. A javascript setTimeout can remove this class after the desired blur duration.
HTML/JavaScript/CSS snippet (not live due to cross-origin frame):
var editor = CKEDITOR.replace( 'editor1' );
editor.on('focus', function () {
$('#cke_editor').css({ 'opacity': '0', "transition": "opacity 0.2s linear" });
setTimeout(function () { $('#cke_editor').css({ 'opacity': '1' }) }, 200);
});
editor.on('blur', function () {
//force CKEditor to be visible, by overwriting 'display:none'
$('#cke_editor').addClass("always-display");
//attach fade effect
$('#cke_editor').css({ 'opacity': '0' });
//remove override forcing visibility after fade effect has taken place
setTimeout(function () { $('#cke_editor').removeClass("always-display"); }, 200);
});
.always-display{
display: block !important;
}
<html>
<head>
<script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1" contenteditable="true"></textarea>
<script>
</script>
</body>
</html>
So thank you to DaniëlCamps and PrasadGayan for their help, with it I managed to create my own solution to the problem.
I added the following Focus and Blur event handlers after the Editor is initialised:
var editor = CKEDITOR.instances.editor;
editor.on('focus', function () {
$('#cke_editor').css({ 'opacity': '0', "transition": "opacity 0.2s linear" });
setTimeout(function () { $('#cke_editor').css({ 'opacity': '1' }) }, 200);
});
editor.on('blur', function () {
$('#cke_editor').addClass("always-display");
$('#cke_editor').css({ 'opacity': '0' });
setTimeout(function () { $('#cke_editor').removeClass("always-display"); }, 200);
});
And the Always-Display class looks like:
.always-display{
display: block !important;
}
I have a menu with categories,
when I hover on a category a drop down show up
(I have already delayed the drop down to show up after 600 MS),
I want to know how to delay the hover event on the category too for 600 MS,
What is the best way and easiest way to achieve this using jquery?
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
});
I have made a bootply here http://www.bootply.com/lXioubaMre
You could use a basic CSS transition
.services-shortcut {
transition: all 0s .6s;
}
that runs immediately after a 600ms delay
Example: http://www.bootply.com/xppQzbvQ3P
If you choose to do this effect absolutely in javascript (but I wouldn't do it, just to keep off style from javascript) then apply the active class after a 600ms timeout, e.g.
jQuery('div.dropdown').hover(function() {
var $this = $(this);
setTimeout(function() {
$this.find('.services-shortcut').addClass('active');
}, 600);
$this.find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, ...
If you use this approach then you should also clear the interval onmouseout
You can use hoverIntent jQuery plugin, which triggers functions based on client mouse movement. In your case the script would be simple, you can take a look at this Bootply:
function showMenu(e) {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').show();
};
function hideMenu(e) {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').hide();
};
$("div.dropdown").hoverIntent({
over: showMenu,
out: hideMenu,
sensitivity: 3,
timeout: 800
});
$(".dropdown-menu a").hoverIntent({
over: function(){
$(this).addClass('active')
},
out: function(){
$(this).removeClass('active')
},
sensitivity: 3
});
I would use $.hoverDelay() plugin that does exactly that. It lets you configure the delay(s) for the 'in' and 'out' events like so:
$('div.dropdown').hoverDelay({
delayIn: 200,
delayOut:700,
handlerIn: function($element){
$element.css({backgroundColor: 'red'});
},
handlerOut: function($element){
$element.css({backgroundColor: 'auto'});
}
});
You can simply use jQuery.delay() method :
jQuery('div.dropdown').hover(function() {
alert("Action delayed");
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
}).delay(600);
.dropdown{
background-color:red;
]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
aaaa
</div>
That will wait for 600ms before executing your action, that's all you need.
How to make this button pulsate on jQuery mobile?
Are there problems with jQuery mobile because in my main application on some divs I can apply this pulsating effect and on other they just flicker, or fade in and out with interruptions or it jerky fades in and out.
html:
<button id="pulsate">I want to pulsate!</button>
JS:
$('#pulsate').on('click', function () {
pulsate("#pulsate");
});
function pulsate(element) {
$(element || this).animate({ opacity: 0 }, 500, function() {
$(this).animate({ opacity: 1 }, 500, pulsate); });
}
http://jsfiddle.net/alecstheone/zCUSK/
I only use jquery and jquerymobile... I noticed that if I disable jquerymobile in jsfiddle it works but I dont want this as I use jquerymobile in my application for other things...
Your code works fine but you've to make some changes to your script, As you're having a click event on the button but using jQuery mobile your button is wrapped around with span and divs(mainly because of jquery mobile css),
So you just have to traverse through that target div with .closest() to set your animation effect. Below is the small demo of your code with the desired effects.
$('#pulsate').on('click', function () {
pulsate(this); // Change here
});
function pulsate(element) {
$(element || this).closest("div.ui-btn").animate({
opacity: 0
}, 500, function () {
$(this).closest("div.ui-btn").animate({
opacity: 1
}, 500, pulsate);
});
}
Fiddle Example
I'm working on a small bit of functionality for three similar tabbed items. Basically, when you hover over one, I want the opacity of the two siblings to go to 50%. I set up a pretty basic jQuery hover event, here's the page code...
<div id="footer">
Seek
Experience
Gain
</div>
...and the corresponding JS:
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },500);
},
function () {
$(this).siblings().animate({ opacity: 1 },500);
}
);
When you hover onto one everything works great, but when you hover from one to the other the siblings don't dim simultaneously. I did a quick screencast for reference. I'm sure there's a simple way to make it work properly, but I'm at a loss for it. Thanks in advance.
Screencast: http://dl.dropbox.com/u/1762184/example.mp4
You want to cancel any in process animations on the siblings. This is what the stop() function is for.
$('.footer-tabs').hover(
function () {
$(this).siblings().stop().animate({ opacity: .5 },500);
},
function () {
$(this).siblings().stop().animate({ opacity: 1 },500);
}
);
Try this :
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },"fast");
},
function () {
$(this).siblings().animate({ opacity: 1 },"fast");
}
);
I have a page that uses the jQuery.swfobject plugin to embed 5 flash items into a page and each flash item has a callback using externalInterface. The callbacks work when I have the js function outside of $(document).ready(function() but the jQuery animations do not fire - the ajax load however does.
Does anyone know how to get the animations working too, code below:
function pageLoader(galID) {
$('#menu').hide();
$('#holder_gallery').load("feeds.php", {gallery: galID}, function(){
$('#holder_gallery ul li a').slimbox();
$('#holder_gallery').jScrollPane();
$('.galleryTitle').text(galleryTitle);
$('.galleryTitle').fadeIn(2000);
$('#holder_gallery').fadeIn(2000);
$('.ghost').each(function() {
$(this).hover(function() {
$(this).stop().animate({ opacity: 1.0 }, 300);
},
function() {
$(this).stop().animate({ opacity: 0.5 }, 300);
});
});});}
The main parts above work well - I just want to add the gloss back in using the fadeIn functions and the animate on hovers. The jScrollpane reinstates itself as does the .load
Regards,
MM
What about binding the .ghost elements in the callback of the #holder_gallery animation
//existing code
$('#holder_gallery').fadeIn(2000, function(){
$('.ghost', this).each(function() {
$(this).hover(function() {
$(this).stop().animate({ opacity: 1.0 }, 300);
},
function() {
$(this).stop().animate({ opacity: 0.5 }, 300);
});
});
});