I am trying to make a link that will take you to the top of your page when you click it. I already have a header and footer on each page. They are embedded using iFrame. Now, I am trying to put
<a name="top"></a>
on the header, and
on the footer. But when I add them, nothing happens when I click on the link. I tried adding target="_top" but that just opens the footer in a new tab.
Does anybody know how I can write the html so that it will take me to the top of the current page after clicking a link in the footer?
Change the <a> in the header to <a id="top">
See this fiddle.
Apply this code on the page where header and footer both are embedded.
JSFIDDLE
In head section apply this script
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},200);
return false;
});
});
</script>
.fixedscrolltotop
{
position: fixed;
bottom: 25%;
right: 0;
width: 149px;
color:black;
font-weight:bold;
text-align:center;
-webkit-box-flex:1;
}
.scrollToTop
{
width:80px;
height:80px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
bottom:60px;
right:0px;
display:none;
background: url('http://tech.firstpost.com/wp-content/uploads/up-arrow-icon.png') no-repeat;
background-size: 100% 100%;
opacity: 0.5;
-webkit-box-flex:1;
}
.scrollToTop:hover
{
text-decoration:none;
opacity: 1;
-webkit-box-flex:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixedscrolltotop">
<a href="" class="scrollToTop" title="Back To The Top">
</a>
</div>
Is this code appropriate if looking ahead for something else do let me know
Related
I have a div. I want it to link somewhere when you click on it, but I also want to put other links inside it, so when you click on the other links you're redirected to one place, but if you click anywhere else you're redirected somewhere else.
Here's a simple example. As it is, the "interior" link is located outside of the "exterior" link, no matter what I do.
<a href="#" class="exterior">
interior
</a>
fiddle: https://jsfiddle.net/p4ugexf4/
You can use the javascript onclick event on the parent element of the link(s):
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
}
<div onclick="document.location.href='https://example.com';return true;" class="exterior">
interior
</div>
I don't recommend to use <a> in <a> element. Using <a> in <a> isn't valid. You can check the following document on the W3C validator:
<!DOCTYPE html>
<html>
<head>
<title>test link in link</title>
</head>
<body>
<a href="#" class="test1">
test
</a>
</body>
</html>
You can also use two different <a> elements (without using javascript - only CSS solution):
div {
position:relative;
border:1px solid red;
height:200px;
width:200px;
}
div a.ext {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:0;
}
div a.int {
position:relative;
z-index:999;
}
<div>
<a class="ext" href="https://example.com"></a>
<a class="int" href="https://stackoverflow.com">test</a>
</div>
A simple, practical, non-javascript solution:
Break up your main link into smaller chunks - something like:
<div>
First part of exterior link
interior
Second part of exterior link etc
</div>
You can use absolute positioning
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
position: relative;
}
.interior {
position: absolute;
top: 20px;
left: 20px;
}
<a href="bla" class="exterior">
<a class="interior" href="blabla">Interior</a>
</a>
$(".exterior a").click(function(e){
alert('a clicked but div not triggered');
e.stopPropagation();
});
$(".exterior").click(function(e){
alert("div clicked but not a");
})
<div href = "#" class="exterior">
interior
</div>
.exterior{
width: 500px;
height: 100px;
background-color: red;
}
I used stop propagation on a element to prevent it from triggering the click on the div. And i used div as wrapper so you would have to put a windows.location if you want to redirect to an url inside the click function.
I'm not sure how you can achieve this with simply html and css. So i would suggest using jquery.
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
}
<a href="http://bing.com" class="exterior">
<object>Interior</object>
</a>
demo
You could use positioning to display a link within anoter link/container.
I have created an example, it's not perfect but will give you an idea.
https://codepen.io/MartynMc/pen/gRyqXL
HTML:
<div class="container">
<a class="link1" href="link1.com"></a>
<a class="link2" href="link2.com">link2</a>
</div>
CSS:
.container {
width: 250px;
height: 250px;
border: 2px solid;
position: relative;
}
.link1 {
display: block;
width: 100%;
height: 100%;
position: absolute;
}
.link2 {
display: block;
top: 75px;
left: 50px;
font-size: 24pt;
position: absolute;
width: 150px;
height: 50px;
border: 2px solid red;
text-align: center;
line-height: 50px;
}
I'm trying to figure out how to set some section headings to remain fixed, but then scroll up with the page when the user reaches the next heading. Example: http://www.codeandtheory.com/about-us.
My markup:
<div class="section-title"><div class="section-bar"></div>
<p class="section-title">Collections Management</p>
</div>
My CSS:
.section-title {
width: 270px;
font-size: 30px;
line-height: 38px;
color: #f18a21;
text-transform: uppercase;
position: fixed;
float: left;
display: block;
}
Test link: http://api.mtscollective.com
Can this be done in pure CSS, or is JS required?
Thanks!
Js is required!
try this to the same
jQuery
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.section-title').addClass('fixed');
} else {
$('.section-title').removeClass('fixed');
}
});
</script>
and CSS:
.fixed {position:fixed; top:0; left:0;}
I made a header navigation and it's halfway down the page. When you scroll, and it's on the top of the page I want it to stick, if you know what I mean.
I hope someone can tell me how I get this done. Demo JsFiddle
HTML
<header>menu</header>
CSS
body, html {
height: 2000px;
}
header {
position: absolute;
top: 300px;
background-color: black;
color: white;
width: 100%;
}
You are going to need some JavaScript.
Demo JsFiddle
HTML
<header>
<div class="logo">AWESOME HEADER!</div>
<div class="menu">Menu goes here - home - links - blah blah</div>
</header>
<div class="content">
<!-- your stuff -->
</div>
CSS
* { margin:0; padding:0; }
.logo {
font-size:40px;
font-weight:bold;
color:#a00;
font-style:italic;
}
.menu {
background:#a00;
color:#fff;
height:30px;
line-height:30px;
letter-spacing:1px;
width:100%;
}
.content { margin-top:10px; }
/* the trick */
.menu-padding { padding-top:40px; }
.sticky {
position:fixed;
top:0;
}
Javascript (JQuery)
$(document).ready(function () {
var menu = document.querySelector('.menu');
var origOffsetY = menu.offsetTop;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu').removeClass('sticky');
$('.content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Take a look at this tutorial. It explains how to do it using either CSS or jQuery depending on what you want.
http://www.hongkiat.com/blog/css-sticky-position/
I'm trying to create a anchor link so when the user clicks an item on the menu it goes to the specified destination. My menu consists of three items (one, two, three). When I click for example Three it jumps to Three but its heading goes under the header. How can I prevent that? I want the user to be able to see the heading.
Note that I want my header to be fixed and I want the contents to scroll behind the header.
HTML:
<body>
<header>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</header>
<section>
<div id="one">
<h1>One</h1>
<p>Text...</p>
</div>
<div id="two">
<h1>Two</h1>
<p>Text...</p>
</div>
<div id="three">
<h1>Three</h1>
<p>Text...</p>
</div>
</section>
<footer>
</footer>
</body>
CSS:
body {
background-color: #cf8;
}
header {
background-color: #000;
height: 4em;
width: 100%;
top: 0;
left: 0;
position: fixed;
}
nav ul {
list-style: none;
}
nav ul li {
margin-top: 0em;
padding: 5px;
float: left;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
height: auto;
width: 50%;
margin-top: 4em;
margin-left: 25%;
}
#one,#two,#three {
margin-top: 1em;
}
div {
background-color: #c00;
height: auto;
width: 100%;
}
footer {
background-color: #000;
height: 2em;
width: 100%;
clear: both;
}
JSFIDDLE, JSFIDDLE (Version 2)
JSFIDDLE (FULLSCREEN), JSFIDDLE (FULLSCREEN (VERSION 2))
I would recommend using a jQuery-based solution instead (p/s: see [Edit #2] for the final code, where I also detect the window.location.hash property):
$(function() {
// Only trigger .click() event when the link points to an internal anchor
$("header a[href^='#']").click(function(e) {
// Get the ID of the target
var target = $(this).attr("href");
// Animated scrolling to the vertical offset of the target element
// PLUS the outer height of the <header> element
$("html, body").animate({
scrollTop: $(target).offset().top - $("header").outerHeight()
});
// Prevent default scrolling action
// (I didn't use return false, because it stops event bubbling, too)
e.preventDefault();
});
});
http://jsfiddle.net/teddyrised/NHtvM/13/
[Edit]: However, you should note that this method does not work when the visitor is navigating to the specific div by entering the location hash in the url (e.g. /page.html#one).
[Edit #2]: Okay, I have revised my script so that it can detect the hashed URL if present, and perform the same thing as above (updated Fiddle here). An example would be: http://jsfiddle.net/teddyrised/NHtvM/15/show/light/#three, where you want the browser to navigate directly to the <div> with the ID of "three".
$(function () {
// Scroll to function
function scrollTo(ele) {
$("html, body").animate({
scrollTop: $(ele).offset().top - $("header").outerHeight()
});
}
// Detect location hash
if (window.location.hash) {
scrollTo(window.location.hash);
}
// Detect click event
$("header a[href^='#']").click(function (e) {
var target = $(this).attr("href");
scrollTo(target);
e.preventDefault();
});
});
You can accomplish this even without using JavaScript, just add empty divs with the same height and negative top-margin as menu before every part.
Like this:
<div id="one"></div>
<div>
<h1>One</h1>
...
with CSS
h1{ margin-top:0em; }
#one,#two,#three { margin-top:-4em; height:4em; }
See: http://jsfiddle.net/NHtvM/7/ (or in full screen http://jsfiddle.net/NHtvM/7/embedded/result/)
for the <nav>-tag define the inline style as style="z-index:1; position:absolute;"
and
for the <section>-tag define the inline style as style="z-index:2; position:absolute;"
In this case the contents in the section-tag will be visible above the nav menu.
CSS1 worked:
.parentDisable
{
z-index:2000;
width:100%;
height:100%;
display:none;
position:absolute;
left:0;
background: url(/images/btrans.png) repeat;
color: #aaa;
}
#popup
{
width:300px;
height:auto;
position:absolute;
background-color: whitesmoke;
color: #6699ff;
top:40%;
left: 40%;
}
CSS2 Not worked:
display:none;
z-index:2000;
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
HTML
<div id="pop1" class="parentDisable">
<center>
<div id="popup">
<div id="loading"> </div>
<div id="popupText" align="left"> </div>
<a href="#" onClick="return hidePopup_('pop1')" >
<img style="position: absolute;top: 0;right: 0" alt="close" src="/images/close.png" width="40px" height="40px"/>
</a>
</div>
</center>
</div>
with CSS1 i got this but not full HEIGHT and i want this at current scroll position not at TOP not at BOTTOm
when i click on link my page goes to top and display as in image.
UPDATE1 :
Remaining is not to scroll page up|Top
when i click on link page scroll-up to TOP.
Script :
// set full page height
var hei = document.body.offsetHeight;
$('#pop1').css({height: hei +'px'});
Instead of position: absolute use position: fixed.
To prevent the page from jumping to top you need to include a return false within your javascript-function hidePopup_.
The link trys to jump to the anchor # and since there isn't one, it jumps to the top.
Try using a position:static for .parentDisable. This will generally give you better results for what I think you're looking for.