I have an issue with hrefs linking away from my site.
Certain links (the ones linking out of the page) in my header refuse to work no matter what, but the links in the header that link to internal divs work just fine.
Also, when I right click the link and select Open from the dropdown menu, it works as intended.
Link to site:
http://66.*.*.89
It's the twitter and youtube button in the upper left in the header.
Code for the CSS:
#header {
font-family:arneper;
color:white;
width:100%;
height: 100px;
position:fixed;
top:0;
left:0;
right:0;
background:rgba(0,0,0,0.7);
}
#header #headermenu {
width:97%;
padding: 0;
float:left;
margin:0 25px;
}
#header #headermenu li {
list-style: none;
}
#header #headermenu li a {
color:#888;
float:right;
text-align:center;
font-size:12px;
margin:8px;
width:50px;
padding: 8px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-t-border-radius: 3px;
-o-transition: 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}
#header #headermenu li a:hover {
color:#FFF;
-o-transition: 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}
#header #title {
font: bold 310%/100% Didot, Arial, sans-serif;
font-size:30px;
font-weight: lighter;
margin: 25px 40px 0px 35px;
color: #fff;
text-transform: uppercase;
letter-spacing: -2px;
-o-transition: 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}
#header #title :hover{
color: #888;
-o-transition: 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}
Header HTML:
<div id="header">
<div id="title">Home</div>
<ul id="headermenu">
<li style="float:left">Twitter</li>
<li style="float:left">YouTube</li>
<li>Top</li>
<li>About</li>
<li>Code</li>
<li>Portfolio</li>
</ul>
</div>
EDIT: I just realised that the buttons in the footer has the same issue..
You have this jQuery code in your header
$('a').click(function(e){
e.preventDefault();
var target= $(this).attr("href");
$target=$(target);
$('html,body').animate({scrollTop:$target.offset().top},1200,'swing');
});
It targets all links, not just the internal ones. Since you're calling e.preventDefault() those links aren't going to go anywhere.
You can attach another class to your internal links and narrow down your jQuery selector, or in your handler you can check the href attribute of the link to see if it starts with a #.
You could also use jQuery's starts-with attribute selector.
$("a[href^='#']").click(function(e) {
(You'll need to update your links to use # and not .)
Related
I'm trying to make a smooth scroll upon click the button (up) as in the gif:
https://elzero.org/wp-content/uploads/2021/04/scroll-to-top-pure-css.gif
the thing is, I'm not allowed to use JavaScript for that, so only HTML and CSS and I don't seem to be able to find a relevant pseudo-class for that. Can any one please help?
here is my HTML:
Up
<p id="one">One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
And here's the CSS:
p {
margin-bottom: 600px;
}
a {
text-decoration: none;
background-color: red;
color: white;
padding: 5px;
position: fixed;
bottom: 40px;
right: 40px;
transition: 1s all linear;
-webkit-transition: 1s all linear;
-moz-transition: 1s all linear;
-ms-transition: 1s all linear;
-o-transition: 1s all linear;
}
You can use scroll-behavior: smooth;
html {
scroll-behavior: smooth;
}
p {
margin-bottom: 600px;
}
a {
text-decoration: none;
background-color: red;
color: white;
padding: 5px;
position: fixed;
bottom: 40px;
right: 40px;
transition: 1s all linear;
-webkit-transition: 1s all linear;
-moz-transition: 1s all linear;
-ms-transition: 1s all linear;
-o-transition: 1s all linear;
}
Up
<p id="one">One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
I have a nav overlay I'm trying to slide in from the top of the screen using CSS, I can't figure out the Z index
Here is my attempt so far;
#nav-wrapper {
position: fixed;
z-index: 2;
right: 0;
width: 250px;
height: 100%;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
transform: translateZ(250px);
background: #191919;
border-left: 1px solid fade-out( #ffffff, 0.9);
}
Any help is much appreciated
<!doctype html>
<html>
<head>
<style type="text/css">
#i {
height: 20px;
background-color: #999;
/*return animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
#i:hover {
height: 300px;
background-color: #F00;
/*begin animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
</head>
<body>
<div class="c" id="i" >Hover Me</div>
</body>
</html>
See above. How do I get the box 'hover me' to end its bck-color to red, on the /return animation/, using only CSS. It understandably returns to #999, but I dont want that.
Basically: Start box 20px, #999 >> expand 300px >> Contract 20px, #red
Also is there a way to pass a value to a css property when using transitions like this:
-webkit-transition: background-color:red 0.4s ease-in 0.3s
Thanks for your help. Just trying to understand the very basics.
You can do something very close (but maybe not enough) using CSS animations.
Set an animation (not transition) on the element, and pause it. Set it's fill mode to forwards. On hover set the animation to running. When the animation ends, the end state remains.
The caveat - if somebody stops hovering before the animation is done, it will remain in it's current position until hovered again.
#i {
height: 20px;
background-color: #999;
animation: animation 0.4s ease-in 0.3s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
#i:hover {
animation-play-state: running;
}
#keyframes animation {
0 {
height: 20px;
background-color: #999;
}
50% {
height: 300px;
}
100% {
height: 20px;
background-color: red;
}
}
<div class="c" id="i">Hover Me</div>
I think we don't have anything like this right now, you probably use JavaScript to do this kind of things.
I had to use a combination of jquery add and remove classes. wishing it could have been pure css though.sigh
Hopefully this simple code helps someone. If anyone has something better esp with pure css... id be happy to learn. #obi Cheers and thanks to all.
<body>
<div class="c" id="i" >Hover Me</div>
<style>
.c {height: 20px; background-color: #999;}
/*----begin animation-----------------------------------*/
#i:hover {
height: 300px;
background-color: #0F0;
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
/*----return animation-----------------------------------*/
.c_returnAnime {
height: 100px;
background-color: #F00;
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
<script>
$('#i').hover(
//always add class before removing other or errors
function(){ $(this).addClass('c_returnAnime') },
function(){ $(this).removeClass('c') }
)
</script>
</body>
</html>
I've got a dropdown menu that uses lists to achieve it. The sub menu has a height of 0 and then the hight changes when the user hovers over it.
The limit of the animation is that I can't set the max-height as auto so I've set it to a value that it unlikley that the sub menu will ever reach.
Since the tranistion time is based on the max-height is is very fast so I've slowed it down to be a suitable speed but what I'd like is to have it disappear a lot faster when someone un-hovers or even have it disppear immediately. Is there a way to do this?
.menu ul ul{
float: left;
padding: 0;
position: absolute;
text-align: left;
width: 274px;
z-index: 1000;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s ease-in;
-moz-transition: max-height 1s ease-in;
-o-transition: max-height 1s ease-in;
-ms-transition: max-height 1s ease-in;
transition: max-height 1s ease-in;
}
.menu ul li:hover ul, .menu li.over ul {
max-height: 999px;
}
I'd like to stick to CSS but I'm willing to use JavaScript.
Try this :
For the basic class ( not the :hover ), just define the transition duration you want for when the list will disapear.
On hover, define a new transition duration ( the duration that the list will take to appear ).
Quick exemple here : http://codepen.io/AxelCardinaels/pen/wBQZbm
HTML :
<div class="text">Some texte</div>
CSS :
.text{
background:blue;
transition:all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.text:hover{
background:red;
transition-duration:2s;
}
How would I make it so that if you hover over an image, the entire image changes to the color black (the image link must be in the HTML tag as the sizes and images are different)?
Here's what I have:
HTML:
<img src="http://www.floral-directory.com/flower.gif" class="image" />
CSS:
.image {
width: 250px;
}
.image:hover {
background: #000000;
}
The easiest way to do this is to wrap the img element in another, for example a span:
<span class="imgWrap">
<img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>
And couple that to the CSS:
.imgWrap {
display: inline-block;
border: 1px solid #000;
}
.imgWrap:hover {
background-color: #000;
}
img:hover,
.imgWrap:hover img {
visibility: hidden;
}
JS Fiddle demo.
And, if you'd like to make it a little prettier, using transitions to fade in/out:
.imgWrap {
display: inline-block;
border: 1px solid #000;
background-color: #fff;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap:hover {
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
img:hover,
.imgWrap:hover img {
opacity: 0;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
The HTML
<div class="change_bg">
<img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>
The CSS
.change_bg img{
max-width : 300px;
}
.change_bg{
width : 300px;
height : 300px;
float:left;
}
.change_bg img:hover{
visibility : hidden;
}
.change_bg:hover {
background : #bc7d89;
}
Live Example # http://cdpn.io/Bmthc