I have a quick JavaScript question. I was wondering if there's a way to make a div called #post li span to show up (appear) when you hover over the div "#post li" ? It'd mean a lot if someone could provide me with a code.
You can do that directly with CSS:
#post li span {
display: none;
}
#post li:hover span {
display: inline;
}
If you want to use JavaScript and have jQuery, you can use:
$('#post li span').hide();
$('#post li').hover(
function() { $('span', $(this)).show(); },
function() { $('span', $(this)).hide(); }
);
If you want to use JavaScript and don't have jQuery, things start getting more complicated.
In older IE's you won't have access to the :hover pseudo class on none anchor tags. so you can use javascript like this:
$('#post li').hover(function() {
$(this).find('span').show();
},
function() {
$(this).find('span').hide();
}
);
check out jQuery hover for more info on how it works
You can use CSS.
Apply display: none to #post li span, then add display:block for #post li:hover span
Related
So, on my page I have navigation bar that helps to move around it. After clicking I remove .active class from previous < li> and give it to new one. In console everything looks nice but on the page there is a problem. I can't see the .active class properties in active < li> and scrolling around it isn't working like it used to before clicking. Here is my page and code:
https://kreha6.github.io/MacopediaTask/
(it's hard to describe what's exactly happening :) )
$(document).ready(function() {
function scrollToId(id){
id = id.replace("link", "");
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#navbar > ul > li > a").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active');
e.preventDefault();
scrollToId(this.id);
});
});
SCSS:
.active{
a{
background-color: $transparent !important;
text-decoration: overline;
text-decoration-color: $color1;
}
}
edit:
I changed my code to add class to parent element like this:
$(this).parent().addClass('active');
Bootstrap adds active class to < li> which is a's parent, I tried to do the same thing. For some reason it doesn't work. Anyone know why?
Well you are writing it wrong in SCSS because in JQ
$("#navbar > ul > li > a").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active'); //here you add class active to the clicked 'a' element
So the a element has class .active on click. But, as I understood from the comments you want the li to have class active , so use:
$(this).parents('li').addClass('active')
and also in CSS you should be more specific, because you could have some styles already set for li.active a, for e.g. write:
#navbar ul.nav li.active > a { /*styles*/ }
You need to target the parent div, try to change $("#navbar > ul > li > a") with $("#navbar > ul > li")
$(document).ready(function() {
function scrollToId(id){
id = id.replace("link", "");
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#navbar > ul > li").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active');
e.preventDefault();
scrollToId(this.id);
});
});
I look at your website, your classes are not targeted, change the way they are done in CSS, look the image I have attached for you, the class .active not applied]1
as you see the grey colour is overriden, but your classes get applied in javascript.
you can write script as $(this).parent().addClass('active');
Using DOM manipulation need to change this:
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
to this:
ul.tabbernav li
{
list-style: none;
margin: 0;
display: none;
}
Only using pure javascript functions. Any help is appreciated
You shouldn't aim to change the css but rather add or remove a class to the html element, which would correspond to a css with display:none.
Here is an example :
css :
.hidden { display:none; }
javascript :
document.getElementById("hideMe").classList.toggle("hidden");
You can use this, if you want pure javascript....
function changeCss(){
var selector = document.getElementById('your_selector')
selector.style.display = "none"
}
and then you can call it when you need to use it.
and you canuse this if you have access to some jquery
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').style('display' , 'none')
})
})
More so you can use classes (adding and removing) like this:
If you have your css like this :
.hidden{display : none}
then you can use this:
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').addClass('hidden')
})
})
and if you want to re-add the class
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').removeClass('hidden')
})
})
and then note that where I have used .on('click') you can as well use other kinds of events. Try and post back. Cheers!
$('.ul.tabbernav li').css('display', 'none');
More efficiently:
<script>
(function(){
$('.ul.tabbernav li').css('display', 'none !important');
})();
</script>
What I'm trying to do is to keep the <a> selected while I'm mouseovering the dropdown:
I tried the closest selector but didn't work:
$('.dropdown-menu', this).stop().fadeIn("fast").closest("a").css("background-color", "#eee");
This is my jsfiddle. Thanks.
I'd suggest using CSS:
li:hover {
background-color: #eee;
}
JS Fiddle demo.
Obviously adjust selector-complexity as necessary.
use css
the default styles are added for a tag add this styles for li
.nav > li:hover, .nav > li:focus {
background-color: #eee;
}
demo - http://jsfiddle.net/gpLa33ad/9/
You can modify your function so that it toggles bootstrap's open class on the li element in the dropdown menu after your animation.
// Dropdown Menu Fade
jQuery(document).ready(function () {
$(".mega-inner-dropdown").hover(
function () {
$('.dropdown-menu', this).stop().fadeIn("fast");
$(this).children("li").addClass("open");
},
function () {
$('.dropdown-menu', this).stop().fadeOut("fast");
$(this).children("li").removeClass("open");
});
});
Live example: http://jsfiddle.net/08gxjset/
I have a DIV (.container) and a button (.btn) which i want to hide until the page is fully loaded.I managed to do it by using dispay:none on a small jquery snippet, but it would be better if i could use visibillity:hidden because the page wouldnt shift (like it does with display:none).
basically, I have:
<style>
.container {visibility:hidden;}
.btn {visibility:hidden;}
</style
Is there any nice soul that could help me with jquery part so it only shows once the page is fully loaded?
Here is what you need to do
$(window).load(function() {
$('.container').css('visibility','visible');
$('.btn').css('visibility','visible');
});
OR you could just add a class to the the container as well
$(window).load(function() {
$('.container').addClass("show");
});
and then for your css
.container.show { visibility: visible; }
.container.show .btn { visibility:visible; }
You can create a class just for visibility but make sure it is after the other rules so it will overwrite it. Like so
.container {visibility:hidden;}
.btn {visibility:hidden;}
.my_class { visibility: visible; }
The jquery in this case would be
$(window).load(function() {
$('.container').addClass("my_class");
});
You can try this:
Javascript:
$(window).load(function(){
$('.container, .btn').addClass('visible');
});
CSS:
.visible { visibility: visible; }
Hope help you!
Don't overthink it! :)
$(function() {
$('.container').show(); // show .container and .btn
$('.btn').show();
});
Have you tried something like this?
$(document).ready( function() {
$(".container).show( "fast" );
}
So I got myself this far and I've solved the problem I was having but I'd still like to know why this is.
First, here is my original code:
$(function(){
var navListLength = $('nav ul li').length;
buttonPress(1);
function buttonPress(i){
if(i < navListLength){
$('nav ul li a:nth-child(' + i + ')').click(function(){
$(this).toggleClass('button-pressed');
console.log('Button Down');
setTimeout(function(){
$('nav ul li a:nth-child(' + i + ')').toggleClass('button-pressed');
buttonPress(i + 1);
console.log('Button Up');
}, 500);
});
}
}
});
It's supposed to toggle the style of a single link in a navigation list when it's clicked and not affect any other links in the list.
I wanted to do it this way so that I could add any amount of links to this list in the future without having to create a new a new class and add it to the jQuery each time.
The first toggle works as expected. But the second toggle is being applied to all of the links and it creates an inverted effect. So all of the links are opposite of what they are supposed to be except the link being clicked.
I solved the problem by changing the first toggleClass to addClass and the second toggleClass to removeClass. But I shouldn't have to do that.
Could anyone tell me why this is?
Here's a picture of my buttons:
You're doing way too much work just to toggle a class on click. You don't need to make an array of all the navigation items, the whole point of jQuery is that it handles selecting DOM elements for you.
Try this:
$(function() {
$('nav ul li').click(function() {
$(this).toggleClass('button-pressed');
});
});
You don't have to handle making sure the others aren't affected. Only the clicked element gets toggled.
-- EDIT --
I see what you were going for with the setTimeout() now. You can do it inside the click handler, like this:
$('nav ul li').click(function() {
// store the selection in a variable
var $this = $(this);
$this.toggleClass('button-pressed');
window.setTimeout(function() {
$this.toggleClass('button-pressed');
}, 500);
});
FIDDLE
Why now in pure CSS like:
LIVE DEMO
<span class="button" tabindex="1">
<span>Home</span>
</span>
span.button{
display:inline-block;
border-radius:9px;
background:#ddd;
padding:6px;
vertical-align:middle;
outline:none;
}
span.button > span{
background:#F06BAE;
color:#fff;
font-size:20px;
font-weight:bold;
display:inline-block;
padding:10px 25px;
border-radius: 6px;
border-bottom:4px solid #CB4589;
transition: border 0.3s;
}
span.button:focus > span{
border-top: 4px solid #FCA9D2;
border-bottom-width:0;
}