Hi how do you make a div fade in nicely in mootools?
var el = $$('div.img_wrapper');
el.addEvents({
mouseenter: function(){
fade in div
},
mouseleave: function(){
fade out div
}
});
mouseenter: function(){
this.fade('in');
},
//this can't be zero or the mouseenter won't fire
mouseleave: function(){
this.fade(.001);
}
Related
What this code fraction does is, move a div when the scroll reaches the footer, it works fine on desktop but it doesn't work on mobile.
Any ideas?
$(document).ready(function(){
$(window).on('scroll', function () {
if (($(window).scrollTop() + $(window).height()) == $(document).height()) { $('.publicar-btn').stop(true).animate({ // Escondemos el div
bottom: 150
}, 250);
} else {
$('.publicar-btn').stop(true).animate({
bottom: 30
}, 200);
}
});
});
I'm trying to get my tooltip to be at the top & center of my page, regardless of window size and screensize. I have the following, but my tooltip appears on the top left corner:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
area {
display: inline-block;
}
</style>
<script>
$(function() {
$( document ).tooltip({ position: {
my: "center bottom",
at: "center top",
}
});
});
</script>
Please use last version of iQuery
Try to center in this way:
$(".tip_holder").hover(function(){
var currentTipHolder = $(this);
var $tipTxt = $(this).text();
var $tipTitle = $(this).attr('title');
$('#icis_dashboard').prepend('<div id="tooltip">' + $tipTxt + '</div>');
// jQueryUI position
$('#tooltip').position({
of: currentTipHolder,
at: 'center top',
my: 'center bottom'
});
},function() {
$('#tooltip').remove();
});
Currently I have a homepage for my website with a slideshow (4 pictures) as my background. The transition between images isn't very smooth and jumps from photo to photo. How can I create smoother transitions, is it possible to fade in and fade out?
All help greatly appreciated, thanks
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
, 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
, 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
, 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
);
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
</script>
Change your JS to this to make it more efficient. It would be better that you create a div that covers the entire body if you want the fade animations.:
HTML:
<body>
<div id="div1"></div>
</body>
CSS:
#div1
{
position:absolute;
top:0;
left:0;
bottom:0;
right: 0;
}
Javascript:
$(document).ready(function(){
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
, 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
, 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
, 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
);
var current = 0;
function nextBackground() {
if(current<backgrounds.length)
current++;
else
current=0;
$('#div1').fadeOut(function() {
$('#div1').css({background : backgrounds[current]) });
$('#div1').fadeIn(5000);
}, 5000);
}
setInterval(nextBackground, 5000);
});
It's difficult to fade background images as they have no opacity state. You can either have a -z-index div the same size as the body, and fade images in it behind the rest of your content, or you can float a mask over your background and dip to black (or another color) while you switch images. This is a simple method of doing the latter:
HTML:
<div id = "mask"></div>
CSS
#mask {
width:100%;
height:100%;
background:#000000;
top:0;
left:0;
position:absolute;
display:none;
}
jquery
$(document).ready(function(){
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
, 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
, 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
, 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
);
var current = 0;
function nextBackground() {
$('#mask').fadeTo(1000, 0.9, function() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
})
$('#mask').fadeTo(500, 0);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
You can obviously play with the color, timers and opacity to get the effect you want.
FIDDLE
I have the code below in a webpage and it's job is: when the mouse just goes over the image, a new window shows up and when the mouse goes out, it disapears. All it does is ok but i just want it to shows up when i CLICK on the image and it disapears when i CLICK on outside of the new window. Check it out.Help is needed
The code in header:
<style type="text/css">
a.imPop {
position:relative;
z-index:0;
}
a.imPop:hover {
display:inline;
z-index:auto;
}
a.imPop span {
display:none;
}
a.imPop:hover span {
display:inline;
position:left;
top:1em;
left:1em;
width:128px;
height:128px;
}
</style>
The code in body:
<a class="imPop" title="" style="color:#0000FF" font:large"">
<img src="images/1.gif" alt="" /><span>
<img src="images/2.jpg alt="" />
</span> </a>
something like this will do it in jquery if you have it on page:
jQuery(document).ready(function($) {
//this tracks the click on the class
$('.imPop').on('click', function(event) {
event.preventDefault();
/* Act on the event */
//this shows your span
$('.imPop span').show();
});
//now this is flaky because you are looking for a click on the body tag of the html it would be better to look for your page wrapper div and track clicks on that outside of the box
$('body').on('click', function(event) {
event.preventDefault();
/* Act on the event */
//this hide's the one you just showed!
$('.imPop span').hide();
});
});
Place this just before the closing tag:
<script>
jQuery(document).ready(function($) {
$('.imPop').click( function(event) {
event.preventDefault();
/* Act on the event */
$('.imPop span').show();
});
$('body').click(function(event) {
event.preventDefault();
/* Act on the event */
$('.imPop span').hide();
});
});
</script>
try this one:
<script>
jQuery(document).ready(function($) {
$('.imPop').click( function(event) {
event.preventDefault();
/* Act on the event */
$(this).children('span').show().addClass('showed');
});
$('body').click(function(){
event.preventDefault();
$('.showed').hide().removeClass('showed');
});
});
</script>
Tough this issue is similar to many others I found here,I cannot find a proper answer that can work to me.
All of my content is loaded using .ajax() method, and events are handled using .on().
First I've tried to stop the propagation of the function using .stopPropagation(),it works in a way.Its closing the div,but after that any element I press it still using the closing function.I've found out by searching on the web that I need to use .off() method.
Here is the code(made it shorter):
$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").css({"display":"block"});
$("html").on("click",function(){
$(".cautareProdNouNC").css("display","none");
});
});
$(".cautareProdNouNC").click(function(e){
e.stopPropagation();
});
$("#pnNotaCom").click(function(e){
e.stopPropagation();
});
The div I am showing/hiding is .cautareProdNouNC
This is how I would do it. When you activate your div, you activate invisible div that fulfills whole body. Clicking on that div hides them both.
HTML
<div class="cautareProdNouNC display_none"></div>
<div class="overlay display_none"></div><!--place it in body-->
CSS
.cautareProdNouNC {
position relative; /*this div needs to be above overlay so needs z-index*/
z-index: 200;
}
.display_none {
display: none;
}
.overlay {
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
jquery
$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").removeClass('display_none');
$(".overlay").removeClass('display_none');
});
$(".overlay").on("click",function(){
$(this).addClass('display_none');
$(".cautareProdNouNC").addClass('display_none');
}
$(document).delegate('click', function(){
if($('#Div2Hide').get(0) != $(this).get(0)){
$('#Div2Hide').hide();
e.stopPropagation();
}
});
try this
$(document).mouseup(function (e) {
var container = $(your hiding div selector here);
if (!container.is(e.target) // if the target of the click isn't the container...
&&
container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
I hope I understand your question right!
What about this DEMO:
$(document).ready(function() {
var div_hide = false;
$("#one").on("click",function(e){
e.stopPropagation();
alert("You click the div");
$(document).on("click",function(){
if (div_hide === false) { // You can click once after that
// we set "div_hide" to "true"
$(".hide_me").hide();
div_hide = true;
}
return false;
});
});
});