i tried doing it with css, the closest i got was: http://jsfiddle.net/XyDec/
It kind of works, but don't hide the content inside it and i would like some smooth animation
, so i guess it's scripts time.
i can't write them or don't know where to look for them, could anybody help me ?
you may take a look at the jquery javascript framework (user friendly and powerfull)
here is an example of smooth slide down of div using jquery:
http://api.jquery.com/slideDown/
this is made with one line : $("div").slideDown("slow");
hope it help
Have you tried jQuery? You can treat the div as an object and assign an action to an event, through jQuery methods.
For instance:
function hide(){
$('#the-div').hide('slow')
}
Then you just call the function on the hover event.
If you want to go a step further, you can assign a timer for it to show again. Or even use a callback.
function hide(){
var x = $('#the-div')
$('#the-div').hide('slow', function(x){
//do something with the variable x
})
}
I think that should work.
Hope that helps.
Cheers.
Related
I'm a pure student's beginner, right now I'm trying to create an adaptive menu for my project, but I need to change the color of my background because white on white is a little bit problematic.
What I tried is to create a script in order to add a class 'scroll' to my 'nav' when I'm scrolling down, and removed it when I'm going back to the top.
But as I said I'm a beginner, and it seems I did something wrong with either my script or my CSS.
Can you help me to understand how where I did something wrong?
Thanks for the help !
PS: Sorry for my english I did my best.
`https://codepen.io/Raz7/pen/zYKoJzY`
it's completly messed up, probably due to all the image I put in.
In your script tag you are using a JQuery Selector "$" but you did not add the JQuery library.
To keep things simple I will use the built-in querySelector from the document object and Vanilla Javascript.
The following code will do what you want:
let timeout;
window.addEventListener('scroll', function (e) {
// If there's a timer, cancel it
if (timeout) {
window.cancelAnimationFrame(timeout);
}
// Setup the new requestAnimationFrame()
timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
let nav = document.querySelector('nav');
if (document.querySelector('header').getBoundingClientRect().top !== 0) {
nav.classList.add('scroll');
} else {
nav.classList.remove('scroll');
}
});
}, false);
To actually know what the distance to the top is you need a point of reference, in this script I used the header element as a point of reference since the header is relative to the body tag. If the header distance to top is not 0 then add the scroll class to the nav element else remove it. You can see also a timeout and requestAnimationFrame, this helps de-bouncing the scroll event.
Instead of using the JQuery Library, if you are a beginner I suggest learning about Vanilla Javascript and the DOM.
https://www.w3schools.com/js/js_htmldom.asp
Hi I need my drop down list boxes to close once they are out of focus or if the user is hovering over any other html element other than it. How can this be achieved?
I could think of a blur event, are there any better way to handle this?
Good question, just this will work only in FF cause IE and Chrome do not recognize events targeting option elements :(
a way to (not) accomplish this is to set a timeout for the option elements that will trigger once we mouseleave it. If a new mouseenter is registered for another option in the tree, we simply clear the timeout that will otherwise .blur() any select on the page*.
LIVE DEMO
var blurSelectTimeout;
function blurSelect(){
blurSelectTimeout = setTimeout(function(){
$('select').blur();
},200);
}
$('select').mouseleave(blurSelect).find('option').hover(function(e){
if(e.type=='mouseenter') clearTimeout(blurSelectTimeout);
else blurSelect();
});
Interestingly $(this).parent('select').blur(); would not work, so this is my best try.
I am trying to get this mousever to work, but I seems to be acting very buggy in all browser versions. I have something like this
<div id="foo" onMouseOut="makeHidden('foo');">Link Text</div>
I don't want the div to be hidden when the mouse goes over the link, and I assumed it wouldn't because the link is in the div. How can I get the div to stay visible until the mouse leaves it's boundary.
You might want to look in to using jQuery http://jquery.com/
Then you could write something like this:
$("#foo").mouseenter( function(){makeHidden('foo');} );
$("#foo").mouseleave( function(){makeVisible('foo');} );
Or just cut out the middle man
$("#foo").mouseenter( function(){$(this).css("visibility", "hidden");} );
$("#foo").mouseleave( function(){$(this).css("visibility", "visible");} );
By using a fancy bubbling trick. See: http://jsfiddle.net/minitech/kZcCr/
You want to stop the propagation of the mouseout event if it's being applied to an element's children, and you also want to cancel the mouseout of the parent if we're moving into one of its children. That can be done using relatedTarget, or toElement on IE.
actuallly i m not geeting ur point might be this code will help u
<script type="text/javascript">
function abc (mylink){
document.getElementById('mylink').style.display = 'none';
}
function abcd(mylink){
document.getElementById('mylink').style.display = 'block';
}
I'm wondering if someone can shed some light on how this effect is achieved?
This site shows a constant changing background colour.
http://bdw.colorado.edu/#/index.php
I want to utilize the same "ever changing" background colour effect on my site.
Here is the link to my example site:
http://continuous.be/
(I've found the CSS but not sure how it relates? )
/* == Dynamic Colors ==
.dynamicbgcolor {
background-color: rgb(0,149,191); }
.dynamiccolor {
color: rgb(0,149,191); }
*/
You won't be able to do this using CSS alone. As Vladislav says there is a spectrum() function that does the work using javascript and jQuery. Basically:
Store an array of colours.
Use Math.Random randomly pick
one of the stored colours.
Using jQuery.animate() to animate the backgroundColor property of the required element.
On completion of the animation, use jQuery.delay() to call the above function in XX seconds time.
Update
I've had a look at the test you put up. You're missing the closing }); at the end of your script file. Also, you've only defined the function spectrum, you don't call it. Add spectrum(false); at the end of your file, just within the }); that you've just added.
Try using Firebug for firefox, this pointed out the missing }); straight away.
this is done using JavaScript - the script animates the CSS. Look in http://bdw.colorado.edu/js/main.js for function spectrum(bool)
The idea is simple. They load js script to their page. And there (from line 373) you will find necessary code (together with hardcoded background colors.
Hi all
I want this div to dissapear when it show up.
It is working now this way, but since sometimes the div is added after a load() I would need to merge it somehow with a live() I guess....
//Fade out the result alert.
$('.Alert').delay(6000).fadeOut(500);
Any ideas of how to do this?
Thanks in advance
It depends on how you add your div to the page after the load().
After you add the element to your page, add the handler or function you want them to have.
Example :
$('<div class="Alert"></div>').appendTo('body').delay(6000).fadeOut(500);
Live example